mirror of
https://github.com/bradfrost/this-is-responsive.git
synced 2026-04-18 03:00:06 -04:00
693 lines
44 KiB
HTML
693 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset='utf-8' />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
|
||
<title>Responsive Web Design Resources | This Is Responsive</title>
|
||
<script type="text/javascript" src="js/modernizr.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div role="main">
|
||
<h1>Responsive Resources</h1>
|
||
<p class="intro">A collection of resources about the various aspects of responsive web design.</p>
|
||
<div id="strategy" class="grid">
|
||
<h2><a href="#strategy">Strategy</a></h2>
|
||
<section id="getting-started">
|
||
<h3><a href="#getting-started">Getting Started</a></a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.alistapart.com/articles/responsive-web-design">Responsive Web Design</a></li>
|
||
<li class="featured"><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design Book</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">RWD: What It Is and How to Use It</a></li>
|
||
<li><a href="http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design">Beginner's Guide to Responsive Web Design</a></li>
|
||
<li><a href="http://en.wikipedia.org/wiki/Responsive_Web_Design">Responsive Web Design on Wikipedia</a></li>
|
||
<li><a href="http://johnpolacek.github.com/scrolldeck.js/decks/responsive/">What the Heck Is Responsive Web Design?</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="concepts">
|
||
<h3><a href="#concepts">Broader Concepts</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.w3.org/TR/mobile-bp/#OneWeb">One Web</a></li>
|
||
<li class="featured"><a href="http://www.alistapart.com/articles/dao/">The Dao of Web Design</a></li>
|
||
<li class="featured"><a href="http://futurefriend.ly">Future Friendly</a></li>
|
||
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a></li>
|
||
<li class="featured"><a href="http://adactio.com/journal/4523/">Content First</a></li>
|
||
<li><a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">Mobile-First Responsive Web Design</a></li>
|
||
<li><a href="http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/">RWD: Missing the Point</a></li>
|
||
<li><a href="http://blog.responsivenews.co.uk/post/12642980168/axes-of-responsive-design">Axes of responsive design</a></li>
|
||
<li><a href="http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/">COPE: Create Once, Publish Everywhere</a></li>
|
||
|
||
</ul>
|
||
</section>
|
||
<section id="approach">
|
||
<h3><a href="#approach">Approach</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://responsive.rga.com/tagged/strategy">This Is Responsive Tagged 'Strategy'</a></li>
|
||
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1509">Which One: Responsive Design, Device Experiences, or RESS?</a></li>
|
||
<li class="featured"><a href="http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques">Mobile web content adaptation techniques</a></li>
|
||
<li class="featured"><a href="http://stephanierieger.com/responsiveness-is-a-characteristic/">Responsiveness Is a Charactersic</a></li>
|
||
<li><a href="http://developers.facebook.com/html5/blog/post/6/">Device Experiences & Responsive Design</a></li>
|
||
<li><a href="http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/">Responsive web design: a project-management perspective</a></li>
|
||
<li><a href="http://uxmag.com/articles/a-primer-on-responsive-design">A Primer on Responsive Design</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/">Separate Mobile Website Vs. Responsive Website: Presidential Smackdown Edition</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="process">
|
||
<h3><a href="#process">Process</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.slideshare.net/pkattera/design-process-for-responsive-web-design">Design Process in the Responsive Age</a></li>
|
||
<li class="featured"><a href="http://www.slideshare.net/stephenhay/mobilism2012">Responsive Design Workflow</a></li>
|
||
<li class="featured"><a href="http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow">Responsive Summit: Workflow</a></li>
|
||
<li class="featured"><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
|
||
<li class="featured"><a href="http://responsive.rga.com/tagged/process">This Is Responsive Tagged 'Process'</a></li>
|
||
<li><a href="http://www.iaskyouanswer.co.uk/workflow.php">A Matter Of Workflow</a></li>
|
||
<li><a href="http://viljamis.com/blog/2012/responsive-workflow/">Responsive Workflow</a></li>
|
||
<li><a href="http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/">Design Process in the Responsive Age</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/">Sketching A New Mobile Web</a></li>
|
||
<li><a href="https://docs.google.com/folder/d/0B8FCzUsjm57YbkVVTDZwUlJZN0E/edit">RWD Process Docuements</a></li>
|
||
<li><a href="http://trentwalton.com/2013/04/10/reorganization/">Reorganization</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="budget">
|
||
<h3><a href="#budget">Budget</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/">How Much Does A Responsive Web Design Cost?</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="case-studies">
|
||
<h3><a href="#case-studies">Case Studies</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1691">Impact of Responsive Designs</a></li>
|
||
<li><a href="http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand">Time Magazine</a></li>
|
||
<li><a href="http://electricpulp.com/notes/you-like-apples/">O'Neill Clothing</a></li>
|
||
<li><a href="http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/">Skinny Ties</a></li>
|
||
<li><a href="http://www.lukew.com/ff/entry.asp?1691">Regent College</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="approach" class="grid">
|
||
<section id="retrofitting">
|
||
<h3><a href="#retrofitting">Retrofitting</a></h3>
|
||
<ul>
|
||
<li><a href="http://webstandardssherpa.com/reviews/responsive-retrofitting/">Responsive Retrofitting</a></li>
|
||
<li><a href="http://simplebits.com/notebook/2011/08/19/adapted/">Adapted</a></li>
|
||
<li><a href="https://github.com/sparkbox/Responsive-Retrofitting">Responsive Retrofitting Bookmarklet</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="design-tools" class="grid">
|
||
<h2><a href="#design-tools">Design Tools</a></h2>
|
||
<section id="galleries">
|
||
<h3><a href="#galleries">Inspiration</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://mediaqueri.es/">Mediaqueri.es</a></li>
|
||
<li class="featured"><a href="http://twitter.com/rwd">@RWD</a></li>
|
||
<li class="featured"><a href="http://responsive.rga.com/tagged/inspiration">This Is Responsive tagged 'Inspiration'</a></li>
|
||
<li><a href="http://weedygarden.net/highered-rwd-directory/">HigherEd RWD Directory</a></li>
|
||
<li><a href="http://responsivedeck.com/">Responsive Deck</a></li>
|
||
<li><a href="http://www.zurb.com/responsive">Zurb Responsive Gallery</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="sketch">
|
||
<h3><a href="#sketch">Sketching</a></h3>
|
||
<ul>
|
||
<li><a href="http://appsketchbook.com/products/responsive-design-sketchbook">Responsive Design Sketchbook</a></li>
|
||
<li><a href="http://www.mightymeta.co.uk/responsive-web-design-sketch-sheets/">Responsive Web Design Sketch Sheets</a></li>
|
||
<li><a href="http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets">Responsive Design Sketch Sheets</a></li>
|
||
<li><a href="http://interfacesketch.tumblr.com/">Interface Sketch</a></li>
|
||
<li><a href="http://www.zurb.com/playground/responsive-sketchsheets">Responsive Sketch Sheets</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="psd">
|
||
<h3><a href="#psd">PSDs</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">A better Photoshop grid for responsive web design</a></li>
|
||
<li class="featured"><a href="http://www.blazrobar.com/2012/free-psd-files-and-ui-kits/stripes-responsive-web-design-psd/">Stripes - Responsive Web Design PSD</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="post-psd-tools">
|
||
<h3><a href="#post-psd-tools">Post-PSD Tools</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a></li>
|
||
<li class="featured"><a href="http://styletil.es/">Style Tiles</a></li>
|
||
<li class="featured"><a href="http://danielmall.com/articles/rif-element-collages/">Element Collages</a></li>
|
||
<li><a href="http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype">Style Prototype</a></li>
|
||
<li><a href="http://webstiles.namanyayg.com/">Webstile</a></li>
|
||
|
||
<li><a href="http://republicofquality.com/projects/interactive-style-tiles/">Interactive Style Tiles</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="pattern-libraries">
|
||
<h3><a href="#pattern-libraries">Pattern Libraries</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides">Front-end Style Guide Roundup</a></li>
|
||
<li class="featured"><a href="http://pea.rs/">Pears</a></li>
|
||
<li><a href="http://speakerdeck.com/u/lukebrooker/p/future-friendly-style-guides">Future-Friendly Style Guides</a></li>
|
||
<li><a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks Style Guide</a></li>
|
||
<li><a href="https://github.com/bjankord/Style-Guide-Boilerplate">Style Guide Boilerplate</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="frameworks">
|
||
<h3><a href="#frameworks">Frameworks/Boilerplates/Prototyping</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
|
||
<li class="featured"><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 And Up</a></li>
|
||
<li class="featured"><a href="http://foundation.zurb.com/">Foundation ZURB</a></li>
|
||
<li class="featured"><a href="http://lessframework.com/">LESS</a></li>
|
||
<li class="featured"><a href="http://jetstrap.com/">Jetstrap</a></li>
|
||
<li><a href="http://divshot.com/">Divshot</a></li>
|
||
<li><a href="http://www.layoutit.com/">LayoutIt</a></li>
|
||
<li><a href="http://framelessgrid.com">Frameless</a></li>
|
||
<li><a href="http://html5boilerplate.com/mobile">Mobile Boilerplate</a></li>
|
||
<li><a href="http://getwirefy.com/">Wirefy</a></li>
|
||
<li><a href="https://github.com/taupecat/sass-responsive">Sass Responsive</a></li>
|
||
<li><a href="http://cferdinandi.github.com/kraken/">Kraken</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="calculators">
|
||
<h3><a href="#calculators">Calculators</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.rwdcalc.com/">RWD Calc</a></li>
|
||
<li><a href="http://csswizardry.com/fluid-grids/">Fluid Grids</a></li>
|
||
<li><a href="http://ratiostrong.com/">RatioStrong</a></li>
|
||
<li><a href="http://pixelperc.com/">PixelPerc</a></li>
|
||
<li><a href="http://pxtoem.com/">PixeltoEm</a></li>
|
||
<li><a href="http://riddle.pl/emcalc/">Em Calculator</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="layout" class="grid">
|
||
<h2><a href="#layout">Layout</a></h2>
|
||
<section id="fluid-grids">
|
||
<h3><a href="#fluid-grids">Fluid Grids</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.alistapart.com/articles/fluidgrids/">Fluid Grids</a></li>
|
||
<li class="featured"><a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5">Five simple steps to designing grid systems — Part 5</a></li>
|
||
<li class="featured"><a href="http://www.flexiblewebbook.com/">Flexible Web Design — Creating Liquid and Elastic Layouts with CSS</a></li>
|
||
<li><a href="http://builtbyboon.com/blog/proportional-grids">Proportional Grids</a></li>
|
||
<li><a href="https://github.com/elefontpress/rwd-grid-example">Bearded's Responsive Grid</a></li>
|
||
<li><a href="http://palantir.net/blog/responsive-design-s-dirty-little-secret">Responsive Design's Dirty Little Secret</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="grid-tools">
|
||
<h3><a href="#grid-tools">Grid Tools</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.fitgrd.com/">Fitgrd</a></li>
|
||
<li><a href="http://www.gridsetapp.com/">GridSet</a></li>
|
||
<li><a href="http://thatcoolguy.github.com/gridless-boilerplate/">Gridless Boilerplate</a></li>
|
||
<li><a href="http://goldengridsystem.com/">Golden Grid System</a></li>
|
||
<li><a href="http://gridpak.com/">Gridpak</a></li>
|
||
<li><a href="http://responsive.gs/">Responsive Grid System</a></li>
|
||
<li><a href="http://fluidbaselinegrid.com/">Fluid Baseline Grid</a></li>
|
||
<li><a href="http://responsify.it/">Responsify</a></li>
|
||
<li><a href="http://www.columnal.com/">Columnal</a></li>
|
||
<li><a href="http://semantic.gs/">Semantic Grid System</a></li>
|
||
<li><a href="http://susy.oddbird.net/">Susy, Responsive grids for Compass</a></li>
|
||
<li><a href="http://www.gumbyframework.com/">Gumby</a></li>
|
||
<li><a href="http://cssgrid.net/">1140 CSS Grid</a></li>
|
||
<li><a href="http://www.amazium.co.uk/">Amazium</a></li>
|
||
<li><a href="http://csswizardry.com/inuitcss/">Inuit CSS</a></li>
|
||
<li><a href="http://designlunatic.com/projects/blucss/">BluCSS</a></li>
|
||
<li><a href="http://singularity.gs/">Singularity</a></li>
|
||
<li><a href="http://unit.gs/">Unit Grid System</a></li>
|
||
<li><a href="http://thoughtbot.com/neat/">Bourbon Neat</a></li>
|
||
<li><a href="http://unit.gs/">Unit Grid System</a></li>
|
||
<li><a href="http://dfcb.github.com/Bedrock/">Bedrock Responsive Grid</a></li>
|
||
<li><a href="https://github.com/davatron5000/Foldy960">Foldy960</a></li>
|
||
<li><a href="http://www.responsivegridsystem.com/">Responsive Grid System</a></li>
|
||
<li><a href="http://www.yaml.de">YAML</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<section id="adjusting-layout">
|
||
<h3><a href="#adjusting-layout">Adjusting Layout</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1514">Multi-Device Layout Patterns</a></li>
|
||
<li class="featured"><a href="http://trentwalton.com/2011/07/14/content-choreography/">Content Choreography</a></li>
|
||
<li><a href="http://sarawb.com/2012/03/07/content-strategy-responsive-design/">Content Strategy for Responsive Design</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="media-queries" class="grid">
|
||
<h2><a href="#media-queries">Media Queries</a></h2>
|
||
<section id="mq-overview">
|
||
<h3><a href="#">Overview</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://responsive.rga.com/tagged/mediaqueries">This Is Responsive Tagged 'Media Queries'</a></li>
|
||
<li class="featured"><a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a></li>
|
||
|
||
</ul>
|
||
</section>
|
||
<section id="mq-determining">
|
||
<h3><a href="#mq-determining">Determining Breakpoints</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design">Determining breakpoints for a responsive design</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/">The EMs have it: Proportional Media Queries FTW!</a></li>
|
||
<li class="featured"><a href="http://adactio.com/journal/5425/">Fanfare for the common breakpoint</a></li>
|
||
<li class="featured"><a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/">Essential considerations for crafting quality media queries</a></li>
|
||
<li><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
|
||
<li><a href="http://www.markboulton.co.uk/journal/theinbetween">The In-Between</a></li>
|
||
<li><a href="http://seesparkbox.com/foundry/there_is_no_breakpoint">There Is No Breakpoint</a></li>
|
||
<li><a href="http://mattwilcox.net/archive/entry/id/1075/">Choosing device sizes to support for your responsive designs</a></li>
|
||
|
||
<li><a href="http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning">A Simple Device Diagram for Responsive Design Planning</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/">Device-Agnostic Approach To Responsive Web Design</a></li>
|
||
<li><a href="http://adactio.com/journal/6044/">Tweakpoints</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="mq-vertical">
|
||
<h3><a href="#mq-vertical">Vertical Media Queries</a></h3>
|
||
<ul>
|
||
<li><a href="http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/">Vertical Media Queries & Wide Sites</a></li>
|
||
<li><a href="http://css-tricks.com/responsive-web-above-the-fold/">Responsive Web Above The Fold</a></li>
|
||
<li><a href="http://blog.bearded.com/post/31535600872/whats-your-vertical">What’s Your Vertical?</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="mq-tools">
|
||
<h3><a href="#mq-tools">Tools</a></h3>
|
||
<ul>
|
||
<li><a href="https://github.com/scottjehl/Respond">Respond.js</a></li>
|
||
<li><a href="http://wicky.nillia.ms/enquire.js">enquire.js - Awesome Media Queries in JavaScript</a></li>
|
||
<li><a href="http://techtime.getharvest.com/blog/harvey-a-second-face-for-your-javascript">Harvy JS-based media queries</a></li>
|
||
<li><a href="http://edenspiekermann.com/en/blog/responsive-javascript-helpers">Relocate DOM Elements and call functions on breakpoints</a></li>
|
||
<li><a href="http://www.springload.co.nz/love-the-web/responsive-javascript">OnMediaQuery - Responsive Javascript</a></li>
|
||
<li><a href="http://www.jordanm.co.uk/palmreader">Palm Reader media query detector</a></li>
|
||
<li><a href="http://nicewebtype.com/notes/2012/01/27/breakpoints-and-range-rules/">Breakpoints and range rules</a></li>
|
||
<li><a href="http://mqtest.io">MQtest.io - Tests what dimensions a browser will respond to</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="mq-support">
|
||
<h3><a href="#mq-support">For Unsupported Browsers</a></h3>
|
||
<ul>
|
||
<li><a href="https://github.com/scottjehl/Respond">Respond.js</a></li>
|
||
<li><a href="http://jakearchibald.github.com/sass-ie/">Sass IE</a></li>
|
||
<li><a href="http://nicolasgallagher.com/mobile-first-css-sass-and-ie/">“Mobile first” CSS and getting Sass to help with legacy IE</a></li>
|
||
<li><a href="http://www.alwaystwisted.com/post.php?s=2011-12-01-a-less-approach-to-mobile-first-css-supporting-older-ie-browsers">A LESS approach to "Mobile First" CSS & supporting older IE browsers</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="type" class="grid">
|
||
<h2><a href="#type">Typography</a></h2>
|
||
<section id="typography">
|
||
<h3><a href="#typography">Typography</a></h3>
|
||
<ul>
|
||
<li><a href="http://kupferschrift.de/cms/2012/05/responsive-typography/">RWD Typography</a></li>
|
||
<li><a href="http://informationarchitects.net/blog/responsive-typography-the-basics/">Responsive Typography: The Basics</a></li>
|
||
<li><a href="http://informationarchitects.net/blog/responsive-typography/">Responsive Typography</a></li>
|
||
<li><a href="http://trentwalton.com/2012/06/19/fluid-type/">Fluid Type</a></li>
|
||
<li><a href="http://viljamis.com/blog/2013/prototyping-responsive-typography/">Prototyping Responsive Typography</a></li>
|
||
<li><a href="http://jordanm.co.uk/tinytype">Default Mobile OS fonts</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="typography-units">
|
||
<h3><a href="#typography-units">Units</a></h3>
|
||
<ul>
|
||
<li><a href="http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/">Type study: Sizing the legible letter</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/">How we learned to leave default font-size alone and embrace the em</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/on_ems_and_rems">On Ems and Rems</a></li>
|
||
|
||
</ul>
|
||
</section>
|
||
<section id="lettering">
|
||
<h3><a href="#lettering">Lettering</a></h3>
|
||
<ul>
|
||
<li><a href="http://fittextjs.com/">FitText</a></li>
|
||
<li><a href="http://www.frequency-decoder.com/demo/slabText/">SlabText</a></li>
|
||
<li><a href="http://circletype.labwire.ca/">CircleType.js</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="line-height">
|
||
<h3><a href="#line-height">Line Height</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.netmagazine.com/tutorials/preserving-vertical-rhythm-css-and-jquery">Preserving vertical rhythm with CSS and jQuery</a></li>
|
||
<li><a href="http://viljamis.com/blog/2012/typography/">On Typography</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="images" class="grid">
|
||
<h2><a href="#images">Images</a></h2>
|
||
<section id="images-in-rwd">
|
||
<h3><a href="#images-in-rwd">Overview</a></h3>
|
||
<ul>
|
||
<li><a href="http://unstoppablerobotninja.com/entry/fluid-images">Fluid Images</a></li>
|
||
<li><a href="http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/">A framework for discussing responsive images solutions</a></li>
|
||
<li><a href="http://christopherschmitt.com/2012/01/31/adaptive-images-in-responsive-web-design/">Adaptive Images in Responsive Web Design</a></li>
|
||
<li><a href="http://www.sitepoint.com/html5-responsive-design-image-dimensions/">HTML5 Responsive Design: How to Determine the Real Dimensions of an Image in JavaScript</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-techniques">
|
||
<h3><a href="#image-techniques">Responsive Image Techniques</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://css-tricks.com/which-responsive-images-solution-should-you-use/">Which Responsive Image Technique Should You Use?</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-imgs-part-2/">Responsive Images - In Depth Look at Techniques</a></li>
|
||
<li><a href="https://github.com/teleject/hisrc">HiSrc</a></li>
|
||
<li><a href="https://github.com/joshje/Responsive-Enhance">Responsive Enhance</a></li>
|
||
<li><a href="http://www.jordanm.co.uk/post/22964442013/source-shuffling-responsive-images-based-on-media">Source shuffling - responsive images based on media queries</a></li>
|
||
<li><a href="https://github.com/adamdbradley/focal-point">Focal Point</a></li>
|
||
<li><a href="http://imageresizing.net">ImageResizer</a></li>
|
||
<li><a href="https://github.com/mindrevolution/ImageResizer-ResponsivePresets">ResponsivePresets</a></li>
|
||
<li><a href="http://riapi.org">RESTful Imaging API Specification</a></li>
|
||
<li><a href="https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/">Capturing</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-compression">
|
||
<h3><a href="#image-compression">Compressive Images</a></h3>
|
||
<ul>
|
||
<li><a href="http://blog.netvlies.nl/design-interactie/retina-revolution/">Retina Revolution</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/rwd_img_compression/">Compressive Images</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-server">
|
||
<h3><a href="#image-server">Server-Side Image Solutions</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.sencha.com/learn/how-to-use-src-sencha-io">Sencha.io Src</a></li>
|
||
<li><a href="http://adaptive-images.com/">Adaptive Images</a></li>
|
||
<li><a href="http://resrc.it/">ReSRC.it</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-picture">
|
||
<h3><a href="#image-picture">New Elements</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.w3.org/community/respimg/">Responsive Images Community Group</a></li>
|
||
<li><a href="http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/">Responsive Images: How they Almost Worked and What We Need</a></li>
|
||
<li><a href="http://dev.opera.com/articles/view/responsive-images-problem/">Responsive images: what's the problem, and how do we fix it?</a></li>
|
||
<li><a href="https://github.com/scottjehl/picturefill">PictureFill element Polyfill</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="background-images">
|
||
<h3><a href="#background-images">Background Images</a></h3>
|
||
<ul>
|
||
<li><a href="http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/">Better background images for responsive web design</a></li>
|
||
<li><a href="http://timkadlec.com/2012/04/media-query-asset-downloading-results/">Media Query & Asset Downloading Results</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="hires-images">
|
||
<h3><a href="#hires-images">High Resolution</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.netmagazine.com/features/tips-and-tricks-retina-images-responsive-web-design">Tips and tricks for Retina images in responsive web design</a></li>
|
||
<li><a href="http://www.alistapart.com/articles/mo-pixels-mo-problems/">Mo Pixels, Mo Problems</a></li>
|
||
<li><a href="http://bradfrostweb.com/blog/mobile/hi-res-optimization/">Optimizing Web Experiences for High Resolution Screens</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="bandwidth-images">
|
||
<h3><a href="#bandwidth-images">Bandwidth Detection</a></h3>
|
||
<ul>
|
||
<li><a href="https://github.com/adamdbradley/foresight.js">Foresight.js</a></li>
|
||
<li><a href="https://github.com/nathanford/pngy">Pngy</a></li>
|
||
<li><a href="http://yahoo.github.com/boomerang/doc/">Boomerang JS</a></li>
|
||
<li><a href="http://www.w3.org/TR/netinfo-api/">Network Connection Spec</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="components" class="grid">
|
||
<h2><a href="#components">Components</a></h2>
|
||
<section id="navigation">
|
||
<h3><a href="#navigation">Navigation</a></h3>
|
||
<ul>
|
||
<li><a href="http://bradfrostweb.com/blog/web/responsive-nav-patterns/">Responsive Navigation Patterns</a></li>
|
||
<li><a href="http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/">Complex Navigation Patterns for Responsive Design</a></li>
|
||
<li><a href="http://www.netmagazine.com/features/master-mobile-navigation">Master Mobile Navigation</a></li>
|
||
<li><a href="http://www.lukew.com/ff/entry.asp?1649">Responsive Navigation: Optimizing for Touch Across Devices</a></li>
|
||
<li><a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">Build a smart mobile navigation without hacks</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/responsive_design_approach_for_navigation/">A Responsive Design Approach for Navigation, Part 1</a></li>
|
||
<li><a href="http://www.456bereastreet.com/archive/201206/an_alternative_to_select_elements_as_navigation_in_narrow_viewports/">An alternative to select elements as navigation in narrow viewports</a></li>
|
||
<li><a href="http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design">Scalable Navigation Patterns in Responsive Web Design</a></li>
|
||
<li><a href="http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design">We need a standard show navigation icon for responsive web design</a></li>
|
||
<li><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/">A Simple, Responsive, Mobile First Navigation</a></li>
|
||
<li><a href="http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/">Pull Down for Navigation</a></li>
|
||
<li><a href="http://www.welcomebrand.co.uk/thoughts/a-simple-responsive-navigation/">A Simple Responsive Navigation</a></li>
|
||
<li><a href="http://azadcreative.com/2012/07/responsive-mobile-first-navigation-menu/">Building a Responsive, Mobile-First Navigation Menu</a></li>
|
||
<li><a href="http://alwaystwisted.com/post.php?s=2012-05-14-create-a-responsive-mobile-first-menu">Create a Responsive, Mobile First Menu</a></li>
|
||
<li><a href="http://css-tricks.com/responsive-menu-concepts/">Responsive Menu Concepts</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/">Implementing Off-Canvas Navigation For A Responsive Website</a></li>
|
||
<li><a href="https://marketplace.firefox.com/developers/docs/patterns">Responsive Navigation Patterns for Firefox OS apps</a></li>
|
||
<li><a href="http://responsive-nav.com/">Responsive Nav</a></li>
|
||
<li><a href="http://responsivenavigation.net/">Adventures in Responsive Navigation</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="advertising">
|
||
<h3><a href="#advertising">Advertising</a></h3>
|
||
<ul>
|
||
<li><a href="http://mobile.smashingmagazine.com/2012/11/29/making-advertising-work-in-a-responsive-world/">Making Advertising Work In A Responsive World</a></li>
|
||
<li><a href="http://www.markboulton.co.uk/journal/comments/responsive-advertising">Responsive Advertising</a></li>
|
||
<li><a href="http://www.vanseodesign.com/web-design/responsive-advertising/">Where Does Advertising Fit In A Responsive World?</a></li>
|
||
<li><a href="http://blog.buysellads.com/2012/01/adaptive-web-design-advertising/">Adaptive Web-Design & Advertising</a></li>
|
||
<li><a href="http://www.impressivewebs.com/link-dump-on-responsive-ads/">Link Dump on Responsive Ads</a></li>
|
||
<li><a href="http://www.labnol.org/internet/google-adsense-responsive-design/25252/"></a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="video">
|
||
<h3><a href="#video">Video</a></h3>
|
||
<ul>
|
||
<li><a href="http://fitvidsjs.com/">Fitvids.js</a></li>
|
||
<li><a href="http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/">Creating Intrinsic Ratios for Video</a></li>
|
||
<li><a href="http://webdesignerwall.com/tutorials/css-elastic-videos">CSS: Elastic Videos</a></li>
|
||
<li><a href="http://www.netmagazine.com/tutorials/create-fluid-width-videos">Create fluid width videos</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
|
||
<section id="tables">
|
||
<h3><a href="#tables">Tables</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://css-tricks.com/responsive-data-table-roundup/">Responsive Data Tables </a></li>
|
||
<li><a href="http://www.zurb.com/playground/responsive-tables">Responsive Tables</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/">A Responsive Design Approach for Complex, Multicolumn Data Tables</a></li>
|
||
<li><a href="http://dyn.com/responsive-css-table-design-in-practice-web-development/">Responsive CSS Table Design In Practice & Execution</a></li>
|
||
<li><a href="http://johnpolacek.github.com/stacktable.js/">Stacktable.js</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="calendar">
|
||
<h3><a href="#calendar">Calendar</a></h3>
|
||
<ul>
|
||
<li><a href="http://dbushell.com/2012/01/04/responsive-calendar-demo/">Responsive Tables (and a calendar demo)</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="carousel">
|
||
<h3><a href="#carousel">Carousel</a></h3>
|
||
<ul>
|
||
<li><a href="http://bradfrostweb.com/blog/post/the-overflow-pattern/">The Overflow Pattern</a></li>
|
||
<li><a href="http://www.uxde.net/blog/2012/09/08/responsive-jquery-image-slider-plugins/">Best of:Responsive jQuery Image Slider Plugins</a></li>
|
||
<li><a href="http://dimsemenov.com/plugins/royal-slider/">Royal Slider</a></li>
|
||
<li><a href="http://responsive-slides.viljamis.com/">Responsive Slides</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="development" class="grid">
|
||
<h2><a href="#development">Development Techniques</a></h2>
|
||
<section id="conditional-loading">
|
||
<h3><a href="#conditional-loading">Conditional Loading</a></h3>
|
||
<ul>
|
||
<li><a href="http://filamentgroup.com/lab/ajax_includes_modular_content/">An Ajax-Include Pattern for Modular Content</a></li>
|
||
<li><a href="http://24ways.org/2011/conditional-loading-for-responsive-designs">Conditional Loading for Responsive Designs</a></li>
|
||
<li><a href="http://adactio.com/journal/5042/">Clean Conditional Loading</a></li>
|
||
<li><a href="http://adactio.com/journal/5414/">Conditionally loading content</a></li>
|
||
<li><a href="http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/">Conditional loading of resources with mediaqueries</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="ress">
|
||
<h3><a href="#ress">RESS</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.lukew.com/ff/entry.asp?1392">RESS: Responsive Design + Server Side Components</a></li>
|
||
<li><a href="http://www.netmagazine.com/tutorials/getting-started-ress">Getting Started with RESS Tutorial</a></li>
|
||
<li><a href="http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-evolution-of-responsive-web-design/">RESS: An Evolution of Responsive Web Design</a></li>
|
||
<li><a href="http://detector.dmolsen.com/demo/mustache/">Templating with Detector & Mustache for RESS</a></li>
|
||
<li><a href="http://weedygarden.net/2012/05/a-case-for-ress/">A Case for RESS</a></li>
|
||
<li><a href="http://www.mstoner.com/index.php/blog/comments/956/reinventing_the_wheel_the_innovation_behind_notre_dames_unique_new_homepage/">The Innovation Behind Notre Dame's Homepage</a></li>
|
||
<li><a href="http://www.mstoner.com/index.php/blog/comments/956/reinventing_the_wheel_the_innovation_behind_notre_dames_unique_new_homepage/">A Responsive Experience Begins on the Server</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="performance">
|
||
<h3><a href="#performance">Performance</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/">Performance Implications of Responsive Design</a></li>
|
||
<li><a href="https://speakerdeck.com/nebraskajs/performance-and-responsive-web-design">Performance and Responsive Web Design</a></li>
|
||
<li><a href="https://speakerdeck.com/grigs/performance-implications-of-responsive-design">Performance Implications of Repsonsive Design Pre
|
||
<li><a href="http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/">Debunking Responsive CSS Performance Myths</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="testing" class="grid">
|
||
<h2><a href="#testing">Testing</a></h2>
|
||
<section id="viewport-testing">
|
||
<h3><a href="#viewport-testing">Viewport Testing</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.responsinator.com/">Responsinator</a></li>
|
||
<li><a href="http://dfcb.github.com/Responsivator/">Responsivator</a></li>
|
||
<li><a href="http://responsive.is/">Responsive.is</a></li>
|
||
<li><a href="http://mattkersley.com/responsive/">Responsive Web Design Testing Tool</a></li>
|
||
<li><a href="http://responsivepx.com/">Responsivepx</a></li>
|
||
<li><a href="http://screenqueri.es/">Screenqueri.es</a></li>
|
||
<li><a href="http://itunes.apple.com/gb/app/aptus/id510487565?mt=12">Aptus</a></li>
|
||
<li><a href="http://responsive.victorcoulon.fr/">Responsive Design Bookmarklet</a></li>
|
||
<li><a href="http://www.benjaminkeen.com/misc/bricss/">Bricss</a></li>
|
||
<li><a href="https://github.com/izilla/Izilla-Media-Query-Debugger">Izilla Media Query Debugger</a></li>
|
||
<li><a href="http://quirktools.com/screenfly/">Screenfly</a></li>
|
||
<li><a href="http://www.jordanm.co.uk/lab/responsiveroulette">Responsive Roulette</a></li>
|
||
<li><a href="http://chrome.google.com/webstore/detail/fontier/dkbamaalakfhckcidgiigdinhcncaeae">Fontier for Chrome</a></li>
|
||
<li><a href="https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal">Resolution Test</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Firefox Developer Tools (shortcut CTRL + SHIFT + M) </a></li>
|
||
<li><a href="http://lab.maltewassermann.com/viewport-resizer/">Viewport Resizer</a></li>
|
||
<li><a href="http://www.toddmotto.com/jresize-plugin-for-one-window-responsive-development">jResize</a></li>
|
||
<li><a href="http://resizemybrowser.com/">Resize My Browser</a></li>
|
||
<li><a href="http://juicecreative.co.uk/juicer/">Juicer</a></li>
|
||
<li><a href="https://chrome.google.com/webstore/detail/rwddy/gkhnhkakdgogajfjmenpdeakhofjadhe">RWD
|
||
<li><a href="http://bradfrostweb.com/demo/ish/">ish.</a></li>
|
||
<li><a href="http://responsivetools.com/">Responsive Tools</a></li>
|
||
<li><a href="http://ami.responsivedesign.is/">Am I Responsive</a></li>
|
||
<li><a href="http://www.iammobile.co.uk/">I Am Mobile</a></li>
|
||
<li><a href="http://outof.me/responsive-inspector/">Responsive Inspector</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="device-testing">
|
||
<h3><a href="#device-testing">Device Testing</a></h3>
|
||
<ul>
|
||
<li><a href="http://mobilewebbestpractices.com/resources/#r-testing">Mobile Web Best Practices Testing Resources</a></li>
|
||
<li><a href="http://html.adobe.com/edge/inspect/">Adobe Edge Inspect</a></li>
|
||
|
||
<li><a href="http://www.opera.com/developer/tools/mobile/">Opera Mobile Testing Tools</a></li>
|
||
<li><a href="https://github.com/viljamis/Remote-Preview">Remote Preview</a></li>
|
||
<li><a href="http://vanamco.com/ghostlab/">ghostlab</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="testing-writing">
|
||
<h3><a href="#testing-writing">Testing Resources</a></h3>
|
||
<ul>
|
||
<li><a href="http://mobiletestingfordummies.tumblr.com/post/20056227958/testing">Testing for Dummies</a></li>
|
||
<li><a href="http://stephanierieger.com/strategies-for-choosing-test-devices/">Strategies for Choosing Testing Devices</a></li>
|
||
<li><a href="http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/">Test on Real Mobile Devices without Breaking the Bank</a></li>
|
||
<li></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div id="cms" class="grid">
|
||
<h2><a href="#cms">Content Management Systems</a></h2>
|
||
<section id="wordpress">
|
||
<h3><a href="#wordpress">Wordpress</a></h3>
|
||
<ul>
|
||
<li><a href="http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/">Creating Mobile Optimized Websites Using Wordpress</a></li>
|
||
|
||
<li><a href="http://www.webdesignerdepot.com/2012/09/creating-a-responsive-header-in-wordpress-3-4/">Creating a responsive header in WordPress 3.4</a></li>
|
||
<li><a href="http://themble.com/bones/">Bones – A Responsive Wordpress Theme Template by Eddie Machado</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="drupal">
|
||
<h3><a href="#drupal">Drupal</a></h3>
|
||
<ul>
|
||
<li><a href="http://groups.drupal.org/mobile/drupal-8">Drupal 8 Mobile Initiative</a></li>
|
||
<li><a href="http://drupal.org/project/adaptivetheme">AdaptiveTheme</a></li>
|
||
<li><a href="http://drupal.org/project/aurora">Aurora: Sass+Compass base theme using Susy or Singularity</a></li>
|
||
<li><a href="http://drupal.org/project/zen">Zen: Sass+Compass base theme using Zen Grids</a></li>
|
||
<li><a href="http://drupal.org/project/omega">Omega Drupal 7 Base Theme</a></li>
|
||
<li><a href="http://mydrupalblog.lhmdesign.com/my-drupal-blog-case-study-upgrade-redesign-html5-responsive">My Drupal Blog - Case Study (Upgrade, Redesign, HTML5, Responsive)</a></li>
|
||
<li><a href="http://www.zivtech.com/blog/responsive-drupal-theme-50-lines-code-or-less">A Responsive Drupal Theme in 50 Lines of Code or Less</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="ee">
|
||
<h3><a href="#ee">Expression Engine</a></h3>
|
||
<ul>
|
||
<li><a href="http://couchable.co/blog/post/responsive-images-in-expressionengine">Responsive Images in ExpressionEngine</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="cms" class="grid">
|
||
<h2><a href="#email">Email</a></h2>
|
||
<section id="email-design">
|
||
<h3><a href="#email-design">Email Design</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.campaignmonitor.com/guides/mobile/">Responsive Email Design</a></li>
|
||
<li><a href="http://www.zurb.com/article/1075/taking-our-email-campaigns-to-a-responsiv">Taking Email Campaigns to a Responsive Level</a></li>
|
||
<li><a href="http://mailchimp.com/resources/guides/email-on-mobile-devices/">Email on Mobile Devices</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="further-resources" class="grid">
|
||
<h2><a href="#further-resources">Further Resources</a></h2>
|
||
<section id="books">
|
||
<h3><a href="#books">Books</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design</a></li>
|
||
<li><a href="http://www.implementingresponsivedesign.com/">Implementing Responsive Design</a></li>
|
||
<li><a href="http://easy-readers.net/books/adaptive-web-design/">Adaptive Web Design</a></li>
|
||
<li><a href="http://www.amazon.com/Responsive-Design-Workflow-Stephen-Hay/dp/0321887867">Responsive Design Workflow</a></li>
|
||
<li><a href="https://shop.smashingmagazine.com/responsive-design.html">Responsive Design (eBook)</a></li>
|
||
<li><a href="http://www.packtpub.com/responsive-web-design-with-html-5-and-css3/book">Responsive Web Design with HTML5 and CSS3</a></li>
|
||
<li><a href="https://shop.smashingmagazine.com/smashing-book-3.html">Redesign The Web - The Smashing Book 3</a></li>
|
||
<li><a href-"https://shop.smashingmagazine.com/the-mobile-book-deluxe-bundle.html">The Mobile Book</a></li>
|
||
<li><a href="http://www.manning.com/carver/">The Responsive Web</a></li>
|
||
<li><a href="http://www.amazon.com/dp/0321858549/ref=cm_sw_su_dp">Designing Web and Mobile Graphics</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="roundup">
|
||
<h3><a href="#roundup">Roundups</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/">The ultimate responsive web design roundup</a></li>
|
||
<li><a href="http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design">50 fantastic tools for responsive web design</a></li>
|
||
<li><a href="http://zomigi.com/blog/responsive-layouts-presentation/">Building Responsive Layouts presentation at Responsive Web Design Summit</a></li>
|
||
<li><a href="http://mobile.bazaarvoice.com/uxdd/handbook.php?article=web-related-reading">Bazaarvoice Handbook for Mobile Design</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="presentations">
|
||
<h3><a href="#presentations">Presentations</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
|
||
<li><a href="https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1">Fashionably flexible responsive web design</a></li>
|
||
<li><a href="https://speakerdeck.com/bencallahan/build-responsively-2013-converge-se-columbia-sc">Build Responsively</a></li>
|
||
<li><a href="http://www.besquare.me/conferences/responsive-day-out/">Responsive Day Out</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="tutorials">
|
||
<h3><a href="#tutorials">Tutorials</a></h3>
|
||
<ul>
|
||
<li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/">Creating a Mobile-First Responsive Web Design</a></li>
|
||
<li><a href="http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1">Build a Responsive Site in a Week</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<small>* Recommended Resource</small>
|
||
<footer role="contentinfo">
|
||
<div>
|
||
<nav id="menu">
|
||
<ul role="navigation" class="nav">
|
||
<li><a href="index.html" class="nav-home">This Is <strong>Responsive.</strong></a></li>
|
||
<li><a href="patterns.html">Patterns</a></li>
|
||
<li><a href="resources.html">Resources</a></li>
|
||
<li><a href="http://responsive.rga.com">News</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<script type="text/javascript">
|
||
|
||
var _gaq = _gaq || [];
|
||
_gaq.push(['_setAccount', 'UA-2687475-23']);
|
||
_gaq.push(['_trackPageview']);
|
||
|
||
(function() {
|
||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|