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

Leipzig

MethodikTabelle

PraxisPrototyp

» MCP = Erstellung einer Publikation für verschiedene Ausgabekanäle

GRUNDLAGENMulti-Channel-Publishing

VERSCHD. AUSGANGSPUNKTE (MCP, WTP)

» WTP = digitale Print-Erstellung via Online-Editoren

Leipzig

MethodikTabelle

PraxisPrototyp

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

Leipzig

MethodikTabelle

PraxisPrototyp

BASISWISSENWorkflow

KONVENTIONELL» KONZEPT ▶ DESIGN ▶ PROGRAMMIERUNG ▶

OPTIMIERUNG

RWD» KONZEPT ▶ DESIGN & PROGRAMMIERUNG ▶

OPTIMIERUNG

Leipzig

MethodikTabelle

PraxisPrototyp

BASISWISSENflexibles Gestaltungsraster

Doppelseite Print-Gestaltungsraster (Spalten + Zeilen)

» echte Raster im Print-Bereich Anordnung Elemente

(Bilder, Grafiken) Spalten und Zeilen

(Grundlinienraster)

PRINT-BEREICH

Leipzig

MethodikTabelle

PraxisPrototyp

Web-Gestaltungsraster (Spalten)

» Webseite in Spalten teilen Layouts = Ausrichten

von Boxen Box = Hülle

(Inhalts-Breite, Innenabstände, Rand, Außenabstände)

WEB-BEREICH

Leipzig

MethodikTabelle

PraxisPrototyp

NOTWENDIGKEIT

» Funktion Layout auf allen Displaygrößen

» Elemente am Raster ausrichten Elemente werden beweglich passen sich wechselnden

Bildschirmauflösungen an

» flexible Einheiten: notwendig für Bilder/Grafiken,

Schriftgrößen, Raster

Leipzig

MethodikTabelle

PraxisPrototyp

BASISWISSENflexible Medien

» Bilder auf 100% Sichtfläche festlegen

FLEX. MEDIEN

» 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

Leipzig

MethodikTabelle

PraxisPrototyp

BASISWISSENtechnische Grundlagen

» HTML = Struktur, CSS = Gestalt

» Klare Trennung von Inhalt, Struktur, Layout

❯ vereinfachtes Publizieren und Betreuen der Webseite

HTML UND CSS

Leipzig

MethodikTabelle

PraxisPrototyp

GRENZEN DES GESTALTUNGS-RASTERS

» aufgrund Vielzahl von Bildschirmgrößen

» 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

Leipzig

MethodikTabelle

PraxisPrototyp

ERWEITERTER WORKFLOW AUF RWD-BASIS

Leipzig

MethodikTabelle

PraxisPrototyp

METHODIKVergleich herausgefundener Kriterien

» Eigenschaften zum Groblayout (Makrotypografie) bereits REALISIERBAR

TABELLE

» Eigenschaften zum Feinlayout (Mikrotypografie) = NICHT/KAUM REALISIERBAR

Leipzig

MethodikTabelle

PraxisPrototyp

PRAXISAuswahlkriterien Prototyp

PROTOTYP(Aufbau)

Headline

Fließtext

Sponsorenzeile+ Sponsorenplatzhalter

Wortmarke

Bildmarke

Headerbild

Leipzig

MethodikTabelle

PraxisPrototyp

Spalten (18 Stk.)

PRAXISAusgangssituation

AUSGANGSSITUATION(Gestaltungsraster für Hoch- und Querformat)

» Gestaltungsraster entwickelt (Spalten, Zeilen)

4 Zeilen + Abstand ergeben eine große Einheits-Zeile

Leipzig

MethodikTabelle

PraxisPrototyp

PRAXISErgebnisse Prototyp

Media Type: screen (Tablet-H)

DARSTELLUNG ERGEBNISSE(Prototyp)

Media Type: screen (Tablet-Q)

Leipzig

MethodikTabelle

PraxisPrototyp

PRAXISErgebnisse Prototyp

DARSTELLUNG ERGEBNISSE(Prototyp)

Media Type: print (A4-H)

Media Type: print (A4-Q)

Leipzig

MethodikTabelle

PraxisPrototyp

FAZITSchlussfolgerung

» RWD noch in Entwicklung

FAZIT(Prototyp)

» Problematiken hinsichtlich Schrift bzw. Text: keine aufwendigen Layouts bisher möglich eher einfache Layouts

» Bachelorarbeit = erste Hilfestellung für Layout-Erstellung

Leipzig

MethodikTabelle

PraxisPrototyp

» Adaptive Images Bilder in verschiedene Auflösungen mobiles Gerät greift auf kleinere Bildgröße

zurück

AUSBLICKErweiterungsmöglichkeiten

ERWEITERUNGEN(alternative Lösungen)

» TypeKit Alternative zu Standard-Schriften

(Verdana, Georgia) eigenes Schriften-Set erstellen

Leipzig

MethodikTabelle

PraxisPrototyp

DANKEfür die Aufmerksamkeit

VIELEN DANK FÜR DIE AUFMERKSAMKEIT

Leipzig

MethodikTabelle

PraxisPrototyp

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)

Media Type: screen (Tablet H/Q)

responsive webdesign im multichannel publishing

Design

contemporary webdesign

datourinfo webdesign

responsive webdesign workflow mit webedition – ein...

ress – responsive webdesign and server side components

by combining strategy, interaction and design we develop...

003 webdesign

004 webdesign

responsive webdesign 2018. 9. 4. · responsive_webdesign...

webdesign - fundamentos

psd to responsive webdesign

responsive webdesign testing using galen

responsive webdesign for non-geeks

revista webdesign

conseil & ingenierie open source depuis 2002€¦ ·...

jump start responsive web design, 2nd...

responsible webdesign

responsive webdesign infograph

responsive webdesign sydeny

viminds, angenehm. · 2020. 11. 11. · / modernes...

tcc webdesign