Responsive design
-
Upload
johan-ronsse -
Category
Technology
-
view
5.516 -
download
1
description
Transcript of Responsive design
Back to the lab againBarcamp Gent #4 - 25 juni 2011
Saturday 25 June 2011
Johan RonsseMijn naam is
JohanSaturday 25 June 2011
Ik werk voor mijn kleine freelance design studio:
Wolf’s Little Store
Saturday 25 June 2011
Ik ontwerp graag
Maar noem het alsjeblief niet “creatief”
Saturday 25 June 2011
Ik speel al eens eens graag een spelletje
Saturday 25 June 2011
Of schrijf een blogpost
Saturday 25 June 2011
Responsivewebdesign
Vandaag ga ik het hebben over
Saturday 25 June 2011
2 Opmerkelijke statistieken
Saturday 25 June 2011
73% of our Mac sales are notebooks.”
“Phil Schiller zegt:
1
Saturday 25 June 2011
2One 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.”
Eric Schmidt zegt:
“
Saturday 25 June 2011
De wereld verandert snel...
Saturday 25 June 2011
en alles kan tegenwoordig op internet
Saturday 25 June 2011
En dus moet uw site moet daar rekening mee houden.
Illustration by Leonardo da Vinci
Saturday 25 June 2011
Responsive designHoe?
Een van de mogelijkheden:
(Het alternatief: een apartemobiele 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 reasons
Saturday 25 June 2011
Jos surft op zijn iPhone naar een website. De layout is aangepast aan de breedte van het scherm.
Bijvoorbeeld
Saturday 25 June 2011
Knoppen geschikt voor dikke vingers
Opties weggestopt in uitklapmenu om op de inhoud te focussen
Saturday 25 June 2011
‘s Avonds kijkt Jos nog eens naar de jobs op zijn laptop*:
*Dit is dezelfde website
Saturday 25 June 2011
Dezelfde website:
320px 768px 1024pxSmartphone iPad (portrait)
NetbookDesktopiPad (landscape)
Saturday 25 June 2011
Photo by Mike Rohde - http://www.flickr.com/photos/rohdesign/3534506648/
... is het zelf eens proberen.
http://mediaqueri.es
De beste manier om het te snappen...
Saturday 25 June 2011
Hoe moet je dat dan maken?
WARNING! TECHNICAL PART!
Saturday 25 June 2011
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; }}
Media queries
WARNING! TECHNICAL PART!
Saturday 25 June 2011
Deze parameter kan dus ook de breedte zijn van je scherm:
@media (min-width:768px) { img { width: 100%; }}
WARNING! TECHNICAL PART!
Media queries
Saturday 25 June 2011
Op deze manier bouwen we een site op:
@media (min-width:960px) { /* CSS regels voor desktop*/}
WARNING! TECHNICAL PART!
@media (min-width:768px) { /* CSS regels voor tablets */}
@media (min-width:320px) { /* CSS regels voor smartphones*/}
@media all { /* CSS regels voor alles, de @media query kan je hier weglaten */}
Saturday 25 June 2011
Wat niet?
• De schermbreedte
• Waarom de bezoeker de site bezoekt• Welk toestel hij gebruikt• Of hij een snelle internetverbinding heeft of niet
Wat kan je weten?
Saturday 25 June 2011
BijvoorbeeldDe mobiele website van Viget labs (dit is een aparte mobiele website)
Saturday 25 June 2011
Veronderstelling dat de bezoeker onderweg is en de weg wil weten
Vereenvoudigde navigatie
Saturday 25 June 2011
Schermbreedte bepaalt de context van de gebruiker nietE.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
Performance1 woord:
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
Aparte mobiele site: waarom nog de moeite doen?
Goedvoorbeeld
Saturday 25 June 2011
EVERYTHINGOLD IS NEWAGAIN
Saturday 25 June 2011
LiquidTHE GREAT
VS. FixedDEBATE
1998-2007
Saturday 25 June 2011
Flickr organizerAppropriate liquid design
Saturday 25 June 2011
Mint Responsive before the book was written
Saturday 25 June 2011
Fluid
Alle controle: print designers like thisMaar: veelal achterhaald. Je website wordt op veel verschillende devices bekeken.
Bruikbaarder maar de hel om goed te krijgen in IE, potentieel heel lelijk (op grote schermen) extra werk, geen typografische controle
Fixed
Responsive= The best of both worldsUiteraard extra werk maar relatief doenbaar
Samenvatting
Saturday 25 June 2011
Back to the lab againJuist toen je dacht alles te weten:
Saturday 25 June 2011
Vragen?
Saturday 25 June 2011
Bedankt!http://www.wolfslittlestore.be
@wolfr_ op Twitter
Saturday 25 June 2011
Resources
http://mediaqueri.es/ : gallerij met responsive designshttp://www.alistapart.com/articles/responsive-web-design/ : het artikel dat alles startteBoek: http://www.abookapart.com/products/responsive-web-design : hier is nu een boek over
http://www.alistapart.com/articles/fluid-images/ : stuk uit het boekOld: 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 IEhttp://filamentgroup.com/examples/responsive-images/http://webdesignerwall.com/tutorials/css-elastic-videos
http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/http://warpspire.com/talks/responsive/
1. Technisch (Hoe doe ik dit nu?)
1B. Technisch - performance
Saturday 25 June 2011
Yiibu presentations on slideshare:http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibuhttp://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/
2. Filosofisch (waarom geen aparte mobiele site? Hoe zit het met mobiel tegenwoordig?)
http://www.thehotseat.be/2/blog/post/sleepstreet-mijn-eerste-responsive-ontwerp
3. Belgisch
Resources
Saturday 25 June 2011