Mobile-first means we design content for the smallest screen and work our way up.
All our writing—no matter the screen size—should be simple, concise, and focused. Small screens force us to write this way, so a mobile-first approach can help us create better experiences for all devices.
As you move from smaller to bigger screens, resist the urge to add more content just because you can. Embrace the white space. Customers appreciate simplicity, no matter what device they’re using.
How mobile is different
- On a smaller screen, text looks longer and more overwhelming.
- Mobile users are likely to be multitasking (driving, ordering coffee) or in distracting places (elevators, sidewalks).
- Small touchscreens are error-prone. Each additional tap increases the chance of making a mistake.
- Typing on a touchscreen takes longer and feels harder.
- In portrait mode, there’s very little horizontal space. Elements will usually need to stack vertically instead of showing side by side.
- You can see less content at once. Scrolling to find what you need can feel like work.
- There’s no hover. You have to tap to see more info.
Mobile content checklist
- Follow the QuickBooks style and voice and tone guidelines.
- Keep it short. Be brutal!
- Prioritize info customers need to move forward.
- Give info in bite-sized chunks.
- Use progressive disclosure (ex.: links to more info).
- No word walls. Use bullets or other visual breaks.
- Pair words with icons for scannability.
- Put important info and CTAs above the fold.
- In native apps, say tap. On responsive web, say select.
- Make CTAs easy to tap: big and not too close together.
- Design for both Android and iOS. Slight differences are OK.
- Make sure your text is readable on all screen sizes.
- Leave room for translation. Expect your text to grow by 40%.
Voice and tone on mobile
We’re the proactive champion, no matter how small the screen.
Keep it simple
Above all, be brief, clear, and readable. Help customers move forward quickly and confidently.
Focus on the payoff
If there’s work to do, tell them the goal and how to get there. No need to be fancy or clever. Short, energetic headlines work best.
It's about them, not us
We don’t waste time talking ourselves up. Feel free to say what we do behind the scenes, but keep it short and helpful.
Speak their language
Talking face to face, you can explain things several ways or use long metaphors. On mobile, you get a few short words. Test with customers until you nail it. Learn more about content testing
Delight when it's right
Make them smile when you can, but don’t use up extra space. Quick and easy is always delightful.
Native vs. responsive web
Native apps are custom-built for a particular platform (like Android or iOS). Users download them from the Play Store or App Store and access them through icons on their device home screens.
Responsive websites automatically change based on device size. Text and images can scale up and down and elements can move to fit the size and layout of the screen. Users can access responsive web experiences on any device, as long as it has a web browser.
Native and responsive web have a lot in common (see How mobile is different), but they have some differences too.
Unique to native
- Device capabilities: push notifications, location and motion tracking, camera, biometric authorization (ex.: Face ID)
- We can create different experiences for Android and iOS with no extra effort because the codebases are different.
- There’s no need to be platform agnostic because we know what device they’re using.
- Subscriptions and billing are through Apple and Google, so we have to follow their rules.
- We need to write release notes for each release.
- Writing app store copy? Check out our guidelines.
Unique to responsive
- Content is the same across desktop and mobile, iOS and Android, unless we intentionally fork the experience. It needs to be platform and device agnostic.