Eine wissenschaftliche Auseinandersetzung im Rahmen der Bachelor-Phase (Publishing Technology, Bachelor of Engineering). Es wurde untersucht inwieweit sich Responsive Webdesign für den Printbereich bereits im Juni/Juli 2013 anwenden lässt, welche Schwierigkeiten sich bei einer Layouterstellung für Printprodukte (Standard-Plakat) ergeben.

1. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
RESPONSIVE-WEB-DESIGN IM
MULTI-CHANNEL-PUBLISHING
02. Juli 2013
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
Ausblick
Erweiterungsmglk.

2. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
GRUNDLAGEN
Multi-Channel-Publishing
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
VERSCHD. AUSGANGSPUNKTE (MCP, WTP)
» MCP = Erstellung einer Publikation für
verschiedene Ausgabekanäle
» WTP = digitale Print-Erstellung via OnlineEditoren
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
2
Ausblick
Erweiterungsmglk.

3. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
GRUNDLAGEN
Responsive-Web-Design
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
RESPONSIVE-WEB-DESIGN
Allgemein
» optimierte Ausgabe einer Webseite auf
unterschiedliche Ausgabegeräte
NOTWENDIGKEIT
» Nutzung Endgeräte > keine Überschaubarkeit
» RWD = DIE TECHNOLOGIE > Webseitenerstellung für
verschiedene Ausgabegeräte
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
3
Ausblick
Erweiterungsmglk.

4. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
BASISWISSEN
Workflow
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
KONVENTIONELL
» KONZEPT ▶ DESIGN ▶ PROGRAMMIERUNG ▶ OPTIMIERUNG
RWD
» KONZEPT ▶ DESIGN & PROGRAMMIERUNG ▶ OPTIMIERUNG
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
4
Ausblick
Erweiterungsmglk.

5. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
flexibles Gestaltungsraster
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
PRINT-BEREICH
»
echte Raster im
Print-Bereich
 Anordnung Elemente
(Bilder, Grafiken)
 Spalten und Zeilen
(Grundlinienraster)
Doppelseite Print-Gestaltungsraster
(Spalten + Zeilen)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
5
Ausblick
Erweiterungsmglk.

6. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
flexibles Gestaltungsraster
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
WEB-BEREICH
»
Webseite in Spalten teilen
 Layouts = Ausrichten
von Boxen
 Box = Hülle
(InhaltsBreite, Innenabstände,
Rand, Außenabstände)
Web-Gestaltungsraster
(Spalten)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
6
Ausblick
Erweiterungsmglk.

7. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
flexibles Gestaltungsraster
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
NOTWENDIGKEIT
»
»
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
flexible Einheiten:
 notwendig für Bilder/Grafiken,
Schriftgrößen, Raster
»
Grundlagen
Voraussetzungen
Funktion Layout auf allen Displaygrößen
Elemente am Raster ausrichten
 Elemente werden beweglich
 passen sich wechselnden
Bildschirmauflösungen an
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
7
Ausblick
Erweiterungsmglk.

8. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
flexible Medien
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
FLEX. MEDIEN
»
Bilder auf 100% Sichtfläche festlegen
»
In Originalgröße geladen
 Für Desktop-Version = Dateigröße
optimal
 Für mobile Version > führt zu langen
Ladezeiten
» Bilder in verschd. Bildgrößen anlegen
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
8
Ausblick
Erweiterungsmglk.

9. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
technische Grundlagen
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
HTML UND CSS
» HTML = Struktur, CSS = Gestalt
» Klare Trennung von Inhalt, Struktur, Layout
❯ vereinfachtes Publizieren und Betreuen der
Webseite
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
9
Ausblick
Erweiterungsmglk.

10. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
technische Grundlagen
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
GRENZEN DES
GESTALTUNGSRASTERS
» aufgrund Vielzahl von Bildschirmgrößen
» Layout muss neu angeordnet werden
 Breakpoints müssen gesetzt werden
» Breakpoint = Punkt, an dem Layout neu
umbricht
» Media Types = (Medien Typen)
 fragen Media Queries ab
» Media Queries = (Medien- Eigenschaften)
 spezifizieren Medien Typen
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
10
Ausblick
Erweiterungsmglk.

11. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
BASISWISSEN
technische Grundlagen
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
ERWEITERTER
WORKFLOW AUF
RWD-BASIS
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
11
Ausblick
Erweiterungsmglk.

12. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
METHODIK
Vergleich herausgefundener Kriterien
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
TABELLE
» Eigenschaften zum Groblayout (Makrotypografie)
bereits REALISIERBAR
» Eigenschaften zum Feinlayout
(Mikrotypografie) = NICHT/KAUM
REALISIERBAR
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
12
Ausblick
Erweiterungsmglk.

13. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Auswahlkriterien Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
PROTOTYP
(Aufbau)
Headerbild
Wortmarke
Headline
Fließtext
Sponsorenzeile
+ Sponsorenplatzhalter
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Bildmarke
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
13
Ausblick
Erweiterungsmglk.

14. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Ausgangssituation
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
AUSGANGSSITUATION
4 Zeilen + Abstand ergeben eine
große Einheits-Zeile
(Gestaltungsraster für
Hoch- und Querformat)
» Gestaltungsraster
entwickelt
(Spalten, Zeilen)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Spalten (18 Stk.)
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
14
Ausblick
Erweiterungsmglk.

15. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Ergebnisse Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
DARSTELLUNG
ERGEBNISSE
(Prototyp)
Media Type:
screen (Tablet-Q)
Media Type:
screen (Tablet-H)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
15
Ausblick
Erweiterungsmglk.

16. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Ergebnisse Prototyp
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
DARSTELLUNG
ERGEBNISSE
(Prototyp)
Media Type: print
Media Type: print (A4-Q)
(A4-H)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
16
Ausblick
Erweiterungsmglk.

17. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
FAZIT
Schlussfolgerung
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
FAZIT
(Prototyp)
» RWD noch in Entwicklung
» Problematiken hinsichtlich Schrift bzw. Text:
 keine aufwendigen Layouts bisher möglich
 eher einfache Layouts
» Bachelorarbeit = erste Hilfestellung für
Layout-Erstellung
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
17
Ausblick
Erweiterungsmglk.

18. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
AUSBLICK
Erweiterungsmöglichkeiten
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
ERWEITERUNGEN
(alternative Lösungen)
» Adaptive Images
 Bilder in verschiedene Auflösungen
 mobiles Gerät greift auf kleinere Bildgröße
zurück
» TypeKit
 Alternative zu Standard-Schriften
(Verdana, Georgia)
 eigenes Schriften-Set erstellen
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
18
Ausblick
Erweiterungsmglk.

19. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
DANKE
für die Aufmerksamkeit
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
VIELEN DANK FÜR DIE AUFMERKSAMKEIT
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
Ausblick
Erweiterungsmglk.

20. ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
PRAXIS
Ausgangssituation
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
RWD im MCP
AUSGANGSSITUATION
Media Type:
print (A4-Q)
(verschd. Layouts für
verschd. Media-Types)
» Layouts für print
(Media Types)
» Layouts für screen
(Media Types)
Media Type: screen
(TabletType:
Media H/Q)
print (A4-H)
Grundlagen
Voraussetzungen
ERST-BETREUER
Prof. Dr. rel. pol. Ulrich Nikolaus
Basiswissen
Responsive-Web-Design
Methodik
Tabelle
Praxis
Prototyp
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09
Hochschule für Technik , Wirtschaft und Kultur Leipzig
Fazit
Schlussfolgerung
17
Ausblick
Erweiterungsmglk.