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.

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”
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