3/2013 – Tung Dang
Objectives
 Developing a website in a way that allows the layout
to adjust according to the user’s screen resolution by
u...
Prerequisites
 Basic CSS, HTML Knowledge
 Have ability to convert PSD to normal website have
fixed width
Outline
 What is Responsive Web Design?
 Viewport and meta tags for mobile browser
 How to make Responsive Web?
1. Mobi...
THE FUTURE OF WEB
THE FUTURE OF MOBILE
How to serve mobile
users?
 Separate Mobile Site
How to serve mobile
users?
 Mobile App
How to serve mobile
users?
 Mobile Theme
How about other devices?
What is Responsive Web
Design (RWD)?
 One version of a website can scale responsively to
fit on different platforms.
 Mu...
Example of RWD
 See more: http://mediaqueri.es/
Pros & Cons
 Pros:
 Good for SEO
 Single URL for desktop and mobile. No redirection
 Content parity. No duplicated con...
Terms you have to know
 Adaptive
 Responsive
 Fluid >< Fixed-Width
 Breakpoint
 Mobile-First
How to become
Responsive?
1. Mobile-First
2. Viewport setting
3. Relative Typography
4. Flexible Grid
5. Flexible Image, V...
Mobile-First
 The idea is to start by considering the simplest
possible version (usually the mobile version) and
work up ...
Mobile-First
Mobile-First
Meta tags for mobiles
 Viewport meta tags
 Other meta tags optimizing for mobiles
What is viewport?
 If you don’t set viewport: width=device-width, Safari
will set viewport default = 980px;
What is viewport?
What is viewport?
What is viewport?
Responsive Formula
Relative Typography
 Try to use the formular to convert fixed font-size to
relative font-size
Relative Typography
 We are using em/rem/% instead of px for font size
and spacing.
 Need an easier way, check this out:...
Flexible/Fluid Typography
 fittextjs.com
 letteringjs.com
Question ?
 When should I use em, percentage and pixel?
 What context of line-height property?
 Should I use em or px f...
Flexible/Fluid Width
Flexible/Fluid Width
Flexible/Fluid Width:
Margin
Flexible/Fluid Width:
Padding
Fluid Grid
 With fluid grid: will make your job easier and reduce
number of breakpoints/media queries
Fluid Grid
Fluid Grid
 Skeleton:
 http://twitter.github.com/bootstrap/
 320 And Up
 Gets Skeleton
 Less Framework
 Responsive.g...
Flexible Width without Media
Query
Media Query
 What is Media Query?
 Browser Support? How does media query work with
old-browsers (such as IE8 and below) ?
What is Media Query ?
 We can adapt our design to specific range of
devices without changing the content
 CSS 2.1
What is Media Query ?
 CSS 3
 Remember set viewport meta tags
Media Query - Browser
Support
 Media Query for non-support browsers (<= IE8)
 https://code.google.com/p/css3-mediaquerie...
How to choose
breakpoint?
How to choose
breakpoint?
How to choose breakpoint?
How to choose Viewport?
How to choose
breakpoint?
How to choose
breakpoint?
Question?
 Can we replace max/min-width by max/min-device-
width?
 Will browsers download all CSS files when using
media...
Flexible Image: Level 1
 If you want to support flexible images in old-browers,
use a small script to fix:
http://unstopp...
Flexible Image: Retina
Display - Level 2
 SVG (suite for logo, icon…)
 Icon fonts
 CSS with Media Query
Flexible Image: Retina
Display - Level 2
Flexible Image: Level 3
 https://github.com/scottjehl/picturefill
Fluid Video
 How to import video into website:
 HTML5 <video> tag
 Using <iframe>, ex: YouTube or Vimeo
 <object>/<emb...
Fluid Video (cont.)
 Demo
Fluid Video (cont.)
 http://fitvidsjs.com/
Responsive for old
browsers
 Media Query for non-support browsers (<= IE8)
 https://code.google.com/p/css3-mediaqueries-...
Enhancement
 Use CSS transition to resize smoothly:
http://elliotjaystocks.com/blog/css-transitions-media-queries/
 Resp...
Tool
 Test Web
 http://responsivepx.com/
 http://mattkersley.com/responsive/
 http://www.responsinator.com/
 http://r...
References
References
 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 http://alistapart.com/article/crea...
Summary: How to become
Responsive?
1. Mobile-First
2. Viewport setting
3. Relative Typography
4. Flexible Grid
5. Flexible...
Thanks for listening
Q&A
Demo: Responsive
Navigation
 http://coding.smashingmagazine.com/2013/01/15/off
-canvas-navigation-for-responsive-website/
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,099 views

Published on

Responsive Web Design

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,099
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Only optimized for small screens‣ Need to provide all content‣ content has to be managed twice‣ Issues when sharing content‣ Pretty expensive for an unsatisfying result
  • Which platforms will you support?(iOS, Android, WindowsPhone)‣ Each update:- cost per platformmight take time (approval)What about search engines?‣ Your content won’t be indexed by themlinks to websites open in a new app (!)‣ no native browser functions :(bookmarking!)non selectable text (no copy-paste)‣ App’s often have their own interface language
  • TabletsSmartphonesLaptop computersDesktop computersGame consolesTelevisionseReadersVehiclesAppliances
  • http://mediaqueri.es/
  • http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.htmlhttps://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag#Viewport_basicshttp://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  • Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlhttp://www.quirksmode.org/mobile/viewports2.html
  • Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlhttp://www.quirksmode.org/mobile/viewports2.html
  • Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlhttp://www.quirksmode.org/mobile/viewports2.html
  • You must convert all to relative unit, don’t convert in partial of website
  • https://c9.io/debuggervn/demo-front-end/workspace/19_RWD/relative-em.html
  • http://alistapart.com/article/howtosizetextincss:http://d.alistapart.com/howtosizetextincss/ss-test-1.htmlhttp://d.alistapart.com/howtosizetextincss/ss-test-2.html
  • http://www.w3.org/TR/css3-mediaqueries/#media0http://webdesignerwall.com/tutorials/css3-media-queries
  • http://www.w3.org/TR/css3-mediaqueries/#media0http://webdesignerwall.com/tutorials/css3-media-queries
  • http://www.w3.org/TR/css3-mediaqueries/#media0http://webdesignerwall.com/tutorials/css3-media-queries
  • Demo: http://unstoppablerobotninja.com/demos/resize/http://unstoppablerobotninja.com/demos/resize/fix/
  • http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
  • http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
  • http://alistapart.com/article/creating-intrinsic-ratios-for-video
  • http://www.vanseodesign.com/web-design/articles-ive-written-elsewhere/http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/examining-responsive-navigation-off-canvas-patterns/
  • Responsive Web Design

    1. 1. 3/2013 – Tung Dang
    2. 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. 3. Prerequisites  Basic CSS, HTML Knowledge  Have ability to convert PSD to normal website have fixed width
    4. 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. 5. THE FUTURE OF WEB
    6. 6. THE FUTURE OF MOBILE
    7. 7. How to serve mobile users?  Separate Mobile Site
    8. 8. How to serve mobile users?  Mobile App
    9. 9. How to serve mobile users?  Mobile Theme
    10. 10. How about other devices?
    11. 11. 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.
    12. 12. Example of RWD  See more: http://mediaqueri.es/
    13. 13. 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
    14. 14. Terms you have to know  Adaptive  Responsive  Fluid >< Fixed-Width  Breakpoint  Mobile-First
    15. 15. 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
    16. 16. 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).
    17. 17. Mobile-First
    18. 18. Mobile-First
    19. 19. Meta tags for mobiles  Viewport meta tags  Other meta tags optimizing for mobiles
    20. 20. What is viewport?  If you don’t set viewport: width=device-width, Safari will set viewport default = 980px;
    21. 21. What is viewport?
    22. 22. What is viewport?
    23. 23. What is viewport?
    24. 24. Responsive Formula
    25. 25. Relative Typography  Try to use the formular to convert fixed font-size to relative font-size
    26. 26. 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/
    27. 27. Flexible/Fluid Typography  fittextjs.com  letteringjs.com
    28. 28. Question ?  When should I use em, percentage and pixel?  What context of line-height property?  Should I use em or px for typography?
    29. 29. Flexible/Fluid Width
    30. 30. Flexible/Fluid Width
    31. 31. Flexible/Fluid Width: Margin
    32. 32. Flexible/Fluid Width: Padding
    33. 33. Fluid Grid  With fluid grid: will make your job easier and reduce number of breakpoints/media queries
    34. 34. Fluid Grid
    35. 35. 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/
    36. 36. Flexible Width without Media Query
    37. 37. Media Query  What is Media Query?  Browser Support? How does media query work with old-browsers (such as IE8 and below) ?
    38. 38. What is Media Query ?  We can adapt our design to specific range of devices without changing the content  CSS 2.1
    39. 39. What is Media Query ?  CSS 3  Remember set viewport meta tags
    40. 40. 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
    41. 41. How to choose breakpoint?
    42. 42. How to choose breakpoint?
    43. 43. How to choose breakpoint?
    44. 44. How to choose Viewport?
    45. 45. How to choose breakpoint?
    46. 46. How to choose breakpoint?
    47. 47. 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 ?
    48. 48. 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
    49. 49. Flexible Image: Retina Display - Level 2  SVG (suite for logo, icon…)  Icon fonts  CSS with Media Query
    50. 50. Flexible Image: Retina Display - Level 2
    51. 51. Flexible Image: Level 3  https://github.com/scottjehl/picturefill
    52. 52. 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
    53. 53. Fluid Video (cont.)  Demo
    54. 54. Fluid Video (cont.)  http://fitvidsjs.com/
    55. 55. 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
    56. 56. 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/
    57. 57. 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/
    58. 58. References
    59. 59. 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
    60. 60. 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
    61. 61. Thanks for listening
    62. 62. Q&A
    63. 63. Demo: Responsive Navigation  http://coding.smashingmagazine.com/2013/01/15/off -canvas-navigation-for-responsive-website/

    ×