mozilla

Revision 302597 of Resources

  • Revision slug: Apps/Design_Guidelines/Resources
  • Revision title: Resources
  • Revision id: 302597
  • Created:
  • Creator: caroline
  • Is current revision? No
  • Comment

Revision Content

Web App Guide

Appward's Field Guide to Web Apps
Getting Real - The smarter, faster, easier way to build a successful web application, by 37signals

Responsive Design

Overviews

Techniques

Examples & Patterns

Revision Source

<h2>Web App Guide</h2>
<p><a href="http://www.html5rocks.com/webappfieldguide/toc/index/" title="http://www.html5rocks.com/webappfieldguide/toc/index/">Appward's Field Guide to Web Apps</a><br />
  <a href="http://gettingreal.37signals.com/toc.php" title="http://gettingreal.37signals.com/toc.php">Getting Real - The smarter, faster, easier way to build a successful web application</a>, by 37signals</p>
<h2>Responsive Design</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://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>
  <li><a href="http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/" title="http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/">Notes to an Agency Starting Their First Responsive Web Project</a>, Chris Coyier</li>
</ul>
<h3>Techniques</h3>
<ul>
  <li><a href="https://developer.mozilla.org/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.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a>, by Smashing Editorial Team</li>
</ul>
<h3>Examples &amp; Patterns</h3>
<ul>
  <li><a href="https://developer.mozilla.org/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>
  <li><a href="http://mediaqueri.es/" title="http://mediaqueri.es/">Media Queries Gallery</a></li>
  <li><a href="http://www.lukew.com/ff/entry.asp?1514" title="http://www.lukew.com/ff/entry.asp?1514">Multi-Device Layout Patterns</a>, by Luke Wroblewski</li>
  <li><a href="http://www.lukew.com/ff/entry.asp?1569" title="http://www.lukew.com/ff/entry.asp?1569">Off Canvas Multi-Device Layouts</a>, by Luke Wroblewski</li>
</ul>
Revert to this revision