View
598
Download
2
Category
Preview:
DESCRIPTION
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.
Citation preview
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING
02. Juli 2013
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
» MCP = Erstellung einer Publikation für verschiedene Ausgabekanäle
GRUNDLAGENMulti-Channel-Publishing
VERSCHD. AUSGANGSPUNKTE (MCP, WTP)
» WTP = digitale Print-Erstellung via Online-Editoren
2
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
GRUNDLAGENResponsive-Web-Design
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
3
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENWorkflow
KONVENTIONELL» KONZEPT ▶ DESIGN ▶ PROGRAMMIERUNG ▶
OPTIMIERUNG
4
RWD» KONZEPT ▶ DESIGN & PROGRAMMIERUNG ▶
OPTIMIERUNG
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENflexibles Gestaltungsraster
Doppelseite Print-Gestaltungsraster (Spalten + Zeilen)
» echte Raster im Print-Bereich Anordnung Elemente
(Bilder, Grafiken) Spalten und Zeilen
(Grundlinienraster)
PRINT-BEREICH
5
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENflexibles Gestaltungsraster
Web-Gestaltungsraster (Spalten)
» Webseite in Spalten teilen Layouts = Ausrichten
von Boxen Box = Hülle
(Inhalts-Breite, Innenabstände, Rand, Außenabstände)
WEB-BEREICH
6
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENflexibles Gestaltungsraster
NOTWENDIGKEIT
» Funktion Layout auf allen Displaygrößen
7
» Elemente am Raster ausrichten Elemente werden beweglich passen sich wechselnden
Bildschirmauflösungen an
» flexible Einheiten: notwendig für Bilder/Grafiken,
Schriftgrößen, Raster
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENflexible Medien
» Bilder auf 100% Sichtfläche festlegen
FLEX. MEDIEN
8
» 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
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENtechnische Grundlagen
» HTML = Struktur, CSS = Gestalt
» Klare Trennung von Inhalt, Struktur, Layout
❯ vereinfachtes Publizieren und Betreuen der Webseite
HTML UND CSS
9
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENtechnische Grundlagen
GRENZEN DES GESTALTUNGS-RASTERS
» aufgrund Vielzahl von Bildschirmgrößen
10
» Breakpoint = Punkt, an dem Layout neu umbricht
» Media Types = (Medien Typen) fragen Media Queries ab
» Media Queries = (Medien- Eigenschaften) spezifizieren Medien Typen
» Layout muss neu angeordnet werden Breakpoints müssen gesetzt werden
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
BASISWISSENtechnische Grundlagen
ERWEITERTER WORKFLOW AUF RWD-BASIS
11
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
METHODIKVergleich herausgefundener Kriterien
» Eigenschaften zum Groblayout (Makrotypografie) bereits REALISIERBAR
TABELLE
12
» Eigenschaften zum Feinlayout (Mikrotypografie) = NICHT/KAUM REALISIERBAR
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
PRAXISAuswahlkriterien Prototyp
PROTOTYP(Aufbau)
Headline
Fließtext
Sponsorenzeile+ Sponsorenplatzhalter
Wortmarke
Bildmarke
13
Headerbild
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
Spalten (18 Stk.)
PRAXISAusgangssituation
AUSGANGSSITUATION(Gestaltungsraster für Hoch- und Querformat)
» Gestaltungsraster entwickelt (Spalten, Zeilen)
14
4 Zeilen + Abstand ergeben eine große Einheits-Zeile
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
PRAXISErgebnisse Prototyp
Media Type: screen (Tablet-H)
DARSTELLUNG ERGEBNISSE(Prototyp)
15
Media Type: screen (Tablet-Q)
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
PRAXISErgebnisse Prototyp
DARSTELLUNG ERGEBNISSE(Prototyp)
16
Media Type: print (A4-H)
Media Type: print (A4-Q)
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
FAZITSchlussfolgerung
» RWD noch in Entwicklung
FAZIT(Prototyp)
17
» Problematiken hinsichtlich Schrift bzw. Text: keine aufwendigen Layouts bisher möglich eher einfache Layouts
» Bachelorarbeit = erste Hilfestellung für Layout-Erstellung
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
» Adaptive Images Bilder in verschiedene Auflösungen mobiles Gerät greift auf kleinere Bildgröße
zurück
AUSBLICKErweiterungsmöglichkeiten
ERWEITERUNGEN(alternative Lösungen)
18
» TypeKit Alternative zu Standard-Schriften
(Verdana, Georgia) eigenes Schriften-Set erstellen
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
DANKEfür die Aufmerksamkeit
VIELEN DANK FÜR DIE AUFMERKSAMKEIT
ERST-BETREUERProf. Dr. rel. pol. Ulrich Nikolaus
BACHELOR PRÄSENTATION – M. Fischer, B-BM-09Hochschule für Technik , Wirtschaft und Kultur Leipzig
ZWEIT-BETREUERDipl.-Inf. Axel Klarmann
Agentur für gute Kommunikation
Leipzig
RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHINGRWD im MCP
GrundlagenVoraussetzungen
BasiswissenResponsive-Web-Design
MethodikTabelle
PraxisPrototyp
FazitSchlussfolgerung
AusblickErweiterungsmglk.
PRAXISAusgangssituation
AUSGANGSSITUATION(verschd. Layouts für verschd. Media-Types)
» Layouts für print (Media Types)
» Layouts für screen (Media Types)
Media Type: print (A4-H)
Media Type: print (A4-Q)
17
Media Type: screen (Tablet H/Q)
Recommended