Supplemental "Resources" document supporting Responsive Web Design presentation given to internal advertising UX team

1. Links, Resources & Tools
Responsive
Web Design

2. Contents
Links, Resources and Tools Responsive Web Design |
2
TOP 10 RESOURCES............................................
ALL ABOUT RESPONSIVE DESIGN........................
EXAMPLES & INSPIRATION...................................
LAYOUTS & WIREFRAMING...................................
RESPONSIVE CONTENT.......................................
TESTING & PROTOTYPING....................................
RELATED READING..............................................
DEVICE RESOLUTION LANDSCAPE.......................
MULTI-DEVICE LAYOUTS by LUKE W......................
SKETCHINGTEMPLATES......................................
3
4
6
7
8
9
10
11
12
13

3. Top 10 Resources
Responsive Web Design, by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
Brad Frost
http://bradfrostweb.com/blog/
Responsive Web Design Newsletter, by Brad Frost
http://us5.campaign-archive1.com/?u=6c0c3f4dcd40d88bc1cedb3fa&id=261e7d6a4d&e=99c8c8bb6d
Media Queries
http://mediaqueries.es
50 Examples of Responsive Web Design
http://www.awwwards.com/50-examples-of-responsive-web-design.html
Enter your URL to test the site across multiple devices
http://www.responsinator.com/
Responsive Design Bookmarklet - allows you to view any site at various device widths
http://responsive.victorcoulon.fr/
Design Process in the Responsive Age - great presentation outlining process in responsive web design
http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
50 Fantastic Tools for Responsive Web Design
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Future Friendly, by Luke W and friends
http://futurefriend.ly/
Links, Resources and Tools Responsive Web Design |
3

4. All About Responsive Design
Articles
Responsive Web Design, by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
Brad Frost
http://bradfrostweb.com/blog/
Responsive Workflow
http://viljamis.com/blog/2012/responsive-workflow/
Responsive Summit: Workflow
http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow
What the Heck is Responsive Web Design?
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
On Being “Responsive”, by Ethan Marcotte
http://unstoppablerobotninja.com/entry/on-being-responsive/
Breaking Dev: Real World Responsive Design, by Luke W
http://www.lukew.com/ff/entry.asp?1304
It’s Official, CSS Media Queries Are a Web Standard
http://www.webmonkey.com/2012/06/its-official-css-media-queries-are-a-web-standard/
Guidelines for Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Links, Resources and Tools Responsive Web Design |
4

5. All About Responsive Design (cont.)
Information
A Simple Device Diagram for Responsive Design Planning
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
Responsive Design: Media queries for various devices and resolutions
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Design Process in the Responsive Age
http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
Periodicals
Responsive Web Design Newsletter, by Brad Frost
http://us5.campaign-archive1.com/?u=6c0c3f4dcd40d88bc1cedb3fa&id=261e7d6a4d&e=99c8c8bb6d
Responsive Design Weekly
http://responsivedesignweekly.com/
Resource Lists
Responsive Web Design Techniques Tools and Design Strategies
http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-
strategies/
50 Fantastic Tools for Responsive Web Design
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Links, Resources and Tools Responsive Web Design |
5

6. Examples & Inspiration
Media Queries
http://mediaqueries.es
50 Examples of Responsive Web Design
http://www.awwwards.com/50-examples-of-responsive-web-design.html
60 Examples of Resposive Website Design
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
21 Inspiring Unique Responsive Web Design Examples
http://medleyweb.com/inspiration/web-design/21-inspiring-unique-responsive-web-design-examples/
24 Excellent Examples of Responsive Web Design
http://webdesignledger.com/inspiration/24-excellent-examples-of-responsive-web-design
Links, Resources and Tools Responsive Web Design |
6

7. Layouts & Wireframing
Grids
Tiny Fluid Grid
http://www.tinyfluidgrid.com/
Golden Grid System
http://goldengridsystem.com/
Gridpak: The Responsive grid generator
http://gridpak.com/
Fluid Grid Calculator
http://csswizardry.com/fluid-grids/
The Responsive Calculator: Turning pixels into percentages
http://rwdcalc.com/
Fluid 960 Grid System
http://www.designinfluences.com/fluid960gs/
Other Resources
Responsive Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Responsive Layouts, Responsively Wireframed
http://www.thismanslife.co.uk/
Navigation Patterns in Responsive Design
http://friendly-machine.com/posts/2012/navigation-patterns-responsive-design
Links, Resources and Tools Responsive Web Design |
7

8. Responsive Content
Future-Ready Content
http://www.alistapart.com/articles/future-ready-content/
Responsive Images Test Page
http://filamentgroup.com/examples/responsive-images/
Responsive Images and Web Standards at the Turning Point
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
Multi-Device Layout Patterns, by Luke W
http://www.lukew.com/ff/entry.asp?1514
Off Canvas Multi-Device Layout, by Luke W
http://www.lukew.com/ff/entry.asp?1517
Fluid Images, by Ethan Marcotte
http://unstoppablerobotninja.com/entry/fluid-images/
Links, Resources and Tools Responsive Web Design |
8

9. Testing & Prototyping
Testing (Enter a URL to view site at different browser widths)
http://responsive.is/
http://www.responsinator.com/
http://www.studiopress.com/responsive/
Wirefy: A Rapid Responsive Wireframing Tool to Demonstrate Hierarchy and Functionality
http://cjdsie.github.com/wirefy/
Tools
Responsive Design Bookmarklet allows you to view any site at various device widths
http://responsive.victorcoulon.fr/
Opera Mobile Emulator
http://www.opera.com/developer/tools/mobile/
Adobe Shadow
http://labs.adobe.com/technologies/shadow/
Articles
Content Prototyping in Responsive Web Design
http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/#more-108588
Dive Into Responsive Prototyping with Foundation
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
Links, Resources and Tools Responsive Web Design |
9

10. Related Reading
Future Friendly
http://futurefriend.ly/
It’s Official, CSS Media Queries are a Web Standard
http://www.webmonkey.com/2012/06/its-official-css-media-queries-are-a-web-standard/
When & Where Are People Using Mobile Devices? by Luke W
http://www.lukew.com/ff/entry.asp?1263
For a Future Friendly Web
http://www.alistapart.com/articles/for-a-future-friendly-web/
Media Queries, W3C Recommendation, 19 June, 2012
http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
Style Tiles
http://styletil.es/
A Case for Responsive Resumes
http://www.alistapart.com/articles/a-case-for-responsive-resumes/
Links, Resources and Tools Responsive Web Design |
10

11. 240
320
360
480
600
640
768
800 1024960
540
1280
PORTRAIT
LANDSCAPE
Some Androids
Many S40
Most S60
Most S60
Symbian touch
iPhone
Many Androids
Many Blackberries
S60/S40 QWERTY
iPhone
Many Androids
Many Symbian touch
Some tablets
Many Symbian touch
New Droid
New HTC
Kindle Fire
Some tablets
iPad
Some Android tablets
Samsung Galaxy
Newer Android tablets
Many Android phones
(HTC, LG, Older Droids,
Samsung)
New Droid
New HTC
iPad
Kindle Fire
Some tablets
Some desktops
Most netbooks
Samsung Galaxy
Newer Android tablets
Many Android phones
(HTC, LG, Older Droids,
Samsung)
Device diagram by @viljamis
http://viljamis.com/
Device Resolution Landscape
Links, Resources and Tools Responsive Web Design |
11

12. Layout 1 Layout 2 Layout 3
Layout 4 Layout 5
Multi-Device Layouts by Luke W.
Links, Resources and Tools Responsive Web Design |
12

13. Sketching Templates

15. PROJECTNOTES

16. PROJECTNOTES