mirror of
https://github.com/bradfrost/this-is-responsive.git
synced 2026-04-18 03:00:06 -04:00
1006 lines
70 KiB
HTML
1006 lines
70 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>
|
||
<li><a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/">RWD Fundamentals</a>
|
||
<li><a href="http://alistapart.com/column/what-we-mean-when-we-say-responsive">What We Mean When We Say "Responsive"</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://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 Characteristic</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>
|
||
<li><a href="http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more/">Responsive Design is Not About Screen Sizes Any More</a></li>
|
||
<li><a href="http://alistapart.com/article/planning-for-performance">Planning for Performance</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://responsivedesignworkflow.com/">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>
|
||
<li><a href="https://medium.com/p/270048a88c70">Great Responsive Web Design is a Matter of Process</a></li>
|
||
<li><a href="http://www.elezea.com/2013/09/responsive-design-agency-workflow/">An agency workflow for Responsive Web Design</a></a></li>
|
||
<li><a href="http://alistapart.com/article/client-relationships-and-the-multi-device-web">eClient Relationships and the Multi-Device Web</a></li>
|
||
<li><a href="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups">Responsive Comping: Obtaining Signoff without Mockups</a></li>
|
||
<li><a href="http://lozworld.com/lozwords/notes-on-a-responsive-guardian-redesign">Notes on a responsive Guardian redesign</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://bradfrostweb.com/blog/post/responsive-design-to-the-rescue-how-homage-grew-mobile-revenue-by-258/">Responsive Design to the Rescue: How HOMAGE Grew Mobile Revenue by 258%</a></li>
|
||
<li><a href="http://www.lukew.com/ff/entry.asp?1691">Regent College</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/">Adapting To A Responsive Design</a></li>
|
||
<li><a href="http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web/">Betting on a fully responsive web application</a></li>
|
||
<li><a href="http://blog.14islands.com/post/60004825885/how-we-built-the-website-for-responsive-io/">How we built the website for responsive.io</a></li>
|
||
<li><a href="http://gomakethings.com/adopting-a-dog-from-your-phone/">PAWS New England: Adopting a dog from your phone</a></li>
|
||
<li><a href="http://www.edwardrobertson.co.uk/blog/is-responsive-web-design-worth-it">Is Responsive Web Design Worth It?</a></li>
|
||
<li><a href="http://econsultancy.com/us/blog/63185-14-brands-that-increased-conversion-rates-via-responsive-design">14 brands that increased conversion rates via responsive design</a></li>
|
||
<li><a href="http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/">How Walmart.ca’s Responsive Redesign Boost Conversion by 20%</a></li>
|
||
<li><a href="http://www.lukew.com/ff/entry.asp?1939">MTV's Responsive Design Boosts Metrics on Mobile & Beyond</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>
|
||
<li><a href="http://responsivecss.net/">Responsive CSS</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>
|
||
<li><a href="http://jumpsand.com/devpad.php">DevPad</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://www.republicofquality.com/style-tiles/">Interactive Style Tiles</a></li>
|
||
<li><a href="http://www.justinmind.com">Justinmind Prototyping Platform</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="pattern-libraries">
|
||
<h3><a href="#pattern-libraries">Pattern Libraries</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://styleguides.io/">Styleguides.io</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="frameworks">
|
||
<h3><a href="#frameworks">Frameworks/Boilerplates/Prototyping</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://getbootstrap.com/">Bootstrap</a></li>
|
||
<li class="featured"><a href="http://foundation.zurb.com/">Foundation ZURB</a></li>
|
||
<li class="featured"><a href="http://inuitcss.com/">Inuit CSS</a></li>
|
||
<li><a href="http://www.maxmert.com/">Maxmert</a></li>
|
||
<li><a href="http://gumbyframework.com/">Gumby</a></li>
|
||
<li><a href="http://cardinalcss.com/">Cardinal</a></li>
|
||
<li><a href="http://purecss.io/">Pure</a></li>
|
||
<li><a href="http://awesomeness.intuio.at/">Awesomeness</a></li>
|
||
<li><a href="http://www.cascade-framework.com/">Cascade Framework</a></li>
|
||
<li><a href="http://www.layoutit.com/">LayoutIt</a></li>
|
||
<li><a href="http://www.amazium.co.uk/">Amazium</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>
|
||
<li><a href="http://www.protoshare.com/">Protoshare</a></li>
|
||
<li><a href="http://www.yaml.de">YAML</a></li>
|
||
<li><a href="http://responsivebp.com/">Responsive</a></li>
|
||
<li><a href="http://www.taigaboilerplate.com/">Taiga Boilerplate</a></li>
|
||
<li><a href="http://www.thinkintags.com/">Thinkin' Tags</a></li>
|
||
<li><a href="https://www.easel.io">Easel</a></li>
|
||
<li><a href="http://semantic-ui.com/">Semantic UI</a></li>
|
||
<li><a href="http://dartanian300.github.io/Flex-Grid-System/">Flex Grid System</a></li>
|
||
<li><a href="http://www.cutegrids.com/">Cute Grids</a></li>
|
||
<li><a href="http://codeply.com/">Codeply</a></li>
|
||
<li><a href="http://www.simbla.com/">Simbla</a></li>
|
||
<li><a href="http://www.coffeecup.com/responsive-layout-maker-pro/">Responsive Layout Maker Pro</a></li>
|
||
<li><a href="http://refills.bourbon.io/">Refills</a></li>
|
||
<li><a href="http://getskeleton.com/">Skeleton</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="visual-editors">
|
||
<h3><a href="#visual-editors">Visual Editors</a></h3>
|
||
<ul>
|
||
<li><a href="http://macaw.co/">Macaw</a></li>
|
||
<li><a href="http://jetstrap.com/">Jetstrap</a></li>
|
||
<li><a href="http://html.adobe.com/edge/reflow/">Adobe Reflow</a></li>
|
||
<li><a href="http://divshot.com/">Divshot</a></li>
|
||
<li><a href="http://froont.com/">Froont</a></li>
|
||
<li><a href="http://webflow.com/">Webflow</a></li>
|
||
<li><a href="http://www.webydo.com/">Webydo</a></li>
|
||
<li><a href="http://www.coffeecup.com/designer">Responsive Site Designer</a></li>
|
||
<li><a href="https://mobirise.com/">Mobirise</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/2011/06/fluid-grid-calculator/">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>
|
||
<li><a href="http://isthisretina.com/">Is This Retina</a></li>
|
||
<li><a href="http://rqrwd.com/">RQRWD</a></li>
|
||
<li><a href="http://px-em.com/">PX-EM</a></li>
|
||
<li><a href="http://rafaelespinoza.com/munity/">Munity</a></li>
|
||
<li><a href="http://www.giantfocal.com/pxtoem">PX to EM Converter</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 class="featured"><a href="http://www.gridsetapp.com/">GridSet</a></li>
|
||
<li class="featured"><a href="http://lessframework.com/">LESS</a></li>
|
||
<li><a href="http://susy.oddbird.net/">Susy for Compass</a></li>
|
||
<li><a href="http://unsemantic.com/">Unsemantic</a></li>
|
||
<li><a href="http://framelessgrid.com">Frameless</a></li>
|
||
<li><a href="http://www.fitgrd.com/">Fitgrd</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://cssgrid.net/">1140 CSS Grid</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://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.profoundgrid.com/">Profound Grid</a></li>
|
||
<li><a href="https://github.com/Cyber-Duck/hoisin.scss">Hoisin.scss</a></li>
|
||
<li><a href="http://www.cssgrid.co/">cssgrid.co</a></li>
|
||
<li><a href="https://github.com/webfactory/Raster.gs/">Raster.gs</a></li>
|
||
<li><a href="http://www.volumethemes.com/flexgrid">FlexGrid</a></li>
|
||
<li><a href="http://muellergridsystem.com/">Mueller Grid System</a></li>
|
||
<li><a href="http://jeet.gs/">Jeet</a></li>
|
||
<li><a href="https://github.com/AaronRutley/minimal-grid">Minimal Grid</a></li>
|
||
<li><a href="http://34grid.com/">34 Grid</a></li>
|
||
<li><a href="http://pintsize.io/">Pintsize</a></li>
|
||
<li><a href="http://knacss.com/">Knacss</a></li>
|
||
<li><a href="https://github.com/superreal/srgrid">sR Grid - Dead Simple Flexbox Grid</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>
|
||
<li><a href="http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table">CSS Stacking with display:table</a></li>
|
||
<li><a href-"http://www.eightshapes.com/responsive-grid-demo/">Working Vocabulary: Responsive Grid Behaviors</a></li>
|
||
<li><a href="http://liquidapsive.com/">Liquidapsive</a></li>
|
||
<li><a href="http://alistapart.com/article/content-out-layout">Content Out Layout</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="large-screens">
|
||
<h3><a href="#large-screens">Large Screens</a></h3>
|
||
<ul>
|
||
<li><a href="http://webdesign.tutsplus.com/articles/general/life-beyond-960px-designing-for-large-screens/">Life Beyond 960px: Designing for Large Screens</a></li>
|
||
<li><a href="http://alistapart.com/article/surveying-the-big-screen">Surveying The Big Screen</a></li>
|
||
<li><a href="http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/">Vertical Media Queries and Wide Sites</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="js-layout">
|
||
<h3><a href="#js-layout">JS Layout Tools</a></h3>
|
||
<ul>
|
||
<li><a href="http://masonry.desandro.com/">Masonry</a></li>
|
||
<li><a href="http://isotope.metafizzy.co/">Isotope</a></li>
|
||
<li><a href="http://iraycd.com/brickwork/">Brickwork</a></li>
|
||
</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>
|
||
<li><a href="https://speakerdeck.com/bencallahan/serving-rwd-styles">Serving RWD Styles</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.creativebloq.com/responsive-web-design/determining-breakpoints-responsive-design-8122871">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>
|
||
<li><a href="http://beta.screenqueri.es/">Screenqueri.es - 30 different device presets + custom resolutions.</a></li>
|
||
<li><a href="https://github.com/steveblue/res">Res.js</a></li>
|
||
<li><a href="https://github.com/zeixcom/Anzeixer">Anzeixer</a></li>
|
||
<li><a href="https://github.com/superreal/srbreakpoints">sR Breakpoints - SASS Helpers for Breakpoint Handling</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>
|
||
<li><a href="http://cognition.happycog.com/article/fall-back-to-the-cascade">Fall back to the Cascade</a></li>
|
||
<li><a href="http://seesparkbox.com/foundry/structuring_and_serving_styles_for_older_browsers" title="sb-media, supporting old IE using module-based partials in SCSS">sb-media, supporting old IE using module-based partials in SCSS</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="mq-techniques">
|
||
<h3><a href="#mq-techniques">Techniques</a></h3>
|
||
<ul>
|
||
<li><a href="http://css-tricks.com/conditional-media-query-mixins/">Creating Conditional Media Query Mixins with SCSS</a></li>
|
||
<li><a href="https://github.com/buildingblocks/grunt-combine-media-queries">Grunt Combine Media Queries</a></li>
|
||
<li><a href="https://github.com/RayPatterson/breakpoint-bridge">Breakpoint Bridge</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="element-queries">
|
||
<h3><a href="#element-queries">Element/Container Queries</a></h3>
|
||
<ul>
|
||
<li><a href="http://ianstormtaylor.com/media-queries-are-a-hack/">Media Queries Are a Hack</a></li>
|
||
<li><a href="http://www.xanthir.com/b4PR0">Element Queries</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/">Media Queries Are Not The Answer: Element Query Polyfill</a></li>
|
||
<li><a href="http://filamentgroup.com/lab/element_query_workarounds/">Working Around a Lack of Element Queries</a></li>
|
||
<li><a href="http://www.jonathantneal.com/blog/thoughts-on-media-queries-for-elements/">Thoughts on Media Queries for Elements</a></li>
|
||
<li><a href="http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/">Media Queries Are Not The Answer: Element Query Polyfill</a></li>
|
||
<li><a href="http://responsiveimagescg.github.io/eq-usecases/?utm_source=dlvr.it&utm_medium=twitter">Use Cases and Requirements for Element Queries</a></li>
|
||
<li><a href="http://fourword.fourkitchens.com/article/use-element-queries-today-eqjs">Use element queries today with eq.js</a></li>
|
||
<li><a href="http://jsbin.com/ramiguzefiji/1/edit">Element query experiment by Scott Jehl</a></li>
|
||
<li><a href="http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/">Element Queries, From the Feet Up</a></li>
|
||
<li><a href="http://alistapart.com/article/container-queries-once-more-unto-the-breach">Container Queries: Once More Unto the Breach</a></li>
|
||
<li><a href="http://responsiveimagescg.github.io/cq-usecases/">Use Cases and Requirements for Element Queries</a></li>
|
||
<li><a href="http://hugogiraudel.com/2014/04/22/why-element-queries-matter/">Why Element Queries Matter</a></li>
|
||
<li><a href="https://justmarkup.com/log/2016/02/use-cases-for-container-queries/">Use cases for container queries</a></li>
|
||
<li>Tools</li>
|
||
<li><a href="https://github.com/snugug/eq.js">eq.js</a></li>
|
||
<li><a href="http://marcj.github.io/css-element-queries/">CSS Element Queries</a></li>
|
||
<li><a href="https://github.com/tysonmatanich/elementQuery">elementQuery</a></li>
|
||
<li><a href="http://boomtownroi.github.io/boomqueries/">Boomqueries</a></li>
|
||
<li><a href="https://github.com/ausi/cq-prolyfill">Container Queries Prolyfill</a></li>
|
||
<li><a href="https://github.com/filamentgroup/scoped-media-query">Scoped Media Queries</a></li>
|
||
<li><a href="http://elementqueries.com/">Element Queries</a></li>
|
||
<li><a href="https://ethanmarcotte.com/wrote/on-container-queries/">On Container Queries</a></li>
|
||
<li><a href="https://github.com/judas-christ/breaks2000">breaks2000</a></li>
|
||
<li><a href="https://au.si/css-conditions-cq-alternative">CSS Conditions – An Alternative To Container Queries</a></li>
|
||
<li><a href="https://paulrobertlloyd.com/2017/04/container_queries">Questioning Container Queries</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>
|
||
<li><a href="http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography">Techniques for Responsive Typography</a></li>
|
||
<li><a href="https://github.com/viljamis/Molten-Leading">Molten Leading</a></li>
|
||
<li><a href="http://modularscale.com">Modular Scale</a></li>
|
||
<li><a href="http://www.gridlover.net/">Gridlover</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://jxnblk.github.io/fitter-happier-text/">Fitter Happier Text</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 Length and 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>
|
||
<li><a href="http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/">Balancing Line Length and Font Size in RWD</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="images" class="grid">
|
||
<h2><a href="#images">Images</a></h2>
|
||
<section id="images-overview">
|
||
<h3><a href="#images-overview">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://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/">8 Guidelines and 1 Rule for Responsive Images</a></li>
|
||
<li><a href="http://timkadlec.com/2013/06/why-we-need-responsive-images/">Why We Need Responsive Images</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-techniques">
|
||
<h3><a href="#image-techniques">Responsive Image Techniques</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
|
||
<li class="featured"><a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a></li>
|
||
<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-images-101-definitions/">Responsive Images 101: Definitions</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-2-img-required/">Responsive Images 101: Img Required</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/">Responsive Images 101: Srcset Display Density</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/">Responsive Images 101: Srcset Width Descriptors</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-5-sizes/">Responsive Images 101: Sizes</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/">Responsive Images 101: Picture</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/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 – Improving Performance of the Adaptive Web</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/">Clown Car Technique</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/">Addressing The Responsive Images Performance Problem: A Case Study</a></li>
|
||
<li><a href="https://github.com/imazen/slimmage">Slimmage</a></li>
|
||
<li><a href="https://github.com/stowball/rwd.images.js">rwd.images.js</a></li>
|
||
<li><a href="https://github.com/teleject/hisrc">HiSrc</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="picture">
|
||
<h3><a href="#picture"><picture></a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/">Responsive Images 101: Picture</a></li>
|
||
<li><a href="http://www.w3.org/TR/html-picture-element/">The Picture Element</a></li>
|
||
<li><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
|
||
<li><a href="http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/">Responsive Images Done Right: A Guide To picture And srcset</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="srcset">
|
||
<h3><a href="#srcset">Srcset</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/">Responsive Images 101: Srcset Display Density</a></li>
|
||
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/">Responsive Images 101: Srcset Width Descriptors</a></li>
|
||
<li><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element">Srcset</a></li>
|
||
<li><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
|
||
<li><a href="http://ericportis.com/posts/2014/srcset-sizes/">Srcset and Sizes</a></li>
|
||
<li><a href="http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/">Responsive Images Done Right: A Guide To picture And srcset</a></li>
|
||
<li><a href="http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If you’re just changing resolutions, use srcset.</a></li>
|
||
<li><a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a></li>
|
||
<li><a href="http://bradfrost.com/blog/post/responsive-images/">Responsive Images</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>
|
||
<li><a href="http://www.netvlies.nl/blog/design-interactie/retina-revolutie-follow-up">Retina revolutie follow up</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="image-server">
|
||
<h3><a href="#image-server">Server-Side Image Solutions</a></h3>
|
||
<ul>
|
||
<li><a href="http://adaptive-images.com/">Adaptive Images</a></li>
|
||
<li><a href="http://imagefly.io">Imagefly</a></li>
|
||
<li><a href="https://www.imgix.com">imgix</a></li>
|
||
<li><a href="https://imagekit.io">ImageKit</a></li>
|
||
<li><a href="https://www.responsive.io/">responsive.io</a></li>
|
||
<li><a href="https://github.com/johnkoht/responsive-images">Responsive Images for Ruby on Rails</a></li>
|
||
<li><a href="http://resrc.it/">ReSRC.it</a></li>
|
||
<li><a href="http://www.sencha.com/learn/how-to-use-src-sencha-io">Sencha.io Src</a></li>
|
||
<li><a href="http://wurfl.io/#wit">WURFL Image Tailor</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="icons">
|
||
<h3><a href="#icons">Icon Fonts</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://icomoon.io">IcoMoon</a></li>
|
||
<li class="featured"><a href="http://www.grumpicon.com/">Grumpicon</a></li>
|
||
<li><a href="http://fontello.com/">Fontello</a></li>
|
||
<li><a href="http://symbolset.com/">Symbolset</a></li>
|
||
<li><a href="http://fontastic.me/">Fontastic</a></li>
|
||
<li><a href="http://fontawesome.io/">Font Awesome</a></li>
|
||
<li><a href="https://www.mapbox.com/maki/">Maki</a></li>
|
||
<li><a href="http://typicons.com/">Typicons</a></li>
|
||
<li><a href="http://adamwhitcroft.com/batch/">Batch</a></li>
|
||
<li><a href="http://www.streamlineicons.com/">Streamline</a></li>
|
||
<li><a href="https://nucleoapp.com/">Nucleo</a></li>
|
||
<li><a href="http://www.simunity.net/">Simunity</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>
|
||
<section id="cms-images">
|
||
<h3><a href="#cms-images">CMS Image Solutions</a></h3>
|
||
<ul>
|
||
<li><a href="https://wordpress.org/plugins/responsify-wp/">Responsify WP</a></li>
|
||
<li><a href="http://web-design-weekly.com/2015/01/20/ricg-responsive-images-plugin/">RICG-Responsive-Images Plugin</a></li>
|
||
<li><a href="https://github.com/tevko/wp-tevko-responsive-images">Wordpress Tevko Responsive Images</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="https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074">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>
|
||
<li><a href="http://mobile.smashingmagazine.com/2013/09/11/responsive-navigation-on-complex-websites/">Responsive Navigation for Complex Websites</a></li>
|
||
<li><a href="http://www.smartmenus.org/blog/smartmenus/create-advanced-bootstrap-3-navbars-zero-config/">Create advanced Bootstrap 3 navbars with SmartMenus jQuery</a></li>
|
||
<li><a href="http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/">Wayfinding for the Mobile Web</a></li>
|
||
<li><a href="https://codyhouse.co/gem/responsive-tabbed-navigation/">Responsive Tabbed 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/">Responsive Google AdSense Ads</a></li>
|
||
<li><a href="https://github.com/madgex/lazy-ads">Lazy Ads</a></li>
|
||
<li><a href="http://next.theguardian.com/blog/responsive-takeover/">Introducing theguardian.com responsive takeover</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="https://dollarshaveclub.github.io/reframe.js/">Reframe.js</a></li>
|
||
<li><a href="https://github.com/toddmotto/fluidvids">Fluidvids</a></li>
|
||
<li><a href="https://gist.github.com/davatron5000/e9ef20f1d2ba4d9099711064c644d155">Vanilla Fitvids</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>
|
||
<li><a href="http://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video">Responsive HTML5 video</a></li>
|
||
<li><a href="http://www.iandevlin.com/blog/2012/12/html5/html5-video-for-retina-displays">HTML5 video for retina displays</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="media">
|
||
<h3><a href="#media">Media</a></h3>
|
||
<ul>
|
||
<li><a href="http://embedresponsively.com/">Embed Responsively</a></li>
|
||
<li><a href="http://amobil.se/2011/11/responsive-embeds/">Responsive Embeds</a></li>
|
||
<li><a href="http://responsivebp.com/">Responsive Media</a></li>
|
||
<li><a href="http://iframely.com/oembed2">iFramely</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/">Making Embedded Content Work in Responsive Design</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 class="featured"><a href="http://blog.cloudfour.com/picking-responsive-tables-solution/">Picking a Responsive Tables Solution</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>
|
||
<li><a href="http://filamentgroup.com/lab/tablesaw.html">Table Saw</a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="charts">
|
||
<h3><a href="#charts">Charts & Graphs</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="https://github.com/gionkunz/chartist-js">Chartist.js</a></li>
|
||
<li class="featured"><a href="http://zurb.com/playground/pizza-amore-charts-and-graphs">Pizza Amore</a></li>
|
||
<li><a href="http://www.chartjs.org/">Chart.js</a></li>
|
||
<li><a href="http://www.highcharts.com/">Highcharts</a></li>
|
||
<li><a href="http://demos.telerik.com/kendo-ui/">Kendo Charts</a></li>
|
||
<li><a href="http://c3js.org/">C3js</a></li>
|
||
<li><a hef="http://nvd3.org/">NVD3</a></li>
|
||
<li><a href="http://www.zingchart.com">Zing Chart</a></li>
|
||
<li><a href="http://www.koolchart.com/">Koolchart</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="https://github.com/filamentgroup/Overthrow-Sidescroller">Overthrow Sidescroller</a> <a href="http://filamentgroup.github.io/Overthrow-Sidescroller/">(Demo)</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>
|
||
<li><a href="http://www.idangero.us/sliders/swiper/">Swiper</a></li>
|
||
<li><a href="https://github.com/jonykrause/fluid-slider">Fluid Slider</a></li>
|
||
<li><a href="http://unslider.com/">Unslider</a></li>
|
||
<li><a href="http://owlgraphic.com/owlcarousel/">OWL Carousel</a></li>
|
||
<li><a href="http://www.coffeecup.com/slider">Responsive Content Slider</a></li>
|
||
<li><a href="https://flickity.metafizzy.co/">Flickity</a></li>
|
||
<li><a href="https://kenwheeler.github.io/slick/">Slick</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="carousel">
|
||
<h3><a href="#carousel">Lightbox</a></h3>
|
||
<ul>
|
||
<li><a href="http://bradfrostweb.com/blog/post/conditional-lightbox/">Conditional Lightbox</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">Magnific Popup, A Truly Responsive Lightbox</a></li>
|
||
<li><a href="http://photoswipe.com/">Photoswipe</a></li>
|
||
</ul>
|
||
</section>
|
||
<section id="media-object">
|
||
<h3><a href="#carousel">Media Object</a></h3>
|
||
<ul>
|
||
<li><a href="http://paul.ie/2013/12/mobile-first-media-objects/">Mobile-First Media Objects</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="development" class="grid">
|
||
<h2><a href="#development">Development</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>
|
||
<li><a href="http://responsivecomments.com/">Responsive Comments</a></li>
|
||
<li><a href="http://foundation.zurb.com/docs/components/interchange.html">Interchange</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.creativebloq.com/responsive-web-design/getting-started-ress-5122956">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>
|
||
<li><a href="http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/">Lightening Your Responsive Website Design With RESS</a></li>
|
||
<li><a href="http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956">Getting started with RESS</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>
|
||
<li><a href="http://speedcurve.com/">SpeedCurve</a></li>
|
||
<li><a href="https://speakerdeck.com/davatron5000/rwd-bloat">RWD Bloat</a></li>
|
||
<li><a href="http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/">Blame the Implementation Not the Technique </a></li>
|
||
<li><a href="http://www.guypo.com/rwd-2014/">RWD Adoption 2014</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</a></li>
|
||
<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>
|
||
<li><a href="http://morganesque.github.io/resphrame/">Resphrame</a></li>
|
||
<li><a href="http://resize.11hundred.com/">11h Re-size</a></li>
|
||
<li><a href="http://breakpointtester.com/">Breakpoint Tester</a></li>
|
||
<li><a href="https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk">Dimensions</a></li>
|
||
<li><a href="http://quirktools.com/screenfly/">Screenfly</a></li>
|
||
<li><a href="http://bbc-sport.github.io/viewporter/">Viewporter</a></li>
|
||
<li><a href="http://www.dimensionstoolkit.com/">Dimensions Toolkit</a></li>
|
||
<li><a href="http://whatsmybrowsersize.com/">What's My Browser Size?</a></li>
|
||
<li><a href="http://nerijusgood.github.io/viewport-resizer/">Viewport-Resizer</a></li>
|
||
<li><a href="http://design.google.com/resizer">Resizer</a></li>
|
||
<li><a href="https://polypane.rocks/">Polypane</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><a href="http://galenframework.com/">Galen Framework</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://rwdwp.com/">RWD with Wordpress</a></li>
|
||
<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>
|
||
<section id="cms-other">
|
||
<h3><a href="#cms-other">Other</a></h3>
|
||
<ul>
|
||
<li><a href="http://moboom.com/">Moboom</a></li>
|
||
<li><a href="http://respondcms.com/">Respond CMS</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div id="email" class="grid">
|
||
<h2><a href="#email">Email</a></h2>
|
||
<section id="email-design">
|
||
<h3><a href="#email-design">Email Design</a></h3>
|
||
<ul>
|
||
<li class="featured"><a href="http://www.responsiveemailresources.com/">Responsive Email Resources</a></li>
|
||
<li class="featured"><a href="http://responsiveemailpatterns.com/">Responsive Email Patterns</a></li>
|
||
<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>
|
||
<li><a href="http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/">How to design a responsive HTML email</a></li>
|
||
<li><a href="http://mobile.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/">From Monitor To Mobile: Optimizing Email Newsletters With CSS</a></li>
|
||
<li><a href="http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/">Responsive HTML Emails: a Different Strategy</a></li>
|
||
<li><a href="https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic">The How-To Guide to Responsive Email Design</a></li>
|
||
<li><a href="http://zurb.com/ink">ZURB Ink</a></li>
|
||
<li><a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a></li>
|
||
<li><a href="http://stylecampaign.com/blog/2013/03/responsive-email-design-red/">Responsive Email Design (RED)</a></li>
|
||
<li><a href="http://litmus.com/lp/artifact">Responsive Email Resources</a></li>
|
||
<li><a href="http://www.emailmonks.com/mailchimp-master-template.html">MailChimp Master Template</a></li>
|
||
<li><a href="https://github.com/leemunroe/responsive-html-email-template">Simple repsonsive email template</a></li>
|
||
<li><a href="http://www.coffeecup.com/email-designer">Responsive Email Designer</a></li>
|
||
<li><a href="https://mjml.io/">mjml</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/Guides</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="http://www.abookapart.com/products/responsible-responsive-design">Responsible Responsive Design</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>
|
||
<li><a href="http://www.manning.com/rotton/">Responsive WordPress Theming</a></li>
|
||
<li><a href="http://responsivedesignworkflow.com/">Responsive Design Workflow</a></li>
|
||
<li><a href="http://rwdwp.com/">RWD with Wordpress</a></li>
|
||
<li><a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/">Google Web Fundamentals</a></li>
|
||
<li><a href="http://www.amazon.com/Responsive-Web-Design-Adobe-Photoshop/dp/0134035631/ref=sr_1_1">Responsive Web Design with Adobe Photoshop</a></li>
|
||
<li><a href="http://abookapart.com/products/going-responsive">Going Responsive</a></li>
|
||
<li><a href="http://abookapart.com/products/responsive-design-patterns-principles">Responsive Design Patterns and Principles</a></li>
|
||
<li><a href="https://shop.smashingmagazine.com/products/smashing-book-5-real-life-responsive-web-design">Real Life Responsive Web Design</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://www.creativebloq.com/responsive-design-tools-8134180">The top 25 responsive design tools</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>
|
||
<li><a href="http://www.penthouse-magic.com/9-essential-responsive-web-design-best-practices/">9 Essential Responsive Web Design Best Practices</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.creativebloq.com/css3/build-responsive-site-week-designing-responsively-part-1-4122850">Build a responsive site in a week: designing responsively (part 1)</a></li>
|
||
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-typography-and-grids-part-2-9134361">Build a responsive site in a week: typography and grids (part 2)</a></li>
|
||
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-images-and-video-part-3-4124358">Build a responsive site in a week: images and video (part 3)</a></li>
|
||
<li><a href="http://www.creativebloq.com/netmag/build-responsive-site-week-media-queries-part-4-4122963">Build a responsive site in a week: media queries (part 4)</a></li>
|
||
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-going-further-part-5-4124357">Build a responsive site in a week: going further (part 5)</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>
|
||
</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>
|