HTML Design for Devices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML Design for Devices

on

  • 1,662 views

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.

Statistics

Views

Total Views
1,662
Views on SlideShare
1,642
Embed Views
20

Actions

Likes
3
Downloads
26
Comments
0

3 Embeds 20

https://twitter.com 14
https://si0.twimg.com 4
http://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

HTML Design for Devices Presentation 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