Responsive Web Design - WordCamp Grand Rapids

WordCamp Grand Rapids 2012 - Responsive Web Design.

Transcript

1. responsive web design
   Brad Parbs
   320px and Up!
   Friday, August 17, 12
   

   View Slide

2. who am i?
   brad@bradparbs.com
   @bradparbs
   bradparbs.com
   internet rockstar; Brad parbs
   github.com/bradp
   find me online
   Friday, August 17, 12
   

   View Slide

3. why do
   we need
   responsive
   web design?
   Friday, August 17, 12
   

   View Slide

4. show me the stats!
   Friday, August 17, 12
   

   View Slide

5. “There are
   almost 1.2
   billion mobile
   Web users in
   the world.”
   Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1
   Friday, August 17, 12
   

   View Slide

6. “There are
   almost 1.2
   billion mobile
   Web users in
   the world.”
   Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1
   (That’s 17% of the World’s population.)
   Friday, August 17, 12
   

   View Slide

7. Just in the
   united states,
   25% of people
   are mobile-only
   Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1
   Friday, August 17, 12
   

   View Slide

8. Just in the
   united states,
   25% of people
   are mobile-only
   Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1
   25%
   Friday, August 17, 12
   

   View Slide

9. your users might use any number of devices
   Friday, August 17, 12
   

   View Slide

10. a little history
    table-based layouts (eww)
    absolute positioning with css
    fluid grid systems
    Adaptive/responsive design
    mobile first / retina ready responsive design
    Friday, August 17, 12
    

    View Slide

11. so what exactly is responsive design?
    1. flexible grid system
    2. flexible images/media
    3. media queries!
    Friday, August 17, 12
    

    View Slide

12. flexible grid system
    Text
    breaks the site
    layout into
    modules that can
    be reformatted
    and moved
    around
    sized using ems
    or percentages so
    we’re not locked
    into a fixed pixel-
    width
    Friday, August 17, 12
    

    View Slide

13. flexible images
    the secret:
    also maybe
    but you could also
    Friday, August 17, 12
    

    View Slide

14. but what about retina devices?
    http://brrad.com/retinaimages
    you have two different size images,
    check who is viewing, if they are a
    retina device, replace the images with
    some javascript magic, basically
    follow zippykid’s guide!
    Friday, August 17, 12
    

    View Slide

15. media queries
    Friday, August 17, 12
    

    View Slide

16. Friday, August 17, 12
    

    View Slide

17. general tips
    if it doesnt fit on a small device, and you
    want to hide it, do you even need it?
    navigation works great as a dropdown on
    small devices
    make everything beautiful and amazing
    Friday, August 17, 12
    

    View Slide

18. mobile first or
    desktop first?
    progressive enhancement or
    graceful degredation?
    what we actually mean:
    Friday, August 17, 12
    

    View Slide

19. resources
    twitter bootstrap
    http://twitter.github.com/bootstrap
    zurb foundation
    http://foundation.zurb.com
    media query snippets
    http://brrad.com/queries
    bones - responsive wordpress framework
    http://themble.com/bones/
    Reverie - responsive wordpress framework
    http://themefortress.com/reverie/
    Friday, August 17, 12
    

    View Slide

20. http://html9responsiveboilerstrapjs.com/
    H9RBS.js (v0.0001) is a flexible, dependency-
    free, lightweight, device-agnostic, modular,
    baked-in, component framework MVC
    library shoelacestrap to help you
    kickstart your responsive CSS-based app
    architecture backbone kitchensink
    tweetybirds.
    Friday, August 17, 12
    

    View Slide

21. questions?
    Friday, August 17, 12
    

    View Slide

22. slides: brrad.com/wcgrslides
    questions: tweet me - @bradparbs
    need joomla work or marketing?
    check out SavvyPAnda.com
    Friday, August 17, 12
    

    View Slide