Responsive design

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 StoreSaturday 25 June 2011

Ik ontwerp graag Maar noem het alsjeblief niet “creatief”Saturday 25 June 2011

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 2011

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 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

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. Illustration by Leonardo da VinciSaturday 25 June 2011

Hoe? Een van de mogelijkheden: Responsive design (Het alternatief: een aparte mobiele website)Saturday 25 June 2011

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

Bijvoor beeld Jos surft op zijn iPhone naar een website. De layout is aangepast aan de breedte van het scherm.Saturday 25 June 2011

Knoppen geschikt voor dikke vingers Opties weggestopt in uitklapmenu om op de inhoud te focussenSaturday 25 June 2011

‘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) 1024px Desktop Netbook iPad (landscape)Saturday 25 June 2011

De beste manier om het te snappen... ... is het zelf eens proberen. http://mediaqueri.es Photo by Mike Rohde - http://www.ﬂickr.com/photos/rohdesign/3534506648/Saturday 25 June 2011

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 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

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

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

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

Bijvoor beeld De mobiele website van Viget labs (dit is een aparte mobiele website)Saturday 25 June 2011

Vereenvoudigde navigatie Veronderstelling dat de bezoeker onderweg is en de weg wil wetenSaturday 25 June 2011

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

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

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

EVERYTHING OLD IS NEW AGAINSaturday 25 June 2011

THE GREAT 1998-2007 Liquid VS. Fixed DEBATESaturday 25 June 2011

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 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 typograﬁsche controle Responsive = The best of both worlds Uiteraard extra werk maar relatief doenbaarSaturday 25 June 2011

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 2011

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

Resources 2. Filosoﬁsch (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

http://localhost:8888	127
http://responsivewebdesign.diewy.be	100
http://www.diewy.be	82
http://dieterwyns.tumblr.com	24
http://diewy.be	16
http://192.168.2.102:8888	8
http://paper.li	7
http://www.slideshare.net	2
http://twitter.com	1
http://feeds.feedburner.com	1
https://twitter.com	1

Responsive design

by Johan Ronsse

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 369

Statistics

Responsive design Presentation Transcript