Responsive Webdesign im Multichannel Publishing

Download Responsive Webdesign im Multichannel Publishing

Post on 01-Dec-2014

562 views

Category:

Design

1 download

DESCRIPTION

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

TRANSCRIPT

  • 1. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung Ausblick Erweiterungsmglk.
  • 2. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 fr verschiedene Ausgabekanle 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 2 Ausblick Erweiterungsmglk.
  • 3. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann GRUNDLAGEN Responsive-Web-Design Agentur fr gute Kommunikation Leipzig RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP RESPONSIVE-WEB-DESIGN Allgemein optimierte Ausgabe einer Webseite auf unterschiedliche Ausgabegerte NOTWENDIGKEIT Nutzung Endgerte > keine berschaubarkeit RWD = DIE TECHNOLOGIE > Webseitenerstellung fr verschiedene Ausgabegerte Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 3 Ausblick Erweiterungsmglk.
  • 4. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann BASISWISSEN Workflow Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 4 Ausblick Erweiterungsmglk.
  • 5. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 5 Ausblick Erweiterungsmglk.
  • 6. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 = Hlle (InhaltsBreite, Innenabstnde, Rand, Auenabstnde) Web-Gestaltungsraster (Spalten) Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 6 Ausblick Erweiterungsmglk.
  • 7. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 fr Bilder/Grafiken, Schriftgren, Raster Grundlagen Voraussetzungen Funktion Layout auf allen Displaygren Elemente am Raster ausrichten Elemente werden beweglich passen sich wechselnden Bildschirmauflsungen an Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 7 Ausblick Erweiterungsmglk.
  • 8. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig BASISWISSEN flexible Medien RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP FLEX. MEDIEN Bilder auf 100% Sichtflche festlegen In Originalgre geladen Fr Desktop-Version = Dateigre optimal Fr mobile Version > fhrt zu langen Ladezeiten Bilder in verschd. Bildgren anlegen Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 8 Ausblick Erweiterungsmglk.
  • 9. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 9 Ausblick Erweiterungsmglk.
  • 10. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig BASISWISSEN technische Grundlagen RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP GRENZEN DES GESTALTUNGSRASTERS aufgrund Vielzahl von Bildschirmgren Layout muss neu angeordnet werden Breakpoints mssen 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 10 Ausblick Erweiterungsmglk.
  • 11. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 11 Ausblick Erweiterungsmglk.
  • 12. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 12 Ausblick Erweiterungsmglk.
  • 13. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig PRAXIS Auswahlkriterien Prototyp RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP PROTOTYP (Aufbau) Headerbild Wortmarke Headline Flietext Sponsorenzeile + Sponsorenplatzhalter Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Bildmarke Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 13 Ausblick Erweiterungsmglk.
  • 14. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig PRAXIS Ausgangssituation RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP AUSGANGSSITUATION 4 Zeilen + Abstand ergeben eine groe Einheits-Zeile (Gestaltungsraster fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 14 Ausblick Erweiterungsmglk.
  • 15. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 15 Ausblick Erweiterungsmglk.
  • 16. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 16 Ausblick Erweiterungsmglk.
  • 17. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann FAZIT Schlussfolgerung Agentur fr 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 mglich eher einfache Layouts Bachelorarbeit = erste Hilfestellung fr Layout-Erstellung Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 17 Ausblick Erweiterungsmglk.
  • 18. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig AUSBLICK Erweiterungsmglichkeiten RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP ERWEITERUNGEN (alternative Lsungen) Adaptive Images Bilder in verschiedene Auflsungen mobiles Gert greift auf kleinere Bildgre zurck 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 18 Ausblick Erweiterungsmglk.
  • 19. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann DANKE fr die Aufmerksamkeit Agentur fr gute Kommunikation Leipzig RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP VIELEN DANK FR DIE AUFMERKSAMKEIT Grundlagen Voraussetzungen ERST-BETREUER Prof. Dr. rel. pol. Ulrich Nikolaus Basiswissen Responsive-Web-Design Methodik Tabelle Praxis Prototyp BACHELOR PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung Ausblick Erweiterungsmglk.
  • 20. ZWEIT-BETREUER Dipl.-Inf. Axel Klarmann Agentur fr gute Kommunikation Leipzig PRAXIS Ausgangssituation RESPONSIVE-WEB-DESIGN IM MULTI-CHANNEL-PUBLISHING RWD im MCP AUSGANGSSITUATION Media Type: print (A4-Q) (verschd. Layouts fr verschd. Media-Types) Layouts fr print (Media Types) Layouts fr 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 PRSENTATION M. Fischer, B-BM-09 Hochschule fr Technik , Wirtschaft und Kultur Leipzig Fazit Schlussfolgerung 17 Ausblick Erweiterungsmglk.