mozilla

Revision 58167 of Responsive Web design

  • Revision slug: Web_Development/Responsive_Web_design
  • Revision title: Responsive Web design
  • Revision id: 58167
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers. Prominent designer Luke Wroblewski advocates designing for "Mobile First", rather than as an afterthought to designing for desktops. Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.

This approach is known as "responsive Web design". Some of its strategies include:

  • Liquid or fluid layout: Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.
  • Media queries: Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.
  • Fluid images: Setting images to occupy at most the maximum display width.

Resources

Overviews

Techniques

Examples

Revision Source

<p>With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers. Prominent designer Luke Wroblewski advocates designing for "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">Mobile First</a>", rather than as an afterthought to designing for desktops. Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.</p>
<p>This approach is known as "responsive Web design". Some of its strategies include:</p>
<ul> <li><strong>Liquid or fluid layout</strong>: Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.</li> <li><strong>Media queries</strong>: Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.</li> <li><strong>Fluid images</strong>: Setting images to occupy at most the maximum display width.</li>
</ul>
<h2>Resources</h2>
<h3>Overviews</h3>
<ul> <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a>, by Ethan Marcotte</li> <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a>, by Rick Petit</li> <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a>, by Kayla Knight</li> <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a>, by Luke Wroblewski</li>
</ul>
<h3>Techniques</h3>
<ul> <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS media queries</a> reference page</li> <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a>, by Chris Coyier</li> <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a>, by Russ Weakley</li> <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a>, by Ethan Marcotte</li> <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a>, by Chris Kemm</li>
</ul>
<h3>Examples</h3>
<ul> <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS media queries</a></li> <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a>, by Joshua Johnson</li> <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li>
</ul>
Revert to this revision