Responsive Design for Digital VU Month 2011

491 views

Published on

  • Be the first to comment

Responsive Design for Digital VU Month 2011

  1. 1. RESPONSIVE WEB DESIGNPractical Techniques for Building Device-Agnostic Sites Ryan Huber VUMC Strategic Marketing SOM Web Development
  2. 2. The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of the limitationof the printed page. We should embrace thefact that the web doesn’t have the sameconstraints, and design for this flexibility. Butfirst, we must “accept the ebb and flow ofthings.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
  3. 3. THE EBB AND FLOW http://www.flickr.com/photos/manager_2000/4862175587/
  4. 4. EBB.
  5. 5. FLOW.
  6. 6. MOBILE WEBCONSOLE WEB EBOOK WEBTABLET WEB IPHONE WEB RANDOM WEB ENABLED DEVICE WEB
  7. 7. WE’VE GOTTEN OURSELVES INTO THIS MESS.http://dandelionhaven.blogspot.com/2010_04_01_archive.html
  8. 8. IT’S TIME TO TAKE A FEW STEPS BACK.
  9. 9. The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of the limitationof the printed page. We should embracethe fact that the web doesn’t have thesame constraints, and design for thisflexibility. But first, we must “accept the ebband flow of things.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
  10. 10. ONE WEB
  11. 11. RESPONSIVE DESIGN
  12. 12. TWO PATHS
  13. 13. MOBILE FIRST
  14. 14. browser t capable est, leas mallS MOBILE FIRST
  15. 15. THE BASICSYou already know these.
  16. 16. 1. Meaningful HTML2. Valid HTML3. Separate content and style4. Quality content5. Lean as possible
  17. 17. FORGET 960.at least, for a moment...
  18. 18. PRETTY MARKUP
  19. 19. ADD BASIC STYLE
  20. 20. (Here comes the magic part...)
  21. 21. THIS PARTMAY BE ABIT NEW Brace yourself.
  22. 22. THE MEDIA QUERY
  23. 23. @media only screen and(min-width: 410px) { h1.sitetitle { float: left; }}
  24. 24. ... AN EXCEPTION YOU GUESSED IT...
  25. 25. <SCRIPT SRC="JS/RESPOND.JS"></SCRIPT> https://github.com/scottjehl/Respond
  26. 26. CHALLENGES
  27. 27. IMAGES
  28. 28. FLUID IMAGESHTTP://UNSTOPPABLEROBOTNINJA.COM/ENTRY/FLUID-IMAGES/
  29. 29. RESPONSIVE IMAGES http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image
  30. 30. INTERACTIVE CONTENT
  31. 31. DATATABLES HTTP://CSS-TRICKS.COM/9096-RESPONSIVE-DATA-TABLES/
  32. 32. CONTENT ORDERING
  33. 33. $(document).ready(function(){ $(window).resize(function() { w = $(this).width(); if(w>599){ // Do neat things. } }); $(window).resize();});
  34. 34. DEALING WITH LOW /POTENTIALLY EXPENSIVEBANDWIDTH
  35. 35. MOCKUPS / PROTOTYPING
  36. 36. HANDY TOOLS http://rodneymeunier.blogspot.com/2011/05/coloured-work-finally.html
  37. 37. MODERNIZR www.modernizr.com
  38. 38. MODERNIZR www.modernizr.com
  39. 39. <html class=" js flexbox canvas canvastext webgl no-touchgeolocation postmessage websqldatabase indexeddbhashchange history draganddrop websockets rgba hslamultiplebgs backgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimations csscolumnscssgradients cssreflections csstransforms csstransforms3dcsstransitions fontface generatedcontent video audiolocalstorage sessionstorage webworkers applicationcache svginlinesvg smil svgclippaths" lang="en">
  40. 40. BOILERPLATES
  41. 41. AND FINALLY...
  42. 42. THE ARGUMENT FOR A MOBILE SITE / APP
  43. 43. RYAN HUBERRYAN.HUBER@VANDERBILT.EDU GO DESIGN SOMETHING WONDERFUL.

×