We talk a lot about scrolling, clicking, and the fold and I think we’re making great headway in the battle against an old, antiquated term. There is one important thing to keep in mind though — just because users scroll doesn’t mean we should make them do it more than they need to. This is more important than ever when we talk about our responsive sites at small screen sizes.
Stacking content, and when not to do it
When you compare the desktop version of a responsive site to its small screen counterpart one of the major differences you’ll notice is that content is now stacked rather than displayed side by side. We do this because stacking content allows us to make it a comfortable and legible size on a mobile device. This makes the page longer but that’s ok because we know users scroll and scrolling is easy on one of them fancy smartphones.
We really need to be conscious of what we’re stacking though. The main goal, regardless of screen size, is to get the visitors to their content as quickly as possible. That means the first screen of any mobile website (what the visitor sees before they scroll anywhere) should be mostly the content they’re looking for. Below you’ll see two websites. On the left is the iMarc website and on the right is a low fidelity version of a real website I stumbled across the other day. Unfortunately, it’s a layout I see far too often.
Both of these examples are of a blog detail page. On the iMarc site you can easily see that you’re in the blog section of the site, you can see the title and meta data of the blog article, and you can read almost the entire first paragraph of the blog. Taking a look at the example on the right all you get is a logo and two levels of navigation. Visitors aren’t here to admire your logo and navigation, they’re here for your content. If you’re not giving them even a whiff of your content on the first screen then you’re doing something wrong.
Give the people what they want
When it’s time to determine what you’re responsive site is going to look like on a small screen try to keep a few things in mind.
- I’m sure your logo is wonderful but your visitors aren’t here to stare at it. Make it as small as you can get away with.
- Collapse your navigation into a UI element that will display it when the user needs it.
- Make sure your visitors can see some of your content on the first screen. Let them know there’s more to you than logos and links.
Remember these simple guidelines and you'll create an enjoyable mobile experience for your website.
