Links, Resources & Tools
Responsive
Web Design
Contents
Links, Resources and Tools Responsive Web Design |
2
TOP 10 RESOURCES...............................................
Top 10 Resources
Responsive Web Design, by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
Brad F...
All About Responsive Design
Articles
Responsive Web Design, by Ethan Marcotte
http://www.alistapart.com/articles/responsiv...
All About Responsive Design (cont.)
Information
A Simple Device Diagram for Responsive Design Planning
http://www.metaltoa...
Examples & Inspiration
Media Queries
http://mediaqueries.es
50 Examples of Responsive Web Design
http://www.awwwards.com/5...
Layouts & Wireframing
Grids
Tiny Fluid Grid
http://www.tinyfluidgrid.com/
Golden Grid System
http://goldengridsystem.com/
...
Responsive Content
Future-Ready Content
http://www.alistapart.com/articles/future-ready-content/
Responsive Images Test Pa...
Testing & Prototyping
Testing (Enter a URL to view site at different browser widths)
http://responsive.is/
http://www.resp...
Related Reading
Future Friendly
http://futurefriend.ly/
It’s Official, CSS Media Queries are a Web Standard
http://www.web...
240
320
360
480
600
640
768
800 1024960
540
1280
PORTRAIT
LANDSCAPE
Some Androids
Many S40
Most S60
Most S60
Symbian touch...
Layout 1 Layout 2 Layout 3
Layout 4 Layout 5
Multi-Device Layouts by Luke W.
Links, Resources and Tools Responsive Web Des...
Sketching Templates
PROJECTNOTES
PROJECTNOTES
UX responsive resources_1.0 2012
UX responsive resources_1.0 2012
UX responsive resources_1.0 2012
UX responsive resources_1.0 2012
UX responsive resources_1.0 2012
Upcoming SlideShare
Loading in …5
×

UX responsive resources_1.0 2012

1,568 views
1,454 views

Published on

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

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,568
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

UX responsive resources_1.0 2012

  1. 1. Links, Resources & Tools Responsive Web Design
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Sketching Templates
  14. 14. PROJECTNOTES
  15. 15. PROJECTNOTES

×