responsive webdesign im multichannel publishing

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 Grundlagen Voraussetzung en Basiswissen Responsive-Web- Design Methodi k Tabelle Praxis Prototy p Fazit Schlussfolg erung Ausblick Erweiterungsm glk. RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING 02. Juli 2013

Upload: stella-lemasson

Post on 01-Dec-2014

604 views

Category:

Design


2 download

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.

TRANSCRIPT

Page 1: Responsive Webdesign im Multichannel Publishing

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

Page 2: Responsive Webdesign im Multichannel Publishing

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

Page 3: Responsive Webdesign im Multichannel Publishing

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

Page 4: Responsive Webdesign im Multichannel Publishing

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

Page 5: Responsive Webdesign im Multichannel Publishing

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

Page 6: Responsive Webdesign im Multichannel Publishing

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

Page 7: Responsive Webdesign im Multichannel Publishing

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

Page 8: Responsive Webdesign im Multichannel Publishing

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

Page 9: Responsive Webdesign im Multichannel Publishing

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

Page 10: Responsive Webdesign im Multichannel Publishing

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

Page 11: Responsive Webdesign im Multichannel Publishing

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

Page 12: Responsive Webdesign im Multichannel Publishing

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

Page 13: Responsive Webdesign im Multichannel Publishing

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

Page 14: Responsive Webdesign im Multichannel Publishing

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

Page 15: Responsive Webdesign im Multichannel Publishing

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)

Page 16: Responsive Webdesign im Multichannel Publishing

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)

Page 17: Responsive Webdesign im Multichannel Publishing

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

Page 18: Responsive Webdesign im Multichannel Publishing

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

Page 19: Responsive Webdesign im Multichannel Publishing

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

Page 20: Responsive Webdesign im Multichannel Publishing

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)