Your SlideShare is downloading. ×
0
Life Below 960px
An Introduction to Responsive Design
Thursday, September 5, 13
Hi.
Thursday, September 5, 13
David Hickox
Web Designer
Thursday, September 5, 13
David Hickox
Web Designer
hickox.org
@roboticarm
Thursday, September 5, 13
Thursday, September 5, 13
Common Display Resolutions
source: Wikipedia
Thursday, September 5, 13
Common Display Resolutions
source: Wikipedia
Common Display Resolutions
source: Wikipedia
Thursday, September 5, 13
Common Display Resolutions
source: Wikipedia
Common Display Resolutions
source: Wikipedia
Thursday, September 5, 13
Common Display Resolutions
source: Wikipedia
Common Display Resolutions
source: Wikipedia
Thursday, September 5, 13
Common Display Resolutions
source: Wikipedia
Common Display Resolutions
source: Wikipedia
960px
Thursday, September 5, 13
Thursday, September 5, 13
1360px
Thursday, September 5, 13
960px200px 200px
Thursday, September 5, 13
Thursday, September 5, 13
980px190px 190px
Thursday, September 5, 13
Thursday, September 5, 13
Thursday, September 5, 13
The Mobile Context
Thursday, September 5, 13
The Mobile Context
iPhone
new class of device
brought the web into our personal space
introduced touch
Thursday, September...
The Mobile Context
User Assumptions
an exception case
on-the-go -“mobile”
distracted - “one eye, one thumb”
Thursday, Sept...
Common Display Resolutions
source: Wikipedia
Common Display Resolutions
source: Wikipedia
960px
Thursday, September 5, 13
Early Ways to Cope
Thursday, September 5, 13
Early Ways to Cope
Build an App
showed forward-thinking
built credibility for your brand
addressed specific use cases
Thur...
Early Ways to Cope
Develop a Mobile Site
kept traffic on the web
redirected search traffic to mobile site
targeted on-the-go...
Early Ways to Cope
Do Nothing
relied on pinch and zoom
Thursday, September 5, 13
Thursday, September 5, 13
Thursday, September 5, 13
More Explosions
Thursday, September 5, 13
More Explosions
It Kept Going
Android devices
iPad & Tablet
Thursday, September 5, 13
Desktop
1366x768
Thursday, September 5, 13
Desktop
1366x768
iPhone
320x480
Thursday, September 5, 13
Desktop
1366x768
iPad
768x1024
iPhone
320x480
Thursday, September 5, 13
Desktop
1366x768
iPad
768x1024
Nexus One / Nexus S
480x800
iPhone
320x480
Thursday, September 5, 13
Desktop
1366x768
iPad
768x1024
Nexus One / Nexus S
480x800
iPhone
320x480
low-end Android
240x320
Thursday, September 5, 13
Desktop
1366x768
iPad
768x1024
Nexus One / Nexus S
480x800
iPhone
320x480
Galaxy Nexus
768x1024
low-end Android
240x320
Th...
Desktop
1366x768
iPad
768x1024
Nexus One / Nexus S
480x800
iPhone
320x480
Galaxy Nexus
768x1024
low-end Android
240x320
10...
More Explosions
It Kept Going
Android devices
iPad & Tablet
Smart TVs & game consoles
your refrigerator
Thursday, Septembe...
More Explosions
A Multi-Device World
we own multiple devices
we’re using what’s around
the spontaneous use case
sequential...
source: Google
Thursday, September 5, 13
66% of Gmail opens
occur on a mobile device
19% opened in browser
15% opened in desktop mail client
source: Litmus
Thursda...
More Explosions
The Mobile-Mostly User
the next generation will be primarily mobile
Facebook mobile-only users already exc...
By 2015, more Americans will access the internet
through mobile devices than through desktop
computers, according to a pre...
More People Have Cell
Phones Than Toilets,
U.N. Study Shows
Out of the world’s estimated 7 billion people, 6 billion have ...
A Better System
Thursday, September 5, 13
A Better System
fluid experience in a multi-device world
content parity with one CMS to maintain
future-proof
Thursday, Se...
Responsive Web Design
Thursday, September 5, 13
Responsive web design offers an alternative.
Marrying fluid, grid-based layouts and CSS3 media
queries, we can create one d...
Responsive Web Design
How It Works
flexible framework
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
images courtesy of mediaqueri.es
Thursday, September 5, 13
Responsive Web Design
How It Works
flexible framework
media queries
fluid content
collapsible navigation
Thursday, Septemb...
Responsive Web Design
New Ways of Thinking
content-focused
flexible expectations
think mobile first
Thursday, September 5,...
Thinking Responsively
Thursday, September 5, 13
Thinking Responsively
Test on Mobile
Thursday, September 5, 13
Thinking Responsively
Mind Your Menus
Thursday, September 5, 13
Thinking Responsively
Watch Your Widgets
Thursday, September 5, 13
Thinking Responsively
Consider Your Images
Thursday, September 5, 13
Thinking Responsively
Look Out For Video
Thursday, September 5, 13
Thinking Responsively
Keep an Eye on the Ads
Thursday, September 5, 13
Thanks.
David Hickox
hickox.org
@roboticarm
Thursday, September 5, 13
Upcoming SlideShare
Loading in...5
×

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

312

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
312
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×