github/this-is-responsive
1
1
Fork 0
mirror of https://github.com/bradfrost/this-is-responsive.git synced 2026-05-10 03:00:48 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
2c0484396a046ef61cf307e9bc56f3f7b70f36be
this-is-responsive/resources.html
Brad Frost 2c0484396a Offloading the CSS animations to another stylesheet
2012-05-31 17:28:00 -04:00

179 lines
8.3 KiB
HTML
Raw Blame History

<!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>
<div id="strategy" class="grid">
<h2>Strategy</h2>
<section id="getting-started">
<h3>Getting Started</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>
</ul>
</section>
<section id="concepts">
<h3>Broader Concepts</h3>
<ul>
<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://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/">COPE: Create Once, Publish Everywhere</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>
</ul>
</section>
<section id="approach">
<h3>Approach</h3>
<ul>
<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://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>
</ul>
</section>
<section id="process">
<h3>Process</h3>
<ul>
<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><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>
</ul>
</section>
</div>
<div id="design" class="grid">
<h2>Design</h2>
<section id="inspiration">
<h3>Inspiration</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>
</section>
<section id="frameworks">
<h3>Frameworks/Boilerplates</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><a href="http://framelessgrid.com">Frameless</a></li>
<li><a href="http://fbg.40horse.com/"></a></li>
<li><a href="http://html5boilerplate.com/mobile">Mobile Boilerplate</a></li>
</section>
<section id="media queries">
<h3>Media Queries</h3>
<ul>
<li class="featured"><a href="http://adactio.com/journal/5425/">Fanfare for the Common Breakpoint</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>
</ul>
</section>
<section id="style-guide">
<h3>Style Guides</h3>
<ul>
<li><a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks Style Guide</a></li>
</ul>
</section>
<section id="fluid-grids">
<h3>Fluid Grids</h3>
<ul>
<li class="featured"><a href="http://www.alistapart.com/articles/fluidgrids/">Fluid Grids</a></li>
</ul>
</section>
<section id="layout">
<h3>Layout</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>
<section id="typography">
<h3>Typography</h3>
<ul>
<li><a href="http://informationarchitects.net/blog/responsive-typography/">Responsive Typography</a></li>
</ul>
</section>
<section id="navigation">
<h3>Navigation</h3>
<ul>
<li class="featured"><a href="http://bradfrostweb.com/blog/web/responsive-nav-patterns/">Responsive Navigation Patterns</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern">The select menu navigation pattern</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://css-tricks.com/convert-menu-to-dropdown/">Convert a Menu to a Dropdown for Small Screens</a></li>
</ul>
</section>
<section id="images">
<h3>Images</h3>
<h4>Hi-res</h4>
<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://bradfrostweb.com/blog/mobile/hi-res-optimization/">Optimizing Web Experiences for High Resolution Screens</a></li>
</ul>
</section>
<section id="video">
<h3>Video</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>
</ul>
</section>
<section id="tables">
<h3>Tables</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>
</ul>
</section>
</div>
<div id="development" class="grid">
<h2>Development</h2>
<section id="ress">
<h3>RESS</h3>
</section>
<section id="testing">
<h3>Testing</h3>
<ul>
<li><a href="http://labs.adobe.com/technologies/shadow/">Adobe Shadow</a></li>
</ul>
</section>
<section id="cms">
<h3>Content Management Systems</h3>
<h4>Wordpress</h4>
<ul>
<li><a href="http://build.codepoet.com/2012/05/11/wordpress-meet-responsive-design/">Wordpress Meet Responsive Design</a></li>
</ul>
</section>
</div>
<small>* Recommended Resource</small>
</div>
<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></p>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="http://thisisresponsive.tumblr.com">News</a></li>
</ul>
</nav>
<p class="f-rga"><a href="http://rga.com" rel="external"><img src="images/logo.png" alt="R/GA" /></a></p>
</div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink