Back to the lab again                        Barcamp Gent #4 - 25 juni 2011Saturday 25 June 2011
Johan Ronsse     Mijn naam is         JohanSaturday 25 June 2011
Ik werk voor mijn kleine                        freelance design studio:                            Wolf’s Little StoreSat...
Ik ontwerp graag                                      Maar noem het                                      alsjeblief niet “...
Ik speel al eens eens            graag een spelletjeSaturday 25 June 2011
Of schrijf een blogpostSaturday 25 June 2011
Vandaag ga ik het hebben over                            Responsive                            webdesignSaturday 25 June 2...
2   Opmerkelijke                            statistiekenSaturday 25 June 2011
1                 Phil Schiller zegt:            “ 73% of our Mac sales              are notebooks.”Saturday 25 June 2011
2          Eric Schmidt zegt:                        “ One of the interesting estimates is                         that ar...
De wereld              verandert snel...Saturday 25 June 2011
en alles kan                        tegenwoordig                        op internetSaturday 25 June 2011
En dus moet uw site                        moet daar rekening                        mee houden.                          ...
Hoe?                                Een van de mogelijkheden:                 Responsive design                         (H...
Meet Jos.                        • 52 jaar                        • Werkt in den bouw maar                        wil webd...
Bijvoor                beeld                 Jos surft op zijn                 iPhone naar een                 website. De...
Knoppen geschikt                 voor dikke vingers                 Opties weggestopt                 in uitklapmenu om   ...
‘s Avonds kijkt Jos     *Dit is dezelfde website        nog eens naar de        jobs op zijn laptop*:Saturday 25 June 2011
Dezelfde website:      320px      Smartphone                        768px                        iPad (portrait)          ...
De beste manier om het te snappen...                              ... is het zelf eens proberen.                          ...
WARNING! TECHNICAL PART!                 Hoe moet je dat                 dan maken?Saturday 25 June 2011
WARNING! TECHNICAL PART!                 Media                 queries                 Een media query is een CSS techniek...
WARNING! TECHNICAL PART!                 Media                 queries                 Deze parameter kan dus ook de breed...
Op deze manier bouwen we een site op:                 WARNING! TECHNICAL PART!                 @media all {               ...
Wat kan je weten?                  • De schermbreedte                 Wat niet?                  • Waarom de bezoeker de s...
Bijvoor                beeld                 De mobiele                 website van Viget                 labs (dit is een...
Vereenvoudigde                 navigatie         Veronderstelling         dat de bezoeker         onderweg is en de       ...
Schermbreedte bepaalt de              context van de gebruiker niet               E.g. een smartphone gebruiker ligt missc...
Mobiele sites die         een versimpeling         zijn van de echte         site zijn verwarrend                Ik wil he...
Aparte mobiele site:             waarom nog de moeite          Goed                                       voorbeeld       ...
EVERYTHING                 OLD IS NEW                 AGAINSaturday 25 June 2011
THE GREAT 1998-2007                        Liquid   VS.   Fixed                                           DEBATESaturday 2...
Flickr organizer                        Appropriate liquid designSaturday 25 June 2011
Mint   Responsive before                               the book was writtenSaturday 25 June 2011
Samenvatting              Fixed              Alle controle: print designers like this              Maar: veelal achterhaal...
Juist toen je dacht alles te weten:                        Back to the lab againSaturday 25 June 2011
Vragen?Saturday 25 June 2011
Bedankt!                        http://www.wolfslittlestore.be                        @wolfr_ op TwitterSaturday 25 June 2...
Resources      1. Technisch (Hoe doe ik dit nu?)     http://mediaqueri.es/ : gallerij met responsive designs     http://ww...
Resources      2. Filosofisch (waarom geen aparte mobiele site? Hoe zit het met mobiel      tegenwoordig?)       Yiibu pres...
Upcoming SlideShare
Loading in …5
×

Responsive design

6,305 views

Published on

Barcamp Gent #4 presentation

Published in: Technology, Business
1 Comment
27 Likes
Statistics
Notes
No Downloads
Views
Total views
6,305
On SlideShare
0
From Embeds
0
Number of Embeds
406
Actions
Shares
0
Downloads
194
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. Back to the lab again Barcamp Gent #4 - 25 juni 2011Saturday 25 June 2011
  2. 2. Johan Ronsse Mijn naam is JohanSaturday 25 June 2011
  3. 3. Ik werk voor mijn kleine freelance design studio: Wolf’s Little StoreSaturday 25 June 2011
  4. 4. Ik ontwerp graag Maar noem het alsjeblief niet “creatief”Saturday 25 June 2011
  5. 5. Ik speel al eens eens graag een spelletjeSaturday 25 June 2011
  6. 6. Of schrijf een blogpostSaturday 25 June 2011
  7. 7. Vandaag ga ik het hebben over Responsive webdesignSaturday 25 June 2011
  8. 8. 2 Opmerkelijke statistiekenSaturday 25 June 2011
  9. 9. 1 Phil Schiller zegt: “ 73% of our Mac sales are notebooks.”Saturday 25 June 2011
  10. 10. 2 Eric Schmidt zegt: “ One of the interesting estimates is that are are about 35 billion devices connected to the internet. Soon, there will be so many that we’ll stop counting.”Saturday 25 June 2011
  11. 11. De wereld verandert snel...Saturday 25 June 2011
  12. 12. en alles kan tegenwoordig op internetSaturday 25 June 2011
  13. 13. En dus moet uw site moet daar rekening mee houden. Illustration by Leonardo da VinciSaturday 25 June 2011
  14. 14. Hoe? Een van de mogelijkheden: Responsive design (Het alternatief: een aparte mobiele website)Saturday 25 June 2011
  15. 15. Meet Jos. • 52 jaar • Werkt in den bouw maar wil webdesigner worden • Houdt van zijn vrouw, iPhone en iPad Face intentionally blurred for privacy reasonsSaturday 25 June 2011
  16. 16. Bijvoor beeld Jos surft op zijn iPhone naar een website. De layout is aangepast aan de breedte van het scherm.Saturday 25 June 2011
  17. 17. Knoppen geschikt voor dikke vingers Opties weggestopt in uitklapmenu om op de inhoud te focussenSaturday 25 June 2011
  18. 18. ‘s Avonds kijkt Jos *Dit is dezelfde website nog eens naar de jobs op zijn laptop*:Saturday 25 June 2011
  19. 19. Dezelfde website: 320px Smartphone 768px iPad (portrait) 1024px Desktop Netbook iPad (landscape)Saturday 25 June 2011
  20. 20. De beste manier om het te snappen... ... is het zelf eens proberen. http://mediaqueri.es Photo by Mike Rohde - http://www.flickr.com/photos/rohdesign/3534506648/Saturday 25 June 2011
  21. 21. WARNING! TECHNICAL PART! Hoe moet je dat dan maken?Saturday 25 June 2011
  22. 22. WARNING! TECHNICAL PART! Media queries Een media query is een CSS techniek om layout te bepalen op basis van een parameter, in dit geval dat het medium “screen” is. @media screen { body { font-family: sans-serif; } }Saturday 25 June 2011
  23. 23. WARNING! TECHNICAL PART! Media queries Deze parameter kan dus ook de breedte zijn van je scherm: @media (min-width:768px) { img { width: 100%; } }Saturday 25 June 2011
  24. 24. Op deze manier bouwen we een site op: WARNING! TECHNICAL PART! @media all { /* CSS regels voor alles, de @media query kan je hier weglaten */ } @media (min-width:320px) { /* CSS regels voor smartphones*/ } @media (min-width:768px) { /* CSS regels voor tablets */ } @media (min-width:960px) { /* CSS regels voor desktop*/ }Saturday 25 June 2011
  25. 25. Wat kan je weten? • De schermbreedte Wat niet? • Waarom de bezoeker de site bezoekt • Welk toestel hij gebruikt • Of hij een snelle internetverbinding heeft of nietSaturday 25 June 2011
  26. 26. Bijvoor beeld De mobiele website van Viget labs (dit is een aparte mobiele website)Saturday 25 June 2011
  27. 27. Vereenvoudigde navigatie Veronderstelling dat de bezoeker onderweg is en de weg wil wetenSaturday 25 June 2011
  28. 28. Schermbreedte bepaalt de context van de gebruiker niet E.g. een smartphone gebruiker ligt misschien gezellig te surfen voor het slapengaan in plaats van “onderweg” te zijn. (Het kan echter wel)Saturday 25 June 2011
  29. 29. Mobiele sites die een versimpeling zijn van de echte site zijn verwarrend Ik wil herladen, valt dat nu onder mobiel of niet?Saturday 25 June 2011
  30. 30. Aparte mobiele site: waarom nog de moeite Goed voorbeeld doen? 1 woord: Performance 1 probleem met responsive site: de site blijft even zwaar om te laden als desktop versie*. *Ik besef dat dit een beetje kort door de bocht isSaturday 25 June 2011
  31. 31. EVERYTHING OLD IS NEW AGAINSaturday 25 June 2011
  32. 32. THE GREAT 1998-2007 Liquid VS. Fixed DEBATESaturday 25 June 2011
  33. 33. Flickr organizer Appropriate liquid designSaturday 25 June 2011
  34. 34. Mint Responsive before the book was writtenSaturday 25 June 2011
  35. 35. Samenvatting Fixed Alle controle: print designers like this Maar: veelal achterhaald. Je website wordt op veel verschillende devices bekeken. Fluid Bruikbaarder maar de hel om goed te krijgen in IE, potentieel heel lelijk (op grote schermen) extra werk, geen typografische controle Responsive = The best of both worlds Uiteraard extra werk maar relatief doenbaarSaturday 25 June 2011
  36. 36. Juist toen je dacht alles te weten: Back to the lab againSaturday 25 June 2011
  37. 37. Vragen?Saturday 25 June 2011
  38. 38. Bedankt! http://www.wolfslittlestore.be @wolfr_ op TwitterSaturday 25 June 2011
  39. 39. Resources 1. Technisch (Hoe doe ik dit nu?) http://mediaqueri.es/ : gallerij met responsive designs http://www.alistapart.com/articles/responsive-web-design/ : het artikel dat alles startte Boek: http://www.abookapart.com/products/responsive-web-design : hier is nu een boek over http://www.alistapart.com/articles/fluid-images/ : stuk uit het boek Old: http://unstoppablerobotninja.com/entry/fluid-images/ : de post waar het mee begon voor fluid images https://github.com/scottjehl/Respond/ : Javascript fix om media queries te doen werken in IE http://filamentgroup.com/examples/responsive-images/ http://webdesignerwall.com/tutorials/css-elastic-videos 1B. Technisch - performance http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ http://warpspire.com/talks/responsive/Saturday 25 June 2011
  40. 40. Resources 2. Filosofisch (waarom geen aparte mobiele site? Hoe zit het met mobiel tegenwoordig?) Yiibu presentations on slideshare: http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu http://www.slideshare.net/yiibu/the-trouble-with-context http://www.andybudd.com/archives/2011/06/dose_screen_size_really_matter/ Geschiedenis responsive design: http://adactio.com/journal/4593/ 3. Belgisch http://www.thehotseat.be/2/blog/post/sleepstreet-mijn-eerste-responsive-ontwerpSaturday 25 June 2011

×