Writing Content for Mobile

Your website might look good on a smartphone, but does the content make sense? By prioritizing mobile users, you can improve everyone’s experience.

I recently attended HighEdWeb 2017, a conference that draws developers, managers, content creators, social media experts, and more from colleges and universities around the world. It’s a great opportunity to learn and be inspired to think beyond day-to-day coding.

One session I attended that can be immediately applied to the work we do here at NC State was “Mobile First: Writing and Designing Page Content in the Age of Mobile,” presented by Catherine Harwood, the manager of Web & Social Media at Eastern Florida State College.

About a year ago mobile web browsing surpassed desktop web browsing. Many of our students’ first internet-connected devices were smartphones. So it’s incredibly important for our team to make sure the WordPress themes we build look good and function well across any devices our users may choose to use.

We design to be responsive and “mobile first,” making sure we have a good user experience on limited screen real estate, before we move on to the desktop experience.

The "Hillsborough" WordPress theme displayed on a smartphone, tablet, laptop, and desktop
<a href="https://hillsborough.wordpress.ncsu.edu/">“Hillsborough,”</a> one of OIT Design’s primary themes, on multiple devices.

But designing a responsive theme doesn’t mean your website is going to be a good experience for your mobile users. Catherine Harwood challenged us—and you, NC State’s content creators!—to have this “mobile first” as you create and edit new pages and blog posts.

“Low-Hanging Fruit”

There are some easy changes to how we write for the web that can enhance the mobile experience. Some of these feel obvious once you read them:

Must-See Content: On a desktop, putting a “must-see,” high-priority page element at the top of your right-hand sidebar widget area might seem like a good idea. After all, it’s right at the top by the title! But in many of our themes, that high-priority element is going to get pushed to the end of your main page content on a mobile device.

If it’s something everyone needs to see, make sure it’s in the page content itself. (This is good for accessibility too, since sidebar content is typically coded as a secondary region in the HTML markup, and assistive technology users may miss it.

Wayfinding: In your post or page, don’t refer to content in the sidebar by saying things like “in the right column.” That’s not going to make sense on a mobile phone where the “sidebar” has dropped below the main page content.

Tables: Don’t use tables for page layout. Tables for layout will not work well to a mobile device. If you need help with page layout and you’re tempted to use a table, contact OIT Design and we can help you find a non-table option.

If you want to include a table to display data, try to avoid large, many-column tables. Simple tables should generally look okay on mobile devices in our themes, but large and complex tables should be broken up into smaller pieces. (Again, you can always contact OIT Design and we can help you find a non-table option.)

Phone Numbers: Even when your primary audience is on-campus staff, we can’t assume our users are going to be sitting at a desk or using their office phone to make calls. Rather than using campus shorthand for phone numbers (eg. 5-XXXX), write out the full phone number with area code (eg. 919-515-XXXX).

Using tel: hyperlinks can make your phone numbers even more convenient to mobile users.

Links to an image of policies.ncsu.edu with instructions to "use the menus on the right"
This one’s all on me. When I built <a href="https://policies.ncsu.edu">policies.ncsu.edu</a>, I wrote wayfinding instructions assuming users would be visiting on a desktop.

Image Placement

As you write, it’s also helpful to pull out a smartphone (or resize your browser to smartphone-size) and see what your content actually looks like. When you do, you may find that images that enhance the desktop experience can hinder the mobile experience.

Consider this mock-up of an information page about OIT’s Hosted WordPress service. There is an “Important information for users” message about upcoming maintenance at the top of the page content, immediately after the page title.

Desktop view with both important information and image illustration visible.
A mock-up of a page with “important information” at the top of the content, with an image used as an illustration floating to the right.

When viewed on a desktop, the important information is featured prominently, and the WordPress logo is a good visual cue helping users recognize that they’re on a page with information about our WordPress services.

But when viewed on a mobile device, that WordPress logo moves to the center and pushes important content down the page, requiring more scrolling. The logo that was a useful visual cue on a desktop becomes a communication barrier on mobile.

Mobile view of the mock-up page, with only the page title and logo immediately visible.
On mobile, the image pushes important information out of sight.

This is a contrived example, but it’s hopefully a good illustration that a positive feature on a desktop can be a bug on mobile. Issues like this can be prevented by double-checking what your page will look like on a mobile device. The WordPress logo would work just as well as a visual cue if it was one paragraph further down the page, after the important information.

Bite, Snack, Meal

Those are relatively easy things that we can be thinking about when we write for the web. But it’s also important to start thinking about how much we write and how we structure our content.

A paragraph of text that look reasonable on a desktop can look like a hard-to-read walls of text. For example, here’s what the first paragraph of an earlier draft of this post looked like on mobile:

One paragraph of text takes up the entire screen of a mobile device

On desktop, it’s a little wordy but still pretty readable. On mobile, it takes up the whole screen and feels like I’ll never get to the point.

This is something I struggle with personally, and most academic institutions struggle with generally. Academia values precision in language, but sometimes that just turns into needless wordiness. Maybe we can get away with it on a desktop. Not so much on mobile.

Catherine Harwood recommends the “Bite, Snack, and Meal” approach articulated by Leslie O’Flahavan. When writing your content, structure it as:

  1. Bite: Your page or post title, which concisely describes the page or post contents.
  2. Snack: A one- to two-sentence summary of the main ideas of your content. This should be just enough for readers to decide whether to continue reading.
  3. Meal: The rest of your content, presented in a “scroll-worthy” way.

Observant readers may notice that I followed this structure in the published version of this post!

I also used the “Lead Paragraph” post element to emphasize the “snack” portion and make it easy to read and scan at a glance at the beginning of the post. If your site uses the NC State Shortcodes plugin, you can use it too! (Contact OIT Design if you want to learn more.)

Post Elements modal with the Lead Paragraph element highlighted

(Note that I did not use a heading to emphasize the “snack.” Although it’s visually similar to what a h4 heading might look like, it’s important for accessibility purposes that I did not use a heading for something that isn’t the heading of a subsection.)

Scroll-Worthy Content

The “bite” and “snack” help draw a user in, but the “meal” still needs to be worth your reader’s time. Your content should be useful and relevant. But it should also be “scroll-worthy.” That means easy to read and easy to scan.

Making your content easy to read often means making it simpler. The federal government’s Plain Language website helps give you alternatives to academic jargon. The Hemingway App or other readability tools can identify places where your writing can be simplified and clarified.

This is hard! I’ve re-written a lot of this post (and there’s still more I could re-write) to keep it simple and clear, because it’s easy to get carried away. But remember: Your website shouldn’t be an academic paper. You’re trying to communicate clearly to all of your users, regardless of who they are.

Making your content easy to scan means:

  • Using headings to break content into sections and subsections
  • Using bulleted and numbered lists to break up paragraphs
  • Using bold and italicized text, images, and white space to give users visual cues and landmarks

This is good usability on any device. Your users will never be angry with you for well-organized content that’s “too usable.” And this is good accessibility, too. Everything you do to structure your content with headings and lists (used correctly!) helps to improve assistive technology users’ experience.

Reviewing Your Content with Mobile in Mind

As I sat through Catherine Harwood’s session, I spent a lot of time thinking about our own websites here in OIT, where we often haven’t done a good job thinking about how mobile users interact with the content. In some cases, pages might just need a little tweaking. In other cases, a comprehensive rewrite is probably in order.

If you’re feeling the same way about your website, don’t despair! OIT Design can help!

When we do content reviews for campus clients, we’ll be paying close attention to the mobile use case. If you’d like that to be a part of your maintenance contract, now is a great time to contact us and request a content review!

If you would rather clean up your content for mobile on your own, that’s okay too! Start with your most visited pages and your most important pages—especially anything student-focused. Work through the “Bite, Snack, and Meal” steps for each page, and watch out for those low-hanging fruit items.

And as you create new content, don’t forget your mobile users! Be sure to check it on a smartphone and think about whether and how your experience is different from the desktop.