Back To Top

8 Mobile-Friendly Writing & Design Tips

Summary

  • Format website content for mobile screens by keeping it brief and writing clear headings and CTAs.
  • Optimize web design for mobile devices, paying attention to sizes of fonts, buttons, ads, and pop-ups.
  • Keep the same content, metadata, and alt text on both mobile and desktop versions of your website, per Google’s advice.
  • Test mobile performance regularly.

The world is mobile. Your website must follow suit.

Did you know that 97% of Americans own a cellphone? Most of your audience has the world in their pocket. Your content strategy needs to account for it.

Failing to optimize your website for mobile is leaving money on the table. Mobile optimization affects:

  • User experience and conversion: Almost 60% of global website traffic comes from mobile devices. If your website is hard to use on a phone, you can expect 6 out of 10 users to bounce.
  • Rankings: Google considers mobile performance when ranking websites. (See the screenshot of Google’s How Search Works page) In fact, websites that are not accessible on mobile will not be indexed or rank at all.

Mobile-friendly website content is a consideration for ranking on Google

Mobile-friendly web design and content writing are not new topics in healthcare marketing, but they continue to grow in importance. Get a refresher on what you can do to ensure your website is mobile-friendly.

4 content writing tips for mobile devices

Text formatting matters, no matter what device you’re reading on. But phone screens are small and can be hard to operate. We owe it to mobile users to help them out a bit.

1. Write succinctly

Scrolling on a hospital website is different from scrolling through TikTok. Users will get sick of it — quickly.

Don’t fatigue their thumbs. Write short sections and paragraphs to reduce scrolling time, decrease the visual overwhelm of text on a small screen, and keep users engaged longer.

Related: Learn 10 concise writing tips for healthcare copywriters.

2. Use heading real estate wisely

Headings are like road signs. They tell users what they can expect to read about next. Headings should be descriptive enough to help users decide whether to read or skip a section.

However, headings shouldn’t be so descriptive that they’re multiple lines long. Remember: An 11-word heading that fits in one line on desktop could take up most of a mobile screen, depending on text size. Keep headings skimmable and as short as possible.

3. Write mobile-friendly calls to action (CTAs)

Extend the logic about headings to CTAs. A CTA button with 5-7 words may look fine on desktop, but wonky on a phone screen.

Follow these mobile-friendly CTA writing tips:

  • Use short button text
  • Position a CTA button at the top of the page
  • Offer “click to call” buttons
  • Offer buttons to open GPS directions in map apps

Related: Learn more about writing CTAs that convert on any device.

4. Be careful with text overlays

A text overlay is written content layered on top of an image. When done well, this design element makes good use of blank space in images. When done wrong, the text could block the image or blend in with it.

Images with text overlays must be mobile-friendly or responsive. The text should be the right size for the image, regardless of screen size.

MD Anderson gets this right:

Example of mobile-friendly text overlay on a healthcare website

4 mobile-friendly healthcare website design tips

Writing is one piece of the puzzle. Learn how to make sure your website design is also mobile-friendly.

1. Design for mobile screen sizes

Remember, almost 60% of users land on your website from their mobile devices. Every page needs text that isn’t too small and touch-friendly buttons that are large enough for big thumbs.

Pro tip: You don’t have to change the design of each webpage manually. Responsive websites automatically adjust to the screen they’re being viewed on.

 2. Offer convenient navigational menus

It’s often easier to use a traditional navigational menu on the desktop version of a website. That same menu becomes squished on mobile. So it needs to be redesigned.

MedStar Health uses a (clearly labeled) “Browse this page” button to help mobile users navigate location pages.

Example of a mobile-friendly navigation menu for hospital

3. Beware of ads and pop-ups

There’s nothing worse than landing on a website and getting your screen hijacked by a full-page pop-up.

If you use ads or pop-ups, make sure they don’t take up the whole screen. You can make exceptions for logins and legal obligations such as age verifications. But try to limit pop-ups and ensure they’re unobtrusive.

4. Avoid mobile SEO mistakes

It’s important for SEO that your website’s mobile version contains the same written and visual content as the desktop version. This includes metadata and alt text.

Google warns us about traffic loss for websites that reduce content on mobile:

Follow Google’s guidelines to make websites mobile-friendly

Is your website mobile-friendly? How to check

There are 2 easy ways to check if your website is mobile-friendly: Use PageSpeed Insights or run some manual tests.

PageSpeed Insights provides performance reports for the mobile and desktop versions of your website. Enter your URL, find out if your site passes the Core Web Vitals assessment, and diagnose any mobile site performance issues.

Use PageSpeed Insights to make your website more mobile-friendly

A manual mobile performance check is more tedious, but it provides clear and actionable info. Open your website on a mobile device and poke around as a user. Check things like:

  • Font readability
  • Button usability
  • Image and video quality
  • Ad placements and pop-up size

Make your website the best it can be

Website content strategy is complicated. We’re here to help. Explore our website strategy services for health systems.

Get website content strategy support

Found this helpful?

Get more healthcare content insights delivered straight to your inbox, so you never miss a beat.

Subscribe to our newsletter to keep informed.

Name(Required)
This field is for validation purposes and should be left unchanged.