Responsive Design:Clever Tips and Tricks                           Vitaly Friedman                28/11/2012 @ FOWD, Prague
Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag
This talk is about RWD techniques.
This talk is about RWD techniques.And simple, clever tricks and ideas.
This talk is about RWD techniques.And simple, clever tricks and ideas.And (a bit) about our 2012 redesign.
Responsive WebDesign (Extended)
When Sydney J. Harris said that, he meant           human society and our understanding of           computers. But it can...
We are blinded by chrome. When itcomes to RWD, we think about layouts,and often we should, but we have tokeep in mind that...
Wir denken dass das Web so aussieht.Als Designer sehen wir uns oft als Pixel-Pusheroder Rectangle Zeichner. So sieht das W...
A fluid, unpredictable, chaotic,interconnected environmentwith plenty of right and wrongsolutions. I always feel weirdabout...
Responsive Web Design is anappropriate tool for this “fluid” Web.
It’s a new mindset that requires us torethink and extend our practices.
ContentChoreography
“    Media queries can be used to do    more than patch broken layouts:    with proper planning, we can    begin to choreo...
Content Choreography  • From the technical standpoint, arrangement    of boxes is often implemented using Flexbox.@media s...
We can manipulateexperiences to makethem genuine acrossdifferent viewports —be it desktop, mobile oranything else.
ResolutionIndependence
Resolution Independence• High pixel density displays prompt us to  create future-proof solutions for graphics.• Creating m...
• HTML:                                 PNG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> <l...
• HTML:                                 SVG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> </...
Resolution Independence (SVG)• SVG files are usually larger and browsers  need more time to rasterize and display them.• Go...
• HTML:                                       Icon Fonts <a class="icon share" href="#">Share</a>• CSS: @font-face { font-...
• HTML:                                       Icon Fonts <a class="icon" data-icon="s" href="#">Share</a> <a class="icon" ...
Resolution Independence  (Web Fonts)• There are many comprehensive Web fonts:  Entypo and FontAwesome are free.• Excellent...
CompressiveImages
Compressive Images• To display photos properly on high pixel  density displays, we don’t need hi-res images.• If a JPG ima...
“    ...Given two identical images that    are displayed at the same size on a    website, one can be dramatically    smal...
600×400px file, 0% JPEG compression,displayed in 600×400 (file size 7 Kb)
600×400px file, 0% JPEG compression,displayed in 300×200 (file size 7 Kb)
300×200px file (21 Kb)               600×400px file (7 Kb)_________________________________   ______________________________...
ConditionalLoading
“    If you [...] had to choose between    employing media queries to make    the design look good on a mobile    device o...
Conditional CSS• We ask browsers to load assets progressively —  and only when they can be displayed.• Idea: if a CSS medi...
Conditional CSS• CSS:  @media all and (min-width: 45em) {      body:after {          content: desktop;          display: n...
Conditional CSS (Example)• HTML: <a href="desktop-friendly-version.jpg"> <img src="mobile-version.jpg"     data-medium="ta...
Conditional CSS (Example)• JavaScript:  var size =  window.getComputedStyle(document.body,:after).get  PropertyValue(conte...
Lazy LoadingJS, Social Buttons
Gmail’s Lazy Loading• Latency is the time between when a browser  requests a resource from a server and when it  starts to...
Gmail’s Lazy Loading• Idea: let browsers download all of the JS right  away, but evaluate it “on demand”, i.e. when  users...
Gmail’s Lazy Loading• <script id="lazy">  // Make sure you strip out (or replace) comment  blocks in your JavaScript first...
The Two-Click Social Widget• Load social widgets only when user explicitly  chooses to take that action to share content.•...
Protecting image/video aspect ratios
Protecting Image Aspect Ratios• When max-width: 100%; is applied to an  image with width and height attributes  defined in ...
Intrinsic Ratio For Videos• To ensure the intrinsic 4:3 or 16:9 ratios for  videos, we create a box with the proper ratio,...
Intrinsic Ratio For Videos• CSS: .wrapper-with-intrinsic-ratio {     position: relative;     padding-top: 25px;      /* pl...
Responsive Videos• We can serve different video files to different  devices by using media attribute on the  video <source> a...
Responsive Videos• HTML: <video controls preload="none"> <source type="video/mp4" src="video_small.mp4"     media="all and...
Vertical mediaqueries & splitting
Vertical Media Queries• min-height and max-height are useful for  adjusting the font-size, padding, margin and  cropping i...
Media Queries Splitting• In development, we can use a breakpoint-  based organization for CSS (“min-width”):  0-up.css, 45...
Media Queries Splitting• In practice, it’s often a good starting point to  work with em media queries right away.  0-up.cs...
DebuggingMedia Queries
“    Designing for the Web is like    visualizing a tesseract. We build    experiences by manipulating their    shadows.  ...
Debugging Media Queries• Due to lack of convenient tools, debugging  RWD often feels like groping in the dark.  There are ...
People like to test a numberof metrics to see why peopleare not * staying on a site. Ithink sometimes we spendso much time...
People like to test a numberof metrics to see why peopleare not * staying on a site. Ithink sometimes we spendso much time...
Typography-Out Approach is an optionfor building responsive websites.
Typography-OutApproach
We prepared a series ofmoodboards to furtherexplore the idea we had,especially to findelements that a new,content-heavy lay...
We focusedspecifically onmacro- andmicrotypography as
Our design process was defined by onemajor constraint: perfect measure.
“    If we could adequately typeset an article and    thus establish the general context of the    design, everything else...
So we started looking for typefaces that would best express ournew vision, values and our deisgn persona...and oh boy were...
Typefaces should be optimized forlong reading on (many) screens andfit various contexts.
We started out with setting up a couple of demo pages fortypography, including links, italics, bold.With all design distra...
Sorry, Proxima Nova rendering isincorrect on this screenshot, but welost the original files. :-)
We started from mobile, and workedour way upwards to desktop views.
The keywords were carefully                          chosen and tested.Navigation changes: we     We kned that it would ta...
We never targeted specific devices—and introduced media querieswhenever it felt natural to do so.
Responsive design affects viewportsand media, including print.
ResponsiveDesign Patterns
Responsive Design Patterns• Responsive design affects all design assets:  layout, images, type, navigation, tables,  calend...
Responsive Design Patterns• Media queries aren’t supported in Android  2.1 native client, Gmail app on all platforms,  Win...
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
There are still manyunsolved problems.
There are still manyunsolved problems.Web forms     ConsistencyImages        DebuggingPerformance   Maintenance
The Very FinalConclusion
www.smashingbook.com
www.the-mobile-book.com
Thank YouFor Your Attention!@smashingmag
Image credits• Front cover: Geometric Wallpapers  by Simon C Page (http://simoncpage.co.uk/  blog/2012/03/ipad-hd-retina-w...
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Nächste SlideShare
Wird geladen in …5
×

Responsive Web Design: Clever Tips and Techniques

154.370 Aufrufe

Veröffentlicht am

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Veröffentlicht in: Design
36 Kommentare
330 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
154.370
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
13.453
Aktionen
Geteilt
0
Downloads
2.654
Kommentare
36
Gefällt mir
330
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Web Design: Clever Tips and Techniques

  1. Responsive Design:Clever Tips and Tricks Vitaly Friedman 28/11/2012 @ FOWD, Prague
  2. Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag
  3. This talk is about RWD techniques.
  4. This talk is about RWD techniques.And simple, clever tricks and ideas.
  5. This talk is about RWD techniques.And simple, clever tricks and ideas.And (a bit) about our 2012 redesign.
  6. Responsive WebDesign (Extended)
  7. When Sydney J. Harris said that, he meant human society and our understanding of computers. But it can relate to what we do as well. When we think about the Web, what do“ The dangerous thing is not that machines might start thinking like humans, but that humans might start thinking like machines. — Sydney J. Harris
  8. We are blinded by chrome. When itcomes to RWD, we think about layouts,and often we should, but we have tokeep in mind that we are not rectangleartists. we explore solutions toproblems. Browsers think in boxes, buthumans shouldnt.
  9. Wir denken dass das Web so aussieht.Als Designer sehen wir uns oft als Pixel-Pusheroder Rectangle Zeichner. So sieht das Web abernicht ausWhen it comes to responsive design, we thinkabout layouts, and sometimes we should, but wehave to keep in mind that we aren’t rectangleartists. We explore solutions to problems.
  10. A fluid, unpredictable, chaotic,interconnected environmentwith plenty of right and wrongsolutions. I always feel weirdabout blog posts on why RWD isa wrong technique, or HTML5/native is a wrong solution. TheWeb isn’t black and white, it’srich, extremely diverse and itrequires pragmatic thinking.
  11. Responsive Web Design is anappropriate tool for this “fluid” Web.
  12. It’s a new mindset that requires us torethink and extend our practices.
  13. ContentChoreography
  14. “ Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width. — Trent Walton
  15. Content Choreography • From the technical standpoint, arrangement of boxes is often implemented using Flexbox.@media screen and (max-width: 33.236em) {#main { display: flex; }#main > nav,#main > aside { flex: 1; }#main > article { flex: 2; }#main > nav { order: 0; }#main > article { order: 1; }#main > aside { order: 2; }
  16. We can manipulateexperiences to makethem genuine acrossdifferent viewports —be it desktop, mobile oranything else.
  17. ResolutionIndependence
  18. Resolution Independence• High pixel density displays prompt us to create future-proof solutions for graphics.• Creating multiple assets for the same graphics (not photos) isn’t future-proof.• Two options: SVG and Icon Fonts.
  19. • HTML: PNG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> <li><a class="a-print" href="#">Print</a></li> </ul>• CSS: .actions a { font-size: 1em; /* Sprite: 30x160px */ background-image: url(sprite.png); } .actions .a-share { background-position: 10px 0; } .actions .a-print { background-position: 10px -40px; }
  20. • HTML: SVG sprites <ul class="actions"> <li><a class="a-share" href="#">Share</a></li> </ul>• CSS: body { font-size: 100%; } /* = 16px by default */ .actions a { font-size: 1em; background-image: url(sprite.svg); background-size: 1.875em 10em; } .actions .a-share { background-position: 0.625em 0; }
  21. Resolution Independence (SVG)• SVG files are usually larger and browsers need more time to rasterize and display them.• Good SVG support: Chrome 4+, Safari 4+, FF4+, Opera 9.5+, IE9+, mobile browsers.• For legacy browsers (and Android 2.3) we need PNG-fallback with Conditional Comments (IE<9) or Modernizr.
  22. • HTML: Icon Fonts <a class="icon share" href="#">Share</a>• CSS: @font-face { font-family: Icon Font; src: url(icon-font.eot); src: local(☺); url(icon-font.woff) format(woff), url(icon-font.ttf) format(truetype), url(icon-font.svg) format(svg); } .icon { font-family: Icon Font; font-size: 20px; } .share:before { content: "s"; }
  23. • HTML: Icon Fonts <a class="icon" data-icon="s" href="#">Share</a> <a class="icon" data-icon="h" href="#">History</a>• CSS: .icon:before { content: attr(data-icon); /* Optional color definition */ }
  24. Resolution Independence (Web Fonts)• There are many comprehensive Web fonts: Entypo and FontAwesome are free.• Excellent support: everywhere but Opera Mini and Android 2.1.• Build custom, small “bundles” with Fontello (combines popular open-source fonts).
  25. CompressiveImages
  26. Compressive Images• To display photos properly on high pixel density displays, we don’t need hi-res images.• If a JPG image has relatively small dimensions, we can use a workaround to keep its size small.• Solution: given a “normal” image resolution, double it and use minimal JPEG compression.
  27. “ ...Given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it’s highly compressed and dramatically larger in dimensions than it is displayed. — Daan Jobsis
  28. 600×400px file, 0% JPEG compression,displayed in 600×400 (file size 7 Kb)
  29. 600×400px file, 0% JPEG compression,displayed in 300×200 (file size 7 Kb)
  30. 300×200px file (21 Kb) 600×400px file (7 Kb)_________________________________ ________________________________80% JPEG compression 0% JPEG compressiondisplayed in 300×200 displayed in 300×200
  31. ConditionalLoading
  32. “ If you [...] had to choose between employing media queries to make the design look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast. — Jason Grigsby
  33. Conditional CSS• We ask browsers to load assets progressively — and only when they can be displayed.• Idea: if a CSS media query was fired, catch it with JavaScript and load additional assets.• CSS: @media all and (min-width: 45em) { body:after { content: desktop; display: none; } }
  34. Conditional CSS• CSS: @media all and (min-width: 45em) { body:after { content: desktop; display: none; } }• JS: var size = window.getComputedStyle(document.body,:after).get PropertyValue(content); if (size == desktop) { // Load some more content. }
  35. Conditional CSS (Example)• HTML: <a href="desktop-friendly-version.jpg"> <img src="mobile-version.jpg" data-medium="tablet-friendly-version.jpg" data-large="desktop-friendly-version.jpg" /></a>• CSS: @media all and (min-width: 45em) { body:after { content: desktop; display: none; } }
  36. Conditional CSS (Example)• JavaScript: var size = window.getComputedStyle(document.body,:after).get PropertyValue(content); if (size == desktop) { $(img).each(function(index) { var large = $(this).data(large); $(this).attr(src,large); } } if (size == tablet) {...
  37. Lazy LoadingJS, Social Buttons
  38. Gmail’s Lazy Loading• Latency is the time between when a browser requests a resource from a server and when it starts to receive the server’s response.• On mobile, latency is a major UX killer. For a 1Mb page with 85 requests per page, it is 4.5s!• JavaScript is expensive; parsing takes time and blocks the rendering of the page. Usually you don’t need all JavaScript right away.
  39. Gmail’s Lazy Loading• Idea: let browsers download all of the JS right away, but evaluate it “on demand”, i.e. when users need a particular feature.• Much of the downloaded JS is commented out, and when needed uncommented and eval-ed.• Gmail’s case: 200 Kb of JS -> 2600 ms page load 200 Kb of JS (lazy loaded) -> 240 ms page load
  40. Gmail’s Lazy Loading• <script id="lazy"> // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ </script> <script> function lazyLoad() { var lazyElement = document.getElementById(lazy); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); } </script> <div onclick=lazyLoad()>Lazy Load</div>
  41. The Two-Click Social Widget• Load social widgets only when user explicitly chooses to take that action to share content.• Idea: load small social icons by default, and load the FB, Twitter and G+ widgets on click.• Cuts down on bandwidth and on latency. (FB button alone weighs 120 Kb + 4 requests).
  42. Protecting image/video aspect ratios
  43. Protecting Image Aspect Ratios• When max-width: 100%; is applied to an image with width and height attributes defined in HTML, image rescales incorrectly.• Solution: add height: auto; for images to which max-width: 100% is applied.• CSS: img, video { max-width: 100%; height: auto; }
  44. Intrinsic Ratio For Videos• To ensure the intrinsic 4:3 or 16:9 ratios for videos, we create a box with the proper ratio, then stretch the video inside to fit the dimensions of the box.• HTML: <div class="wrapper-with-intrinsic-ratio"> <div class="element-to-stretch"></div> </div>
  45. Intrinsic Ratio For Videos• CSS: .wrapper-with-intrinsic-ratio { position: relative; padding-top: 25px; /* player chrome */ padding-bottom: 56.25%; /* 9:16 = 0.5625 */ height: 0; } .element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: teal; }
  46. Responsive Videos• We can serve different video files to different devices by using media attribute on the video <source> attribute.• Supported in the latest versions of Chrome, Opera, Safari, FF 15+, IE9+, mobile browsers.
  47. Responsive Videos• HTML: <video controls preload="none"> <source type="video/mp4" src="video_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video.mp4"> <source type="video/webm" src="video.webm"> <!-- proper fallback content goes here --> </video>
  48. Vertical mediaqueries & splitting
  49. Vertical Media Queries• min-height and max-height are useful for adjusting the font-size, padding, margin and cropping images.• Beware of h/v-media queries collisions when resizing the browser. Things might easily get out of control.
  50. Media Queries Splitting• In development, we can use a breakpoint- based organization for CSS (“min-width”): 0-up.css, 450-up.css, 720-up.css etc.• We can also set breakpoints 1px apart and split styles instead of overriding from one media query to the next (“min/max-width”): base.css, 0-449.css, 450-719.css etc.
  51. Media Queries Splitting• In practice, it’s often a good starting point to work with em media queries right away. 0-up.css, 25em-up.css, 35em-up.css etc.• If it’s not an option, it’s a good idea to convert px to em for production code to improve maintenance and avoid zooming issues.
  52. DebuggingMedia Queries
  53. “ Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. — Tim Brown
  54. Debugging Media Queries• Due to lack of convenient tools, debugging RWD often feels like groping in the dark. There are some popular techniques though.• Setting the body bg color to different colors for each breakpoint. Also box-sizing: border-box.• The * technique for testing for optimal measure in the browser.
  55. People like to test a numberof metrics to see why peopleare not * staying on a site. Ithink sometimes we spendso much time focusin* g on *analytics that we have no...
  56. People like to test a numberof metrics to see why peopleare not * staying on a site. Ithink sometimes we spendso much time focusin* g on *analytics that we have no...
  57. Typography-Out Approach is an optionfor building responsive websites.
  58. Typography-OutApproach
  59. We prepared a series ofmoodboards to furtherexplore the idea we had,especially to findelements that a new,content-heavy layoutcould use.
  60. We focusedspecifically onmacro- andmicrotypography as
  61. Our design process was defined by onemajor constraint: perfect measure.
  62. “ If we could adequately typeset an article and thus establish the general context of the design, everything else would follow. [...] The key attribute for achieving perfect typesetting was perfect measure: a good average between 45 and 90 characters per line—on all screen resolutions. — Elliot Jay Stocks, “Smashing Book 3”
  63. So we started looking for typefaces that would best express ournew vision, values and our deisgn persona...and oh boy were weexcited. We felt like a kid in a candy store... until we had to bethrown into cold shower.With the abundance of rich typefaces on the Web, we excitedlyjumped into the myriad of possibilities. We experimented withliterally dozens of typefaces from several type foundries in variouspairings: we considered Centro Sans and Centro Serif, Meta andMeta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few.We observed how they looked at different font sizes and how wellthey worked together. We examined how well they appeared in boldand italic and in headings and body copy, as well as how they workedin less obvious contexts such as image captions.
  64. Typefaces should be optimized forlong reading on (many) screens andfit various contexts.
  65. We started out with setting up a couple of demo pages fortypography, including links, italics, bold.With all design distractions removed, we could pay a greatdeal of technical attention to the type once we set up ourbasic styles. How legible is this typeface at a particular size?How well does it perform on Windows? Is there a superiorversion from an alternative font delivery network thatperhaps uses PostScript outlines for display sizes?Focusing on these fine details is much easier when you’relooking purely at the type and nothing else.Because there’s a lot going on visually on SmashingMagazine—screenshots, buttons and noisy ads—a sans-seriffelt like a more sensible, uncluttered route for body copy. Infact, it was difficult to imagine a serif typeface being used forcode-heavy articles in the coding section.
  66. Sorry, Proxima Nova rendering isincorrect on this screenshot, but welost the original files. :-)
  67. We started from mobile, and workedour way upwards to desktop views.
  68. The keywords were carefully chosen and tested.Navigation changes: we We kned that it would take tooused t wo markups: one much space, but we decided to testwith select, another it and it performed fairly well.with a nested unorderedlist. and switches them We’ve developed a toggle menu hereon and off with CSS. as well, it is currently in the queue for testing. We had drop-down... initially here...
  69. We never targeted specific devices—and introduced media querieswhenever it felt natural to do so.
  70. Responsive design affects viewportsand media, including print.
  71. ResponsiveDesign Patterns
  72. Responsive Design Patterns• Responsive design affects all design assets: layout, images, type, navigation, tables, calendars, galleries, forms, maps, ads...• Offline access and mobile UX enhancements complement RWD very well (e.g. HTML5 localStorage, GeoLocation, Telephone links).
  73. Responsive Design Patterns• Media queries aren’t supported in Android 2.1 native client, Gmail app on all platforms, Win Mobile 6.1 & Phone 7, BlackBerry OS 5.• Also, Webmail services tend to ignore media queries and overwrite them with their custom CSS code.
  74. http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
  75. There are still manyunsolved problems.
  76. There are still manyunsolved problems.Web forms ConsistencyImages DebuggingPerformance Maintenance
  77. The Very FinalConclusion
  78. www.smashingbook.com
  79. www.the-mobile-book.com
  80. Thank YouFor Your Attention!@smashingmag
  81. Image credits• Front cover: Geometric Wallpapers by Simon C Page (http://simoncpage.co.uk/ blog/2012/03/ipad-hd-retina-wallpaper/)• Homer Simpsons: http://smashed.by/homer, http://smashed.by/crazy-homer

×