Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
107
<we:workshop> Oliver Beckenhaub Web: http://beckenhaub.de Twitter: @beckenhaub // #wekonf #rwdstb webEdition Konferenz // 30.10.2012
-
Upload
oliver-beckenhaub -
Category
Design
-
view
2.626 -
download
0
description
Slides aus meinem Workshop auf der webEdition Konferenz 2012 in Frankfurt zum Thema "Responsive Webdesign Workflow mit webEdition – ein Praxisbeispiel". Links und weitere Informationen aus meinem Workshop findet man auf http://wekonf.beckenhaub.de.
Transcript of Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
<we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstb
webEdition Konferenz // 30.10.2012
OLIVER BECKENHAUB
» Freiberufler aus Frankfurt
» begleite Webprojekte von der Ideebis zur Umsetzung
» plane, konzipiere, gestalte und entwickle moderne zukunftsfreundliche Websites
» Webarchitekt
» Web: http://beckenhaub.de
» Twitter: @beckenhaub
2
https://twitter.com/beckenhaub/statuses/220822940927803394#
Responsive Webdesign Workflow mit webEditionPraxisbeispiel „Stalburg Theater“
Twitter: #wekonf #rwdstb
Ein paar Fragen zu Beginn:
» Wer arbeitet mit (Web-) Designern zusammen?
» Wer designed selbst Websites für Kunden?
» Wer bekommt fertige Webdesigns, die ,nur‘ noch programmiert werden müssen?
» Wer macht Frontend-Entwicklung?
» Wer macht ausschließlich Webentwicklung?
5
» Stalburg Theater
» Redesign der Theater Website (stalburg.de)
» Darstellung des Design- und Entwicklungsprozess von Anfang bis Ende
» Einbindung der Webentwickler in den Designprozess einer „responsive Website“
» Wie reiht sich webEdition in den Prozess ein?
6
Worum geht es heute?
Allgemeines
7
Neue Geräte seit Anfang Sept. 2012
http://www.lukew.com/ff/entry.asp?1646
Was ist Responsive Webdesign (RWD)?» 1. Ein flexibles und gridbasiertes Layout
» 2. Flexible Bilder und Medien
» 3. Media Queries
12
http://macrojuice.com/multimedia/responsive-web-design/
CSS3 Media Queries
CSS3 Media Queries im HTML
Breaktpoints festlegen
» basic.css (Elemente wie Typo, Colors etc.)
» 480.css
» 600.css (Tablets Portrait)
» 700.css
» 992.css (Desktop Styles)
15
CSS3 Media Queries (noch wichtig)
im HTML <head>:
im CSS:
http://caniuse.com/#feat=css-mediaqueries
CSS3 Media Queries: Browser-Support
»Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web.«
- Jeremey Keith (@adactio)
19
Konzeptionsphase
» Responsive Design oder Website + App?
» Anforderungsanalyse zusammen mit Kunden
» Gedanken über Usability und Performance
» Zielgruppenanalyse
» Projektbeginn: Herbst 2011
» RWD immer noch eine sehr neue Technik. Bisher nur an kleineren Projekte ausprobiert.
21
Experimentierfreudiger Kunde +
Vertrauensvorschuss =
happy Designer & Developer :)
22
Analyse der Zielgruppen
23
Zugriffszahlen
26
»By 2013, mobile phones will overtake PCs as the most common Web access device worldwide.«
– Gartner (13.01.2010)
27
»Bereits 9,8 Mio. der deutschsprachigen Bevölkerung nutzen das mobile Internet«
– Allensbacher Computer- und Technik-Analyse 2011
28
Mobile Zugriffe Stalburg
» 2010: ca. 3.300 (ca. 2,5%)
» 2011: ca. 8.800 (ca. 6%)
» 2012: ???
» Wichtig: Eigene Statistikauswertung!
29
Strukturierte Inhalte und Strategie
30
Strukturierte Inhalte und Strategie
» Content First!!!
» Strukturierung und Vereinfachung aller Inhalte
» Veranstaltungen, Termine, Schauspieler etc. – Welche Infos werden benötigt?
» Design geht nur mit finalem Content!
31
Das Konzept steht,jetzt geht es ans Design.
32
»Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight«
33
– Andy Clarke (@malarkey)
34
Design im Browser
» Schnelle Resultate und real-life testing
» Vorteile von HTML5/CSS3 nutzen
» Prototyping kann schneller gehen
» Viele Änderungen können schneller gemacht werden (Farben, Schriftgrößen etc.)
» Entscheidungen im Browser treffen
» Designer + Webentwickler?
Design Prozess bisher
Pon Kattera (@pkattera) - Design Process in the Responsive Age
Responsive Design Prozess
Pon Kattera (@pkattera) - Design Process in the Responsive Age
Was zeichnet Foundation aus?
» Responsive Grid
» Formularelemente
» Buttons
» Navigationselemente
» Tabs
» Alerts, Labels, Tooltips etc.
» Seit Foundation 3: Sass/Compass
38
Verschiedene Versionen des Designs
39
Nächster Schritt:Produktionsreifer Code
52
Frontend Entwicklung
53
Design Prozess bisher
Pon Kattera (@pkattera) - Design Process in the Responsive Age
Responsive Design Prozess
Pon Kattera (@pkattera) - Design Process in the Responsive Age
Frontend Konzept
» Prototyp nachbauen?!
» Validen und sauberen Code produzieren
» Module und keine Seiten bauen
» Wiederverwendbaren Code
56
XY… Unbekannt
57
» sehr viele unbekannte Faktoren
» Bildschirmgröße und -auflösung
» Unterschiedliche Browser & -versionen
» Geschwindigkeit der Internetverbindung
» etc.
» Eine Website kann und muss nicht überall gleich aussehen!
Navigationskonzept
58
Navigation (smallscreen)
Stalburg Theater (http://stalburg.de)
Module bauen und keine Seiten
62
Testdatei mit allen Modulen
Video Frontend-Prototyp - Desktop Version
Video Frontend-Prototyp - Mobile Version
Bildquelle: http://www.flickr.com/photos/brad_frost/7387823392
Open Device Lab // Helsinki
http://opendevicelab.com/
Open Device Lab // Frankfurt
http://ffm.opendevicelab.net
Umsetzung mit webEdition
69
» Klassen für Struktur eingerichtet
» Kunde konnte dadurch Objekte anlegen
» SEO URL und Arbeitsbereiche eingerichtet
» Funktionsaufbau und Test-Templates
» ermöglichte gleichzeitiges Arbeiten von Designer, Entwicklern und Redakteuren
» Problem WYSIWYG
70
webEdition – Parallel zur Designphase
WYSIWYG unangepasst
TinyMCE unangepasst
WYSIWYG in der Klasse anpassen
»A big textarea a is a terrible user experience for the content editor.«
74
– Rachel Andrew
Beispiel: Objekt einer Veranstaltung
Beispiel: Objekt einer Veranstaltung
»The CMS allows designers to make semantic decisions so the editor doesn’t have to.«
77
– Rachel Andrew
The CMS protects the design and architecture decision made for the site.
– Rachel Andrew
78
Responsive Design Prozess
Pon Kattera (@pkattera) - Design Process in the Responsive Age
80
PLANNING CONTENTSTRATEGY
ITERATIVE DESIGN & DEVELOPMENT
RWDPROTOTYP
LAUNCH
KLASSENOBJEKTE
STRUKTUR
WEBEDITIONTEMPLATES
WEBEDITIONCONFIG
IMPLEMENTIERUNG
Responsive Design Prozess + webEdition
Was braucht man in webEdition, um ein RWD umzusetzen?
» strukturierter & sauberer Content(z.B. über Klassen/Objekten)
» Frontend Techniken (fluid grids, flexible images and media queries etc.)
» Strategie / Lösung für den Umgangmit Bildern (Responsive Images)
81
Unsere Lösung: Optimierung der Bilder
82
flexibles Bild über we:field» Ausgabe über we:thumbnails optimieren
» Eigene Felder für Bilder, nicht über WYSIWYG, weil dann fixe Breite/Höhe
» „only“-Attribut von <we:field type=“img“ …>- Dein Freund und Helfer
83
Responsive Images
84
» Es werden unnötige Datenmengen geladen.
» Alle Geräte bekommen die gleichen Bilder
» Retina? Wann laden, wann nicht?
» <img> Tag ist nicht dafür ausgelegt
» Polyfills = Nur ein Workaround
» W3C = Direkte Implementierung im Browser
Responsive Image
http://responsiveimagescg.github.com/picture-element/
Responsive Image
http://responsiveimages.org/
First Draft: <picture>
<picture> + webEdition
<picture> + webEdition
Serverseitig?
90
http://adaptive-images.com/
Weitere Möglichkeiten
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Ausblick / Fazit
93
RWD + WORKFLOW + CMS = Herausforderung
94
» keine WYSIWYG-Editoren zur Verfügung stellen, und wenn doch dann Formatierungsmöglichkeiten einschränken
» möglichst nur Plaintextfelder(Trennung von Content und Design)
» Mögliche Fehlerquellen bei der Dateneingabe für Redakteuere minimieren (Bildupload, Copy & Paste aus Word)
» Umgang und Lösung mit Bildern
95
» Zeit für Konzeption einplanen(Content Strategy, RWD, Frontend, CMS)
» Mobile First - Content First Design
Lessons learned?
97
» Zeit für Konzeption einplanen(Content Strategy, RWD, Frontend, CMS)
» Mobile First - Content First Design
» Layout und Design trennen
» LESS / Sass & Compass
Lessons learned?
Bildquelle: http://www.flickr.com/photos/brad_frost/7387823392
99
» Zeit für Konzeption einplanen(Content Strategy, RWD, Frontend, CMS)
» Mobile First - Content First Design
» Layout und Design trennen
» LESS / Sass & Compass
» Früh und viel auf echten Geräten testen!
Lessons learned?
Aufwand vs. Nutzen
100
Mobile Zugriffe der letzten 3 Jahre
101
Jahr
Mobil(%)
Jul-Aug(%)
2010
3.300(2,5%)
1.900(3,5%)
2011
9.000(6%)
4.500(7.5%)
2012
19.000(14%)
12.500(18%)
»In der Tat kostet Responsive Webdesign mehr als … gar nichts zu tun. Natürlich könnte man weiterhin Websites erstellen wie bisher und dabei die Unmenge an Geräten ignorieren, die bereits heute oder in naher Zukunft Zugang zum Internet haben. Aber wir schreiben das Jahr 2012, und heutzutage sollte eine Website zumindest ein kleinwenig die mobile Benutzung berücksichtigen, bestenfalls sollte man sie sogar komplett dafür optimieren.«
102
http://welearned.net/2012/07/wie-viel-kostet-responsive-webdesign/
»If you want to be relevant on the web today your website must adapt and perform on all the devices that use the web.«
– Mobify
103
104
» ja, weil es ...
» für Redakteure sehr einfach zu bedienen ist.
» es dem Entwickler alle Freiheiten lässt
» es eine Trennung von Design, Semantik und Content (Klassen/Objekte) ermöglicht
» es unterschiedlich Versionen eines Bildes ausliefern kann (we:thumbnails)
webEdition als zukunftsfreundliches CMS?
Fragen? Feedback?Präsentation sowie weitere Informationen:http://wekonf.beckenhaub.de
E-Mail: [email protected] Twitter: @beckenhaub
Credits
» Holger Bartel (Twitter: @foobartel)
» Tom Arnold (Twitter: @webrocker)
» Sven Wolfermann (Twitter: @maddesigns)
» Brad Frost (Twitter: @brad_frost)
106
</we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deE-Mail: [email protected]: @beckenhaub
webEdition Konferenz // 30.10.2012
