Design the phone screen first

Transcript

The narrow screen is the real site. Same words. One column.

The IS Auto phone view keeps the red button in the header and stacks the headline.

A main target should be easy to hit. WCAG asks for at least 24 by 24 CSS pixels. Give the real button more than that.

Do not hide the offer on the phone to save space.

Check a real phone, not only a narrowed laptop window.

The narrow screen is the real site. Same words. One column.

The IS Auto phone view keeps the red button in the header and stacks the headline.

A main target should be easy to hit. WCAG asks for at least 24 by 24 CSS pixels. Give the real button more than that.

Do not hide the offer on the phone to save space.

Check a real phone, not only a narrowed laptop window.

Try this. Open your sketch at a phone width. If the action is missing, move it up.

• The action is in the first view.
• Nothing slides sideways.
• The button is easy to tap.

Quick check

Pick one answer. You get the explanation right away.

A phone layout should:

Stack the same content and keep the actionYes. Rearrange. Do not delete the offer.Hide half the offerNo. Look at the screen again and pick the choice that matches what you see.Use 11 pixel typeNo. Look at the screen again and pick the choice that matches what you see.

The minimum target size in WCAG 2.2 is:

24 by 24 CSS pixelsYes. Give the main button more room than the minimum.8 pixelsNo. Look at the screen again and pick the choice that matches what you see.There is no numberNo. Look at the screen again and pick the choice that matches what you see.

When the wide and phone screens disagree:

Trust the phone for the first viewYes. Many people see the phone first.Trust only the laptopNo. Look at the screen again and pick the choice that matches what you see.Hide the headlineNo. Look at the screen again and pick the choice that matches what you see.

Mark lesson complete