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.

Transcript

1. Going Responsive
   for Developers
   

   View Slide

2. Mike van Riel
   @mvriel
   M
   e
   

   View Slide

3. I'm not a
   Designer
   

   View Slide

4. What is
   Responsive
   

   View Slide

5. “Responsive design does not
   replace Mobile applications but
   empowers the user to experience
   your website from any device.”
   -- Me
   

   View Slide

6. View Slide

7. Most time is spent
   thinking
   and not coding
   

   View Slide

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

   View Slide

9. Let's learn by example
   

   View Slide

10. Now
    

    View Slide

11. Goals
    ✔ Mobile-enabled
    ✔ More focus on what matters
    ✔ Ratings
    ✔ Events and scheduling
    ✔ Call for Papers
    ✔ Face-lift
    Did you know?
    

    View Slide

12. Find
    inspiration
    

    View Slide

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/
    

    View Slide

14. View Slide

15. View Slide

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
    

    View Slide

17. Example layouts
    

    View Slide

18. “I did get Tom Hanks to say,
    Life is just a box of chocolates.”
    -- James Lipton
    

    View Slide

19. Back to Joind.in
    

    View Slide

20. Exercise
    

    View Slide

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

    View Slide

22. Design
    

    View Slide

23. Sketch your first tries
    ● Makes grid tangible
    ● Cheap try-outs
    ● Quick
    ● Tools
    ● Pen and paper
    ● iPad with Stylus
    Paper by 42
    

    View Slide

24. “The best ideas come to
    you under the shower
    or on the toilet”
    -- Me
    

    View Slide

25. Inkscape
    

    View Slide

26. Demo
    This must go terribly terribly wrong
    

    View Slide

27. Back to Joind.in II
    

    View Slide

28. Use a CSS
    Framework
    

    View Slide

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

    View Slide

30. Each of these combine
    the experience of
    several designers
    

    View Slide

31. Example: Twitter Bootstrap
    ● Combines a CSS and JS Framework
    ● Responsive design is a first citizen
    ● Provides elements with strong symbiosis
    ● Less bootstrapping yourself
    

    View Slide

32. Needs HTML 5
    
    
    ...
    
    
    
    ...
    
    

    View Slide

33. Defining a row
    
    ...
    ...
    
    
    ...
    ...
    
    

    View Slide

34. Defining columns
    
    ...
    ...
    
    
    ...
    ...
    
    12 Columns
    

    View Slide

35. Nesting columns
    
    
    
    ...
    ...
    
    
    ...
    
    
    
    
    ...
    ...
    
    
    ...
    
    

    View Slide

36. Two column example
    
    ...
    
    
    ...
    ...
    
    
    ...
    
    
    ...
    ...
    
    

    View Slide

37. Three column example
    
    ...
    
    
    ...
    ...
    ...
    
    
    ...
    
    
    ...
    ...
    ...
    
    

    View Slide

38. Modern example
    
    ...
    
    
    ...
    ...
    ...
    ...
    
    
    ...
    ...
    ...
    
    
    ...
    
    
    ...
    ...
    ...
    ...
    
    
    ...
    ...
    ...
    
    

    View Slide

39. Sidebar example
    
    ...
    
    
    
    
    ...
    ...
    
    
    ...
    ...
    
    
    ...
    
    
    ...
    
    
    
    
    ...
    ...
    
    
    ...
    ...
    
    
    ...
    
    

    View Slide

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
    

    View Slide

41. More responsiveness
    ● Do not forget to link to bootstrap-responsive.css!
    ● Use media queries for conditional CSS
    @media (min­width: 980px)
    {
    …
    }
    

    View Slide

42. Back to Joind.in III
    

    View Slide

43. Back to Joind.in IV
    

    View Slide

44. Is there time
    for a Demo?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide