HTML Design for Devices

  • 1,316 views
Uploaded 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.

More 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,316
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