Start small, think big - Responsive Web Design

2.589 Aufrufe

Veröffentlicht am

Slides from my talk at World Usability Day 2012 in Graz, Austria

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.589
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
38
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Start small, think big - Responsive Web Design

  1. 1. Start Small Think BigResponsive Web DesignWUD 12Thomas Piribauer
  2. 2. CEO / UXDintuio User ExperienceConsulting GmbHTwitter@tpiribauerWebhttp://intuio.at
  3. 3. Stmk
  4. 4. Rockstar
  5. 5. Erfinder
  6. 6. not me
  7. 7. Mensch Maschine Kommunikation
  8. 8. usable
  9. 9. experience
  10. 10. Ex Us pe er rie nc e !
  11. 11. Amsterdam Schiphol
  12. 12. - 80%
  13. 13. Spaß
  14. 14. ”You cant just askcustomers what theywant and then try togive that to them.By the time you get itbuilt, theyll wantsomething new.
  15. 15. viele© 2012 www.intuio.at
  16. 16. jederzeit
  17. 17. überall
  18. 18. jede(r)
  19. 19. 2000 201315001000 500 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Internetnutzer Desktop Internetnutzer http://www.mequoda.com/articles/new-media-trends/web-usage-prediction-when-mobile-and-desktop-collide/
  20. 20. 2015There will be one mobile phone for every person on earth. http://bdconf.com/docs/convince_your_boss.pdf
  21. 21. 1. Nichts
  22. 22. 1. Nichtsa1.net oebb.at omv.com orf.at
  23. 23. 81%aller österreichischen Unternehmenhalten die mobile Nutzbarkeit ihrer Website für wichtig Fonda 2010
  24. 24. 8%aller österreichischen Unternehmen haben eine mobile Website Fonda 2010
  25. 25. Eine App fü iPad 1,2,3, 2. Apps rs Eine App fü r alle Mini Android Tab lets rEine App fü Symbian Eine sSmartphone Blackberry App ü r pp f Ei ne A ws W indo Eine iPhone s Ph one App Eine Android App
  26. 26. 26%150x täglichschaut eine Person im 48% Wie häufig werden Apps genutzt?Durchschnitt auf ihr Handy.Was sieht sie sich an? 26%Selten eine App. App wird nur 1 mal genutzt68% aller Smartphone-Besitzer App wird 11 mal oder mehr genutztnutzen nur 5 oder weniger Apps App wird nur 2-10 mal genutztregelmäßig. http://www.lukew.com/ff/entry.asp?1501
  27. 27. Mobile Webseite App für iPhone 12% App für Android App für Blackberry14% 60% 18,9%14% 37,9% 21,6% Mobile Webseite SMS Service App für iPhone 21,6% App für Blackberry http://www.lukew.com/ff/entry.asp?1413
  28. 28. @jamespearce #qconsf 07.11.2012 https://twitter.com/firt/status/266278622376099841
  29. 29. Von allen Smartphone Nutzernhaben empfehlen nehmen95% 50% 79%auf ihrem Unternehmen mit Werbung aufTelefon nach einem schlechten mobileneinem Produkt mobilen Webseiten wahr,oder einer Webauftritt nicht jedoch nur 38%Dienstleistung an Freunde in einer App.gesucht. weiter. Google Studie zusammen mit Ipsos OTX MediaCT, Mai 2012 Compuware "What Users Want from Mobile" 2011
  30. 30. 3. Sitesmobil.derstandard.at mobil.zeit.de mobil.post.at m.sparkasse.at
  31. 31. 3. Sites stattde ssen jedoch nicht wird d ie optimiert für herköm mlicheoptimiert für Tablets Webse iteS martphones angez eigt Zwei versch iedene Webse iten mobil.post.at mobil.post.at ≠ post.at
  32. 32. 3. Sites zeit.de spiegel.de
  33. 33. 3. Sites zeit.de m.spiegel.de
  34. 34. ...und eigen tlich Fürfür alle ande Des ren kto Geräte auch ps . abe r a uch Tab für lets und für Smartphones
  35. 35. Eine Webseite,
  36. 36. die sich jeder Größe anpassthttp://www.bostonglobe.com
  37. 37. und dabei auf jedemDisplay gut aussieht. Nur ei ne Webse ite!bostonglobe = bostonglobe = bostonglobe .com .com .com
  38. 38. So wie dieseclearairchallenge.com dribbble.com
  39. 39. und natürlichunsere eigene.
  40. 40. Only the true Messiah denies His divinity
  41. 41. 1. Users First
  42. 42. 2. Content First
  43. 43. ”Content precedes design.Design in the absence ofcontent is not design,it‘s decoration. — Jeffrey Zeldman
  44. 44. 3. Mobile First
  45. 45. Client, sei flexibelCSS Mediaqueries / Flexibles LayoutGrößere Anpassungen werden an definierten Breiten vorgenommenFluid ImagesBilder füllen den maximal verfügbaren PlatzResponsive TypographySchriften werden relativ in em oder rem definiertund für alle Displaygrößen optimal angepasst
  46. 46. ”Wireframes do not workanymore. — Mark Boulton @ Fronteers 12
  47. 47. Design WorkflowAlles auf PapierDie Content- und Layout-Struktur mit möglichen Breakpoints wird grobgezeichnet, am besten mit Papier und Bleistift oder auf WhiteboardsMobile-First im BrowserSemantische HTML-Struktur, Echtdaten und keine Lorem Ipsums,CSS Stile und Animationen, Interaktivität mit JavaScript / jQueryStyle-Tiling im GrafikprogrammDer visuelle Stil für die verwendeten Elemente wird in einemGrafikprogramm gestaltet und schrittweise via CSS in den HTML-Prototyp integriert
  48. 48. 4. Performance First
  49. 49. 60%< 3 sec. Compuware "What Users Want from Mobile" 2011
  50. 50. Server, sei wachsamFeature Detection / CookiesDer Server identifiziert die Features von Gerät und Browser z.B. via DeviceAtlasScaled MediaBilder werden entsprechend der erwarteten Bildschirmgröße skaliert und dann erstverschicktCustom HTML, CSS & JavaScriptDer Server liefert die notwendige HTML Struktur und nur tatsächlich benötigte CSSund JavaScript Dateien
  51. 51. Tech Slide SMACSS
  52. 52. Stayfuture friendlyhttp://futurefriend.ly
  53. 53. Stayfuture friendlyhttp://futurefriend.ly
  54. 54. Say hi. @intuio rib auer@tpi @xon1c
  55. 55. Danke.Pr es en ta tio n Sl id es Sleeping Audience Members © Jessica Hagy
  56. 56. Image Creditshttp://www.mequoda.com/wp-content/uploads/ui/2testing.gifhttp://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpghttp://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpghttp://www.extremetech.com/wp-content/uploads/2012/10/felix-baumgartner-standing-in-his-capsule-about-to-dive.jpghttp://markgorman.files.wordpress.com/2008/07/who-are-they.gifhttp://www.shugarecords.com/Images/Products/Large/429506b6-6687-490a-9a9e-26f41ec6a660-0.JPGhttp://stigmalitia.com/blog/wp-content/uploads/2011/09/nevermind-then1.jpghttp://tabtimes.com/sites/default/files/jakob_composite%20(1).jpghttp://www.leadership-with-you.com/images/stevejobs.jpghttp://www.urinal.net/schiphol/Slovenia015.med.jpghttp://www.urinalfly.com/images/easy.gifhttp://ecx.images-amazon.com/images/I/51TEZZT9YQL._SL500_AA300_.jpghttp://www.flickr.com/photos/brad_frost/7387560446/sizes/l/in/photostream/http://www.flickr.com/photos/naturestenacity/7290398164/sizes/l/in/photostream/http://www.flickr.com/photos/cozyta/6646234513/sizes/l/in/photostream/http://i.telegraph.co.uk/multimedia/archive/02023/followers_2023036i.jpghttp://www.flickr.com/photos/9038210@N07/2088573006/sizes/z/in/photostream/http://images4.fanpop.com/image/photos/23400000/KISS-kiss-guitarists-23448774-1024-768.jpghttp://smashed.by/davidjoneshttp://www.flickr.com/photos/lyza/49545547http://www.flickr.com/photos/hermida/5442243540/sizes/l/in/photostream/http://www.touchtip.com/iphone/quickly-email-a-task-using-iphone-highrise/http://rallyhaus.com/the-cars-of-agent-007-james-bondhttp://www.flickr.com/photos/bluesoft/4765555124/sizes/l/in/photostream//http://www.flickr.com/photos/henrybloomfield/6772345145/sizes/l/in/photostream/http://bukk.it/obama.png

×