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