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