Responsive Web Design

rwdActivity – Responsive Web Design – Key Concepts – Sept2015

Responsive Type Zipped Files

Media Queries Zipped Files

Images and Background Zipped Files

Grids Zipped Files

Layout Zipped Files

Activity – Creating a Responsive Web Design – Part 1

Creating a Responsive Web Design Zipped Files

Activity – Responsive Web Design – Constructing a Responsive Sample Page with Skeleton

Skeleton Framework for Sample Page Zipped Files

Activity – Responsive Web Design – Constructing a Responsive Portfolio Page with Skeleton – Part 1

Activity – Responsive Web Design – Constructing a Responsive Portfolio Page with Skeleton – Part 2

Skeleton Framework for Portfolio Zipped Files

Responsive Web Design by Example – Chapter 2 – Constructing a Responsive Portfolio Page with Skeleton (For reference)

Responsive Web Design by Example – Chapter 3 – Enhancing the Portfolio Website with CSS3 (For reference)

Skeleton Framework 

Download the latest version from http://getskeleton.com/

Skeleton Zipped Framework

Skeleton Zipped Grid.psd

Responsive Web Design by Example (PDF eBook)

Responsive Web Design by Example Code Files

 Web References

ethan_thumbResponsive We Design by Ethan Marcotte (2010) (http://alistapart.com/article/responsive-web-design)

Build a Responsive, Mobile-Friendly Web Page With Skeleton (http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton)

30 Useful Responsive Web Design Tutorials (http://www.hongkiat.com/blog/responsive-web-tutorials/)

Getting Started with Skeleton, the Simple CSS Boilerplate (http://www.sitepoint.com/getting-started-with-skeleton-simple-css-boilerplate/)

Building a Responsive Layout With Skeleton: Starting Out (http://webdesign.tutsplus.com/tutorials/building-a-responsive-layout-with-skeleton-starting-out–webdesign-6318)

On Adaptive vs. Responsive Web Design (http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/)

Understanding Progressive Enhancement (http://alistapart.com/article/understandingprogressiveenhancement/)

Responsinator – http://www.responsinator.com

Screenfly – https://quirktools.com/screenfly

Responsive Web Design – Examples

Currys – http://www.currys.co.uk/gbuk/index.html

Microsoft – http://www.microsoft.com/en-gb/default.aspx

The Next Web – http://thenextweb.com/

United Pixelworkers – http://www.unitedpixelworkers.com/

Ethan Marcotte – http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Think Vitamin – http://blog.teamtreehouse.com/

St Paul’s School – http://www.stpaulsschool.org.uk/

Pepper Digital – http://www.responsivewebdesign.co.uk/

City Crawlers Berlin – http://citycrawlers.eu/berlin/

Hicksdesign – http://hicksdesign.co.uk/

Cycle to Work – http://www.cycletoworkcalculator.com/

Simple Grid Frameworks

Mueller Grid System – http://muellergridsystem.com/

Responsive Grid System – http://www.responsivegridsystem.com/

Responsive Grid System – http://responsive.gs/

Less Framework 4 – http://lessframework.com/

960 Grid System – http://960.gs/

Susy – http://susy.oddbird.net/

320 and Up – http://stuffandnonsense.co.uk/projects/320andup

Complex CSS Frameworks

Twitter Bootstrap – http://twitter.github.io/bootstrap/

Foundation 4 – http://foundation.zurb.com/

Skeleton – http://www.getskeleton.com/

YAML 4 – http://www.yaml.de/

HTML Frameworks and Boilerplates

HTML5 Boilerplate – http://html5boilerplate.com/

Initializr – http://foundation.zurb.com/

Who Uses Skeleton?

HiveMind (http://www.ourhivemind.com)

Eleventh Edition (http://www.eleventhedition.com)

Artisticly (http://artistic.ly)

A Simple Skeleton RWD WordPress Theme (http://themes.simplethemes.com/skeleton)

Responsive Bookmarklets