A mobile-first checklist for a corporate site

A corporate site opens on a phone for many visitors. A page that feels spacious on a desktop can fall apart in the hand, split between a heading, a button and a form. Mobile-first is not shrinking the desktop design. It is making the first decision at phone width, then spreading it to a wide screen. The checklist is walked in that order. Launch is not signed because it “looks good” on a large monitor.

At Yuz Medya we treat this list as part of design sign-off. If an item is missing, the colour argument waits. Before a corporate website goes live, it is opened once in the hand and once on a slow connection. Office wifi makes everything look fast. The real visitor is not always on that network. The technical side of speed is technical SEO. The list is the field summary of that work.

What does the first screen say in the hand?

The heading is readable without a scroll. An image does not cover the promise. The primary button is in reach of a thumb. It does not stick to the edge and hide the text. An arrow that says “more” is not the promise itself. On the first screen a person should see what you do and the next step. If they cannot, they are watching a poster, not using a page.

Menu and search

When the menu icon opens, the rows should be the size of a thumb. Twelve rows stacked on top of each other show that the architecture collapsed on mobile. If the tree is already short, the menu is short. We build that tree in information architecture. A dropdown should not hide the service name behind “other”. If there is search, the results stay visible when the keyboard opens. Search you cannot see is search you do not have.

Form and phone

Fields are full width. Labels do not disappear inside the placeholder. The keyboard switches to email on an email field and to numbers on a phone field. The submit button stays under the last field. It is not hidden under a sticky bar. The phone number should be tappable. A photo of a number is not. If you use WhatsApp, the number is correct and the message carries which service the person came from. The thank-you screen says the next step on a phone as well.

Speed is a checklist item

A heavy cover video, an oversized image and a third-party chat tool delay the first screen. The delay cannot be defended as a design choice. Images arrive cropped and sized. Video does not start with sound, and it does not eat data unasked. Type does not download three families the system does not have. These items are the field version of a Core Web Vitals report. We open crawl and indexation in technical SEO: crawl and indexation. A slow page can be indexed and still be abandoned in the hand.

Horizontal scroll is a separate fault. A table that overflows, a word that overflows or a button that escapes the screen tires the thumb. A table can become cards on a phone. Overflowing words come from measuring the heading on a desktop and not on a phone. The check is done on a real phone. Narrowing a browser gives a hint. It does not give the feeling of a thumb.

A short tour before launch

The tour covers three pages: home, the service people ask for most, and contact. On each one you look at the first screen, the menu, the form or the phone, and the way back. The language switch still lands on the right page on a phone. An empty English door does as much harm as it does on a desktop. If a cookie notice covers the button, the notice is reduced. Covering the button is not the same as enlarging the legal text.

• First screen: what you do, for whom, and the next step, without a scroll.
• Thumb: menu, button and form field are comfortable to tap.
• Phone: the number is a link, not an image.
• Speed: on a slow network the cover does not hide the first sentence.

The list is not ticked once and archived. A new banner, a new chat tool or a new font opens the list again. Once a month, the contact form is sent from a real phone. If the form does not arrive, the site is not live just because the desktop preview says it is.

Frequently asked questions

Should the mobile site be a separate address?

No. The same address adapts to the screen. A separate mobile address forces you to update content in two places, and one of them goes stale. A broken mobile copy costs more than one flexible site. The design starts from the narrow screen.

Do you need an app-style menu?

A bottom bar helps only when there are two or three real tasks: call, quote, location. Putting every page on the bar shrinks the first screen. The bar does not replace the menu. If the tree exists, the bar is only a shortcut to the most common job.

Is the desktop ignored?

No. A wide screen shows the same tree with more room. The line length stays readable. An image does not pin itself to the side and crush the text. Priority is mobile, because that is where the layout breaks. Desktop is the sentence you built on a phone, spread out. The reverse produces a poster that gets cropped on a phone.