Responsive Web Design Resources and Presentation Slides

Responsive Web Design Presentation Slides (PDF)   —  RWD-slides-02262013

Responsive Web Design Links from the CPAUG meeting on 2/25/13.

Examples of good responsive websites:


A typical mobile-optimized site contains something like the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Common viewport sizes:

I know, I’ll just make a smaller website….Nope!  You have to control both the viewport and the initial scale. 

Now with the viewport meta  <meta name=”viewport” content=”width=320″>

Screen Density  – List of displays by pixel density (sorted by manuf.)

Icon Fonts  – Instead of using photos and graphics

css media queries for standard devices – Code snippets

Responsive Images

RWD Sketch Sheets

Wireframing with Adobe Fireworks

Fluid Grid Layouts in Dreamweaver CS6

Frameworks and Templates:

Testing your RWD  – Free mobile web performance tools

Some good reasons why RWD may not be worth it for your project and food for though:

Further learning:

Spread the love