UX responsive resources_1.0 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

UX responsive resources_1.0 2012

on

  • 1,418 views

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

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

Statistics

Views

Total Views
1,418
Views on SlideShare
1,418
Embed Views
0

Actions

Likes
1
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX responsive resources_1.0 2012 Presentation Transcript

  • 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
  • 14. PROJECTNOTES
  • 15. PROJECTNOTES