Make it sharp on mobile first

Most people will see a site on a small screen, in a hurry, with one thumb. So that is where I check first, and where I check last.

The checklist

• No sideways scroll. Compare the page width with the screen width at 360 and 390 pixels. One stray element is enough to make the whole page wobble.
• Text that breaks well. Big headings need a look at every width; a single word on its own line can ruin a hero.
• Real tap targets. Anything you can press should be at least 44 pixels tall.
• No blue flash. Android browsers paint a highlight on tap. One line of CSS removes it: -webkit-tap-highlight-color: transparent.
• Crisp images. Mobile screens pack two or three device pixels into every CSS pixel. Zoom into a screenshot and look for blur.
• Fonts hosted with the site. Fewer requests to other servers means text appears sooner.

None of this is glamorous. It is the difference between a site that looks good in a screenshot and one that feels good in your hand.