0
Designing HTML forDevicesTerry Ryan | Developer EvangelistTwitter: @tpryan #CreateTheWeb
Who are you?          @tpryan
THE PROBLEMS               @tpryan
Screens are Exploding          @tpryan
@tpryan
@tpryan
@tpryan
@tpryan
Source: http://osxdaily.com/2012/02/10/how-ipad-3s-retina-display-resolution-would-compare-to-other-screens/              ...
SOLUTIONS            @tpryan
Ignore it            @tpryan
Mobile Sites          @tpryan
Mobile Apps         @tpryan
Responsive   Sites         @tpryan
I voteresponsive         @tpryan
HTML  alreadyhandles this          @tpryan
Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html                                        ...
Everything  addedmakes the web less         @tpryan
How do we  do it?        @tpryan
Responsive Web• Get rid of the stuff that your users don’t  want.                                        @tpryan
@tpryan
@tpryan
@tpryan
@tpryan
Source: http://xkcd.com/773/                               @tpryan
You are not in control of how   your usersexperience your      site              @tpryan
Responsive Web• Develop like your browser is just one big  linear display• Enhance for wider screens• Tweak for mobile• Te...
RESPONSIVE DESIGNBROKEN DOWN                    @tpryan
Demo       Adobe Camp           Site               @tpryan
Responsive Layout• Start with a right sized browser• Start designing 1 column• Make it look right• Then start attacking la...
Grid Systems• A few out there that handle this for you • Bootstrap • Responsive Grid System • CSSGrid• But know how to do ...
Manually• Floats• display: • table • table-row • table-cell• display • inline-block• Flexbox                  @tpryan
Float<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></li></ul>...
Float<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></li></ul>...
Float<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></li></ul>...
CSS Table<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></li><...
CSS Table<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></li><...
Inline-block<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></l...
Inline-block<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></l...
Inline-block<ul>  <li><a href="">Home</a></li>  <li><a href="">About</a></li>  <li class="search"><a href="">Search</a></l...
Forget I ever    said  anything   about           @tpryan
I reccomendinline-block   in most    cases @tpryan
Demo       Adobe Camp           Site               @tpryan
RESPONSIVE             @tpryan
Some fonts don’t look  right atsmall sizes. Especially elegant, thin, fonts                                   @tpryan
The longer thelinethe more linespacing youneed. Don’tknow why, butit’s true.The longer the line themore line spacing youne...
The longer thelinethe more linespacing youneed. Don’tknow why, butit’s true.The longer the line themore line spacing youne...
Someheaderslook too big on       @tpryan
Is   this enoughIs   contrast?     this enoughIs   contrast?     this enoughIs   contrast?     this enough     contrast?  ...
Demo       Adobe Camp           Site               @tpryan
RESPONSIVE IMAGES                    @tpryan
max-width=   100%        @tpryan
Adaptive Images           @tpryan
Sometimes you need multiple  images@tpryan
@tpryan
@tpryan
@tpryan
Nocomprehensi    veanswers yet         @tpryan
WHAT’S NEXT              @tpryan
Not done yet          @tpryan
Unless you test  on the device,you haven’t tested               @tpryan
But I used an  emulator                @tpryan
Unless you   test  on the  device,you haven’t          @tpryan
ADOBE SHADOWMihai Corlan in the next session                                   @tpryan
Responsive Resources•   http://www.alistapart.com/articles/responsive-web-design/•   http://www.abookapart.com/products/re...
CONCLUSIONS              @tpryan
Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-                              computing/           ...
Mobile Engagement• Paypal mobile payments: • 2009 - $141,000,000 • 2011- $4,000,000,000                    Text• Fab - 2X ...
Mobile is not the distant future     @tpryan
Mobile is not the future            @tpryan
Mobile isthe present          @tpryan
Mobile done  right canyield higher   returns@tpryan
You cannotcontrol your   users          @tpryan
Meet themwhere they are withResponsive         @tpryan
Follow up?• Preso will be up at:  - http://slideshare.net/tpryan• Feel free to contact me  - terry.ryan@adobe.com         ...
Upcoming SlideShare
Loading in...5
×

HTML Design for Devices

1,467

Published on

Design Focused on the why's and how's of Responsive Web Design.

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

No Downloads
Views
Total Views
1,467
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
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
  • Transcript of "HTML Design for Devices"

    1. 1. Designing HTML forDevicesTerry Ryan | Developer EvangelistTwitter: @tpryan #CreateTheWeb
    2. 2. Who are you? @tpryan
    3. 3. THE PROBLEMS @tpryan
    4. 4. Screens are Exploding @tpryan
    5. 5. @tpryan
    6. 6. @tpryan
    7. 7. @tpryan
    8. 8. @tpryan
    9. 9. Source: http://osxdaily.com/2012/02/10/how-ipad-3s-retina-display-resolution-would-compare-to-other-screens/ @tpryan
    10. 10. SOLUTIONS @tpryan
    11. 11. Ignore it @tpryan
    12. 12. Mobile Sites @tpryan
    13. 13. Mobile Apps @tpryan
    14. 14. Responsive Sites @tpryan
    15. 15. I voteresponsive @tpryan
    16. 16. HTML alreadyhandles this @tpryan
    17. 17. Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html @tpryan
    18. 18. Everything addedmakes the web less @tpryan
    19. 19. How do we do it? @tpryan
    20. 20. Responsive Web• Get rid of the stuff that your users don’t want. @tpryan
    21. 21. @tpryan
    22. 22. @tpryan
    23. 23. @tpryan
    24. 24. @tpryan
    25. 25. Source: http://xkcd.com/773/ @tpryan
    26. 26. You are not in control of how your usersexperience your site @tpryan
    27. 27. Responsive Web• Develop like your browser is just one big linear display• Enhance for wider screens• Tweak for mobile• Test it on targets• Iterate until it works right @tpryan
    28. 28. RESPONSIVE DESIGNBROKEN DOWN @tpryan
    29. 29. Demo Adobe Camp Site @tpryan
    30. 30. Responsive Layout• Start with a right sized browser• Start designing 1 column• Make it look right• Then start attacking larger screen sizes • tablet • desktop• Then go back and do mobile @tpryan
    31. 31. Grid Systems• A few out there that handle this for you • Bootstrap • Responsive Grid System • CSSGrid• But know how to do it manually @tpryan
    32. 32. Manually• Floats• display: • table • table-row • table-cell• display • inline-block• Flexbox @tpryan
    33. 33. Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{ float: left;}Home About Search @tpryan
    34. 34. Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{ float: left;}.search {float:right}Home About Search @tpryan
    35. 35. Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>Any mistakes?Home About Search @tpryan
    36. 36. CSS Table<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: table-cell} Home About Search @tpryan
    37. 37. CSS Table<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: table-cell} A SH b eo o arm u ce t h @tpryan
    38. 38. Inline-block<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: inline-block} Home About Search @tpryan
    39. 39. Inline-block<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: inline-block} Home About Search @tpryan
    40. 40. Inline-block<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: inline-block} Home About Search @tpryan
    41. 41. Forget I ever said anything about @tpryan
    42. 42. I reccomendinline-block in most cases @tpryan
    43. 43. Demo Adobe Camp Site @tpryan
    44. 44. RESPONSIVE @tpryan
    45. 45. Some fonts don’t look right atsmall sizes. Especially elegant, thin, fonts @tpryan
    46. 46. The longer thelinethe more linespacing youneed. Don’tknow why, butit’s true.The longer the line themore line spacing youneed. Don’t know why,but it’s true. @tpryan
    47. 47. The longer thelinethe more linespacing youneed. Don’tknow why, butit’s true.The longer the line themore line spacing youneed. Don’t know why,but it’s true. @tpryan
    48. 48. Someheaderslook too big on @tpryan
    49. 49. Is this enoughIs contrast? this enoughIs contrast? this enoughIs contrast? this enough contrast? @tpryan
    50. 50. Demo Adobe Camp Site @tpryan
    51. 51. RESPONSIVE IMAGES @tpryan
    52. 52. max-width= 100% @tpryan
    53. 53. Adaptive Images @tpryan
    54. 54. Sometimes you need multiple images@tpryan
    55. 55. @tpryan
    56. 56. @tpryan
    57. 57. @tpryan
    58. 58. Nocomprehensi veanswers yet @tpryan
    59. 59. WHAT’S NEXT @tpryan
    60. 60. Not done yet @tpryan
    61. 61. Unless you test on the device,you haven’t tested @tpryan
    62. 62. But I used an emulator @tpryan
    63. 63. Unless you test on the device,you haven’t @tpryan
    64. 64. ADOBE SHADOWMihai Corlan in the next session @tpryan
    65. 65. Responsive Resources• http://www.alistapart.com/articles/responsive-web-design/• http://www.abookapart.com/products/responsive-web-design @tpryan
    66. 66. CONCLUSIONS @tpryan
    67. 67. Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal- computing/ @tpryan
    68. 68. Mobile Engagement• Paypal mobile payments: • 2009 - $141,000,000 • 2011- $4,000,000,000 Text• Fab - 2X more likely to buy on mobile• Financial Times - 2x more likely to subscribe• Flipboard - 3x more likely to engage Source: http://www.lukew.com/ @tpryan
    69. 69. Mobile is not the distant future @tpryan
    70. 70. Mobile is not the future @tpryan
    71. 71. Mobile isthe present @tpryan
    72. 72. Mobile done right canyield higher returns@tpryan
    73. 73. You cannotcontrol your users @tpryan
    74. 74. Meet themwhere they are withResponsive @tpryan
    75. 75. Follow up?• Preso will be up at: - http://slideshare.net/tpryan• Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan #CreateTheWeb
    1. A particular slide catching your eye?

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

    ×