Post on 05-Dec-2014
description
transcript
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
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
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
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
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
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)
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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