SNO sites come completely mobile responsive out of the box, always have and always will, so you’re basically all set.
But depending on the size of your mobile audience, which you should assume is bigger than you imagine but that you can know for sure by studying your analytics, you may want to focus more attention on how your homepage looks on your phone.
That’s where the Widget Control Panel’s “Mobile Homepage” widget area comes in.
For example, maybe you’re one of the many sites featuring a SNO Story Grid widget of your best stories at the top of your desktop homepage. That’s really great, but you may not like the way it looks when you pull it up on your phone.
Just a hunch, but go check yours out.
That’s how it is for the order of everything else on your desktop view, too. You’ve built your homepage one way for a reason; commonly, for your readers to enjoy some version of a left-to-right reading experience. But on a phone, you don’t get three columns across the screen, nor widget areas with distinctly different widths (i.e. Full Width vs. Wide vs. Left, Center or Right). You get one column for your reader to thumb through, top to bottom.
In its responsiveness, SNO sites will stack your widgets vertically in the order in which the areas appear on the Widget Control Panel. So, whatever’s in Home Top Full Width gets put at the top, above anything in Home Top Wide. From there, Home Top Left, then Center, Right, and so on.
With that in mind, it’s important to think about what you’re hoping to prioritize. After all, if you’ve built a homepage where the most important pieces of content are presented horizontally, like Home Top Full Width, then Left, Center and Right, you’ll end up seeing everything you stacked into Home Top Left before anything in Home Top Center. Maybe there’s five lesser things under News in Home Top Left — those five will display first on a phone before your reader can ever get to what you wanted them to see next — the thing at the top of Home Top Center.
Is this making sense?
What’s also important to know: the mobile homepage is an all-or-nothing feature.
What we mean: the SNO Story Carousel looks much better than a SNO Story Grid on mobile, so maybe you’ll want to switch by adding a SNO Story Carousel widget to your Mobile Homepage widget area. But you cannot stop there. The first thing you add and keep in your Mobile Homepage area overrides everything else. So, if you only add that Carousel, that’s the only thing you’ll see the next time you view your site on a phone.
This is not to say that ignoring the Mobile Homepage area altogether makes your site unresponsive in some backwards universe. As we’ve said, it all works automatically. You don’t have to use the widget area at all.
- Notice on Rubicon Online that their desktop carousel with a thumbnail navigation row underneath it is instead a carousel with text below it on mobile. Also, notice how they smartly show the Widget Title on that carousel, “Top Stories,” on mobile, to more concretely label it for their readers.
- Notice on The Muse how they’ve reworked what takes priority on mobile vs. desktop. On desktop, a lot of real estate is devoted to Upcoming Events, Podcasts, their print issue, a poll, and a countdown. On mobile, they stick with Upcoming Events (high-value info) but then get straight into their content categories and that’s it.
- Notice on The Kirkwood Call how they’re offering a totally unique reader experience on mobile. Their desktop homepage is so much more dense. Mobile includes Recent Posts, a Twitter feed, Trending Stories, and then the road ends. Perhaps their thinking here is that readers use their phone for quick updates; they’ll go to the desktop if they really want to engage in depth. They’re not wrong.
- Notice on HiLite that their carousel on mobile gets labeled “Top Story” and includes text below the photos (both like Rubicon). It’s nice to be able to see the images, rather than displaying headlines on top of them. Then, they give their readers a ton from Recent Posts (like Kirkwood) before getting into their content categories with modern uniformity in the formatting of those (like Rubicon and Muse as well).
All of these mobile experiences were designed with the Mobile Homepage widget area. You can do it, too. You just have to commit.
Let us know how we can help.