Responsive Content deck from CSS Dev Conf.

1. Responsive content
CSS Dev Conference
Hans Sprecher | @honzie

2. Responsive design
fascinating.

3. Respond to capabilities
• Screen size
• Browser sophistication
• Device features

4. Content
as responsive as the design.

5. Mobile site

6. Responsive web

7. We can do better

8. 1 2 3
Prune Link Lazy
Load

9. 1 2 3
Prune Link Lazy
Load

10. Pruning content
• Good for secondary content
• Potentially dangerous
• No Full site link

11. Secondary content
pruning

13. Image pruning

14. Image pruning

15. Consider removing completely

16. Mobile site vs. full site
• Cut features
• Cut content
• Enlarge UI

17. Josh Clark, @globalmoxie
http://www.netmagazine.com/opinions/nielsen-wrong-mobile

18. Like publishing a paperback with
chapters missing.

19. Like publishing a movie in
fullscreen on VHS.

20. Prune fodder
• Testimonials & quotes
• Pull quotes
• Tertiary sidebars
• Stock photos

21. Aggressive pruning

23. “Create a retail app.”

25. “What could possibly go
wrong?”

26. Known constraints
• Known context
• Known hardware
• Support standing by

29. 125 lines of CSS
same HTML, JS.

31. Each prune
• Questioned content
• Thought mobile first
• Without full redesign

32. Great proof of concept

33. Pruning HTML & CSS
<aside class=“prune-mobile”>
[content]
</aside>

34. Pruning HTML & CSS
<aside class=“prune-mobile”>
[content]
</aside>
@media (max-width: 320px) {
.prune-mobile {
display: none;
}
}

35. Class naming
.prune-laptop
.prune-tablet
.prune-mobile

36. That's better
blockquote.pull
aside.tertiary
img.stock

37. 1 2 3
Prune Link Lazy
Load

38. Linking to content
• Non-linear content
• Good for news feeds
• Good for homepages

39. Two tactics
• Link to new page
• Show content within page

41. JavaScript reveals summary

42. Reveal Link: HTML
<section>
<article class=“ clipped”>
[content]
</article>
<span class=“ read-more”>
Read more
</span>
</section>

43. Reveal Link: CSS & JS
@media screen and (max-width:480px) {
.clipped {
height: 2em;
overflow: hidden;
}
}

44. Reveal Link: CSS & JS
@media screen and (max-width:480px) {
.clipped {
height: 2em;
overflow: hidden;
}
}
$(‘.read-more’).click(function () {
$(this).siblings('article')
.toggleClass(‘clipped’);
});

45. JavaScript reveals summary

46. Why JS?
this is CSS Dev Conference

47. CSS Reveal: HTML
<section>
<input class="toggle"
type="checkbox" />
<article>
[content]
</article>
</section>

48. CSS Reveal: Interaction CSS
@media (max-width:480px) {
article {
height: 156px;
overflow: hidden;
}
.toggle:checked + article {
height: auto;
}
}

49. 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';
}
}

50. CSS reveals summary
http://www.hanssprecher.com/css-tray.html

51. Can I use CSS3 Selectors?

52. Can I use CSS3 Selectors?
Yes! *Except for Safari 3.1

53. CSS Tabs
http://www.hanssprecher.com/css-tabs.html

54. 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>

55. CSS Tabs: Interaction CSS
@media (max-width:480px) {
article {
display:none;
}
article:target {
display:block;
}
}

56. CSS Tabs
http://www.hanssprecher.com/css-tabs.html

58. Metro

59. With little CSS & JS
comes great power.

60. Read the spec

61. <aside>
“content that is tangentially related to the
[main textual] content”

62. <figure>
“a unit of content [...] that is self-contained
[...] and that can be moved [...] without
affecting the document’s meaning”

63. 1 2 3
Prune Link Lazy
Load

64. Lazy loading
• Linear content
• Good for articles
• Quicker initial load

65. Ready, set, go!

66. 80% faster
to DOM ready.

67. Page load HTML
<aside id=“lazy-images”>
<img>
<img>
</aside>

68. AJAX call
<script>
$(document).ready(function () {
$.get(‘images.html’, function
(content) {
$(‘#lazy-images’).append(content);
});
});
</script>

69. 3 Tips

70. 1. Use JSON in response

71. [{“src”: “/earth.jpg”, “alt”: “Earth”},
{“src”: “/sky.jpg”, “alt”: “Sky”},
{“src”: “/water.jpg”, “alt”: “Water”}]

72. 2. Use HTML for content

73. <h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna
aliqua.</p>
<ul>
<li>Ut enim ad minim</li>
<li>Quis nostrud exercitan</li>
</ul>

74. 3. Cache the AJAX response

75. $.ajaxSetup({cache: true});
Done by default for $.get()

76. All together now

77. 1 2 3
Prune Link Lazy
Load

78. Desktop

79. Portrait tablet

80. Smartphone

82. Tweak content strategy
for the device.

83. Media queries now

84. Current support: desktop
First 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

85. Version numbers
Chrome 23 FireFox 17

86. Version numbers
I do not think it means
what you think it means.

87. Capability detection
more important than ever.

88. Current support: mobile
First 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

89. 83% global support
December 2012, StatCounter, Global Stats

90. IE8
• No media query support
is the first media query
• Site should be functional

91. Device landscape
unlikely to get simpler.

92. Future friendly
responsive design, responsive content.

93. Mobile content
Mobile only Responsive

94. 1 2 3
Prune Link Lazy
Load

95. Thank you.
Hans Sprecher | @honzie