Your SlideShare is downloading. ×
Rwd im mcp karteikarten 17062013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Rwd im mcp karteikarten 17062013

163
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
163
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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