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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML Design for Devices

  • 1,338 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,338
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
27
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