Responsive Web Design

Bookmarks…

World Wide Web (WWW) always had worse cross-platform/(in)compatibility challenges than other platforms, because, naturally, it reaches everywhere and every thing. Giving rise to better solutions than most.

Nothing new — it’s been called flexible, fluid, adaptive, and now responsive web design (RWD) — and yet, the prevalence of un-responsive sites and apps is shocking.

Nu, this rabbit hole is deep.

Why?

  1. Mobile web usage overtook desktops long ago — “more cellphones than toothbrushes globally”
  2. Every new phone has a browser built in — and not just phones!
  3. WWW is the only true cross-platform (ubiquitous delivery)

What?

  1. Challenge: sites look terrible on mobile
  2. UI faux pas: zoom, clipped, horizontal scrolling…
  3. Crappy browsers — and hundreds of ’em
  4. Device variations: sizes, speeds…
  5. It’s complicated: different usage scenarios, etc
  6. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.” [John Allsopp]

State of the art (2015)

  1. Next Steps in Responsive Design
  2. Users First with Responsive Web Design and Progressive Enhancement
  3. Responsive Web Design: Where Do We Go From Here?

Canonical/historical

  1. Responsive Web Design / Ethan Marcotte (2010-05), and many related articles, and Mobile First / Luke Wroblewski (2009-11): the articles that started all the fuss.
  2. Please resize me — a brief history of fluidity / Rudy Rigot & Sophie Taboni

Guidelines

  1. Do websites need to be experienced exactly the same in every browser? (Sequel to Do websites need to look exactly the same in every browser?)
  2. Mobile (Web) strategy shift: advice from the experts, Nielsen Norman Group. Obvious (“mobile web is the future”), but reasoned, explained. And yet, God is in the details? Nielsen vs Clark — they’re both wrong.
  3. Adaptive vs. Responsive, what’s the difference?

Mobile (Web!) first

  1. Web First for Mobile | High Performance Web Sites
  2. Mobilism
  3. Responsive Web vs. Mobile Web | Alpha’s Manifesto (en Español)
  4. Why We Shouldn’t Make Separate Mobile Websites | Smashing Magazine
  5. Device-Agnostic Approach To Responsive Web Design | Smashing Coding
  6. The obsession with responsive websites | Two Step Media
  7. 320 and Up | The ‘tiny screen first’ responsive boilerplate

Articles, books…

  1. Head First Mobile Web – Free PDF Ebook Download – Free PDF eBook Download
  2. Download Head.First.Mobile.Web.zip for free on Filesonic.com
  3. Five responsive web design pitfalls to avoid | Feature | .net magazine
  4. Responsive Layouts with Zoe Gillenwater | Responsive Design WeeklyResponsive Design Weekly
  5. Responsive Design – Vanseo Design
  6. What We’ve Learned About Responsive Design
  7. Adaptive Vs. Responsive Layouts And Optimal Form Field Labels | Smashing UX Design
  8. Content Choreography | Trent Walton
  9. I’ve changed my mind about responsive design — Medium
  10. Get started with responsive web design | Web design | Creative Bloq
  11. 5 ways to bridge the designer-developer gap on responsive web projects « Thoughts on users, experience, and design from the folks at InVision.
  12. RWD: Are we failing our clients? — Medium
  13. How We Redesigned Hiveage as a Responsive Web App | Vesess
  14. A/B Tests are Destroying Your Conversion Rate — Medium

(Responsive) Grid systems

  1. Grid System Generator
  2. The 1140px CSS Grid System: Fluid down to mobile
  3. Don’t Overthink It Grids | CSS-Tricks
  4. This CSS layout grid is no Holy Grail | Pixels vs. Bytes
  5. Salsa: Syntactically Awesome Layout System… Awesome!

Tools, reference docs

  1. Responsive Design Bookmarklet (Bookmarklets FTW!)
  2. Responsive Design bookmarklet | BenjaminKeen.com
  3. Resizer | CodePen
  4. Screenqueri.es | Pixel Perfect Responsive Design Testing Tool
  5. The Responsinator
  6. Screensiz.es
  7. Responsive design testing tool – Viewport Resizer – Device simulation tool
  8. Responsive Sketchsheets | ZURB Playground
  9. responsive bookmarklet – Google Search
  10. jResize Plugin, for one window responsive development : Todd Motto: Front-End Web Developer
  11. Virtuelvis: Gallery: CSS Media queries
  12. Responsive Design Testing

Patterns, issues, examples

  1. Fat Cat! | UNIT9: totally responsive! ;o)
  2. Responsive Navigation Patterns | Brad Frost Web
  3. RWD-Nav-Patterns
  4. Responsive Web Design: 50 Examples and Best Practices – DesignModo
  5. 5 Really Useful Responsive Web Design Patterns | Design Shack
  6. 50 Examples of Responsive Web Design (plus 1) | Awwwards
  7. 21 Examples of Responsive WordPress Websites that Look Beautiful…
  8. 40 Examples of Brilliant Responsive Website Layouts
  9. Responsive Horizontal Layout | Codrops
  10. Responsive Web Design Patterns | This Is Responsive
  11. Meny – A three dimensional and space efficient menu concept
  12. New Foundation 3.0 Playground Release: Off-Canvas Layouts by ZURB

Frameworks, plugins…

  1. Frameless
  2. Responsive Grid System
  3. Responsive GS – CSS Framework For Developing Responsive Websites
  4. 320andup
  5. HTML5 Mobile Boilerplate
  6. Box-CSS-Framework
  7. Foldy960
  8. jQuery Plugins for Fluid Layouts/Responsive Web Design | gonzoblog.nl
  9. 10 Responsive Slider Plugins for WordPress
  10. Responsive CSS Grid | ThemeID
  11. Gumby 960 Grid Responsive CSS Framework
  12. Foundation: The Most Advanced Responsive Front-end Framework from ZURB, and Rapid Prototyping

Zoom

  1. mobile viewport · tutorials · WPD · WebPlatform.org
  2. text-size-adjust – CSS | MDN
  3. CSS Device Adaptation Module Level 1
  4. css – How to avoid iOS automatic font size adjustment? – Stack Overflow
  5. Zooming Squishes | CSS-Tricks
  6. Discussion on FB FEDs
  7. Pinch recognizer – Hammer.js
  8. timmywil/jquery.panzoom
  9. 4 reasons not to disable zoom in your responsive design — Medium

Misc. [Mess]

  1. Why Ems? | CSS-Tricks
  2. Responsive Column Layouts
  3. Breakpoint
  4. Adapt.js – Adaptive CSS
  5. Ultimate Guide To Responsive Web Design: Tools and Examples
  6. A Book Apart, Responsive Web Design
  7. Mobile web content adaptation techniques | mobiForge
  8. Tech Time: Harvey: A Second Face for Your JavaScript
  9. How To Create A Responsive, Mobile First WordPress Theme | Smashing WordPress
  10. How we learned to leave default font-size alone and embrace the em | Filament Group, Inc., Boston, MA
  11. HTML Responsive Images Extension
  12. Vertical Media Queries | Boagworld
  13. Responsive Web Above The Fold | CSS-Tricks
  14. This Is Responsive
  15. 20 Best Responsive Web Design Examples of 2012 | Social Driver ® | Get with the future.
  16. zomigi.com » Building Responsive Layouts presentation at Responsive Web Design Summit
  17. SVGeezy – a JS plugin for SVG fallbacks
  18. Build Responsively Workshop
  19. Simon Foster | Blog | The Responsive Designer
  20. Featured Projects — Joni Korpi
  21. Stephen Hay | Responsive Design Workflow | Mobilism 2012 on Vimeo
  22. Onward: A New Premium WordPress Theme Coming Soon from Inspect Element – Inspect Element
  23. Test your CSS media queries features – pieroxy.net
  24. ResponsiveURL.co.uk – Why not make your URLs responsive?
  25. The top 25 responsive sites of 2012 | Feature | .net magazine
  26. Responsive Web Design Resources | This Is Responsive
  27. The picture element
  28. Best Screen Size & Screen Resolution to Design Websites | Is There A Standard Size? What Is The Most Common Dimension?
  29. Designing for the Web: Resolution and Size – DesignFestival
  30. Is the Web Ready for Responsive Web Design? | Web Resources | WebAppers
  31. LukeW | Breaking Development: Cross-Screen Experiences
  32. Why Clients Don’t Care About Responsive Web Design
  33. LukeW | Responsive Web Design Performance
  34. intention.js
  35. Device loop animation
  36. UI Design Guidelines for Responsive Design | Codrops
  37. Lightening Your Responsive Website Design With RESS | Smashing Mobile
  38. Use Javascript to Change Viewport Width Depending on the Window Size (Web Development) — Kaspars Dambis
  39. Why cards are the future of the web | Inside Intercom
  40. Supporting Smartphones and Feature Phones – Webmasters — Google Developers
  41. Future Friendly
  42. undefinedresponsive patternsundefined – Google Search
  43. Responsive Workflow — Urlist
  44. The top 25 responsive design tools | Feature | .net magazine
  45. BreakpointTester | Test Your Responsive Design By Breakpoints, Not By Device Width
  46. 50 Amazing Facts About Mobile
  47. Responsive Nav — Responsive Navigation Plugin
  48. How to use Twitter Bootstrap to Create a Responsive Website Design
  49. Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar
  50. jquery – Bootstrap mobile transitions – Stack Overflow
  51. Hardware-Accelerated Page Transitions for Mobile Web Apps / PhoneGap Apps | Christophe Coenraets
  52. PageSlider/pageslider.js at master · ccoenraets/PageSlider
  53. kevinknelson/bootstrap-mobile
  54. The Amazing New Mobile Web – Hack Design
  55. Pattern Lab > Responsive Web Design
  56. Pattern Lab Gets a Behind-the-Scenes Makeover – dmolsen.com
  57. The Goldilocks Approach to Responsive Web Design
  58. Golden Grid System
  59. 10 Lightweight & Minimal Responsive Grid Frameworks
  60. The Goldilocks Approach to Responsive Web Design
  61. Breakpoint
  62. beardedstudio/stubble
  63. e-sites/require-matchmedia-plugin
  64. Web First
  65. [W3Conf] Eric Meyer: undefinedThe Era of Intentional Layoutundefined | CSS-Tricks
  66. The Battle for the Body Field · An A List Apart Article
  67. Responsive Strategy | Brad Frost Web
  68. What We Mean When We Say “responsive” ∙ An A List Apart Column
  69. Am I Responsive?
  70. Titus Nguiagain – Google+ – How to test your #Startup or Brand website’s responsiveness…
  71. 4 Common Responsive Web Design Pitfalls
  72. Erskine Design – Maintainable responsive layouts
  73. Back Alley Coder — Element Queries, From the Feet Up
  74. Life Beyond 960px: Designing for Large Screens – Tuts+ Web Design Article
  75. CoffeeScript for Responsive Websites — Medium
  76. Progressive enhancement matrix — Medium
  77. Progressive enhancement matrix – Google Sheets
  78. The Next Big Thing In Responsive Design | Co.Design | business + design
  79. How to Trigger JavaScript Functions with CSS Media-Queries – CodeCondo
  80. Using window.matchMedia to do media queries in JavaScript ✩ Mozilla Hacks – the Web developer blog
  81. Responsive Online Store for Supplements & Sportswear on Behance
  82. Beyond Media Queries — It’s Time to Get Elemental
  83. Codeply – Compare responsive frameworks. Find responsive design snippets, code patterns and playground.
  84. Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens | Viget
  85. 3 responsive design disasters (and how to avoid them) | Webdesigner Depot
  86. The problems with the device-adaptation spec – QuirksBlog
  87. Responsive or Bust: Google’s Focus on Mobile & How to Design for It
  88. Dev.Opera — Opera 29 released
  89. Responsive Design Best Practices for Big Projects — Medium
  90. Why ‘mobile first’ may already be outdated – Inside Intercom
  91. The Desktop Conundrum – daverupert.com
  92. LukeW | Video: Multi-Device Output, Input, and Posture
  93. Responsive Web Design Examples — Responsive Web Design
  94. Frameworks — Responsive Web Design
  95. Response JS: mobile-first responsive design in HTML5.
  96. 320 and Up Stuff & Nonsense
  97. Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width | FourFront
  98. Ideal viewport calculator
  99. Qaid – build better designs
  100. Responsive Web Design Menu Examples with CSS and JQuery Tips : The Brolik Blog
  101. Designing responsive experiences
  102. Sparkbox | Web Design and Development
  103. Designing Responsive Experiences – Digital Shoreditch – May 2015
  104. Modern Design Tools: Adaptive Layouts — Design Insights from Bridge — Medium
  105. Responsive Web Design Resources | This Is Responsive
  106. Responsive design is failing mobile UX | Webdesigner Depot


Comments are closed.