Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

<we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstbwebEdition Konferenz // 30.10.2012

OLIVER BECKENHAUB» Freiberuﬂer aus Frankfurt» begleite Webprojekte von der Idee bis 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 WebdesignWorkﬂow 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

Worum geht es heute?» 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

Allgemeines 7

Graﬁk von Brad Frost (http://bradfrostweb.com)

Neue Geräte seit Anfang Sept. 2012 http://www.lukew.com/ﬀ/entry.asp?1646

Was ist Responsive Webdesign (RWD)? » 1. Ein ﬂexibles und gridbasiertes Layout » 2. Flexible Bilder und Medien » 3. Media Queries http://macrojuice.com/multimedia/responsive-web-design/ 12

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:

CSS3 Media Queries: Browser-Support http://caniuse.com/#feat=css-mediaqueries

Noch mehr Details? http://abookapart.com

»Responsive design is not about mobile. Its notabout tablets. Its not about desktops. Its aboutThe Web.« - Jeremey Keith (@adactio) 19

Graﬁk von Brad Frost(http://bradfrostweb.com)

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

Bildquelle: Stalburg Theater (http://stalburg.de)

Zugriﬀszahlen 26

»By 2013, mobile phones will overtake PCs asthe most common Web access deviceworldwide.« – Gartner (13.01.2010) 27

»Bereits 9,8 Mio. der deutschsprachigenBevölkerung nutzen das mobile Internet« – Allensbacher Computer- und Technik-Analyse 2011 28

Mobile Zugriﬀe 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 ﬁnalem Content! 31

Das Konzept steht,jetzt geht es ans Design. 32

»Using photoshop/ﬁreworks for responsivedesign is like bringing a knife to a gunﬁght« – Andy Clarke (@malarkey) 33

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 treﬀen» Designer + Webentwickler? 34

Design Prozess bisher Pon Kattera (@pkattera) - Design Process in the Responsive Age

Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age

http://foundation.zurb.com

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

Stalburg Theater (http://stalburg.de)

Nächster Schritt:Produktionsreifer Code 52

Frontend Entwicklung 53

Design Prozess bisher 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» sehr viele unbekannte Faktoren» Bildschirmgröße und -auﬂösung» Unterschiedliche Browser & -versionen» Geschwindigkeit der Internetverbindung» etc.» Eine Website kann und muss nicht überall gleich aussehen! 57

Navigationskonzept 58

Stalburg Theater (http://stalburg.de)

Navigation (smallscreen) Stalburg Theater (http://stalburg.de)

Module bauenund keine Seiten 62

Testdatei mit allen Modulen

Video Frontend-Prototyp - Desktop Version

Video Frontend-Prototyp - Mobile Version

Bildquelle: http://www.ﬂickr.com/photos/brad_frost/7387823392

Open Device Lab // Helsinki http://opendevicelab.com/

Open Device Lab // Frankfurt http://ﬀm.opendevicelab.net

Umsetzung mit webEdition 69

webEdition – Parallel zur Designphase» 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

WYSIWYG unangepasst

TinyMCE unangepasst

WYSIWYG in der Klasse anpassen

»A big textarea a is a terrible user experience forthe content editor.« – Rachel Andrew 74

Beispiel: Objekt einer Veranstaltung

»The CMS allows designers to make semanticdecisions so the editor doesn’t have to.« – Rachel Andrew 77

The CMS protects the design and architecturedecision made for the site. – Rachel Andrew 78

Responsive Design Prozess + webEdition RWD PROTOTYP ITERATIVE DESIGN & DEVELOPMENT CONTENTPLANNING IMPLEMENTIERUNG LAUNCH STRATEGY KLASSEN WEBEDITION WEBEDITION OBJEKTE CONFIG TEMPLATES STRUKTUR 80

Was braucht man in webEdition, umein RWD umzusetzen?» strukturierter & sauberer Content (z.B. über Klassen/Objekten)» Frontend Techniken (ﬂuid grids, ﬂexible images and media queries etc.)» Strategie / Lösung für den Umgang mit 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» 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» Polyﬁlls = Nur ein Workaround» W3C = Direkte Implementierung im Browser 84

Responsive Image http://responsiveimagescg.github.com/picture-element/

Responsive Image http://responsiveimages.org/

First Draft: <picture>

<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» 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 94

Lessons learned?» Zeit für Konzeption einplanen (Content Strategy, RWD, Frontend, CMS)» Mobile First - Content First Design 95

Layout und Design trennen http://styletil.es/

Lessons learned?» Zeit für Konzeption einplanen (Content Strategy, RWD, Frontend, CMS)» Mobile First - Content First Design» Layout und Design trennen» LESS / Sass & Compass 97

Bildquelle: http://www.ﬂickr.com/photos/brad_frost/7387823392

Lessons learned?» 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! 99

Aufwand vs. Nutzen 100

Mobile Zugriﬀe der letzten 3 Jahre Jahr 2010 2011 2012 Mobil 3.300 9.000 19.000 (%) (2,5%) (6%) (14%) Jul-Aug 1.900 4.500 12.500 (%) (3,5%) (7.5%) (18%) 101

»In der Tat kostet Responsive Webdesign mehr als …gar nichts zu tun. Natürlich könnte man weiterhinWebsites erstellen wie bisher und dabei die Unmengean Geräten ignorieren, die bereits heute oder in naherZukunft Zugang zum Internet haben. Aber wirschreiben das Jahr 2012, und heutzutage sollte eineWebsite zumindest ein kleinwenig die mobileBenutzung berücksichtigen, bestenfalls sollte man siesogar komplett dafür optimieren.« http://welearned.net/2012/07/wie-viel-kostet-responsive-webdesign/ 102

»If you want to be relevant on the web todayyour website must adapt and perform on all thedevices that use the web.« – Mobify 103

webEdition alszukunftsfreundliches CMS?» 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) 104

Fragen? Feedback?Präsentation sowie weitere Informationen:http://wekonf.beckenhaub.deE-Mail: web@beckenhaub.deTwitter: @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: web@beckenhaub.deTwitter: @beckenhaubwebEdition Konferenz // 30.10.2012

Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

von Oliver Beckenhaub am 31. Oktober 2012

Zugänglichkeit

Kategorien

Details hochladen

Benutzerrechte

1 Einbettung 50

Statistiken