PM: Fachkongress Composite Simulation erneut ein voller Erfolg
Rwd im mcp karteikarten 17062013
1. 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
2. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
Einleitung
Nutzen für znm
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
wurde versucht Vorteile von RWD mit Workflow von Multi-Channel-Publishing zu
erweitern und so Aufwand der Layouterstellung gering zu halten und zu
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
reduzieren.
2
Hochschule für Technik , Wirtschaft und Kultur Leipzig
3. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
Einleitung
Aufgabe
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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)
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
3
4. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Ausgangssituation
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
4
5. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Ausgangssituation
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
neue Bereiche RWD für Workflow-Anpassung
»
RWD = Option flexible Webseiten zu erstellen
passen sich automatisch an, brechen um
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Layouts reagieren auf Endgerät
Webseiten funktionieren auf allen Devices (Idealfall)
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
5
6. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Web to Print (WTP)
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
Web-to-Print (WTP) – Bezug zum Studium, Basiswissen Printdesign
»
Technologie für digitale Printerstellung
»
Druckvorlagen über Internet erstellt
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
6
7. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
7
8. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Anpassung mit Hilfe von Media Queries umgesetzt > machen die
Darstellung der Layoutelemente vom Ausgabegerät abhängig
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
8
9. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Konzept > Design, Programmierung > Optimierung
auf verschiedene Geräte testen und optimieren
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
9
10. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
10
11. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
notwendig für Bilder, Grafiken und Schriftgrößen und Gestaltungsraster
(Spaltenbreite, -abstand)
optimale Darstellung der Webseite an das Ausgabegerät
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
11
12. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
12
13. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Trennung von Inhalt, Struktur, Layout
variable Inhalte lassen sich z. B. über Content-Management-System
austauschen, ohne Änderungen am Layout
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
13
14. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
14
15. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Breakpoint = der Punkt, an dem das Layout umbricht und sich neu anordnet
Gerät greift sich entspr. Layout heraus > optimale Darstellung
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
15
16. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
Responsive-Web-Design
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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)
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
16
17. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
17
18. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
18
19. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Lösungsansätze – Dingen die teilweise realisiert werden konnten
nicht relevant > wurde recherchiert
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
19
20. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
eine Spezifizierung erfolgt dann mit bereits erwähnten Media Queries
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
20
21. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
Vergleich der herausgefundenen Kriterien
»
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
Prof. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
21
22. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Tabelle
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
Vergleich der herausgefundenen Kriterien
»
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Seitenumbrüche erstellen/vermeiden,
Inhalte, z. B. Seitenzahlen, Kopf-/Fußzeilen platzieren
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
22
23. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Header-Bild,
Fließtext
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
23
24. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Quelldaten (XML) und Stylesheets (XSLT) vom XSLT-Prozessor eingelesen
Anweisungen aus Stylesheets ausgeführt > Ergebnisdokument erzeugt = HTML
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
24
25. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Abstände für oberen Abstand festgelegt (top)
Abstände > responsive gestaltet über Verwendung von flexiblen Einheiten
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
25
26. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Spaltenraster skaliert sich = Spaltenanzahl bleibt gleich, jeweils Spaltenbreite und –
abstand variieren
Format durch gesamte Spaltenanzahl teilen > ergibt Spaltenbreite
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
26
27. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Ausrichtung des Ausgabegerätes – Breite/Höhe des Anzeigenbereichs wurde
unterschieden = Quer-/Hochformat für Tablet-Format > Layout muss
unterschiedlich angeordnet werden
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
27
28. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
ins Feld ges. Schriftgröße in Pixel
flex. Einheit (EM, %) automatisch ausgegeben
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
28
29. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
Unterscheidung zwischen Ausgabeformate
Verwendung des Spaltenrasters für Breite des Elements (width) und linker Abstand (left)
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
29
30. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
30
31. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
FAZIT
Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
31
32. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
ERWEITERUNGEN
alternative Lösungen
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
hochwertige browserkompatible Webschriften
Schriften lassen sich nach best. Kriterien filtern > eigenes Schrift-Set lässt sich
zusammenstellen
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
32
33. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
ERWEITERUNGEN
alternative Lösungen
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
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
Prof. Dr. rel. pol. Ulrich Nikolaus
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]
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
33