Activity – Responsive Web Design – Key Concepts – Sept2015
Images and Background 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/
Responsive Web Design by Example (PDF eBook)
Responsive Web Design by Example Code Files
Web References
Responsive 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
- RWD demonstration (http://jamus.co.uk/demos/rwd-demonstrations)
- Screenqueri.es (http://screenqueri.es)
- Responsinator (http://www.responsinator.com)
- ResposnivePX (http://responsivepx.com)
- Resizer (http://codebomber.com/jquery/resizer)
- Screen Fly (http://quirktools.com/screenfly)
- Adobe Edge Inspect (http://html.adobe.com/edge/inspect)