Life Below 960px: An Intro to Responsive Design - WordCamp Birmingham 2013

378
-1

Published on

The mobile explosion has turned designing for the web into much more than just designing for desktop. Responsive Web Design offers a flexible solution for delivering consistent content and experiences across a world of devices. In this talk, we’ll go over the incredible growth in mobile and tablet platforms, the basics of how responsive web design works, and get a peek at a web that many people don’t think about–a life below 960 pixels.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Life Below 960px: An Intro to Responsive Design - WordCamp Birmingham 2013

  1. 1. Life Below 960px An Introduction to Responsive Design Thursday, September 5, 13
  2. 2. Hi. Thursday, September 5, 13
  3. 3. David Hickox Web Designer Thursday, September 5, 13
  4. 4. David Hickox Web Designer hickox.org @roboticarm Thursday, September 5, 13
  5. 5. Thursday, September 5, 13
  6. 6. Common Display Resolutions source: Wikipedia Thursday, September 5, 13
  7. 7. Common Display Resolutions source: Wikipedia Common Display Resolutions source: Wikipedia Thursday, September 5, 13
  8. 8. Common Display Resolutions source: Wikipedia Common Display Resolutions source: Wikipedia Thursday, September 5, 13
  9. 9. Common Display Resolutions source: Wikipedia Common Display Resolutions source: Wikipedia Thursday, September 5, 13
  10. 10. Common Display Resolutions source: Wikipedia Common Display Resolutions source: Wikipedia 960px Thursday, September 5, 13
  11. 11. Thursday, September 5, 13
  12. 12. 1360px Thursday, September 5, 13
  13. 13. 960px200px 200px Thursday, September 5, 13
  14. 14. Thursday, September 5, 13
  15. 15. 980px190px 190px Thursday, September 5, 13
  16. 16. Thursday, September 5, 13
  17. 17. Thursday, September 5, 13
  18. 18. The Mobile Context Thursday, September 5, 13
  19. 19. The Mobile Context iPhone new class of device brought the web into our personal space introduced touch Thursday, September 5, 13
  20. 20. The Mobile Context User Assumptions an exception case on-the-go -“mobile” distracted - “one eye, one thumb” Thursday, September 5, 13
  21. 21. Common Display Resolutions source: Wikipedia Common Display Resolutions source: Wikipedia 960px Thursday, September 5, 13
  22. 22. Early Ways to Cope Thursday, September 5, 13
  23. 23. Early Ways to Cope Build an App showed forward-thinking built credibility for your brand addressed specific use cases Thursday, September 5, 13
  24. 24. Early Ways to Cope Develop a Mobile Site kept traffic on the web redirected search traffic to mobile site targeted on-the-go use case Thursday, September 5, 13
  25. 25. Early Ways to Cope Do Nothing relied on pinch and zoom Thursday, September 5, 13
  26. 26. Thursday, September 5, 13
  27. 27. Thursday, September 5, 13
  28. 28. More Explosions Thursday, September 5, 13
  29. 29. More Explosions It Kept Going Android devices iPad & Tablet Thursday, September 5, 13
  30. 30. Desktop 1366x768 Thursday, September 5, 13
  31. 31. Desktop 1366x768 iPhone 320x480 Thursday, September 5, 13
  32. 32. Desktop 1366x768 iPad 768x1024 iPhone 320x480 Thursday, September 5, 13
  33. 33. Desktop 1366x768 iPad 768x1024 Nexus One / Nexus S 480x800 iPhone 320x480 Thursday, September 5, 13
  34. 34. Desktop 1366x768 iPad 768x1024 Nexus One / Nexus S 480x800 iPhone 320x480 low-end Android 240x320 Thursday, September 5, 13
  35. 35. Desktop 1366x768 iPad 768x1024 Nexus One / Nexus S 480x800 iPhone 320x480 Galaxy Nexus 768x1024 low-end Android 240x320 Thursday, September 5, 13
  36. 36. Desktop 1366x768 iPad 768x1024 Nexus One / Nexus S 480x800 iPhone 320x480 Galaxy Nexus 768x1024 low-end Android 240x320 1080p TV 1728x972 Thursday, September 5, 13
  37. 37. More Explosions It Kept Going Android devices iPad & Tablet Smart TVs & game consoles your refrigerator Thursday, September 5, 13
  38. 38. More Explosions A Multi-Device World we own multiple devices we’re using what’s around the spontaneous use case sequential multiscreening Thursday, September 5, 13
  39. 39. source: Google Thursday, September 5, 13
  40. 40. 66% of Gmail opens occur on a mobile device 19% opened in browser 15% opened in desktop mail client source: Litmus Thursday, September 5, 13
  41. 41. More Explosions The Mobile-Mostly User the next generation will be primarily mobile Facebook mobile-only users already exceed 20% (that’s 189 million people by last count) Thursday, September 5, 13
  42. 42. By 2015, more Americans will access the internet through mobile devices than through desktop computers, according to a prediction by International Data Corporation. Some of these people may still have access to the desktop web, but, for reasons of context, ease, or sheer laziness, will choose their mobile first. For others, there will be no other way to view your content. Karen McGrane Content Strategy for Mobile “ “ Thursday, September 5, 13
  43. 43. More People Have Cell Phones Than Toilets, U.N. Study Shows Out of the world’s estimated 7 billion people, 6 billion have access to mobile phones. Only 4.5 billion have access to working toilets. source: Time Thursday, September 5, 13
  44. 44. A Better System Thursday, September 5, 13
  45. 45. A Better System fluid experience in a multi-device world content parity with one CMS to maintain future-proof Thursday, September 5, 13
  46. 46. Responsive Web Design Thursday, September 5, 13
  47. 47. Responsive web design offers an alternative. Marrying fluid, grid-based layouts and CSS3 media queries, we can create one design that responds to the shape of the display rendering it. It’s a more unified, more holistic approach to design, one that doesn’t see the web’s inherent flexibility as a constraint to be limited. Instead, we can finally design for the ebb and flow of things. Ethan Marcotte creator of Responsive Design “ “ Thursday, September 5, 13
  48. 48. Responsive Web Design How It Works flexible framework Thursday, September 5, 13
  49. 49. images courtesy of mediaqueri.es Thursday, September 5, 13
  50. 50. images courtesy of mediaqueri.es Thursday, September 5, 13
  51. 51. images courtesy of mediaqueri.es Thursday, September 5, 13
  52. 52. images courtesy of mediaqueri.es Thursday, September 5, 13
  53. 53. images courtesy of mediaqueri.es Thursday, September 5, 13
  54. 54. Responsive Web Design How It Works flexible framework media queries fluid content collapsible navigation Thursday, September 5, 13
  55. 55. Responsive Web Design New Ways of Thinking content-focused flexible expectations think mobile first Thursday, September 5, 13
  56. 56. Thinking Responsively Thursday, September 5, 13
  57. 57. Thinking Responsively Test on Mobile Thursday, September 5, 13
  58. 58. Thinking Responsively Mind Your Menus Thursday, September 5, 13
  59. 59. Thinking Responsively Watch Your Widgets Thursday, September 5, 13
  60. 60. Thinking Responsively Consider Your Images Thursday, September 5, 13
  61. 61. Thinking Responsively Look Out For Video Thursday, September 5, 13
  62. 62. Thinking Responsively Keep an Eye on the Ads Thursday, September 5, 13
  63. 63. Thanks. David Hickox hickox.org @roboticarm Thursday, September 5, 13

×