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

Responsive Web Design

7018669b748ffe607e0d83582c326935?s=47 Russ Weakley
December 05, 2011

Responsive Web Design

Responsive web design is an important part of web development today. These slides from a resent presentation explain what it is and how it can be achieved.

7018669b748ffe607e0d83582c326935?s=128

Russ Weakley

December 05, 2011
Tweet

Transcript

  1. RESPONSIVE DESIGN WEB V5

  2. THE RISE OF MOBILE WEB

  3. In Australia, 2008 there were 1.27 billion landline subscribers and

    4.1 billion mobile phone subscribers Mobile Landline
  4. Half of all local searches worldwide are performed on mobile

    devices
  5. By 2014 mobile internet will TAKE OVER desktop internet usage

  6. “I need a mobile website NOW!”

  7. Do you really need a separate mobile version of your

    site?
  8. If so, which devices would you target?

  9. And what about tablets?

  10. Are you going to build a specific website for every

    device that hits the market?
  11. “Time to stop and THINK!”

  12. Most websites don’t need a specific mobile site...

  13. They just need to look good in all sorts of

    different devices
  14. In 2010, Ethan Marcotte coined the term “responsive web design”

  15. Rather than build separate mobile & desktop websites...

  16. You can create a single site that adapts to suit

    any device regardless of screen size or orientation
  17. “One website multiple layouts”

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. “But what if we really need a mobile site?”

  26. There may be times when a mobile specific website is

    necessary.
  27. Even in these cases, a responsive design should still be

    the default option. Device-specific solutions can be added on top.
  28. HOW DOES RESPONSIVE DESIGN WORK

  29. Ethan Marcotte defines responsive web design with three criteria

  30. A flexible, grid-based layout This allows your layout to reflow

    to the screen size of any device 1
  31. 320px

  32. 480px

  33. 768px

  34. 1024px

  35. 1240px

  36. Flexible images and media (videos etc) This allows your images

    and videos to reflow with the layout 2
  37. Large images for large screen

  38. Image resized for small screen

  39. Video for large screen

  40. Video resized for small screen

  41. CSS3 Media queries This allows you to control each layout

    so that content is displayed optimally 3
  42. Single-column narrow layout Optimal line length maintained

  43. Single-column layout Optimal line length maintained

  44. Two-column layout Optimal line length maintained

  45. Three-column layout Optimal line length maintained

  46. Three-column wide layout Optimal line length maintained

  47. PROBLEM No.1

  48. Media queries are not supported by some mobile devices... In

    fact, many mobile devices..
  49. What’s the SOLUTION?

  50. MOBILE FIRST

  51. The simplest solution is to start with a mobile, or

    small screen layout first.
  52. This means create a single column liquid layout that will

    work in any device
  53. Then you can add advanced layout styles using media queries

    - for devices that support them.
  54. PROBLEM No.2

  55. Media queries are not supported by older versions of Internet

    Explorer (versions 6-8)
  56. “Curse these old browsers”

  57. Luckily, there are three solutions

  58. Respond.js A simple JavaScript solution

  59. CSS3-mediaqueries.js An advanced JavaScript solution

  60. Conditional comments Showing different styles to older Internet Explorer <link

    rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="desktop.css" media="all and (min-width: 700px)"> <!--[if (lt IE 9)&(!IEMobile 7)]> <link rel="stylesheet" href="desktop.css" media="all"> <![endif]-->
  61. CREATING FLUID IMAGES & MOVIES

  62. Creating fluid images is easy. You can just set a

    width or max-width for all images. img { max-width: 100%; }
  63. Fluid video is harder, but luckily there is help at

    hand:
  64. What about large images and MOBILE?

  65. RESPONSIVE IMAGES

  66. One concern with the “mobile first” approach is that large

    images may be served to mobile devices.
  67. Luckily, there are a range of solutions now available that

    let you serve small images as a default, and then larger images where needed.
  68. Responsive images - part 1 & 2 http://www.cloudfour.com/responsive-imgs-part-2/

  69. Time to get out there and BE RESPONSIVE!

  70. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign

    Linkedin: linkedin.com/in/russweakley