• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
 

Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

on

  • 2,205 views

Slides aus meinem Workshop auf der webEdition Konferenz 2012 in Frankfurt ...

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.

Statistics

Views

Total Views
2,205
Views on SlideShare
2,014
Embed Views
191

Actions

Likes
4
Downloads
40
Comments
0

1 Embed 191

http://masteren.de 191

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel Presentation Transcript

    • <we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstbwebEdition Konferenz // 30.10.2012
    • OLIVER BECKENHAUB» Freiberufler 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 WebdesignWorkflow 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
    • Grafik von Brad Frost (http://bradfrostweb.com)
    • Grafik von Brad Frost (http://bradfrostweb.com)
    • Grafik von Brad Frost (http://bradfrostweb.com)
    • 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 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
    • Grafik 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)
    • Bildquelle: Stalburg Theater (http://stalburg.de)
    • Zugriffszahlen 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 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 responsivedesign is like bringing a knife to a gunfight« – 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 treffen» 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)
    • 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
    • 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» 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! 57
    • Navigationskonzept 58
    • Stalburg Theater (http://stalburg.de)
    • 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.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
    • 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
    • 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 Pon Kattera (@pkattera) - Design Process in the Responsive Age
    • 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 (fluid grids, flexible 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» Polyfills = 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
    • <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.flickr.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 Zugriffe 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