7. Vandaag ga ik het hebben over
Responsive
webdesign
Saturday 25 June 2011
8. 2 Opmerkelijke
statistieken
Saturday 25 June 2011
9. 1
Phil Schiller zegt:
“ 73% of our Mac sales
are notebooks.”
Saturday 25 June 2011
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. De wereld
verandert snel...
Saturday 25 June 2011
12. en alles kan
tegenwoordig
op internet
Saturday 25 June 2011
13. En dus moet uw site
moet daar rekening
mee houden.
Illustration by Leonardo da Vinci
Saturday 25 June 2011
14. Hoe?
Een van de mogelijkheden:
Responsive design
(Het alternatief: een aparte
mobiele website)
Saturday 25 June 2011
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 reasons
Saturday 25 June 2011
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. Knoppen geschikt
voor dikke vingers
Opties weggestopt
in uitklapmenu om
op de inhoud te
focussen
Saturday 25 June 2011
18. ‘s Avonds kijkt Jos *Dit is dezelfde website
nog eens naar de
jobs op zijn laptop*:
Saturday 25 June 2011
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
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. 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. 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. 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 niet
Saturday 25 June 2011
26. Bijvoor
beeld
De mobiele
website van Viget
labs (dit is een
aparte mobiele
website)
Saturday 25 June 2011
27. Vereenvoudigde
navigatie
Veronderstelling
dat de bezoeker
onderweg is en de
weg wil weten
Saturday 25 June 2011
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. 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. 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 is
Saturday 25 June 2011
31. EVERYTHING
OLD IS NEW
AGAIN
Saturday 25 June 2011
33. Flickr organizer
Appropriate liquid design
Saturday 25 June 2011
34. Mint Responsive before
the book was written
Saturday 25 June 2011
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 doenbaar
Saturday 25 June 2011
36. Juist toen je dacht alles te weten:
Back to the lab again
Saturday 25 June 2011
38. Bedankt!
http://www.wolfslittlestore.be
@wolfr_ op Twitter
Saturday 25 June 2011
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. 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-ontwerp
Saturday 25 June 2011