Your SlideShare is downloading. ×
0
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
HTML Design for Devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML Design for Devices

1,454

Published on

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

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,454
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    1. Designing HTML forDevicesTerry Ryan | Developer EvangelistTwitter: @tpryan #CreateTheWeb
    2. Who are you? @tpryan
    3. THE PROBLEMS @tpryan
    4. Screens are Exploding @tpryan
    5. @tpryan
    6. @tpryan
    7. @tpryan
    8. @tpryan
    9. Source: http://osxdaily.com/2012/02/10/how-ipad-3s-retina-display-resolution-would-compare-to-other-screens/ @tpryan
    10. SOLUTIONS @tpryan
    11. Ignore it @tpryan
    12. Mobile Sites @tpryan
    13. Mobile Apps @tpryan
    14. Responsive Sites @tpryan
    15. I voteresponsive @tpryan
    16. HTML alreadyhandles this @tpryan
    17. Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html @tpryan
    18. Everything addedmakes the web less @tpryan
    19. How do we do it? @tpryan
    20. Responsive Web• Get rid of the stuff that your users don’t want. @tpryan
    21. @tpryan
    22. @tpryan
    23. @tpryan
    24. @tpryan
    25. Source: http://xkcd.com/773/ @tpryan
    26. You are not in control of how your usersexperience your site @tpryan
    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. RESPONSIVE DESIGNBROKEN DOWN @tpryan
    29. Demo Adobe Camp Site @tpryan
    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. 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. Manually• Floats• display: • table • table-row • table-cell• display • inline-block• Flexbox @tpryan
    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. 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. 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. 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. 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. 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. 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. 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. Forget I ever said anything about @tpryan
    42. I reccomendinline-block in most cases @tpryan
    43. Demo Adobe Camp Site @tpryan
    44. RESPONSIVE @tpryan
    45. Some fonts don’t look right atsmall sizes. Especially elegant, thin, fonts @tpryan
    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. 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. Someheaderslook too big on @tpryan
    49. Is this enoughIs contrast? this enoughIs contrast? this enoughIs contrast? this enough contrast? @tpryan
    50. Demo Adobe Camp Site @tpryan
    51. RESPONSIVE IMAGES @tpryan
    52. max-width= 100% @tpryan
    53. Adaptive Images @tpryan
    54. Sometimes you need multiple images@tpryan
    55. @tpryan
    56. @tpryan
    57. @tpryan
    58. Nocomprehensi veanswers yet @tpryan
    59. WHAT’S NEXT @tpryan
    60. Not done yet @tpryan
    61. Unless you test on the device,you haven’t tested @tpryan
    62. But I used an emulator @tpryan
    63. Unless you test on the device,you haven’t @tpryan
    64. ADOBE SHADOWMihai Corlan in the next session @tpryan
    65. Responsive Resources• http://www.alistapart.com/articles/responsive-web-design/• http://www.abookapart.com/products/responsive-web-design @tpryan
    66. CONCLUSIONS @tpryan
    67. Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal- computing/ @tpryan
    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. Mobile is not the distant future @tpryan
    70. Mobile is not the future @tpryan
    71. Mobile isthe present @tpryan
    72. Mobile done right canyield higher returns@tpryan
    73. You cannotcontrol your users @tpryan
    74. Meet themwhere they are withResponsive @tpryan
    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

    ×