What Changes on a Phone?

The problem

If you do not say what happens on a phone, the agent decides for you. Usually it stacks everything in one long column and makes it smaller. Sometimes that works. Often you get:

• a huge image that pushes the main button far down;
• a table you have to scroll sideways;
• a menu that does not fit;
• text that is too small to read.

Four choices for every part

For each part of your page, pick one of these four:

1. Keep: the same content, the layout adjusts (for example, three cards become one column).
2. Shrink: the same content, but smaller or shorter (a shorter heading, a smaller image).
3. Replace: a different version that works better on a small screen (a table becomes a list of cards; a top menu becomes a menu button).
4. Hide: not shown on phones. Use this rarely, and never for anything important.

The plan

Write a short list of every part of your page. For each one, write what happens on each screen size.

Use three sizes to start:

• Phone: about 375 pixels wide.
• Tablet: about 768 pixels wide.
• Computer: about 1440 pixels wide.

Example for a made-up yoga studio called Northleaf:

HEADER
- Computer: logo left, 5 menu links, "Book a class" button right
- Tablet: logo left, menu button, "Book a class" button
- Phone: logo left, menu button only. "Book a class" moves to a bar fixed
  at the bottom of the screen

HERO
- Computer: heading and text on the left, photo on the right
- Tablet: heading and text on top, photo under it
- Phone: SHRINK - shorter heading (max 6 words), photo 200 pixels high

CLASS SCHEDULE
- Computer: table with 7 columns (one per day)
- Tablet: table with horizontal swipe, first column fixed
- Phone: REPLACE - a list of days; tap a day to see its classes

TEACHERS
- Computer: 4 cards in a row
- Tablet: 2 cards in a row
- Phone: KEEP - 1 card per row, or a swipeable row of cards

INSTAGRAM PHOTOS
- Computer: grid of 8 photos
- Tablet: grid of 4 photos
- Phone: HIDE - replaced by a single "See us on Instagram" link

FOOTER
- All sizes: KEEP - address, phone and opening hours always visible

Rules that always apply

Add these to every request, whatever your design:

• Nothing is wider than the screen. No sideways scrolling of the whole page.
• Text is at least 16 pixels on phones.
• Buttons and links are at least 44 by 44 pixels, with space between them.
• The main action can be reached without hunting for it.
• Nothing important is only available on hover. Phones have no mouse.

Sending the plan to your agent

Here is the plan for how each section of the page changes on phone, tablet and computer. Follow it exactly. If a section is not in the plan, ask me before deciding. When you finish, show me screenshots at 375, 768 and 1440 pixels wide.

Then paste your plan.

Test with real content

Pages often look fine with perfect sample text and break with real content. Before you call it done, try:

• a very long name or title (twice as long as normal);
• a list with zero items, one item and many items;
• a very large number, like a price of 1,250,000;
• your phone held sideways.

How to see the phone version on a computer

In Chrome, Edge or Firefox:

1. Right-click the page and choose "Inspect".
2. Click the small phone-and-tablet icon at the top of the panel.
3. Choose a phone size, or type a width like 375.

This is a good first check. It is not a full replacement for a real phone, so test on a real one before you publish.

Check before you finish

• Every section has a plan for phone, tablet and computer.
• I chose keep, shrink, replace or hide for each one.
• I tested with long text and empty lists.
• I checked on a real phone.