responsive webdesign im multichannel publishing

Download Responsive Webdesign im Multichannel Publishing

Post on 01-Dec-2014

562 views

Category:

Design

1 download

Embed Size (px)

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