Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Responsive Content: Building a Website that Kicks App

Slides from SXSW 2012 presentation.
by

Hans Sprecher

on 25 November 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Content: Building a Website that Kicks App

Responsive Content Hans Sprecher
@honzie Responsive
Content Hans Sprecher
@honzie Responsive
Content @honzie building a website that kicks app building a website
that kicks app More » Mobile Content Mobile Only Sites Responsive Designs View
Full
Site » 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. 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.

... 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. Be Responsive. 1 2 3 Pruning
Content Link to Content Lazy Load + Good for secondary content

- Overuse cripples content
- No 'full site' fallback The
Code HTML:
<aside class="prune-mobile">
...
</aside> CSS:
@media screen and (max-width:320px) {
.prune-mobile {display:none;}
} Pruning in Action Quote Pruning Aggressive Pruning × Prune Content Create a
retail application Tablet-ify This: A few {display:none}'s Each Prune • Questioned the full site content
• Made us think mobile first
• (Without restructuring all content) Linking
to
Content + Non-linear content
+ Good for news feeds
+ Good for homepages The
Code <article>
<div class="summary-text
mobile-height">
[... Content ...]
</div>
<span class="read-more">
Read more»
</span>
</article> 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 Go to Article Reveal Article Summary Link opens article JavaScript reveals summary Lazy Loading + Linear content
+ Good for Articles
+ Quicker initial load Ready, Set, Go! 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> All together now. Desktop Responsive Content Portrait Tablet Mobile Hans Sprecher @honzie
Full transcript