Designing for a Phone First, Really

The desktop design, stacked

Most small business sites are still designed on a large monitor, approved in a meeting, and then made to fit a phone.

Fitting usually means stacking. The slider stays on top, the three introduction columns become three screens of scrolling, the sidebar drops below everything, and the footer with the phone number and hours ends up at the very bottom.

Nothing is broken. Every word of the desktop design is still there.

It is simply in the order the desktop layout happened to give it, which is rarely the order somebody on a phone needs.

Two meanings of mobile-first

To a developer, mobile-first describes how the stylesheet is written: the phone layout comes first, and rules are added as the screen gets wider.

That is a sound technique, and it says nothing about what goes on the page or in what order.

The more useful meaning is a design decision. Before anything is drawn for a large screen, somebody decides what the smallest screen must show, and in what sequence.

A site can have a mobile-first stylesheet and a desktop-first design. Plenty do.

One column is a ranking

A phone screen holds one column, so everything on the page has to come in a sequence. For most small businesses, the sequence looks something like this.

• What you do, in words a stranger would search for.
• Where you do it, or the area you serve.
• How to reach you, with a number that dials when tapped.
• Why to trust you: reviews, years, a photograph of real work.
• What it costs, or at least how pricing works.
• Everything else, lower down or on other pages.

The last is where much of a typical desktop home page belongs on a phone: the welcome paragraph, the mission statement, the slider. Not deleted. Placed after the things people came for.

The first screen

What a phone shows before any scrolling is small: roughly a heading, a sentence or two and a button, once the header has taken its share.

If a full-screen photograph fills that space, the visitor's first view of your business is a picture and a logo, with nothing to read or press.

The first screen should cover the first two items on the list and offer the third: what you do, where, and a button that calls you.

The photograph can come next, at a sensible size. On a phone it supports the opening rather than being it.

Designing for thumbs

A phone is held in one hand, often outdoors, often on the way somewhere. The design has to work in those conditions, not at a desk.

Anything tappable needs to be large and well spaced; Google's testing tools flag targets smaller than about 48 pixels. Text of at least 16 pixels stays readable, and in form fields it stops iPhones zooming in when somebody starts typing.

Phone numbers should dial when tapped, addresses should open the map, and form fields should bring up the right keyboard: numbers for a phone field, the @ key for an email address.

Then add for larger screens

Once the phone version works, wider screens get additions: two or three columns, larger photographs, a menu shown in full, side-by-side comparisons where they help.

What they should not get is a different set of priorities. The first thing on a laptop should still be what you do and where, with the phone number easy to find.

The extra space is for comfort and detail. The decision about what matters was already made.

A worked example

A neighbourhood Thai restaurant had a site designed around a large screen: a slider of dishes across the top, a welcome paragraph about the family, three columns for dine-in, takeout and catering, and the menu as a PDF.

On a phone, the slider took the first screen and the welcome paragraph the second. The PDF menu needed pinching to read. Hours and the phone number sat in the footer as plain text.

Analytics showed most visits came from phones, many of them late in the afternoon. Those visitors were deciding about dinner: whether it was open, what was on the menu, how to order takeout.

The redesign started from a sketch of a phone screen: name and cuisine, today's hours, a Call to order button, then the menu as a web page with prices, then the address with a map link.

The photographs and the family's story came after the menu. On a laptop, the same order gained a large photograph beside the introduction and a menu in two columns.

Same content, different order

Mobile-first does not mean giving phones less. People on phones want the full menu, the prices, the parking details and the cancellation policy as much as anyone.

Secondary material can sit lower down, or fold behind a heading that opens when tapped. It should still be on the page.

There is a search reason too. Google increasingly reads the phone version of a page as the main one, so anything left off the phone may as well be missing everywhere.

Reviewing designs on a phone

Design approvals usually happen on a large screen, which means the version most customers will see is the one nobody signed off.

Ask for mockups you can open on your own phone, and look at them the way a customer would: one-handed, in daylight, on mobile data rather than the office connection.

Check the first screen of every page type, not only the home page. Service pages, the contact page and the booking page are where decisions get made.

The counter-case

Some businesses really are used mostly at a desk.

A supplier taking orders from other businesses, a firm whose clients read long documents, or a tool used during office hours may see most visits from laptops. Analytics will say so, under Audience, Mobile, Overview.

For them the desktop layout deserves as much design attention as the phone, and complex tasks such as long forms may be better suited to a larger screen.

The phone's ranking still decides the order. Decide what matters on the smallest screen, then add to it.

Where to start

1. Check your device split in Analytics.
2. List each page's contents as one column.
3. Rank them by what visitors need first.
4. Put the call button on the first screen.
5. Review every mockup on a real phone.
6. Add columns and space for wider screens.
7. Keep the same content on every screen.

Step three is the design itself. Everything after it is execution, and a site whose order was chosen on purpose for the phone usually reads better on a laptop too.

The pages that still break on phones after a redesign are covered in pages that make visitors pinch and zoom.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.