• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive design
 

Responsive design

on

  • 5,956 views

Barcamp Gent #4 presentation

Barcamp Gent #4 presentation

Statistics

Views

Total Views
5,956
Views on SlideShare
5,586
Embed Views
370

Actions

Likes
27
Downloads
192
Comments
1

11 Embeds 370

http://localhost:8888 127
http://responsivewebdesign.diewy.be 100
http://www.diewy.be 82
http://dieterwyns.tumblr.com 25
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive design Responsive design Presentation Transcript

    • 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.flickr.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 typografische 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. 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-ontwerpSaturday 25 June 2011