Responsive Web Design

1. 3/2013 – Tung Dang

2. Objectives
 Developing a website in a way that allows the layout
to adjust according to the user’s screen resolution by
using:
1. A flexible, grid-based layout
2. Relative unit in typography (% and em)
3. A flexible media (image, video …)
4. Media Query (CSS3)

3. Prerequisites
 Basic CSS, HTML Knowledge
 Have ability to convert PSD to normal website have
fixed width

4. Outline
 What is Responsive Web Design?
 Viewport and meta tags for mobile browser
 How to make Responsive Web?
1. Mobile-first strategy
2. Typography
3. Flexible, grid-based layout
4. Flexible media (image, video)
5. Media Query (CSS3)

5. THE FUTURE OF WEB

6. THE FUTURE OF MOBILE

8. How to serve mobile
users?
 Separate Mobile Site

9. How to serve mobile
users?
 Mobile App

10. How to serve mobile
users?
 Mobile Theme

11. How about other devices?

13. What is Responsive Web
Design (RWD)?
 One version of a website can scale responsively to
fit on different platforms.
 Must work with any form of information
 Accessible from any device.

14. Example of RWD
 See more: http://mediaqueri.es/

15. Pros & Cons
 Pros:
 Good for SEO
 Single URL for desktop and mobile. No redirection
 Content parity. No duplicated content
 Easy for maintenance
 Adapt with universal devices
 Cons:
 Slower performance if you have poor implementation

16. Terms you have to know
 Adaptive
 Responsive
 Fluid >< Fixed-Width
 Breakpoint
 Mobile-First

17. How to become
Responsive?
1. Mobile-First
2. Viewport setting
3. Relative Typography
4. Flexible Grid
5. Flexible Image, Video …
6. Flexible Media Query
7. Compress content where possible, and avoid sending
unnecessary data

18. Mobile-First
 The idea is to start by considering the simplest
possible version (usually the mobile version) and
work up through larger and more complex designs
 Emphasis on core content and design elements
(typography and colours, then layout, etc).

19. Mobile-First

20. Mobile-First

21. Meta tags for mobiles
 Viewport meta tags
 Other meta tags optimizing for mobiles

22. What is viewport?
 If you don’t set viewport: width=device-width, Safari
will set viewport default = 980px;

23. What is viewport?

24. What is viewport?

25. What is viewport?

26. Responsive Formula

27. Relative Typography
 Try to use the formular to convert fixed font-size to
relative font-size

28. Relative Typography
 We are using em/rem/% instead of px for font size
and spacing.
 Need an easier way, check this out:
 http://pxtoem.com/
 http://responsv.com/flexible-math/

29. Flexible/Fluid Typography
 fittextjs.com
 letteringjs.com

30. Question ?
 When should I use em, percentage and pixel?
 What context of line-height property?
 Should I use em or px for typography?

31. Flexible/Fluid Width

32. Flexible/Fluid Width

33. Flexible/Fluid Width:
Margin

34. Flexible/Fluid Width:
Padding

35. Fluid Grid
 With fluid grid: will make your job easier and reduce
number of breakpoints/media queries

36. Fluid Grid

37. Fluid Grid
 Skeleton:
 http://twitter.github.com/bootstrap/
 320 And Up
 Gets Skeleton
 Less Framework
 Responsive.gs
 Unsemantic
 1140 CSS Grid
 Fluid Grids
 http://modulargrid.org/

38. Flexible Width without Media
Query

39. Media Query
 What is Media Query?
 Browser Support? How does media query work with
old-browsers (such as IE8 and below) ?

40. What is Media Query ?
 We can adapt our design to specific range of
devices without changing the content
 CSS 2.1

41. What is Media Query ?
 CSS 3
 Remember set viewport meta tags

42. Media Query - Browser
Support
 Media Query for non-support browsers (<= IE8)
 https://code.google.com/p/css3-mediaqueries-js/
 https://github.com/scottjehl/Respond
 https://github.com/pyrsmk/mediatizr

44. How to choose
breakpoint?

45. How to choose
breakpoint?

46. How to choose breakpoint?

47. How to choose Viewport?

48. How to choose
breakpoint?

49. How to choose
breakpoint?

50. Question?
 Can we replace max/min-width by max/min-device-
width?
 Will browsers download all CSS files when using
media queries in <link> tags?
 http://adapt.960.gs/: to save HTTP requests.
 Should we arrange CSS file or media queries in an order
?

51. Flexible Image: Level 1
 If you want to support flexible images in old-browers,
use a small script to fix:
http://unstoppablerobotninja.com/entry/fluid-images

52. Flexible Image: Retina
Display - Level 2
 SVG (suite for logo, icon…)
 Icon fonts
 CSS with Media Query

53. Flexible Image: Retina
Display - Level 2

54. Flexible Image: Level 3
 https://github.com/scottjehl/picturefill

55. Fluid Video
 How to import video into website:
 HTML5 <video> tag
 Using <iframe>, ex: YouTube or Vimeo
 <object>/<embed> tags to display a Flash player

56. Fluid Video (cont.)
 Demo

57. Fluid Video (cont.)
 http://fitvidsjs.com/

58. Responsive for old
browsers
 Media Query for non-support browsers (<= IE8)
 https://code.google.com/p/css3-mediaqueries-js/
 https://github.com/scottjehl/Respond
 https://github.com/pyrsmk/mediatizr
 HTML 5 tags for <= IE8: html5shiv (html5shim)
 REM unit polyfill: https://github.com/chuckcarpenter/REM-
unit-polyfill

59. Enhancement
 Use CSS transition to resize smoothly:
http://elliotjaystocks.com/blog/css-transitions-media-queries/
 Responsive Data Table: http://css-tricks.com/responsive-data-tables/
 http://responsejs.com/

60. Tool
 Test Web
 http://responsivepx.com/
 http://mattkersley.com/responsive/
 http://www.responsinator.com/
 http://responsive.is/anderssonwise.com
 http://screenqueri.es/
 http://quirktools.com/screenfly/

61. References

62. References
 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 http://alistapart.com/article/creating-intrinsic-ratios-for-video
 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_imag
e_sizing
 http://developer.apple.com/library/safari/#documentation/appleapplications/reference/Safar
iHTMLRef/Articles/MetaTags.html
 https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/Sa
fariWebContent/UsingtheViewport/UsingtheViewport.html
 https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag#Viewport_basics
 http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
 http://www.quirksmode.org/mobile/viewports2.html

63. Summary: How to become
Responsive?
1. Mobile-First
2. Viewport setting
3. Relative Typography
4. Flexible Grid
5. Flexible Image, Video …
6. Media Query
7. Compress content where possible, and avoid sending
unnecessary data

64. Thanks for listening

65. Q&A

66. Demo: Responsive
Navigation
 http://coding.smashingmagazine.com/2013/01/15/off
-canvas-navigation-for-responsive-website/