• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive content
 

Responsive content

on

  • 1,054 views

Responsive Content deck from CSS Dev Conf.

Responsive Content deck from CSS Dev Conf.

Statistics

Views

Total Views
1,054
Views on SlideShare
1,031
Embed Views
23

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 23

http://eventifier.co 23

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Responsive content Responsive content Presentation Transcript

    • Responsive content CSS Dev Conference Hans Sprecher | @honzie
    • Responsive design fascinating.
    • Respond to capabilities • Screen size • Browser sophistication • Device features
    • Contentas responsive as the design.
    • Mobile site
    • Responsive web
    • We can do better
    • 1 2 3Prune Link Lazy Load
    • 1 2 3Prune Link Lazy Load
    • 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, @globalmoxiehttp://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 CSS same 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
    • Thats better blockquote.pull aside.tertiary img.stock
    • 1 2 3Prune Link Lazy Load
    • 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 summaryhttp://www.hanssprecher.com/css-tray.html
    • Can I use CSS3 Selectors?
    • Can I use CSS3 Selectors? Yes! *Except for Safari 3.1
    • CSS Tabshttp://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 Tabshttp://www.hanssprecher.com/css-tabs.html
    • Metro
    • With little CSS & JS comes 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”
    • 1 2 3Prune Link Lazy Load
    • 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, seddo eiusmod tempor incididunt utlabore et dolore magnaaliqua.</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
    • 1 2 3Prune Link Lazy Load
    • Desktop
    • Portrait tablet
    • Smartphone
    • Tweak content strategy for the device.
    • Media queries now
    • 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
    • Version numbers Chrome 23 FireFox 17
    • Version numbers I do not think it means what you think it means.
    • Capability detectionmore important than ever.
    • 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
    • 83% global supportDecember 2012, StatCounter, Global Stats
    • IE8 • No media query support is the first media query • Site should be functional
    • Device landscapeunlikely to get simpler.
    • Future friendlyresponsive design, responsive content.
    • Mobile contentMobile only Responsive
    • 1 2 3Prune Link Lazy Load
    • Thank you.Hans Sprecher | @honzie