Adaptive Web-Design

3,055 views
2,951 views

Published on

The slides from my front-end day talk, Adaptive Web Design.

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

No Downloads
Views
Total views
3,055
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
66
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Adaptive Web-Design

  1. 1. Adaptive Web Design<br />Alex Gyoshev<br />Telerik Fronteer<br />
  2. 2. Responsive<br />Adaptive Web Design<br />Alex Gyoshev<br />Telerik Fronteer<br />
  3. 3. State of the Mobile Web<br />
  4. 4. Are iPhone & iPadenough?<br />
  5. 5. The many faces <br />of Android<br />
  6. 6. and… more?<br />
  7. 7. Explosionofscreen resolutions <br />source: Rethinking the Mobile Web<br />
  8. 8. reach<br />user experience<br />Balancing solutions<br />
  9. 9. Responsive Web Design<br />
  10. 10. Inspired by Responsive Architecture<br />
  11. 11.
  12. 12.
  13. 13. Flexible grid<br />Flexible media<br />@media queries<br />1<br />3<br />1<br />2<br />2<br />Three key techniques<br />
  14. 14. Flexible Grid<br /><ul><li>Adapts to all screen resolutions
  15. 15. Preserves proportions
  16. 16. Percentages instead of fixed units
  17. 17. Easily tested by resizing your browser window</li></li></ul><li>
  18. 18.
  19. 19. Flexible Grid: Problems<br /><ul><li>Unpleasantly wide on large monitors</li></ul>Can be fixed through<br /> max-width:100em; /* 1600px, elastic */<br /><ul><li>Fixed-size elements, either break it or get cropped</li></li></ul><li>Flexible Media<br />Media is good at breaking the grid<br />Behaves, if asked politely<br />img, object {max-width: 100%;<br />}<br />
  20. 20. @media Queries<br /><ul><li>Act when the flexible grid gets overwhelmed or inefficient
  21. 21. Linear content for phones
  22. 22. Usage:</li></ul>@media all and (min-width: 600px) {<br />/* desktop-specific styles */<br />}<br />
  23. 23. Nice <br />Example<br />
  24. 24. Pictures scale proportionally<br /> Nice <br />Example<br />
  25. 25. Image is cropped<br /> Nice <br />Example<br />
  26. 26. Linear display<br /> Nice <br />Example<br />No more scalling<br />
  27. 27. Nice <br />Example<br />
  28. 28. Smaller menu<br /> Nice <br />Example<br />
  29. 29. Nice <br />Example<br />Smaller text size<br />
  30. 30. Compact logo and menu<br /> Nice <br />Example<br />Linear display<br />
  31. 31. Even to this size<br /> Nice <br />Example<br />
  32. 32. @media Queries: Do they work?<br /><ul><li>Work (almost) everywhere</li></ul>source: http://caniuse.com/<br /><ul><li>In desperate situations, use JavaScript
  33. 33. CSS3-mediaqueries-js– full media query support
  34. 34. Respond.js– much faster, limited queries
  35. 35. Custom scripts</li></li></ul><li> Further things to consider<br /><ul><li>Connection speed
  36. 36. Pointing devices
  37. 37. Different user context</li></li></ul><li> Connection Speed<br /><ul><li>Minimizing HTTP requests
  38. 38. CSS sprites
  39. 39. CSS3 instead of images
  40. 40. Custom fonts only on desktop
  41. 41. Responsive images</li></ul><imgsrc="small.r.jpg" data-fullsrc="large.jpg“ /><br />
  42. 42. Pointing devices<br /><ul><li>Remember Fitts’ Law
  43. 43. Make touchable content bigger
  44. 44. Grow content when users use it
  45. 45. Majority of users are right-handed</li></li></ul><li> User context<br /><ul><li>Prioritize content
  46. 46. Delegate responsibilities to other pages
  47. 47. Test!</li></li></ul><li> Two Sides<br /><ul><li>Responsive web design
  48. 48. Pure mobile web</li></li></ul><li>Purrrist<br />Responsive developer<br /> Two Sides<br />
  49. 49. Qwestuns?<br />@alex_gyoshev<br />alex@gyoshev.net<br />
  50. 50. References<br /><ul><li>Responsive Web Design by Ethan Marcotte
  51. 51. Rethinking the Mobile Web by Bryan Rieger
  52. 52. Real-world Responsive Design by Stephen Hay
  53. 53. Responsive Web Design Resources at Smashing Magazine
  54. 54. Flexible Web Design book
  55. 55. Media queries under IE8 and below
  56. 56. CSS3-mediaqueries-js – full media query support
  57. 57. Respond.js – much faster, limited queries</li>

×