Responsive Web Design

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