Adaptive / Reponsive Content vs Adaptive / Responsive Design - Term Disamguation
Responsive content
-
Upload
honzie -
Category
Technology
-
view
857 -
download
0
description
Transcript of Responsive content
Responsive contentCSS Dev Conference
Hans Sprecher | @honzie
Responsive designfascinating.
Respond to capabilities
• Screen size
• Browser sophistication
• Device features
Contentas responsive as the design.
Mobile site
Responsive web
We can do better
3LazyLoad
1Prune
2Link
3LazyLoad
1Prune
2Link
Pruning content
• Good for secondary content
• Potentially dangerous
• No Full site link
Secondary content pruning
Image pruning
Image pruning
Consider removing completely
Mobile site vs. full site
• Cut features
• Cut content
• Enlarge UI
Josh Clark, @globalmoxie
http://www.netmagazine.com/opinions/nielsen-wrong-mobile
Like publishing a paperback with chapters missing.
Like publishing a movie in fullscreen on VHS.
Prune fodder
• Testimonials & quotes
• Pull quotes
• Tertiary sidebars
• Stock photos
Aggressive pruning
“Create a retail app.”
“What could possibly go wrong?”
Known constraints
• Known context
• Known hardware
• Support standing by
125 lines of CSSsame HTML, JS.
Each prune
• Questioned content
• Thought mobile first
• Without full redesign
Great proof of concept
Pruning HTML & CSS<aside class=“prune-mobile”> [content]</aside>
Pruning HTML & CSS<aside class=“prune-mobile”> [content]</aside>
@media (max-width: 320px) {
.prune-mobile { display: none; }
}
Class naming
.prune-laptop
.prune-tablet
.prune-mobile
That's better
blockquote.pull
aside.tertiary
img.stock
3LazyLoad
1Prune
2Link
Linking to content
• Non-linear content
• Good for news feeds
• Good for homepages
Two tactics
• Link to new page
• Show content within page
JavaScript reveals summary
Reveal Link: HTML<section>
<article class=“clipped”> [content] </article>
<span class=“read-more”> Read more </span>
</section>
Reveal Link: CSS & JS@media screen and (max-width:480px) {
.clipped { height: 2em; overflow: hidden; }
}
Reveal Link: CSS & JS@media screen and (max-width:480px) {
.clipped { height: 2em; overflow: hidden; }
}
$(‘.read-more’).click(function () { $(this).siblings('article') .toggleClass(‘clipped’);});
JavaScript reveals summary
Why JS?this is CSS Dev Conference
CSS Reveal: HTML<section>
<input class="toggle" type="checkbox" />
<article> [content] </article>
</section>
CSS Reveal: Interaction CSS@media (max-width:480px) {
article { height: 156px; overflow: hidden; }
.toggle:checked + article { height: auto; }
}
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'; }
}
CSS reveals summary
http://www.hanssprecher.com/css-tray.html
Can I use CSS3 Selectors?
Can I use CSS3 Selectors?Yes! *Except for Safari 3.1
CSS Tabs
http://www.hanssprecher.com/css-tabs.html
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>
CSS Tabs: Interaction CSS@media (max-width:480px) {
article { display:none; }
article:target { display:block; }
}
CSS Tabs
http://www.hanssprecher.com/css-tabs.html
Metro
With little CSS & JScomes great power.
Read the spec
<aside>
“content that is tangentially related to the [main textual] content”
<figure>
“a unit of content [...] that is self-contained [...] and that can be moved [...] without
affecting the document’s meaning”
3LazyLoad
1Prune
2Link
Lazy loading
• Linear content
• Good for articles
• Quicker initial load
Ready, set, go!
80% fasterto DOM ready.
Page load HTML<aside id=“lazy-images”> <img> <img></aside>
AJAX call<script>$(document).ready(function () { $.get(‘images.html’, function (content) { $(‘#lazy-images’).append(content); });});</script>
3 Tips
1. Use JSON in response
[{“src”: “/earth.jpg”, “alt”: “Earth”},{“src”: “/sky.jpg”, “alt”: “Sky”},
{“src”: “/water.jpg”, “alt”: “Water”}]
2. Use HTML for content
<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>
3. Cache the AJAX response
$.ajaxSetup({cache: true});
Done by default for $.get()
All together now
3LazyLoad
1Prune
2Link
Desktop
Portrait tablet
Smartphone
Tweak content strategyfor the device.
Media queries now
Current support: desktop
First Supported• IE 9
• FireFox 3.5
• Chrome 4
• Safari 3.1 / 4.0
• Opera 9.5
Current Version• IE 10
• FireFox 17
• Chrome 23
• Safari 6
• Opera 12.1
Version numbers
Chrome 23 FireFox 17
Version numbers
I do not think it meanswhat you think it means.
Capability detectionmore important than ever.
Current support: mobile
First Supported• iOS Safari 3.2
• Android 2.1
• Opera Mini 5 / 6
• Opera Mobile 10
• WP 7.5
Current Version• iOS Safari 5.0
• Android 4.0
• Opera Mini 5-7
• Opera Mobile 12
• WP 8
83% global supportDecember 2012, StatCounter, Global Stats
IE8
• No media query supportis the first media query
• Site should be functional
Device landscapeunlikely to get simpler.
Future friendlyresponsive design, responsive content.
Mobile contentMobile only Responsive
3LazyLoad
1Prune
2Link
Thank you.
Hans Sprecher | @honzie