Responsive Webdesign im Multichannel Publishing
Als PPTX, PDF herunterladen2 gefällt mir1,219 aufrufe
Das Dokument behandelt die Grundlagen und Methoden des Responsive Web Designs (RWD) im Kontext des Multi-Channel-Publishings, einschließlich der Notwendigkeit flexibler Gestaltung für verschiedene Ausgabegeräte. Es werden verschiedene Aspekte des Workflows, technische Grundlagen sowie die Entwicklung eines Prototyps diskutiert, um die Herausforderungen von RWD zu illustrieren. Abschließend werden Ausblick und Erweiterungsmöglichkeiten vorgestellt, um die Funktionalität und Benutzererfahrung zu optimieren.
Responsive Webdesign im Multichannel Publishing
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.