Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

Download Responsive Webdesign Workflow mit webEdition – Ein Praxisbeispiel

Post on 29-Nov-2014

2.596 views

Category:

Design

0 download

Embed Size (px)

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

  • 1. Oliver BeckenhaubWeb: http://beckenhaub.deTwitter: @beckenhaub // #wekonf #rwdstbwebEdition Konferenz // 30.10.2012
  • 2. OLIVER BECKENHAUB Freiberuer 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. https://twitter.com/beckenhaub/statuses/220822940927803394#
  • 4. Responsive WebdesignWorkow mit webEditionPraxisbeispiel Stalburg TheaterTwitter: #wekonf #rwdstb
  • 5. Ein paar Fragen zu Beginn: Wer arbeitet mit (Web-) Designern zusammen? Wer designed selbst Websites fr Kunden? Wer bekommt fertige Webdesigns, die ,nur noch programmiert werden mssen? Wer macht Frontend-Entwicklung? Wer macht ausschlielich Webentwicklung? 5
  • 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. Allgemeines 7
  • 8. Grak von Brad Frost (http://bradfrostweb.com)
  • 9. Grak von Brad Frost (http://bradfrostweb.com)
  • 10. Grak von Brad Frost (http://bradfrostweb.com)
  • 11. Neue Gerte seit Anfang Sept. 2012 http://www.lukew.com//entry.asp?1646
  • 12. 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
  • 13. CSS3 Media Queries
  • 14. CSS3 Media Queries im HTML
  • 15. Breaktpoints festlegen basic.css (Elemente wie Typo, Colors etc.) 480.css 600.css (Tablets Portrait) 700.css 992.css (Desktop Styles) 15
  • 16. CSS3 Media Queries (noch wichtig)im HTML :im CSS:
  • 17. CSS3 Media Queries: Browser-Support http://caniuse.com/#feat=css-mediaqueries
  • 18. Noch mehr Details? http://abookapart.com
  • 19. Responsive design is not about mobile. Its notabout tablets. Its not about desktops. Its aboutThe Web. - Jeremey Keith (@adactio) 19
  • 20. Grak von Brad Frost(http://bradfrostweb.com)
  • 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. Experimentierfreudiger Kunde + Vertrauensvorschuss =happy Designer & Developer :) 22
  • 23. Analyse der Zielgruppen 23
  • 24. Bildquelle: Stalburg Theater (http://stalburg.de)
  • 25. Bildquelle: Stalburg Theater (http://stalburg.de)
  • 26. Zugriszahlen 26
  • 27. By 2013, mobile phones will overtake PCs asthe most common Web access deviceworldwide. Gartner (13.01.2010) 27
  • 28. Bereits 9,8 Mio. der deutschsprachigenBevlkerung nutzen das mobile Internet Allensbacher Computer- und Technik-Analyse 2011 28
  • 29. Mobile Zugrie Stalburg 2010: ca. 3.300 (ca. 2,5%) 2011: ca. 8.800 (ca. 6%) 2012: ??? Wichtig: Eigene Statistikauswertung! 29
  • 30. Strukturierte Inhalte und Strategie 30
  • 31. Strukturierte Inhalte und Strategie Content First!!! Strukturierung und Vereinfachung aller Inhalte Veranstaltungen, Termine, Schauspieler etc. Welche Infos werden bentigt? Design geht nur mit nalem Content! 31
  • 32. Das Konzept steht,jetzt geht es ans Design. 32
  • 33. Using photoshop/reworks for responsivedesign is like bringing a knife to a gunght Andy Clarke (@malarkey) 33
  • 34. Design im Browser Schnelle Resultate und real-life testing Vorteile von HTML5/CSS3 nutzen Prototyping kann schneller gehen Viele nderungen knnen schneller gemacht werden (Farben, Schriftgren etc.) Entscheidungen im Browser treen Designer + Webentwickler? 34
  • 35. Design Prozess bisher Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 36. Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 37. http://foundation.zurb.com
  • 38. Was zeichnet Foundation aus? Responsive Grid Formularelemente Buttons Navigationselemente Tabs Alerts, Labels, Tooltips etc. Seit Foundation 3: Sass/Compass 38
  • 39. Verschiedene Versionen des Designs 39
  • 40. Stalburg Theater (http://stalburg.de)
  • 41. Stalburg Theater (http://stalburg.de)
  • 42. Nchster Schritt:Produktionsreifer Code 52
  • 43. Frontend Entwicklung 53
  • 44. Design Prozess bisher Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 45. Responsive Design Prozess Pon Kattera (@pkattera) - Design Process in the Responsive Age
  • 46. Frontend Konzept Prototyp nachbauen?! Validen und sauberen Code produzieren Module und keine Seiten bauen Wiederverwendbaren Code 56
  • 47. XY Unbekannt sehr viele unbekannte Faktoren Bildschirmgre und -ausung Unterschiedliche Browser & -versionen Geschwindigkeit der Internetverbindung etc. Eine Website kann und muss nicht berall gleich aussehen! 57
  • 48. Navigationskonzept 58
  • 49. Stalburg Theater (http://stalburg.de)
  • 50. Stalburg Theater (http://stalburg.de)
  • 51. Navigation (smallscreen) Stalburg Theater (http://stalburg.de)
  • 52. Module bauenund keine Seiten 62
  • 53. Testdatei mit allen Modulen
  • 54. Video Frontend-Prototyp - Desktop Version
  • 55. Video Frontend-Prototyp - Mobile Version
  • 56. Bildquelle: http://www.ickr.com/photos/brad_frost/7387823392
  • 57. Open Device Lab // Helsinki http://opendevicelab.com/
  • 58. Open Device Lab // Frankfurt http://m.opendevicelab.net
  • 59. Umsetzung mit webEdition 69
  • 60. webEdition Parallel zur Designphase Klassen fr Struktur eingerichtet Kunde konnte dadurch Objekte anlegen SEO URL und Arbeitsbereiche eingerichtet Funktionsaufbau und Test-Templates ermglichte gleichzeitiges Arbeiten von Designer, Entwicklern und Redakteuren Problem WYSIWYG 70
  • 61. WYSIWYG unangepasst
  • ...