Rwd im mcp karteikarten 17062013

ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

Einleitung
beispielhafter Einstieg

RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP

Situations-Beispiel
»
»

diese ist nicht für mobile Geräte konzipiert

»

Texte werden viel zu klein dargestellt, Bilder werden größer als das eigentliche
Sichtfeld des Gerätes dargestellt

»

es beginnt das nervige horizontale und vertikale scrollen beginnt und das hinein
gezoome in die Webseite

»

ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus

Webseite auf Smartphone anschauen, weil man kurz was suchen will

bei znm mit Printdesign angefangen, dann langsam Webdesign > entwickelte
sich zeitgleich eine neue Webdesign-Technologie mit der man Webseiten auf
allen Geräten optimiert darstellen kann > Responsive-Web-Design

BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig

1

ZWEIT-BETREUER

Leipzig

Einleitung
Nutzen für znm

RWD im MCP

Motivation und Relevanz
»

znm = Agentur für gute Kommunikation

»

Kommunikation (Öffentlichkeitsarbeit) z. B. von Unternehmen findet nicht mehr nur auf
dem Desktop-PC und dem Papier statt

»

ist bereits crossmedial, d. h. sie durchzieht sich durch alle Medien-Kannäle und
dazugehörigen Ausgabemedien

»

Bedeutung für znm:



»

aktuelle Technologie für schlüssige und flexible Layouts z. B. für eine
Unternehmen
(Präsentation) nutzen
Layout muss sich durch alle erdenklichen Auflösungen ziehen > gewährleistet
Konsitenz und Wiedererkennungswert eines Unternehmens

um Schnittstelle von Web- und Printdesign zu schaffen


ERST-BETREUER

wurde versucht Vorteile von RWD mit Workflow von Multi-Channel-Publishing zu
erweitern und so Aufwand der Layouterstellung gering zu halten und zu
reduzieren.
2

ZWEIT-BETREUER

Leipzig

Einleitung
Aufgabe

RWD im MCP

Aufgabenstellung
»
»

diese anschließend zu untersuchen und herauszufinden, welche sich über CSS3
realisieren lassen

»

dabei sollte anhand eines Prototyps untersucht werden, inwieweit sich RWD in
MCP-Workflow integrieren lässt

»

ERST-BETREUER

Aufgabe bestand darin Gestaltungseigenschaften aufzustellen und einzuordnen

um abschließend eine Ableitung von Empfehlungen für die Reduzierung bei der
Layouterstellung zu geben (Workflow-Anpassung)


3

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN
Ausgangssituation

RWD im MCP

verschiedene Voraussetzungen/Ausgangspunkte für RWD-Einstieg
»

MCP = Erstellung einer Publikation für verschiedene Ausgabekanäle



»

einheitliche Datenstruktur
Trennung Inhalt, Struktur und Layout

um Schnittstelle von Web- und Printdesign zu schaffen:


»

wurde versucht Vorteile von RWD mit Workflow von Multi-Channel-Publishing
zu erweitern und so Aufwand der Layouterstellung gering zu halten und zu
reduzieren.

WTP = digitale Print-Erstellung via Online-Editoren



Korrekturen durchführen



ERST-BETREUER

im Internet-Browser kann der Anwender Templates mit Inhalten befüllen

als Vorreiter von „Responsive Printdesign“ > im Praxisteil der Bachelorarbeit
wird versucht ein PDF über eine Browser-Engine (Webkit) auszugeben

4

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN
Ausgangssituation

RWD im MCP

neue Bereiche RWD für Workflow-Anpassung
»

RWD = Option flexible Webseiten zu erstellen



passen sich automatisch an, brechen um



ERST-BETREUER

Layouts reagieren auf Endgerät

Webseiten funktionieren auf allen Devices (Idealfall)


5

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN
Web to Print (WTP)

RWD im MCP

Web-to-Print (WTP) – Bezug zum Studium, Basiswissen Printdesign
»

Technologie für digitale Printerstellung

»

Druckvorlagen über Internet erstellt



ERST-BETREUER

u. a. ist das Befüllen mit Inhalten, Durchführen von Korrekturen, Freigabe
der Druckdatei


»

via Online Editoren werden im Internet-Browser vom Anwender eigene
Printprodukte erstellt

dient für die wissenschaftliche Auseinandersetzung als Ausgangspunkt =
WTP als Druckproduktionsverfahren

als Vorreiter von „Responsive Printdesign“ > im Praxisteil der Bachelorarbeit wird
versucht ein PDF über eine Browser-Engine (Webkit) auszugeben


6

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN
Responsive-Web-Design

RWD im MCP

Responsive-Web-Design (RWD) – Bezug zur Agentur, erweit. Basiswissen Webdesign
»

Ethan Marcotte erstmals in A List A Part RWD erwähnt seine Definition:


flex. Raster, flex. Grafiken, Media Queries

»
»

ermöglicht optimierte Ausgabe einer Webseite auf unterschiedlichen
Ausgabegeräten

»

ERST-BETREUER

Technik zur Erstellung von flexiblen Webseiten

der Content passt sich somit automatisch an das Ausgabemedium an = Layout
und Inhalt werden automatisch skaliert und passen sich relativen
Bildschirmauflösungen an


7

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN

RWD im MCP

Responsive-Web-Design (allg.)
»

Webseiten wurden anfänglich meist mit fixen Layouts umgesetzt > Seitenbreite
orientierte sich überwiegend an der Standardauflösung 1024*768 Pixel

»

die Nutzung der mobilen Endgeräte steigt zunehmend > unzählige verschiedene
Bildschirmauflösungen auf Markt > Überschaubarkeit der Endgeräte nicht mehr
gegeben

»

RWD entwickelte sich als neue Webdesign Technologie und ist die Option um
Seiten zu erstellen, die sich dem Endgerät anpassen und darauf reagieren


ERST-BETREUER

Anpassung mit Hilfe von Media Queries umgesetzt > machen die
Darstellung der Layoutelemente vom Ausgabegerät abhängig


8

ZWEIT-BETREUER

Leipzig

GRUNDLAGEN

RWD im MCP

Responsive-Web-Design [Web-Design (konventionell) Workflow]
»

konventionelle Erstellung


»

Konzept > Design > Programmierung > Optimierung

RWD verändert den konventionellen Web-Design-Workflow



sollte frühzeitig ins CSS3 reingegangen werden



ERST-BETREUER

Konzept > Design, Programmierung > Optimierung

auf verschiedene Geräte testen und optimieren


9

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

flexible Gestaltungsraster (allg.)
»

vereinfacht Gestaltungsprozess > bildet ein Ordnungssystem

»

im Printdesign wird mit „echten“ Rastern gearbeitet



»

zur Anordnung der Elemente (z. B. Bilder, Grafiken)
nicht nur in Spalten, sondern auch in Zeilen eingeteilt

im Webdesign teilt man die Seite in Spalten ein



Layouts gestalten sich durch Ausrichten von diesen Boxen



ERST-BETREUER

CSS-Layouts bestehen immer aus Kombination von Box-Element div

Box funktioniert wie eine Art Hülle und besitzt: Breite des Inhalts,
Innenabstände, Rand und Außenabstände > Bezug zum Layoutprog. =
Textbox in der der Inhalt steht


10

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

flexible Gestaltungsraster (Notwendigkeit)
»

Layout soll auf erdenkliche Displaygrößen funktionieren und flexibel sein

»

Layout, was flexibel sein soll > kann nicht in fixen Einheiten angelegt werden


bei fixen Einheiten, bleiben z. B. die Abstände gleich > wirken dann
überproportional
bei kleineren Bildschirmen



Layout muss in flexiblen Einheiten angelegt werden

»

Elemente (+ flex. Einheiten) an flexiblen Raster ausrichten > somit werden
Elemente beweglich und können sich wechselnden Bildschirmgrößen anpassen

»

flexible Einheiten



ERST-BETREUER

notwendig für Bilder, Grafiken und Schriftgrößen und Gestaltungsraster
(Spaltenbreite, -abstand)
optimale Darstellung der Webseite an das Ausgabegerät

11

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

flexible Medien
»

Ethan Marcotte entwickelte erstes Konzept [Responsive Images]



kann somit nie größer werden als die zu umgebende Box



Bilder werden in Originalgröße geladen > tauchen jedoch bezüglich der
Bildauflösung Probleme auf



die Dateigröße ist für die Desktop-Nutzung optimal



ERST-BETREUER

Breite des Bildes auf 100% der Sichtfläche festgelegt (Abhängig vom
Device)

für mobilen Nutzung viel zu enorm > führt zu sehr langen Ladezeiten >
wird aber korrekt angezeigt


12

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

technische Grundlage RWD
»

RWD basiert auf HTML 5 und CSS 3

»

HTML = strukturiert die Webseite

»

CSS = gestaltet diese über Sammlung von Formatvorlagen (Stylesheets)

»

für Vereinfachung des Publizierens und Betreuens der Webseite:



ERST-BETREUER

Trennung von Inhalt, Struktur, Layout
variable Inhalte lassen sich z. B. über Content-Management-System
austauschen, ohne Änderungen am Layout


13

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

technische Grundlage RWD
»

vorher erwähnte Gestaltungsraster stöße an Grenzen > aufgrund Vielzahl von
Displaygrößen

»

Inhalte lassen sich nicht beliebig skalieren



»

ERST-BETREUER

Texte > entstehen z. B. lange Zeilen > erschwert Contentaufnahme
Elemente > Weißräume funktionieren nicht mehr > überdimensionale
Abstände

Layout muss neu angeordnet werden
 Breakpoints müssen gesetzt werden


14

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

technische Grundlage RWD [Breakpoints, Media Types, Media Queries]
»

Layout muss neu angeordnet werden mit Hilfe von Breakpoints



technische Realisierung über Media Queries



zunächst werden Medien Typen (Media Types) festgelegt = fragen Media
Queries ab



Media Queries = Weiterentwicklung von Media Types > werden MedienEigenschaften abgefragt (z. B. Display-Breite, Ausrichtung des
Ausgabegerätes)



ERST-BETREUER

Breakpoint = der Punkt, an dem das Layout umbricht und sich neu anordnet

Gerät greift sich entspr. Layout heraus > optimale Darstellung


15

ZWEIT-BETREUER

Leipzig

BASISWISSEN

RWD im MCP

technische Grundlage RWD [erweiterter MCP Wokflow auf RWD-Basis]
»

XSLT-Prozessor gibt HTML-Dok aus

»

zusätzlich wird Stylesheetsdatei in Form von CSS-Dok ausgegeben


enthält Eingrenzung in verschiedene Media Types



diese wurden über Media Queries weiter spezifiziert/eingegrenzt
(Ausrichtung, Format-Gruppierung)

»
»

über die Engine wird eine Printpublikation [PDF] erzeugt

»

ERST-BETREUER

HTML-Dok. und CSS3-Dok werden nun von Browser-Engine eingelesen
[HTML = Struktur, CSS = Layout]

weitere Publikationen (Tablet, Desktop] für Web erzeugt (elektr. Publikationen)


16

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

Auswahlkriterien
»

Webseiten unterscheiden sich von Printpublikationen

»

Layout = grafische Erscheinungsbild z. B. eines Unternehmens


»

meist über ein Corporate Design vorgegeben > schafft einheitliches
Bild vom Unternehmen

demnach wird bei der Layouterstellung anders vorgegangen:




ERST-BETREUER

um beide Kanäle miteinander zu verknüpfen, Webdesign-Technologie
in Printbereich anzuwenden > relevante Gestaltungseigenschaften für
Print und Web aufgestellt
diese galt es zu untersuchen


17

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

Aufbau der Tabelle
»

zunächst aufgestellte Tabelle soll Auskunft geben:



»

inwieweit sich Kriterien relaisieren, teilweise realisieren und gar nicht
realisieren lassen
mit der Methode von CSS3, CSS3-Media Queries oder CCS3-Paged Media
Modul

Gestaltungseigenschaften gruppiert in:



»

Mikrotypografie = Eigenschaften, die sich auf die Feinheiten eines Layouts
beziehen
(z. B. Laufweite, Zeilenabstand)


ERST-BETREUER

Makrotypografie = Eigenschaften, die sich auf das Groblayout beziehen
(z. B. Seitenausrichtung, -format, Farbsysteme)

Medienformate = Ein-/Ausgabeformate zusätzlich betrachtet

ungefähr 78 Eigenschaften untersucht – 44 zu Makro und 34 zu Mikrotypografie

18

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

Aufbau der Tabelle
»

Tabelle dient zur ersten Orientierung:



wo gibt es Einschränkungen


»

was ist bereits möglich

was funktioniert bisher noch nicht

Kommentarspalte eingefügt für:



Relevanz für Prototyp wurde vermerkt > Dinge getestet



ERST-BETREUER

Lösungsansätze – Dingen die teilweise realisiert werden konnten

nicht relevant > wurde recherchiert


19

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

Vergleich der herausgefundenen Kriterien
»

aus Zeitgründen werde ich nicht auf jede einzelne Tabelle eingehen

»

Eigenschaften zum Groblayout lassen sich über CSS3-Eigenschaften meist realisieren


ERST-BETREUER

eine Spezifizierung erfolgt dann mit bereits erwähnten Media Queries


20

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

»

im Bereich Makrotypografie [Groblayout] lassen sich meisten Eigenschaften umsetzen
Makrotypografie

Mikrotypografie

Medienformate

Seiten (Format-/Ausrichtung)

Seiten-Handhabung (linke, rechte)

Eingabeformate

Farbe (Farbsysteme)

Fließtext-Feinheiten (Zeilenabstand,
Satzbreiten, Zifferngrad)

Ausgabeformate

Satzspiegel (Ränder/Stege)
Textblock
(Einspaltigkeit/Mehrspaltigkeit)
Rastersystem (Spalten, Zeilen)
Weißräume (Abstände der Elemente)
Fließtext (Satzart, Einzüge)
Bilder (Rahmen, Bildausschnitte)
Schrift-Technologie (Webfonts)

ERST-BETREUER


21

ZWEIT-BETREUER

Leipzig

METHODIK
Tabelle

RWD im MCP

»

Schwierigkeiten ergaben sich bei der Feinabstimmung des Layouts (Mikrotypografie)

»

z. B. wurde Seiten-Handhabung nicht getestet, hatte keine Relevanz für den Prototyp

»

CSS3-Paged Media Modul bietet sich hier als Lösungsansatz an




Modell basiert auf CSS3 kommt somit aus dem Web-Design-Bereich
(Layout = Ausrichten von Boxen)





Modell definiert Seitenmodell > gibt Auskunft über, wie Dokument innerhalb einer
rechteckigen Fläche, sogenannten Seiten-Box formatiert wird

Konzept, welches davon ausgeht seitenorientierte Medien auf Computer-Bildschirmen
anzuzeigen (als Druckausgabesimulation)

Funktionen von CSS3-Paged Media Modul:



Kopf-/Fußzeilen innerhalb der Seitenränder,


ERST-BETREUER

Seitenumbrüche erstellen/vermeiden,

Inhalte, z. B. Seitenzahlen, Kopf-/Fußzeilen platzieren

22

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Auswahlkriterien Prototyp
»

einseitiges Standard-Produkt mit folgenden Auswahlkriterien:



mehrere variable Daten enthalten, die Kunde selbstständig über CMS ändern könnte



Bildmarke/Wortmarke enthalten > Bildmarke als SVG Grafik



Headerbild



Headline, Fließtext > mehrspaltiger Satz


»

Werbeplakat für RZ Kupka (fiktiv)

Platzhalter für Sponsoren-Logos und dazugehöriger Sponsoren-Zeile

variable Inhalte sind u. a.:



Headline


ERST-BETREUER

Header-Bild,

Fließtext

23

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Ausgangssituation
»

Basis-Layout erstellt – Plakat (Format A4) im Layoutprogramm (Adobe Indesign) > Verbindung
zum Printdesign

»

Layout-Elemente mit TAGs ausgezeichnet > anschließend XML-Datei exportiert

»

diese mit XSLT-Stylesheets (Formatvorlagen) ausgezeichnet

»

Zwischenformat HTML-Dokument im Browser erzeugt



ERST-BETREUER

Quelldaten (XML) und Stylesheets (XSLT) vom XSLT-Prozessor eingelesen
Anweisungen aus Stylesheets ausgeführt > Ergebnisdokument erzeugt = HTML


24

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Ausgangssituation – Gestaltungsraster
»

erneut Layout-Entwürfe für Media Type Screen und Print angefertigt:


Gestaltungsraster entwickelt (Spalten, Zeilen) hier BSP zeigen!!!



Zeilenraster = Zeilenanzahl variiert, zeilenbreite und –abstand bleiben gleich



Begründung:





Print-Designer = feste Seitengröße (Begrenzung) = fixe Abmassungen
Methode des Grundlinienrasters aus dem Printdesign genutzt > Schnittstelle
schaffen zum Webdesign, Gestaltungsmethoden vom Print- auf Webdesign
überführen

anhand der Zeilen > vertikale Ausrichtung der Elemente:



Höhe des Elements definiert (height)


ERST-BETREUER

Abstände für oberen Abstand festgelegt (top)

Abstände > responsive gestaltet über Verwendung von flexiblen Einheiten

25

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Ausgangssituation




Methode aus Webdesign – Layout-Elemente am Spaltenraster ausrichten



relative Werte verwendet für linker Abstand (left) und Breite eines Elements (width)



Breite des Elements bezieht sich auf Anzahl der Spalten, die es einnimmt



ERST-BETREUER

Spaltenraster skaliert sich = Spaltenanzahl bleibt gleich, jeweils Spaltenbreite und –
abstand variieren

Format durch gesamte Spaltenanzahl teilen > ergibt Spaltenbreite


26

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

HTML und CSS-Stylesheets (Media Typen und Media Queries)
»

Media typ screen musste weiter eingegrenzt werden


screen bezieht auf alles, was einen Bildschirm besitzt (Tablet, Desktop, TV) >
unterscheiden sich in der jeweiligen Auflösung



über Media Queries Media Type screen weitereingegrenzt


ERST-BETREUER

Ausrichtung des Ausgabegerätes – Breite/Höhe des Anzeigenbereichs wurde
unterschieden = Quer-/Hochformat für Tablet-Format > Layout muss
unterschiedlich angeordnet werden


27

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

HTML und CSS-Stylesheets (Media Typen und Media Queries)


Media Typ print ebenfalls weiter eingerenzt



»

aspect-ratio> Seitenformate gruppiert (DIN-Formate)
Breite/Höhe im Verhältnis betrachtet > Elemente skalieren sich automatisch

Basis-Schriftgröße wurde festgelegt (10 pt > 13 px)



»

alle weiteren Schriftgrößen wurden in Relationen gesetzt
TOOL = PXtoEM > relative Maße wurden somit für z. B. die Headline schnell ermittelt

aus Tabelle auf PXtoEM.com Basis-Schriftgröße (13 px) wählen:



ERST-BETREUER

ins Feld ges. Schriftgröße in Pixel
flex. Einheit (EM, %) automatisch ausgegeben


28

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Darstellung der Ergebnisse (Prototyp)
»

konnte umgesetzt werden:



Media Queries grenzen Media Typ print und screen ein



Printbereich = Einteilung der Seitenverhältnisse



Schrift als Webfonts eingebunden (unterschiedliche Browserdarstellung von Webfonts
nicht beeinflussbar)



Schriftfarbe



Verwendung des Grundlinienrasters (Zeilen) für oberen Abstand (top)
und Höhe des Elements (height)



ERST-BETREUER

Unterscheidung zwischen Ausgabeformate

Verwendung des Spaltenrasters für Breite des Elements (width) und linker Abstand (left)


29

ZWEIT-BETREUER

Leipzig

PRAXIS
Prototyp

RWD im MCP

Darstellung der Ergebnisse (Prototyp)
»

konnte teilweise, nicht umgesetzt werden:
→
→

zieht z. B. weiteres Problem nach sich – Weißraum zwischen Textblock und
Sponsorentext somit nicht beibehalten > aufgrund der Einspaltigkeit läuft Text nach
unten in die Sponsorenzeile hinein und überdeckt diese teilweise

→

relative Einheiten konnten nur teilweise umgesetzt werden > für Positionierung der
Elemente und Höhe/Breite, jedoch nicht umsetzbar für die Schriftgröße

→

ERST-BETREUER

Mehrspaltigkeit des Fließtextes richtig angelegt (column-count, column-gap) > wurde
jedoch von der Browser-Engine (Webkit) einfach ignoriert

Schrift wurde adaptiv umgesetzt > anhand von eingeführten Breakpoints =
Schriftgröße an das Layout angepasst


30

ZWEIT-BETREUER

Leipzig

FAZIT
Prototyp

RWD im MCP

Schlussfolgerung
»

bestehender MCP-Workflow lässt sich nur teilweise für die Integration eines Print-TemplateErstellung auf der Basis von Responsive-Web-Design umsetzen

»

RWD ist noch in der Entwicklung und hochaktuelles Thema

»

Problematiken ergaben sich hinsichtlich Schriften bzw. Text


keine aufwendigen, flippigen Gestaltungsarbeiten bisher möglich



eher einfach gehaltene Layouts > mobile Webseiten basieren meist auf rechteckige
Layouts (Dropdown-Menüs)> viel mit Farben und Schriften (Webfonts) gespielt

»
»

mittels CSS3, CSS3-Media Queries od. CSS3-Paged Media Modul abbilden

»

ERST-BETREUER

die Hauptaufgabe der Bachelorarbeit bestand darin, Gestaltungseigenschaften auszuwählen
und einige anhand des Ptototypens zu prüfen > alle anderen zu recherchieren

Bachelorarbeit bietet lediglich erste Hilfestellung für die Layout-Erstellung und erläutert
wesentliche Schritte für die Integration eines Print-Kanals


31

ZWEIT-BETREUER

Leipzig

ERWEITERUNGEN
alternative Lösungen

RWD im MCP

Alternativen und Erweiterungsmöglichkeiten
»

Adaptive Images (Matt Wilcox)



»

Bilder in verschiedene Auflösungen abgespeichert > optimiert für RWD
mobile Geräte greifen auf kleinere Bildgrößen zurück > verhindert lange Ladezeiten

Typekit



bietet Alternative zu oft verwendeten Standard-Schriften (Georgia, Verdana)



ERST-BETREUER

hochwertige browserkompatible Webschriften

Schriften lassen sich nach best. Kriterien filtern > eigenes Schrift-Set lässt sich
zusammenstellen


32

ZWEIT-BETREUER

Leipzig

ERWEITERUNGEN
alternative Lösungen

RWD im MCP

Alternativen und Erweiterungsmöglichkeiten
»

Golden Ratio Typography Calculator



aus 15 Schriftarten auswählen



drei einfache Parameter notwendig: Schriftgröße, Breite des Content-Bereichs,
optional: Anschläge pro Zeile


»

lässt sich Schriftart, -schnitt, Zeilenabstand, Laufweite testen

wenn Schriftgröße und Content-Breite angegeben > Calculator liefter Vorschau mit
verschiedenen varianten

Responsive Grid System




verschiedene Klassen zur horizontalen Unterteilung in Zeilen, verschiedene Klassen
zur Gruppierung von Inhalten


ERST-BETREUER

Zusammenstellung von CSS-Klassen, um Webseiten um ein flex. Rasters zu
ergänzen >somit für Tablets/Smartphone zu optimieren

[Web-Technologie: Gestaltung mit Hilfe von boxen/Klassen]

33

Rwd im mcp karteikarten 17062013

Weitere ähnliche Inhalte

Rwd im mcp karteikarten 17062013