ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PU...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

GRUNDLAGEN
Multi-Channel-Publishing

RESP...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

GRUNDLAGEN
Responsive-Web-Design

Agentur für gute Kommunikation
Leipzig

RESPONS...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

BASISWISSEN
Workflow

Agentur für gute Kommunikation
Leipzig

RESPONSIVE-WEB-DESI...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
flexibles Gestaltungsraster

...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
flexibles Gestaltungsraster

...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
flexibles Gestaltungsraster

...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
flexible Medien

RESPONSIVE-W...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
technische Grundlagen

RESPON...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
technische Grundlagen

RESPON...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

BASISWISSEN
technische Grundlagen

RESPON...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

METHODIK
Vergleich herausgefundener Krite...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

PRAXIS
Auswahlkriterien Prototyp

RESPONS...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

PRAXIS
Ausgangssituation

RESPONSIVE-WEB-...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

PRAXIS
Ergebnisse Prototyp

RESPONSIVE-WE...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

PRAXIS
Ergebnisse Prototyp

RESPONSIVE-WE...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

FAZIT
Schlussfolgerung

Agentur für gute Kommunikation
Leipzig

RESPONSIVE-WEB-DE...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

AUSBLICK
Erweiterungsmöglichkeiten

RESPO...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

DANKE
für die Aufmerksamkeit

Agentur für gute Kommunikation
Leipzig

RESPONSIVE-...
ZWEIT-BETREUER
Dipl.-Inf. Axel Klarmann

Agentur für gute Kommunikation
Leipzig

PRAXIS
Ausgangssituation

RESPONSIVE-WEB-...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign im Multichannel Publishing

950 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
950
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign im Multichannel Publishing

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×