33
Situations-Beispiel » Webseite auf Smartphone anschauen, weil man kurz was suchen will » 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 » 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 1 ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur für gute Kommunikation Leipzig RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP Einleitung beispielhafter Einstieg

Rwd im mcp karteikarten 17062013

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Rwd im mcp karteikarten 17062013

Situations-Beispiel

» Webseite auf Smartphone anschauen, weil man kurz was suchen will

» 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

» 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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

Einleitung beispielhafter Einstieg

Page 2: Rwd im mcp karteikarten 17062013

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

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 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

Einleitung Nutzen für znm

Page 3: Rwd im mcp karteikarten 17062013

Aufgabenstellung

» Aufgabe bestand darin Gestaltungseigenschaften aufzustellen und einzuordnen

» 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

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

Einleitung Aufgabe

Page 4: Rwd im mcp karteikarten 17062013

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

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

Korrekturen durchführen

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Ausgangssituation

Page 5: Rwd im mcp karteikarten 17062013

neue Bereiche RWD für Workflow-Anpassung

» RWD = Option flexible Webseiten zu erstellen

Layouts reagieren auf Endgerät

passen sich automatisch an, brechen um

Webseiten funktionieren auf allen Devices (Idealfall)

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Ausgangssituation

Page 6: Rwd im mcp karteikarten 17062013

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

» Technologie für digitale Printerstellung

» Druckvorlagen über Internet erstellt

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

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

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 ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Web to Print (WTP)

Page 7: Rwd im mcp karteikarten 17062013

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

» Technik zur Erstellung von flexiblen Webseiten

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

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

7 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Responsive-Web-Design

Page 8: Rwd im mcp karteikarten 17062013

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

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

8 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Responsive-Web-Design

Page 9: Rwd im mcp karteikarten 17062013

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

» konventionelle Erstellung

Konzept > Design > Programmierung > Optimierung

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

Konzept > Design, Programmierung > Optimierung

sollte frühzeitig ins CSS3 reingegangen werden

auf verschiedene Geräte testen und optimieren

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

GRUNDLAGEN Responsive-Web-Design

Page 10: Rwd im mcp karteikarten 17062013

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

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

Layouts gestalten sich durch Ausrichten von diesen Boxen

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 ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 11: Rwd im mcp karteikarten 17062013

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

notwendig für Bilder, Grafiken und Schriftgrößen und Gestaltungsraster (Spaltenbreite, -abstand)

optimale Darstellung der Webseite an das Ausgabegerät

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 12: Rwd im mcp karteikarten 17062013

flexible Medien

» Ethan Marcotte entwickelte erstes Konzept [Responsive Images]

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

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

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

12 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 13: Rwd im mcp karteikarten 17062013

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:

Trennung von Inhalt, Struktur, Layout

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 14: Rwd im mcp karteikarten 17062013

technische Grundlage RWD

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

» Inhalte lassen sich nicht beliebig skalieren

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 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 15: Rwd im mcp karteikarten 17062013

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

» Layout muss neu angeordnet werden mit Hilfe von Breakpoints

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

technische Realisierung über Media Queries

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

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

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 16: Rwd im mcp karteikarten 17062013

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)

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

» über die Engine wird eine Printpublikation [PDF] erzeugt

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

BASISWISSEN Responsive-Web-Design

Page 17: Rwd im mcp karteikarten 17062013

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:

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 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 18: Rwd im mcp karteikarten 17062013

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:

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

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

Medienformate = Ein-/Ausgabeformate zusätzlich betrachtet

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

18 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 19: Rwd im mcp karteikarten 17062013

Aufbau der Tabelle

» Tabelle dient zur ersten Orientierung:

was ist bereits möglich

wo gibt es Einschränkungen

was funktioniert bisher noch nicht

» Kommentarspalte eingefügt für:

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

Relevanz für Prototyp wurde vermerkt > Dinge getestet

nicht relevant > wurde recherchiert

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 20: Rwd im mcp karteikarten 17062013

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

eine Spezifizierung erfolgt dann mit bereits erwähnten Media Queries

20 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 21: Rwd im mcp karteikarten 17062013

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)

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 22: Rwd im mcp karteikarten 17062013

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 definiert Seitenmodell > gibt Auskunft über, wie Dokument innerhalb einer rechteckigen Fläche, sogenannten Seiten-Box formatiert wird

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

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

Funktionen von CSS3-Paged Media Modul:

Seitenumbrüche erstellen/vermeiden,

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

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

METHODIK Tabelle

Page 23: Rwd im mcp karteikarten 17062013

Auswahlkriterien Prototyp

» einseitiges Standard-Produkt mit folgenden Auswahlkriterien:

Werbeplakat für RZ Kupka (fiktiv)

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

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

» variable Inhalte sind u. a.:

Header-Bild,

Headline

Fließtext

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 24: Rwd im mcp karteikarten 17062013

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

Quelldaten (XML) und Stylesheets (XSLT) vom XSLT-Prozessor eingelesen

Anweisungen aus Stylesheets ausgeführt > Ergebnisdokument erzeugt = HTML

24 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 25: Rwd im mcp karteikarten 17062013

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:

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

Höhe des Elements definiert (height)

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 26: Rwd im mcp karteikarten 17062013

Ausgangssituation

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

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

Format durch gesamte Spaltenanzahl teilen > ergibt Spaltenbreite

26 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 27: Rwd im mcp karteikarten 17062013

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

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

27 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 28: Rwd im mcp karteikarten 17062013

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:

ins Feld ges. Schriftgröße in Pixel

flex. Einheit (EM, %) automatisch ausgegeben

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 29: Rwd im mcp karteikarten 17062013

Darstellung der Ergebnisse (Prototyp)

» konnte umgesetzt werden:

Unterscheidung zwischen Ausgabeformate

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)

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 30: Rwd im mcp karteikarten 17062013

Darstellung der Ergebnisse (Prototyp)

» konnte teilweise, nicht umgesetzt werden:

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

→ 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

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

30 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

PRAXIS Prototyp

Page 31: Rwd im mcp karteikarten 17062013

Schlussfolgerung

» bestehender MCP-Workflow lässt sich nur teilweise für die Integration eines Print-Template-Erstellung 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

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

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

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

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

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

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

FAZIT Prototyp

Page 32: Rwd im mcp karteikarten 17062013

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

hochwertige browserkompatible Webschriften

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

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

32 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

ERWEITERUNGEN alternative Lösungen

Page 33: Rwd im mcp karteikarten 17062013

Alternativen und Erweiterungsmöglichkeiten

» Golden Ratio Typography Calculator

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

aus 15 Schriftarten auswählen

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

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

» Responsive Grid System

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

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

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

33 ERST-BETREUER

Prof. Dr. rel. pol. Ulrich Nikolaus BACHELOR PRÄSENTATION – M. Fischer, B-BM-09 Hochschule für Technik , Wirtschaft und Kultur Leipzig

ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation

Leipzig

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

ERWEITERUNGEN alternative Lösungen