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

Like this? Share it with your network

Share

Rwd im mcp karteikarten 17062013

  • 322 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
322
On Slideshare
322
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
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