Responsive   2012   WordCamp Kansas City   Justin Kopepasah
ResponsiveAn approach to web design that coordinatesdesign and development around a user’sbehavior and environment based o...
ResponsiveFlexible Grids                 (Smith)
ResponsiveFlexible Images & Media
ResponsiveFlexible Images & Media                          (Tabone, 2012)
ResponsiveMedia Queries“A media query consists of a media type and zero or more expressionsthat check for the conditions o...
Why do we needresponsive design?
Mobile Usage Grows                         Desktop                           Mobile 100%  75%  50%  25%   0%April, ‘11 (5....
Mobile Usage Grows                Usage20%15%                            16.1%10%                        8.5%5%           ...
Current Usage                          Loads of these visitors                          are trying to view the            ...
Current Usage             Worldwide            Mobile            10.14%                      Desktop                      ...
Current Usage             Worldwide                 Dance Studio            Mobile            10.14%                 Mobil...
Current Usage             Worldwide                 Dance Studio              Personal            Mobile                  ...
But Justin, 10% issuch a low numberto worry about.
You’re right.Why worry.                (Britt, 2005)
You’re right.Why worry. 00.09% - Fire                 (Britt, 2005)
You’re right.Why worry. 00.09% - Fire 00.005% - Airplane                      (Britt, 2005)
You’re right.Why worry. 00.09% - Fire                      00.0017% - Tornado 00.005% - Airplane                          ...
You’re right.Why worry. 00.09% - Fire                      00.0017% - Tornado 0.0012% - Lightning Strike 00.005% - Airplan...
You’re right.Why worry. 00.09% - Fire                      00.0017% - Tornado 0.0012% - Lightning Strike                  ...
Visitors Don’t    Come Back(Equation Research, 2011)
Visitors Don’t    Come Back                            22%                                  78%(Equation Research, 2011)
10% Loss in Visitors
10% Loss in Visitors
10% Loss in$$$$$$$$$$ $
10% Loss in$ $$$$$$$$ $
... and so on.      Yes. I just used fire in my      Keynote.
Obviously we needa mobile friendly
SeparateMobileWebsite                           (Bloomberg Business Week, 2012)“Good mobile user experience requires adiff...
Creates MoreProblems...
Creates MoreProblems...-Who decides what contentstays?
Creates MoreProblems...-Who decides what content stays?-Links are difficult to manage.
Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’        are difficult to manage.-Wh...
Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’        are difficult to manage.-Wh...
Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’        are difficult to manage.-Wh...
Too manyproblems...
ResponsiveDesign.
ResponsiveDesign.A design that responds to the needs of theusers.
ResponsiveDesign.A design that responds to the needs of theusers.-Flexible Grid-Flexible Images & Media-Media Queries
Flexible FluidGrids...
960px
960px        120px
960px20px               120px
For a fixed width design thesepixels would work perfectly.However, we need to usepercentages.
For a fixed width design thesepixels would work perfectly.However, we need to usepercentages.
960px        For a fixed width design these        pixels would work perfectly.        However, we need to use        perc...
960px540px                For a fixed width design these                pixels would work perfectly.                Howeve...
960px                400px540px                For a fixed width design these                pixels would work perfectly. ...
960px                400px540px                For a fixed width design these                pixels would work perfectly. ...
target          = resultcontext                     (Marcotte, 2011)
700   =.960   7291666666              (Marcotte, 2011)
72.916666666666%                  (Marcotte, 2011)
960px                400px540px        470px
960/960 = 1                            400/960 = .416666667540/960 = .5625         470/960 = .489583333
100%                   41.666666666666%56.25%     48.958333333333%
20px20px
20/960 = .02083333320/960 = .020833333
2.0833333333333%2.0833333333333%
100%                   41.666666666666%56.25%         2.0833333333333%     2.0833333333333%     48.958333333333%
Flexible Images & Other Media...
max-width: 100%;            Compatible all the way            back to IE7.            Not going to cover IE6.
Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula...
Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula...
Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula...
Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula...
Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula...
Let browsers resizeimages accordingly.              Modern browsers have              the ability to size and             ...
That little, easy to use               insert button when               editing content is the               devil.Problem...
That little, easy to use                               insert button when                               editing content is...
That little, easy to use                               insert button when                               editing content is...
max-width: 100%;works with othermedia, too!              img              embed              object              video
Media Queries...Those fun lines of codethat give you control overthe layout of your content.
Media Queries...Introduced in CSS 2.1.Used only for ‘screen’ or‘print’ queries.<link rel="stylesheet" type="text/css"  hre...
Media Queries...Revamped in CSS3.<link rel="stylesheet" type="text/css"  media="screen and (max-device-width:  480px)" hre...
Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:480px) {  /* css code goes here */...
Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:780px) and (min-device-width: 480p...
RecapMobile usage is on the rise.Separate mobile websites are a bust.Responsive design is the future.
QuizWhat is the formula used tocalculate the exact neededmeasurement for creating flexiblefluid grids?
target          = resultcontext                     (Marcotte, 2011)
Q & A...
Acknowledgements.Credits.Cites. Et Cetera. EtCetera. Week. http://images.businessweek.com/ss/ - Jakob Neilsen. Retrieved 0...
Random Notes•Do not presume you know what your users want when visiting your mobile site.•Do not presume you know your use...
Read These...Responsive Web Design - EthanMarcotte19 Articles, Info-Graphics & ResearchPublicationshttp://goo.gl/dXA3s
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in …5
×

Responsive Design

1,450 views
1,405 views

Published on

Presen

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

  • Be the first to like this

No Downloads
Views
Total views
1,450
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive Design

    1. 1. Responsive 2012 WordCamp Kansas City Justin Kopepasah
    2. 2. ResponsiveAn approach to web design that coordinatesdesign and development around a user’sbehavior and environment based on screensize, platform and orientation.Responding to your user’s needs.
    3. 3. ResponsiveFlexible Grids (Smith)
    4. 4. ResponsiveFlexible Images & Media
    5. 5. ResponsiveFlexible Images & Media (Tabone, 2012)
    6. 6. ResponsiveMedia Queries“A media query consists of a media type and zero or more expressionsthat check for the conditions of particular media features. Among themedia features that can be used in media queries are ‘width’, ‘height’,and ‘color’. By using media queries, presentations can be tailored to aspecific range of output devices without changing the content itself.”(W3C, 2012) Can be used with CSS or stylesheets within the head. Are more commonly used as CSS.
    7. 7. Why do we needresponsive design?
    8. 8. Mobile Usage Grows Desktop Mobile 100% 75% 50% 25% 0%April, ‘11 (5.21%) July, ‘11 October, ‘11 (6.55%) January, ‘12 April, ‘12 (9.58%) (StatCounter, 2012)
    9. 9. Mobile Usage Grows Usage20%15% 16.1%10% 8.5%5% 4.3% 1.6%0%0.7% 2009 2010 2011 2012 2013 (StatCounter, 2012)
    10. 10. Current Usage Loads of these visitors are trying to view the schedule.(StatCounter, 2012)
    11. 11. Current Usage Worldwide Mobile 10.14% Desktop 89.86% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)
    12. 12. Current Usage Worldwide Dance Studio Mobile 10.14% Mobile 22.09% Desktop Desktop 77.91% 89.86% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)
    13. 13. Current Usage Worldwide Dance Studio Personal Mobile Mobile 10.14% Mobile 7.59% 22.09% Desktop Desktop 77.91% Desktop 89.86% 92.41% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)
    14. 14. But Justin, 10% issuch a low numberto worry about.
    15. 15. You’re right.Why worry. (Britt, 2005)
    16. 16. You’re right.Why worry. 00.09% - Fire (Britt, 2005)
    17. 17. You’re right.Why worry. 00.09% - Fire 00.005% - Airplane (Britt, 2005)
    18. 18. You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 00.005% - Airplane (Britt, 2005)
    19. 19. You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.005% - Airplane (Britt, 2005)
    20. 20. You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.001% - Bee Sting 00.005% - Airplane (Britt, 2005)
    21. 21. Visitors Don’t Come Back(Equation Research, 2011)
    22. 22. Visitors Don’t Come Back 22% 78%(Equation Research, 2011)
    23. 23. 10% Loss in Visitors
    24. 24. 10% Loss in Visitors
    25. 25. 10% Loss in$$$$$$$$$$ $
    26. 26. 10% Loss in$ $$$$$$$$ $
    27. 27. ... and so on. Yes. I just used fire in my Keynote.
    28. 28. Obviously we needa mobile friendly
    29. 29. SeparateMobileWebsite (Bloomberg Business Week, 2012)“Good mobile user experience requires adifferent design than whats needed tosatisfy desktop users. Two designs, twosites, and cross-linking to make it allwork.” (Nielsen, 2012)
    30. 30. Creates MoreProblems...
    31. 31. Creates MoreProblems...-Who decides what contentstays?
    32. 32. Creates MoreProblems...-Who decides what content stays?-Links are difficult to manage.
    33. 33. Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?
    34. 34. Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?-More code/content to manage.
    35. 35. Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?-Too many user agents to test.-More code/content to manage.
    36. 36. Too manyproblems...
    37. 37. ResponsiveDesign.
    38. 38. ResponsiveDesign.A design that responds to the needs of theusers.
    39. 39. ResponsiveDesign.A design that responds to the needs of theusers.-Flexible Grid-Flexible Images & Media-Media Queries
    40. 40. Flexible FluidGrids...
    41. 41. 960px
    42. 42. 960px 120px
    43. 43. 960px20px 120px
    44. 44. For a fixed width design thesepixels would work perfectly.However, we need to usepercentages.
    45. 45. For a fixed width design thesepixels would work perfectly.However, we need to usepercentages.
    46. 46. 960px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
    47. 47. 960px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
    48. 48. 960px 400px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
    49. 49. 960px 400px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages. 470px
    50. 50. target = resultcontext (Marcotte, 2011)
    51. 51. 700 =.960 7291666666 (Marcotte, 2011)
    52. 52. 72.916666666666% (Marcotte, 2011)
    53. 53. 960px 400px540px 470px
    54. 54. 960/960 = 1 400/960 = .416666667540/960 = .5625 470/960 = .489583333
    55. 55. 100% 41.666666666666%56.25% 48.958333333333%
    56. 56. 20px20px
    57. 57. 20/960 = .02083333320/960 = .020833333
    58. 58. 2.0833333333333%2.0833333333333%
    59. 59. 100% 41.666666666666%56.25% 2.0833333333333% 2.0833333333333% 48.958333333333%
    60. 60. Flexible Images & Other Media...
    61. 61. max-width: 100%; Compatible all the way back to IE7. Not going to cover IE6.
    62. 62. Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesentcommodo cursus magna, vel scelerisquenisl consectetur et. Integer posuere erat aante venenatis dapibus posuere velitaliquet. Integer posuere erat a antevenenatis dapibus posuere velit aliquet.Maecenas sed diam eget risus variusblandit sit amet non magna. Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.
    63. 63. Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesentcommodo cursus magna, vel scelerisquenisl consectetur et. Integer posuere erat aante venenatis dapibus posuere velitaliquet. Integer posuere erat a antevenenatis dapibus posuere velit aliquet.Maecenas sed diam eget risus variusblandit sit amet non magna. Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.
    64. 64. Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesentcommodo cursus magna, vel scelerisquenisl consectetur et. Integer posuere erat aante venenatis dapibus posuere velitaliquet. Integer posuere erat a antevenenatis dapibus posuere velit aliquet.Maecenas sed diam eget risus variusblandit sit amet non magna. Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.
    65. 65. Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesentcommodo cursus magna, vel scelerisquenisl consectetur et. Integer posuere erat aante venenatis dapibus posuere velitaliquet. Integer posuere erat a antevenenatis dapibus posuere velit aliquet.Maecenas sed diam eget risus variusblandit sit amet non magna. Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.
    66. 66. Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesent commodo cursus magna, velscelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibusposuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuerevelit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.
    67. 67. Let browsers resizeimages accordingly. Modern browsers have the ability to size and resize images. There is no need to declare an image width or height.
    68. 68. That little, easy to use insert button when editing content is the devil.Problem withWordPress...
    69. 69. That little, easy to use insert button when editing content is the devil. Problem with WordPress...<img src="http://example.com/wp-content/uploads/2012/05/hearts.jpg" alt="Hearts"title="Hearts" width="1280" height="720"class="alignnone size-full wp-image-3520" />
    70. 70. That little, easy to use insert button when editing content is the devil. Problem with WordPress...<img src="http://example.com/wp-content/uploads/2012/05/hearts.jpg" alt="Hearts"title="Hearts" width="1280" height="720"class="alignnone size-full wp-image-3520" />
    71. 71. max-width: 100%;works with othermedia, too! img embed object video
    72. 72. Media Queries...Those fun lines of codethat give you control overthe layout of your content.
    73. 73. Media Queries...Introduced in CSS 2.1.Used only for ‘screen’ or‘print’ queries.<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
    74. 74. Media Queries...Revamped in CSS3.<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" /> The query contains two components: 1. a media type (screen), and 2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).
    75. 75. Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:480px) { /* css code goes here */} Some people used them everywhere, but I keep mine at the end.
    76. 76. Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:780px) and (min-device-width: 480px) { /* css code goes here */} Some people used them everywhere, but I keep mine at the end.
    77. 77. RecapMobile usage is on the rise.Separate mobile websites are a bust.Responsive design is the future.
    78. 78. QuizWhat is the formula used tocalculate the exact neededmeasurement for creating flexiblefluid grids?
    79. 79. target = resultcontext (Marcotte, 2011)
    80. 80. Q & A...
    81. 81. Acknowledgements.Credits.Cites. Et Cetera. EtCetera. Week. http://images.businessweek.com/ss/ - Jakob Neilsen. Retrieved 05Bloomberg Business2012, from BusinessWeek: (2012). Worlds Most Influentual Designers10/02/0201_worlds_most_influential_designers/21.htmBritt, R. R. (2005, 01 06). The Odds of Dying. Retrieved 05 2012, from LiveScience: http://www.livescience.com/3780-odds-dying.htmlEquation Research. (2011). What users want from mobile. Compuware.Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.) New York, NY: Jeffery Zeldman.Nielsen, J. (2012, 04 10). Mobile Site vs. Full Site. Retrieved 05 20, 2012, from Jakob NielsonsAlertbox: http://www.useit.com/alertbox/mobile-vs-full-sites.htmlSmith, N. (n.d.). 960 Grid System. Retrieved 05 2012, from 960 Grid System: http://960.gs/StatCounter. (2012, 02). Mobile internet usage is doubling year on year . Retrieved 05 2012, fromStatCounter Global Stats: http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-yearStatCounter. (2012, 04). Mobile vs. Desktop. Retrieved 05 2012, from StatCounter Global Stats:http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201104-201204Tabone, C. (2012). 365 PSD. Retrieved 05 2012, from New Youtube Interface: http://365psd.com/day/2-182/W3C. (2012, 04 26). Media Queries. Retrieved 05 20, 2012, from W3C: http://www.w3.org/TR/css3-mediaqueries/
    82. 82. Random Notes•Do not presume you know what your users want when visiting your mobile site.•Do not presume you know your users broadband speeds.•Test. Test. Test. Purchase devices and also use some online testing sites.•The only thing we know about mobile users is that they are on a smaller screen. We cannot presume to know what user intent is from that.•Never strip out content from a device simply because it is mobile. If you are telling yourself “This can be stripped out for mobile users.”, then you should assess if you needed it in the first place.•Slow load time is a hugh problem.
    83. 83. Read These...Responsive Web Design - EthanMarcotte19 Articles, Info-Graphics & ResearchPublicationshttp://goo.gl/dXA3s

    ×