The Push and Pull of Content Layout

by Michael Moores

The Push and Pull of Content Layout

by Michael Moores

by Michael Moores

I depend on grid frameworks when building responsive websites. There are a few out there that are great. At the moment, I personally am a fan of Zurb’s Foundation. As a designer / developer I can appreciate it for its enthusiastic community, well-made assets and ease of manipulating layouts. Most of our sites are built with the intent of handing over editing responsibilities to the client. When working with smaller to mid-size businesses, you won’t usually find someone on staff with a lot of HTML / CSS experience. That’s why implementing and educating clients on these different frameworks makes maintaining their websites a lot easier.

Source Ordering

One of my personal favorites in Foundation’s Grid capabilities is Source Ordering. When discussing hierarchy, certain content has more importance than other content to the site user. Something that is placed at the top of the page versus the bottom has more SEO weight and sets the overall tone or message of the page. The term “above the fold” can be thrown around, but that is only part of the story when you are serving your site to diverse screen sizes.

Here’s An Example

You never say “I’m going to fight you Steve”. You just smile and act natural, and then you sucker-punch him.

The reason so many Second City people have been successful is really fairly simple. At the heart of it is the idea that if you make the other actors look good, you’ll look good. It works sort of like the idea of life after death. If you live an exemplary life, trying to make someone else look good, you’ll look good too. It’s true. It really does work. It braces you up, when you’re out there with that fear of death, which is really the difference between the Second City actors and the others.
[Roger Ebert, 1990]

<div class="row">
<div class="small-12 columns">
<h3>You never say "I'm going to fight you Steve". You just smile and act natural, and then you sucker-punch him.</h3>
</div>
</div>

<div class="row">
  <div class="small-12  large-7 columns"><blockquote>The reason so many Second City people have been successful is really fairly simple. At the heart of it is the idea that if you make the other actors look good, you’ll look good. It works sort of like the idea of life after death. If you live an exemplary life, trying to make someone else look good, you’ll look good too. It’s true. It really does work. It braces you up, when you’re out there with that fear of death, which is really the difference between the Second City actors and the others.
<cite>[<a href="https://www.rogerebert.com/interviews/bill-murray-quick-change-artist" target="_blank">Roger Ebert</a>, 1990]</cite></blockquote>
</div>
  <div class="small-12 large-5 columns"><img src="https://fillmurray.com/300/350"/></div>
</div>

This layout is good. We accommodate for smaller screens like phones and tablets by collapsing down to a full 12 column grid. But think about this from a phone reader’s perspective. As they scroll down, they don’t get to see Bill’s handsome face until about 2 or 3 good swipes. Maybe that’s not the best experience for your users. On a large screen, we immediately relate the quotes to Bill Murray because we see his face. Ideally, we wouldn’t want to lose this correlation on other devices. This is where the push and pull classes come in.

Here’s The Revised Example

You never say “I’m going to fight you Steve”. You just smile and act natural, and then you sucker-punch him.

The reason so many Second City people have been successful is really fairly simple. At the heart of it is the idea that if you make the other actors look good, you’ll look good. It works sort of like the idea of life after death. If you live an exemplary life, trying to make someone else look good, you’ll look good too. It’s true. It really does work. It braces you up, when you’re out there with that fear of death, which is really the difference between the Second City actors and the others.
[Roger Ebert, 1990]

<div class="row">
<div class="small-12 columns">
<h3>You never say "I'm going to fight you Steve". You just smile and act natural, and then you sucker-punch him.</h3>
</div>
</div>

<div class="row">
  <div class="small-12 large-push-7 large-5 columns"><img src="https://fillmurray.com/300/350"/></div>
  <div class="small-12 large-pull-5 large-7 columns"><blockquote>The reason so many Second City people have been successful is really fairly simple. At the heart of it is the idea that if you make the other actors look good, you’ll look good. It works sort of like the idea of life after death. If you live an exemplary life, trying to make someone else look good, you’ll look good too. It’s true. It really does work. It braces you up, when you’re out there with that fear of death, which is really the difference between the Second City actors and the others.
<cite>[<a href="https://www.rogerebert.com/interviews/bill-murray-quick-change-artist" target="_blank">Roger Ebert</a>, 1990]</cite></blockquote>
</div>
</div>

If you’re reading this on a browser where you can resize your screen, go ahead and resize to see how the grid changes. Notice that on a small or medium sized screen the pull quote comes AFTER Bill’s picture. Now the experience of the reader is a little different, maybe a little smoother when absorbing the content on the page.

Grids give you a lot of flexibility when building the content on your page. Although these changes are small, I think that they can make a positive impact on your user’s experience if you just take the time to consider how the content will be seen on the different devices your users are viewing them on.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top