Responsive content

1,011 views
961 views

Published on

Responsive Content deck from CSS Dev Conf.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,011
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive content

  1. 1. Responsive content CSS Dev Conference Hans Sprecher | @honzie
  2. 2. Responsive design fascinating.
  3. 3. Respond to capabilities • Screen size • Browser sophistication • Device features
  4. 4. Contentas responsive as the design.
  5. 5. Mobile site
  6. 6. Responsive web
  7. 7. We can do better
  8. 8. 1 2 3Prune Link Lazy Load
  9. 9. 1 2 3Prune Link Lazy Load
  10. 10. Pruning content • Good for secondary content • Potentially dangerous • No Full site link
  11. 11. Secondary content pruning
  12. 12. Image pruning
  13. 13. Image pruning
  14. 14. Consider removing completely
  15. 15. Mobile site vs. full site • Cut features • Cut content • Enlarge UI
  16. 16. Josh Clark, @globalmoxiehttp://www.netmagazine.com/opinions/nielsen-wrong-mobile
  17. 17. Like publishing a paperback with chapters missing.
  18. 18. Like publishing a movie in fullscreen on VHS.
  19. 19. Prune fodder • Testimonials & quotes • Pull quotes • Tertiary sidebars • Stock photos
  20. 20. Aggressive pruning
  21. 21. “Create a retail app.”
  22. 22. “What could possibly go wrong?”
  23. 23. Known constraints • Known context • Known hardware • Support standing by
  24. 24. 125 lines of CSS same HTML, JS.
  25. 25. Each prune • Questioned content • Thought mobile first • Without full redesign
  26. 26. Great proof of concept
  27. 27. Pruning HTML & CSS<aside class=“prune-mobile”> [content]</aside>
  28. 28. Pruning HTML & CSS<aside class=“prune-mobile”> [content]</aside>@media (max-width: 320px) { .prune-mobile { display: none; }}
  29. 29. Class naming .prune-laptop .prune-tablet .prune-mobile
  30. 30. Thats better blockquote.pull aside.tertiary img.stock
  31. 31. 1 2 3Prune Link Lazy Load
  32. 32. Linking to content • Non-linear content • Good for news feeds • Good for homepages
  33. 33. Two tactics • Link to new page • Show content within page
  34. 34. JavaScript reveals summary
  35. 35. Reveal Link: HTML<section> <article class=“ clipped”> [content] </article> <span class=“ read-more”> Read more </span></section>
  36. 36. Reveal Link: CSS & JS@media screen and (max-width:480px) { .clipped { height: 2em; overflow: hidden; }}
  37. 37. Reveal Link: CSS & JS@media screen and (max-width:480px) { .clipped { height: 2em; overflow: hidden; }}$(‘.read-more’).click(function () { $(this).siblings(article) .toggleClass(‘clipped’);});
  38. 38. JavaScript reveals summary
  39. 39. Why JS?this is CSS Dev Conference
  40. 40. CSS Reveal: HTML<section> <input class="toggle" type="checkbox" /> <article> [content] </article></section>
  41. 41. CSS Reveal: Interaction CSS@media (max-width:480px) { article { height: 156px; overflow: hidden; } .toggle:checked + article { height: auto; }}
  42. 42. CSS Reveal: Style CSS@media screen and (max-width:480px) { .toggle { position: absolute; right: 0; bottom: 0; display: block; } .toggle::after { content: Read more; } .toggle:checked::after { content: Read less; }}
  43. 43. CSS reveals summaryhttp://www.hanssprecher.com/css-tray.html
  44. 44. Can I use CSS3 Selectors?
  45. 45. Can I use CSS3 Selectors? Yes! *Except for Safari 3.1
  46. 46. CSS Tabshttp://www.hanssprecher.com/css-tabs.html
  47. 47. CSS Tabs: HTML<section> <ol> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ol> <article id="tab1"> [content] </article> <article id="tab2"> [content] </article></section>
  48. 48. CSS Tabs: Interaction CSS@media (max-width:480px) { article { display:none; } article:target { display:block; }}
  49. 49. CSS Tabshttp://www.hanssprecher.com/css-tabs.html
  50. 50. Metro
  51. 51. With little CSS & JS comes great power.
  52. 52. Read the spec
  53. 53. <aside>“content that is tangentially related to the [main textual] content”
  54. 54. <figure>“a unit of content [...] that is self-contained [...] and that can be moved [...] without affecting the document’s meaning”
  55. 55. 1 2 3Prune Link Lazy Load
  56. 56. Lazy loading • Linear content • Good for articles • Quicker initial load
  57. 57. Ready, set, go!
  58. 58. 80% fasterto DOM ready.
  59. 59. Page load HTML<aside id=“lazy-images”> <img> <img></aside>
  60. 60. AJAX call<script>$(document).ready(function () { $.get(‘images.html’, function(content) { $(‘#lazy-images’).append(content); });});</script>
  61. 61. 3 Tips
  62. 62. 1. Use JSON in response
  63. 63. [{“src”: “/earth.jpg”, “alt”: “Earth”}, {“src”: “/sky.jpg”, “alt”: “Sky”}, {“src”: “/water.jpg”, “alt”: “Water”}]
  64. 64. 2. Use HTML for content
  65. 65. <h1>Blog Post</h1><p>Lorem ipsum dolor sit amet,consectetur adipisicing elit, seddo eiusmod tempor incididunt utlabore et dolore magnaaliqua.</p><ul> <li>Ut enim ad minim</li> <li>Quis nostrud exercitan</li></ul>
  66. 66. 3. Cache the AJAX response
  67. 67. $.ajaxSetup({cache: true}); Done by default for $.get()
  68. 68. All together now
  69. 69. 1 2 3Prune Link Lazy Load
  70. 70. Desktop
  71. 71. Portrait tablet
  72. 72. Smartphone
  73. 73. Tweak content strategy for the device.
  74. 74. Media queries now
  75. 75. Current support: desktopFirst Supported Current Version• IE 9 • IE 10• FireFox 3.5 • FireFox 17• Chrome 4 • Chrome 23• Safari 3.1 / 4.0 • Safari 6• Opera 9.5 • Opera 12.1
  76. 76. Version numbers Chrome 23 FireFox 17
  77. 77. Version numbers I do not think it means what you think it means.
  78. 78. Capability detectionmore important than ever.
  79. 79. Current support: mobileFirst Supported Current Version• iOS Safari 3.2 • iOS Safari 5.0• Android 2.1 • Android 4.0• Opera Mini 5 / 6 • Opera Mini 5-7• Opera Mobile 10 • Opera Mobile 12• WP 7.5 • WP 8
  80. 80. 83% global supportDecember 2012, StatCounter, Global Stats
  81. 81. IE8 • No media query support is the first media query • Site should be functional
  82. 82. Device landscapeunlikely to get simpler.
  83. 83. Future friendlyresponsive design, responsive content.
  84. 84. Mobile contentMobile only Responsive
  85. 85. 1 2 3Prune Link Lazy Load
  86. 86. Thank you.Hans Sprecher | @honzie

×