“Now more than ever, we’re designing work meant to   be viewed along a gradient of different experiences.Responsive web de...
320 x 480   768 x 1024                         >1280 x 800
320 x 480   768 x 1024                         >1280 x 800
320 x 480   768 x 1024                         >1280 x 800
Fluid Layout  + Fluid Imagesresponsive design
examples...
Media Type + Media Features = Media Query
CSS 2.1Media Type + Media Features = Media Query    screen     print    braille   handheld  projection      tty       tv  ...
CSS 2.1          CSS 3Media Type + Media Features = Media Query    screen            width     print            height    ...
media_query_list : S* [media_query [ , S* media_query ]* ]? ;media_query : [ONLY | NOT]? S* media_type S* [ AND S* express...
Load CSS for Screen Devices<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">Nested CSS for Scre...
4+   3.5+   9.5+   3.1+
4+   3.5+   9.5+   3.1+   9+
4+   3.5+   9.5+   3.1+          9+                          2.1+
respond.js              css3-mediaqueries-jsPolyfills          github.com/scottjehl/Respond                                ...
TipsDesign mobile first, then add media queries for larger displaysUse ems for width features to incorporate browser font s...
Responsive Web Design                                                        EXAMPLESalistapart.com/articles/responsive-we...
Separate Mobile Site?“Our mobile users only need subset offunctionality”                        How do you know what mobil...
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,110 views

Published on

Overview of Responsive Web Design Technique and tips

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

  • Be the first to like this

No Downloads
Views
Total views
1,110
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I&amp;#x2019;d like to talk about responsive web design.\n- mention article\n- How can we optimize web experience for the device, instead of the reverse.\n\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • device is adjusting the content (scaling down) lots of zooming\n
  • not just fluid width\n
  • \n
  • conditional css type/features of user agent\nMedia types is link\n- how to use it? best docs are w3c\n
  • conditional css type/features of user agent\nMedia types is link\n- how to use it? best docs are w3c\n
  • conditional css type/features of user agent\nMedia types is link\n- how to use it? best docs are w3c\n
  • conditional css type/features of user agent\nMedia types is link\n- how to use it? best docs are w3c\n
  • Now that you know the syntax\n
  • \n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • Making History, first time ever presenting a feature IE supports!\n
  • \n
  • \n
  • \n
  • \n
  • Responsive Web Design

    1. 1. “Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences.Responsive web design offers us a way forward...” Ethan Marcotte alistapart.com
    2. 2. 320 x 480 768 x 1024 >1280 x 800
    3. 3. 320 x 480 768 x 1024 >1280 x 800
    4. 4. 320 x 480 768 x 1024 >1280 x 800
    5. 5. Fluid Layout + Fluid Imagesresponsive design
    6. 6. examples...
    7. 7. Media Type + Media Features = Media Query
    8. 8. CSS 2.1Media Type + Media Features = Media Query screen print braille handheld projection tty tv embossed speech
    9. 9. CSS 2.1 CSS 3Media Type + Media Features = Media Query screen width print height braille resolution handheld device-width projection device-height tty orientation tv aspect-ratio embossed device-aspect-ratio speech color color-index monochrome scan grid
    10. 10. media_query_list : S* [media_query [ , S* media_query ]* ]? ;media_query : [ONLY | NOT]? S* media_type S* [ AND S* expression ]* | expression [ AND S* expression ]* ;media_type : IDENT ;expression : ( S* media_feature S* [ : S* expr ]? ) S* ;media_feature : IDENT ;
    11. 11. Load CSS for Screen Devices<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">Nested CSS for Screen Devices@media screen { * { font-family: sans-serif }}Load CSS for Screen Devices with color<link rel="stylesheet" media="screen and (color)" href="color-images.css" />Move sidebar to below content@media screen and (min-width:500px) and (color) { aside { float: none; }}Load Larger Image for Retina@media screen and (min-resolution: 250dpi) { header .logo { background-image:url(images/logo-hi.png); }}
    12. 12. 4+ 3.5+ 9.5+ 3.1+
    13. 13. 4+ 3.5+ 9.5+ 3.1+ 9+
    14. 14. 4+ 3.5+ 9.5+ 3.1+ 9+ 2.1+
    15. 15. respond.js css3-mediaqueries-jsPolyfills github.com/scottjehl/Respond code.google.com/p/css3- mediaqueries-js/feature support width, height only full speed fast slow
    16. 16. TipsDesign mobile first, then add media queries for larger displaysUse ems for width features to incorporate browser font sizeAdd 100% max-width on images to scale down images tocontainerUse with a grid systemInclude the viewport tag to fit screen on mobile<meta name="viewport" content="width=device-width, initial-scale=1">
    17. 17. Responsive Web Design EXAMPLESalistapart.com/articles/responsive-web-design anderssonwise.comResponsive Web Design (book) smashingmagazine.comabookapart.com/products/responsive-web-design foodsense.is clearairchallenge.comW3C CSS3 Media Queries Spec bostonglobe.comw3.org/TR/css3-mediaqueries github.nearinfinity.comResponsive Design Toolsnetmagazine.com/features/50-fantastic-tools-responsive-web-design jason harwig @jharwig
    18. 18. Separate Mobile Site?“Our mobile users only need subset offunctionality” How do you know what mobile users will want to do with your app?

    ×