<we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstbwebEdition Konferenz // 30.1...
OLIVER                                BECKENHAUB» Freiberufler aus Frankfurt» begleite Webprojekte von der Idee  bis zur Um...
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 be...
Worum geht es heute?» Stalburg Theater» Redesign der Theater Website (stalburg.de)» Darstellung des Design- und  Entwicklu...
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 ...
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 ...
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.«                  ...
Grafik von Brad Frost(http://bradfrostweb.com)
Konzeptionsphase» Responsive Design oder Website + App?» Anforderungsanalyse zusammen mit Kunden» Gedanken über Usability ...
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.«                              – Ga...
»Bereits 9,8 Mio. der deutschsprachigenBevölkerung nutzen das mobile Internet«                           – Allensbacher Co...
Mobile Zugriffe Stalburg» 2010: ca. 3.300 (ca. 2,5%)» 2011: ca. 8.800 (ca. 6%)» 2012: ???» Wichtig: Eigene Statistikauswert...
Strukturierte Inhalte und Strategie                 30
Strukturierte Inhalte und Strategie» Content First!!!» Strukturierung und Vereinfachung aller Inhalte» Veranstaltungen, Te...
Das Konzept steht,jetzt geht es ans Design.            32
»Using photoshop/fireworks for responsivedesign is like bringing a knife to a gunfight«                             – Andy C...
Design im Browser» Schnelle Resultate und real-life testing» Vorteile von HTML5/CSS3 nutzen» Prototyping kann schneller ge...
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, Toolt...
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» Wiederverwen...
XY… Unbekannt» sehr viele unbekannte Faktoren» Bildschirmgröße und -auflösung» Unterschiedliche Browser & -versionen» Gesch...
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 un...
WYSIWYG unangepasst
TinyMCE unangepasst
WYSIWYG in der Klasse anpassen
»A big textarea a is a terrible user experience forthe content editor.«                                      – Rachel Andr...
Beispiel: Objekt einer Veranstaltung
Beispiel: Objekt einer Veranstaltung
»The CMS allows designers to make semanticdecisions so the editor doesn’t have to.«                                 – Rach...
The CMS protects the design and architecturedecision made for the site.                                   – Rachel Andrew ...
Responsive Design Prozess    Pon Kattera (@pkattera) - Design Process in the Responsive Age
Responsive Design Prozess + webEdition                                                 RWD                                ...
Was braucht man in webEdition, umein RWD umzusetzen?» strukturierter & sauberer Content  (z.B. über Klassen/Objekten)» Fro...
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 ...
Responsive Images» Es werden unnötige Datenmengen geladen.» Alle Geräte bekommen die gleichen Bilder» Retina? Wann laden, ...
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ög...
Lessons learned?» Zeit für Konzeption einplanen  (Content Strategy, RWD, Frontend, CMS)» Mobile First - Content First Desi...
Layout und Design trennen               http://styletil.es/
Lessons learned?» Zeit für Konzeption einplanen  (Content Strategy, RWD, Frontend, CMS)» Mobile First - Content First Desi...
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 Desi...
Aufwand vs. Nutzen        100
Mobile Zugriffe der letzten 3 Jahre    Jahr    2010           2011     2012   Mobil    3.300          9.000    19.000    (%...
»In der Tat kostet Responsive Webdesign mehr als …gar nichts zu tun. Natürlich könnte man weiterhinWebsites erstellen wie ...
»If you want to be relevant on the web todayyour website must adapt and perform on all thedevices that use the web.«      ...
webEdition alszukunftsfreundliches CMS?» ja, weil es ...» für Redakteure sehr einfach zu bedienen ist.» es dem Entwickler ...
Fragen? Feedback?Präsentation sowie weitere Informationen:http://wekonf.beckenhaub.deE-Mail: web@beckenhaub.deTwitter: @be...
Credits» Holger Bartel (Twitter: @foobartel)» Tom Arnold (Twitter: @webrocker)» Sven Wolfermann (Twitter: @maddesigns)» Br...
</we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deE-Mail: web@beckenhaub.deTwitter: @beckenhaubwebEdition Konferenz ...
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

3.338 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.338
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
447
Aktionen
Geteilt
0
Downloads
57
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

  1. 1. <we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstbwebEdition Konferenz // 30.10.2012
  2. 2. 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
  3. 3. https://twitter.com/beckenhaub/statuses/220822940927803394#
  4. 4. Responsive WebdesignWorkflow mit webEditionPraxisbeispiel „Stalburg Theater“Twitter: #wekonf #rwdstb
  5. 5. 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
  6. 6. 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
  7. 7. Allgemeines 7
  8. 8. Grafik von Brad Frost (http://bradfrostweb.com)
  9. 9. Grafik von Brad Frost (http://bradfrostweb.com)
  10. 10. Grafik von Brad Frost (http://bradfrostweb.com)
  11. 11. Neue Geräte seit Anfang Sept. 2012 http://www.lukew.com/ff/entry.asp?1646
  12. 12. 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
  13. 13. CSS3 Media Queries
  14. 14. CSS3 Media Queries im HTML
  15. 15. Breaktpoints festlegen» basic.css (Elemente wie Typo, Colors etc.)» 480.css» 600.css (Tablets Portrait)» 700.css» 992.css (Desktop Styles) 15
  16. 16. CSS3 Media Queries (noch wichtig)im HTML <head>:im CSS:
  17. 17. CSS3 Media Queries: Browser-Support http://caniuse.com/#feat=css-mediaqueries
  18. 18. Noch mehr Details? http://abookapart.com
  19. 19. »Responsive design is not about mobile. Its notabout tablets. Its not about desktops. Its aboutThe Web.« - Jeremey Keith (@adactio) 19
  20. 20. Grafik von Brad Frost(http://bradfrostweb.com)
  21. 21. 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
  22. 22. Experimentierfreudiger Kunde + Vertrauensvorschuss =happy Designer & Developer :) 22
  23. 23. Analyse der Zielgruppen 23
  24. 24. Bildquelle: Stalburg Theater (http://stalburg.de)
  25. 25. Bildquelle: Stalburg Theater (http://stalburg.de)
  26. 26. Zugriffszahlen 26
  27. 27. »By 2013, mobile phones will overtake PCs asthe most common Web access deviceworldwide.« – Gartner (13.01.2010) 27
  28. 28. »Bereits 9,8 Mio. der deutschsprachigenBevölkerung nutzen das mobile Internet« – Allensbacher Computer- und Technik-Analyse 2011 28
  29. 29. Mobile Zugriffe Stalburg» 2010: ca. 3.300 (ca. 2,5%)» 2011: ca. 8.800 (ca. 6%)» 2012: ???» Wichtig: Eigene Statistikauswertung! 29
  30. 30. Strukturierte Inhalte und Strategie 30
  31. 31. 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
  32. 32. Das Konzept steht,jetzt geht es ans Design. 32
  33. 33. »Using photoshop/fireworks for responsivedesign is like bringing a knife to a gunfight« – Andy Clarke (@malarkey) 33
  34. 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? 34
  35. 35. Design Prozess bisher Pon Kattera (@pkattera) - Design Process in the Responsive Age
  36. 36. Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age
  37. 37. http://foundation.zurb.com
  38. 38. Was zeichnet Foundation aus?» Responsive Grid» Formularelemente» Buttons» Navigationselemente» Tabs» Alerts, Labels, Tooltips etc.» Seit Foundation 3: Sass/Compass 38
  39. 39. Verschiedene Versionen des Designs 39
  40. 40. Stalburg Theater (http://stalburg.de)
  41. 41. Stalburg Theater (http://stalburg.de)
  42. 42. Nächster Schritt:Produktionsreifer Code 52
  43. 43. Frontend Entwicklung 53
  44. 44. Design Prozess bisher Pon Kattera (@pkattera) - Design Process in the Responsive Age
  45. 45. Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age
  46. 46. Frontend Konzept» Prototyp nachbauen?!» Validen und sauberen Code produzieren» Module und keine Seiten bauen» Wiederverwendbaren Code 56
  47. 47. 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
  48. 48. Navigationskonzept 58
  49. 49. Stalburg Theater (http://stalburg.de)
  50. 50. Stalburg Theater (http://stalburg.de)
  51. 51. Navigation (smallscreen) Stalburg Theater (http://stalburg.de)
  52. 52. Module bauenund keine Seiten 62
  53. 53. Testdatei mit allen Modulen
  54. 54. Video Frontend-Prototyp - Desktop Version
  55. 55. Video Frontend-Prototyp - Mobile Version
  56. 56. Bildquelle: http://www.flickr.com/photos/brad_frost/7387823392
  57. 57. Open Device Lab // Helsinki http://opendevicelab.com/
  58. 58. Open Device Lab // Frankfurt http://ffm.opendevicelab.net
  59. 59. Umsetzung mit webEdition 69
  60. 60. 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
  61. 61. WYSIWYG unangepasst
  62. 62. TinyMCE unangepasst
  63. 63. WYSIWYG in der Klasse anpassen
  64. 64. »A big textarea a is a terrible user experience forthe content editor.« – Rachel Andrew 74
  65. 65. Beispiel: Objekt einer Veranstaltung
  66. 66. Beispiel: Objekt einer Veranstaltung
  67. 67. »The CMS allows designers to make semanticdecisions so the editor doesn’t have to.« – Rachel Andrew 77
  68. 68. The CMS protects the design and architecturedecision made for the site. – Rachel Andrew 78
  69. 69. Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age
  70. 70. Responsive Design Prozess + webEdition RWD PROTOTYP ITERATIVE DESIGN & DEVELOPMENT CONTENTPLANNING IMPLEMENTIERUNG LAUNCH STRATEGY KLASSEN WEBEDITION WEBEDITION OBJEKTE CONFIG TEMPLATES STRUKTUR 80
  71. 71. 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
  72. 72. Unsere Lösung:Optimierung der Bilder 82
  73. 73. 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
  74. 74. 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
  75. 75. Responsive Image http://responsiveimagescg.github.com/picture-element/
  76. 76. Responsive Image http://responsiveimages.org/
  77. 77. First Draft: <picture>
  78. 78. <picture> + webEdition
  79. 79. <picture> + webEdition
  80. 80. Serverseitig? 90
  81. 81. http://adaptive-images.com/
  82. 82. Weitere Möglichkeiten http://css-tricks.com/which-responsive-images-solution-should-you-use/
  83. 83. Ausblick / Fazit 93
  84. 84. 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
  85. 85. Lessons learned?» Zeit für Konzeption einplanen (Content Strategy, RWD, Frontend, CMS)» Mobile First - Content First Design 95
  86. 86. Layout und Design trennen http://styletil.es/
  87. 87. 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
  88. 88. Bildquelle: http://www.flickr.com/photos/brad_frost/7387823392
  89. 89. 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
  90. 90. Aufwand vs. Nutzen 100
  91. 91. 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
  92. 92. »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
  93. 93. »If you want to be relevant on the web todayyour website must adapt and perform on all thedevices that use the web.« – Mobify 103
  94. 94. 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
  95. 95. Fragen? Feedback?Präsentation sowie weitere Informationen:http://wekonf.beckenhaub.deE-Mail: web@beckenhaub.deTwitter: @beckenhaub
  96. 96. Credits» Holger Bartel (Twitter: @foobartel)» Tom Arnold (Twitter: @webrocker)» Sven Wolfermann (Twitter: @maddesigns)» Brad Frost (Twitter: @brad_frost) 106
  97. 97. </we:workshop>Oliver BeckenhaubWeb: http://beckenhaub.deE-Mail: web@beckenhaub.deTwitter: @beckenhaubwebEdition Konferenz // 30.10.2012

×