Presentation File and One-Sheet
Download Rebekah's EduWeb presentation as a pdf: Managing a Responsive Design Redesign Project
Download our one-sheet: What is Responsive Design and When Is It Appropriate?
Check Out The Templates
Peruse the templates shown in the presentation file on your own. Go to http://shu.newcitystaging.com/. Many thanks to Sacred Heart University for allowing us to share these with you.
Additional Reading
Where to Begin
- The article that started it all: Responsive Web Design by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
- A beginner's guide to responsive web design by Think Vitamin http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
- How to Design a Mobile Responsive Website by UX Booth http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/
- A Primer on Responsive Design UX Magazine http://uxmag.com/articles/a-primer-on-responsive-design
- Responsive News http://blog.responsivenews.co.uk/
- Responsive Web Design: Missing the Point by Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
- Responsive Web Design: What It Is and How to Use It by Kayla Knight http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Developer How-To's and Tutorials
- Creating a Responsive Web Design Template by One Extra Pixel http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/
- Responsive Web Design with HTML5 and the Less Framework by Site Point http://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/#fbid=hnijLeG6SbZ
- Responsive Design in 3 Steps by Web Designer Wall http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
- Create an Adaptable Website Layout with CSS3 Media Queries by Cats Who Code http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries
- The EMs have it: Proportional Media queries FTW! by Lyza Gardner http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
- Fluid Images by Ethan Marcotte http://unstoppablerobotninja.com/entry/fluid-images/
Developer Tools
- Adaptive Images http://adaptive-images.com/
- Fluid Grids - A Fluid Grid Calculator by Harry Roberts http://csswizardry.com/fluid-grids/
- ProtoFluid - Rapid Prototyping of Fluid Layouts, Adaptive CSS and Responsive Design http://protofluid.com/
Testing
- Test on Real Mobile Devices Without Breaking The Bank by Brad Frost http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
- Strategies for choosing test devices by Stephanie Rieger http://stephanierieger.com/strategies-for-choosing-test-devices/
- Mobile Phone Emulator by COWEMO http://www.mobilephoneemulator.com/
- Screenfly by QuirkTools - Test Your Website at Different Screen Resolutions http://quirktools.com/screenfly/
- Resizer by Codebomber http://codebomber.com/jquery/resizer/
- Mobitest Free Mobile Web Performance Measurement Tool http://mobitest.akamai.com/m/index.cgi
- slabText - a jQuery plugin for producing big, bold, and responsive headlines http://www.frequency-decoder.com/demo/slabText/
- FitVids.JS - A jQuery plugin for fluid width video embeds http://fitvidsjs.com/
- The Responsinator http://www.responsinator.com/
- responsivepx http://responsivepx.com/
Frameworks
- Foundation 3 front-end framework http://foundation.zurb.com/
- Bootstrap, from Twitter http://twitter.github.com/bootstrap/
Grids
- 1140px CSS Grid System http://cssgrid.net/
- Less Framework http://lessframework.com/
User Experience and Planning
- Five responsive design pitfalls to avoid http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
- Responsive Web Design Sketch Sheets http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
- Responsive Navigation Patterns by Brad Frost http://bradfrostweb.com/blog/web/responsive-nav-patterns/
- Responsive Data Table Roundup by Chris Coyier http://css-tricks.com/responsive-data-table-roundup/
- Simple Device Diagram for Responsive Design Planning by Adam Edgerton http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
- Multi-Device Layout Patterns by Luke Wroblewski http://www.lukew.com/ff/entry.asp?1514
- Content Folding by Chris Coyier http://css-tricks.com/content-folding/
- 5 Really Useful Responsive Web Design Patterns by Joshua Johnson http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
Design Tools
- A Better Photoshop Grid for Responsive Web Design http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
Project Mangaement
- The responsive design process by Matt Wilcox http://mattwilcox.net/archive/entry/id/1078/
- A 2012 Process for a 2012 Responsive Web by Kiley LoCascio http://blog.galvintech.com/design/a-2012-process-for-a-2012-responsive-web-1439.htm
- How to Approach a Responsive Design by Tito Bottitta http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Responsive Design Examples
- Media Queries http://mediaqueri.es/
- University of Notre Dame http://nd.edu/
- St. Paul's School http://www.stpaulsschool.org.uk/
- Carleton College Campus Map http://apps.carleton.edu/map/
- The Boston Globe http://bostonglobe.com/
- University of Wisconsin Whitewater http://www.uww.edu/
- UC San Diego http://www.ucsd.edu/
- Share this post:
-
Bookmark on del.icio.us
-
Bookmark on Digg
-
Bookmark on Facebook
-
Bookmark on StumbleUpon
-
Bookmark on Technorati
-
Bookmark on TweetMeme
