Marketers and Content Writers: You Too Can Think Mobile-First
We’ve recently blogged about mobile-first ideology, from the perspective of project leaders and designers.
But what if you’re a marketer or writer charged with creating dozens or hundreds of pages of content for the site? What can you do to work with your colleagues to create the most effective user experience possible?
Thinking mobile-first in your content ideation will go a long way. It will help you to avoid a lot of potential missteps later in the process and guide you to an effective experience. Here are two tips to help you in that process.
Think Mobile-First with These Tips in Mind
1. Keep your text (and graphics) short and sweet.
This advice isn’t unique to mobile — copywriting guides invariably say concision is key to getting your point across, especially in website copy. But on mobile, there’s an additional reason to keep it brief.
If the user is visiting your site for the first time, he or she likely wants to gain a high-level understanding of what your organization is and what your site offers by quickly scanning through a few different areas, before diving into meatier content. On the desktop this context-gathering can be achieved with minimal scrolling and clicking: the user can scan around the screen and learn a great deal just by looking at above-the-fold content, sidebar content, and navigation options in one fell swoop. He or she can also zoom through the home page, all the way down to the footer, almost instantly with a click and drag in the scroll bar.
On mobile, on the other hand, the user is forced to scroll or click to see much of anything beyond a headline and hero image. Navigation options are typically hidden from view, and a session of furious thumb swiping is required to cover any serious territory scrolling.
Given these constraints, you won’t want to hinder the user’s exploratory journey. But long blocks of text or oversized images, which may be sized correctly for a desktop page, can elongate into a block several viewports long on mobile. You can imagine the first-time visitor’s eyes glazing over as she is forced to scroll through a seemingly endless block of text that she’s not ready to invest in reading at that moment. Moreover, she won’t gain much contextual information from this activity.
Designers and marketers should aim to create discreet pieces of content (including text and/or images) that fit into a single viewport. This makes for fruitful scanning and a faster understanding of your site’s offerings and content for first-time visitors.
2. Consult with developers and designers on content stacking strategy
On a related note, you’ll need to consider the relationship your text and graphics will have with each other in various viewport sizes. In other words, you’ll need an informed content-stacking strategy — even if as a writer or marketer you never touch code.
In RWD, “content stacking” is the relationship that discreet portions of a web page have with each other as they get mushed into different shapes and sizes for various devices. Deciding on a foundational content stacking strategy will be one of the first steps your development team will cover in building a mobile experience. That includes deciding how many columns will be employed in the desktop version of the app, how many will be present for tablets in landscape and portrait view, and how the columns will finally come together for the single-column smartphone view.
It may sound like a simple process (how many different ways can you really stack a handful of columns?) but as RWD has grown in popularity it’s become more sophisticated, and there are now a number of frameworks that make intricate puzzle application pages with fluid grid layouts.
As a content writer or marketer, you should be keyed into these discussions, because it will define the parameters around what you can do with your page content. In fact, you can be contributing ideas of what you want to accomplish with your content in order to ensure that your needs are met with the site.
Say you want to express your brand’s value proposition through a horizontal series of 4 graphics with accompanying text, meant to be read left to right. On mobile, the graphics will have to be broken up in order to fit in a single-column orientation — will your story still make sense when the graphics are separated by text? If it passes that test, think about the less-obvious situations. Perhaps the layout makes sense as a purely horizontal, 4-column view, and as a vertical view, but when holding a tablet in landscape the 2-column view throws off the natural flow of reading. Needless to say, it’s best to consider and troubleshoot these issues in the wireframe stage, not when you’re about to launch.
More reading on responsive design for content writers and marketers: