Network Matters More Than You Think

Mobile users switch between WiFi and cellular all the time. They might be in an elevator, on a train, or in a rural area. This means their connection comes and goes.

In many countries, users pay for each MB of data they use, which is another thing to keep in mind.

PS. This is also why SSR is good for mobile. All they need initially are HTML and CSS to start seeing things. As opposed to an SPA where once you get the JavaScript on the client, you start by fetching the initial data.

Phones Have Limits

Phones run on batteries. Each animation, background process, and network request drains that battery. Users notice when an app makes their phone hot or kills their battery.

Fun fact: Modern browsers support checking battery via navigator.getBattery().

Phones also have less memory than computers. They can't keep tons of posts in memory like a desktop web app might.

How People Use Phones is Different

People use phones differently than computers. They often use apps one-handed, while walking, or on a bumpy bus ride. Sessions are shorter but more frequent. Think of yourself opening Twitter throughout the day (not me ofc 🤣).

Think about using your phone on the train, you might check it for 2 minutes, put it away when your stop comes, then check again later.

Thumb Zones Matter

Most people hold their phones at the bottom and use their thumbs. This means the bottom of the screen is easy to reach, but the top isn't.

Important buttons should be where thumbs can easily reach them.

Interruptions Are Normal

Phone calls, text messages, and notifications interrupt users all the time. Your app needs to handle these gracefully.

When users come back to your app, they expect it to be right where they left off. When you close and open Twitter again, you're still on the same place of the feed.

Screen Space is Precious

Phone screens are small. Every pixel matters. You can't show as much content as on a desktop.

This means you need to prioritize. What's the most important thing users need to see? Show that first.

The goal is to show what's important and not confuse the user.

Touch is Different Than Mouse

On desktop, you can hover over things. On mobile, you can't. Buttons need to be big enough for fingers to tap accurately.

Think about trying to tap a tiny link, it's frustrating. That's why mobile interfaces need bigger touch targets.

Context Changes

People use phones everywhere, bright sunlight, dark rooms, crowded trains. Your app needs to work in all these situations.

Colors need enough contrast to be readable in sunlight. Text needs to be large enough to read while walking.

Two Main Platforms

iOS and Android users expect different things. Android has a back button, iOS doesn't. Sharing works differently on each platform.

What to consider when building for mobile

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Network Matters More Than You Think

Phones Have Limits

How People Use Phones is Different

Thumb Zones Matter

Interruptions Are Normal

Screen Space is Precious

Touch is Different Than Mouse

Context Changes

Two Main Platforms

Command Palette

Comments

More from this blog

Network Matters More Than You Think

Phones Have Limits

How People Use Phones is Different

Thumb Zones Matter

Interruptions Are Normal

Screen Space is Precious

Touch is Different Than Mouse

Context Changes

Two Main Platforms