Responsive design

40
Back to the lab again Barcamp Gent #4 - 25 juni 2011 Saturday 25 June 2011

description

Barcamp Gent #4 presentation

Transcript of Responsive design

Page 1: Responsive design

Back to the lab againBarcamp Gent #4 - 25 juni 2011

Saturday 25 June 2011

Page 2: Responsive design

Johan RonsseMijn naam is

JohanSaturday 25 June 2011

Page 3: Responsive design

Ik werk voor mijn kleine freelance design studio:

Wolf’s Little Store

Saturday 25 June 2011

Page 4: Responsive design

Ik ontwerp graag

Maar noem het alsjeblief niet “creatief”

Saturday 25 June 2011

Page 5: Responsive design

Ik speel al eens eens graag een spelletje

Saturday 25 June 2011

Page 6: Responsive design

Of schrijf een blogpost

Saturday 25 June 2011

Page 7: Responsive design

Responsivewebdesign

Vandaag ga ik het hebben over

Saturday 25 June 2011

Page 8: Responsive design

2 Opmerkelijke statistieken

Saturday 25 June 2011

Page 9: Responsive design

73% of our Mac sales are notebooks.”

“Phil Schiller zegt:

1

Saturday 25 June 2011

Page 10: Responsive design

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

Page 11: Responsive design

De wereld verandert snel...

Saturday 25 June 2011

Page 12: Responsive design

en alles kan tegenwoordig op internet

Saturday 25 June 2011

Page 13: Responsive design

En dus moet uw site moet daar rekening mee houden.

Illustration by Leonardo da Vinci

Saturday 25 June 2011

Page 14: Responsive design

Responsive designHoe?

Een van de mogelijkheden:

(Het alternatief: een apartemobiele website)

Saturday 25 June 2011

Page 15: Responsive design

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

Page 16: Responsive design

Jos surft op zijn iPhone naar een website. De layout is aangepast aan de breedte van het scherm.

Bijvoorbeeld

Saturday 25 June 2011

Page 17: Responsive design

Knoppen geschikt voor dikke vingers

Opties weggestopt in uitklapmenu om op de inhoud te focussen

Saturday 25 June 2011

Page 18: Responsive design

‘s Avonds kijkt Jos nog eens naar de jobs op zijn laptop*:

*Dit is dezelfde website

Saturday 25 June 2011

Page 19: Responsive design

Dezelfde website:

320px 768px 1024pxSmartphone iPad (portrait)

NetbookDesktopiPad (landscape)

Saturday 25 June 2011

Page 20: Responsive design

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

Page 21: Responsive design

Hoe moet je dat dan maken?

WARNING! TECHNICAL PART!

Saturday 25 June 2011

Page 22: Responsive design

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

Page 23: Responsive design

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

Page 24: Responsive design

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

Page 25: Responsive design

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

Page 26: Responsive design

BijvoorbeeldDe mobiele website van Viget labs (dit is een aparte mobiele website)

Saturday 25 June 2011

Page 27: Responsive design

Veronderstelling dat de bezoeker onderweg is en de weg wil weten

Vereenvoudigde navigatie

Saturday 25 June 2011

Page 28: Responsive design

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

Page 29: Responsive design

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

Page 30: Responsive design

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

Page 31: Responsive design

EVERYTHINGOLD IS NEWAGAIN

Saturday 25 June 2011

Page 32: Responsive design

LiquidTHE GREAT

VS. FixedDEBATE

1998-2007

Saturday 25 June 2011

Page 33: Responsive design

Flickr organizerAppropriate liquid design

Saturday 25 June 2011

Page 34: Responsive design

Mint Responsive before the book was written

Saturday 25 June 2011

Page 35: Responsive design

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

Page 36: Responsive design

Back to the lab againJuist toen je dacht alles te weten:

Saturday 25 June 2011

Page 37: Responsive design

Vragen?

Saturday 25 June 2011

Page 39: Responsive design

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

Page 40: Responsive design

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