Responsive Content: Building a Website that Kicks App

The

Code

Ready, Set, Go!

<article>

<div class="summary-text

mobile-height">

[... Content ...]

</div>

<span class="read-more">

Read more»

</span>

</article>

The

Code

<div class="lazy-load" id="ll-images">

[... Content ...]

</div>

<script>

$(document).ready(function () {

$.get('ll-images.html', function(content) {

$('#ll-images').append(content);

});

});

</script>

Reveal Article Summary

Lazy Loading

JavaScript reveals summary

Go to Article

Link opens article

+ Linear content

+ Good for Articles

+ Quicker initial load

CSS:

@media screen and (max-width:480px) {

.mobile-height {height:2em; overflow:hidden;

}

JS:

$('span.read-more').click(function() {

$(this).siblings('.summary-text')

.toggleClass('mobile-height');

});

Linking Options

Linking

to

Content

+ Non-linear content

+ Good for news feeds

+ Good for homepages

Link to Content

2

Lazy Load

3

Responsive Content

building a website that kicks app

HTML:

<aside class="prune-mobile">

...

</aside>

The

Code

Hans Sprecher

@honzie

1

CSS:

@media screen and (max-width:320px) {

.prune-mobile {display:none;}

}

Prune Content

Be Responsive.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed magna neque, vel tempus eros. Mauris libero nulla, pretium sed faucibus convallis, condimentum porttitor tellus. Curabitur tristique quam dui. Vestibulum laoreet, dui vitae aliquet dapibus, tellus lorem sollicitudin ante, sollicitudin lacinia lacus ante tristique nibh. In adipiscing pretium ipsum volutpat viverra. In et sem quam, et interdum mauris. Sed interdum dignissim libero ac sodales. Suspendisse a sapien id odio imperdiet egestas nec non velit. Phasellus sed lorem quam.

Sed convallis odio ac diam pellentesque tempor quis ac urna. Maecenas hendrerit semper est, eget luctus felis adipiscing a. Vivamus cursus viverra metus, euismod bibendum eros porta quis. Cras cursus molestie libero id porta. Cras interdum augue non massa mattis lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales enim id felis porttitor nec eleifend quam mattis. Pellentesque posuere pulvinar justo sit amet euismod. Sed ultrices odio non leo congue nec tincidunt nisi aliquet. Suspendisse vel purus odio, sed elementum sem. Fusce risus tellus, consequat ut porta quis, dapibus scelerisque libero. Nunc non lacus neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed magna neque, vel tempus eros. Mauris libero nulla, pretium sed faucibus convallis, condimentum porttitor tellus.

Curabitur tristique quam dui.

...

Pruning

Content

Responsive Designs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed magna neque, vel tempus eros. Mauris libero nulla, pretium sed faucibus convallis, condimentum porttitor tellus. Curabitur tristique quam dui. Vestibulum laoreet, dui vitae aliquet dapibus, tellus lorem sollicitudin ante, sollicitudin lacinia lacus ante tristique nibh. In adipiscing pretium ipsum volutpat viverra. In et sem quam, et interdum mauris. Sed interdum dignissim libero ac sodales. Suspendisse a sapien id odio imperdiet egestas nec non velit. Phasellus sed lorem quam.

Sed convallis odio ac diam pellentesque tempor quis ac urna. Maecenas hendrerit semper est, eget luctus felis adipiscing a. Vivamus cursus viverra metus, euismod bibendum eros porta quis. Cras cursus molestie libero id porta. Cras interdum augue non massa mattis lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales enim id felis porttitor nec eleifend quam mattis. Pellentesque posuere pulvinar justo sit amet euismod. Sed ultrices odio non leo congue nec tincidunt nisi aliquet. Suspendisse vel purus odio, sed elementum sem. Fusce risus tellus, consequat ut porta quis, dapibus scelerisque libero. Nunc non lacus neque.

We can do better.

Responsive

Content

Each Prune

• Questioned the full site content

• Made us think mobile first

• (Without restructuring all content)

Aggressive Pruning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed magna neque, vel tempus eros. Mauris libero nulla, pretium sed faucibus convallis, condimentum porttitor tellus. Curabitur tristique quam dui. Vestibulum laoreet, dui vitae aliquet dapibus, tellus lorem sollicitudin ante, sollicitudin lacinia lacus ante tristique nibh. In adipiscing pretium ipsum volutpat viverra. In et sem quam, et interdum mauris. Sed interdum dignissim libero ac sodales. Suspendisse a sapien id odio imperdiet egestas nec non velit. Phasellus sed lorem quam.

Sed convallis odio ac diam pellentesque tempor quis ac urna. Maecenas hendrerit semper est, eget luctus felis adipiscing a. Vivamus cursus viverra metus, euismod bibendum eros porta quis. Cras cursus molestie libero id porta. Cras interdum augue non massa mattis lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales enim id felis porttitor nec eleifend quam mattis. Pellentesque posuere pulvinar justo sit amet euismod. Sed ultrices odio non leo congue nec tincidunt nisi aliquet. Suspendisse vel purus odio, sed elementum sem. Fusce risus tellus, consequat ut porta quis, dapibus scelerisque libero. Nunc non lacus neque.

A few {display:none}'s

Tablet-ify This:

Create a

retail application

Quote Pruning

building a website

that kicks app

+ Good for secondary content

- Overuse cripples content

- No 'full site' fallback

×

Hans Sprecher

@honzie

Mobile Content

Pruning in Action

Mobile Only Sites

View

Full

Site »

Responsive

Content

More »

@honzie

All together now.

Desktop

Hans Sprecher

Portrait Tablet

Mobile

Responsive Content

@honzie