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:

  1. http://www.macdonaldHotels.co.uk
  2. http://www.DoLectures.com

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:
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

I know, I’ll just make a smaller website….Nope!  You have to control both the viewport and the initial scale.
http://erebus.cc/dev/cpaug/responsivedesign/320w-website.html 

Now with the viewport meta  <meta name=”viewport” content=”width=320″>
http://erebus.cc/dev/cpaug/responsivedesign/320w-website-meta.html

Screen Density  – List of displays by pixel density (sorted by manuf.)
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Icon Fonts  – Instead of using photos and graphics
http://css-tricks.com/examples/IconFont/

http://css-tricks.com/flat-icons-icon-fonts/

css media queries for standard devices – Code snippets
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://nmsdvid.com/snippets/

Responsive Images

https://github.com/filamentgroup/Responsive-Images

RWD Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

http://sneakpeekit.com

http://www.zurb.com/playground/responsive-sketchsheets

Wireframing with Adobe Fireworks
 http://speckyboy.com/2011/11/07/wireframing-prototyping-with-adobe-fireworks-resources-and-tutorials/

http://fireworkswireframingkit.com

http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/

Fluid Grid Layouts in Dreamweaver CS6
http://www.htmlgoodies.com/html5/other/fluid-grid-layouts-in-adobe-dreamweaver-cs6.html#fbid=q8I_ROb1RZH

Frameworks and Templates:
http://cssgrid.net

Testing your RWD
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

http://responsinator.com

http://screenqueri.es

http://mobitest.akamai.com/m/index.cgi  – Free mobile web performance tools

Some good reasons why RWD may not be worth it for your project and food for though:
https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it

Further learning:

http://www.html5rocks.com/en/mobile/responsivedesign/

http://www.lynda.com

http://filamentgroup.com/lab

http://webdesign.tutsplus.com/?s=fluid

Spread the love