Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going Responsive for Developers

Going Responsive for Developers

Designing and creating a website that is suitable for both the desktop and mobile is a unique kind of challenge. In the past years we have seen the rise of Responsive Design; a methodology and mindset on how to make a website suitable for both platforms. During this talk we'll design a new website using Responsive Design and show what considerations and design decisions are to be encountered along the way.

Ba4801d2cbcf2e649f3aedbfcbfb3c36?s=128

Mike van Riel

July 19, 2012
Tweet

Transcript

  1. Going Responsive for Developers

  2. Mike van Riel @mvriel M e

  3. I'm not a Designer

  4. What is Responsive

  5. “Responsive design does not replace Mobile applications but empowers the

    user to experience your website from any device.” -- Me
  6. None
  7. Most time is spent thinking and not coding

  8. Primary aids ✔ Media queries (CSS) ✔ Grid layouts ✔

    Adapting images
  9. Let's learn by example

  10. Now

  11. Goals ✔ Mobile-enabled ✔ More focus on what matters ✔

    Ratings ✔ Events and scheduling ✔ Call for Papers ✔ Face-lift Did you know?
  12. Find inspiration

  13. Inspiration ✔ Look at the competition ✔ What can you

    improve on that? ✔ Look at existing websites ✔ http://mediaqueri.es/ ✔ http://templatemonster.com ✔ http://www.4templates.com/
  14. None
  15. None
  16. Think about your Grid 1. Divide into contextual rows 2.

    Identify content blocks per context 3. Divide into columns 4. Consider order of importance
  17. Example layouts

  18. “I did get Tom Hanks to say, Life is just

    a box of chocolates.” -- James Lipton
  19. Back to Joind.in

  20. Exercise

  21. Find the grid in the website http://joind.in

  22. Design

  23. Sketch your first tries • Makes grid tangible • Cheap

    try-outs • Quick • Tools • Pen and paper • iPad with Stylus Paper by 42
  24. “The best ideas come to you under the shower or

    on the toilet” -- Me
  25. Inkscape

  26. Demo This must go terribly terribly wrong

  27. Back to Joind.in II

  28. Use a CSS Framework

  29. Twitter Bootstrap 2 960gs Blueprint YUI and many more

  30. Each of these combine the experience of several designers

  31. Example: Twitter Bootstrap • Combines a CSS and JS Framework

    • Responsive design is a first citizen • Provides elements with strong symbiosis • Less bootstrapping yourself
  32. Needs HTML 5 <!DOCTYPE html> <html lang="en"> ... </html> <!DOCTYPE

    html> <html lang="en"> ... </html>
  33. Defining a row <div class="row"> ... ... </div> <div class="row">

    ... ... </div>
  34. Defining columns <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> <div

    class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> 12 Columns
  35. Nesting columns <div class="row"> <div class="span4"> <div class="row"> <div class="span1">...</div>

    <div class="span4">...</div> </div> </div> <div class="span8">...</div> </div> <div class="row"> <div class="span4"> <div class="row"> <div class="span1">...</div> <div class="span4">...</div> </div> </div> <div class="span8">...</div> </div>
  36. Two column example <div class="row"> <div class="span12">...</div> </div> <div class="row">

    <div class="span4">...</div> <div class="span8">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
  37. Three column example <div class="row"> <div class="span12">...</div> </div> <div class="row">

    <div class="span3">...</div> <div class="span6">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span3">...</div> <div class="span6">...</div> <div class="span3">...</div> </div>
  38. Modern example <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div

    class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> <div class="span3">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div>
  39. Sidebar example <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div

    class="span8"> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> </div> <div class="span4">...</div> </div> <div class="row"> <div class="span12">...</div> </div> <div class="row"> <div class="span8"> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span4">...</div> </div> </div> <div class="span4">...</div> </div>
  40. Responsiveness • Grids help to collapse elements • Think about

    which to throw away • Consider which elements should be dominant • Scrolling is good; clicking not so much
  41. More responsiveness • Do not forget to link to bootstrap-responsive.css!

    • Use media queries for conditional CSS @media (min­width: 980px) { … }
  42. Back to Joind.in III

  43. Back to Joind.in IV

  44. Is there time for a Demo?

  45. Time's up. (What a shame)

  46. http://london2012.live.symfony.com/ Symfony Live London 2012

  47. Questions? Y es, you! Please rate this talk http://joind.in/6711 Please

    rate this talk http://joind.in/6711
  48. ➔Navigation http://bradfrostweb.com/blog/web/responsive-nav-patterns/ ➔Layout types http://www.lukew.com/ff/entry.asp?1514 ➔Screen sizes http://spirelightmedia.com/responsive-design-device-resolution-reference ➔CSS Frameworks

    ➔ http://twitter.github.com/bootstrap/ ➔ http://960.gs/ ➔ http://blueprintcss.org/ ➔ http://yuilibrary.com/ ➔Examples ➔ http://responsive.is/ ➔ http://mediaqueri.es/ Resources Please rate this talk http://joind.in/6711 Please rate this talk http://joind.in/6711