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