Ask Google how to make a website work on mobile and you can't help but weep at the results. "Use frameworks" and "avoid pop-ups" is fine advice, but it's hardly useful to a technical user in the trenches.
In this post I'll describe the specific things I do to make websites mobile-friendly, including some of the gotchas I've hit in the past.
The essential setup
Stick this in your page
And add this to your CSS:
1 2 3 4
The viewport meta tag is vital:
When it's missing, the browser will render in desktop mode, and all of your responsive CSS rules will be ignored.
When it's present, the browser will properly resize your website to the device, and all of your responsive CSS rules can take effect.
text-size-adjust controls the browser's text rendering behavior:
By default, the browser might apply a text resizing algorithm to make the page readable on mobile. But if you're using your own responsive CSS, this algorithm is unpredictable and can create weird bugs.
By setting this to
100%, the browser renders text predictably, which means that your text will always look as you expect it to.
Older versions of Safari support only
-webkit-text-size-adjust, so we should
This Stack Overflow answer has some useful discussion on
text-size-adjust and how to use it safely.
The basic structure of this is simple:
1 2 3 4 5 6 7
For the specific screen sizes, I just refer to a framework like Tailwind.
For more thorough testing, I love Browserstack's Responsive Design Testing tool, which shows you how your site renders on about a dozen different devices. I've only ever used the free tier.
If you really need a framework
In yet another win for composition over inheritance, the last few years have seen the rise of compositional CSS frameworks like Tachyons and Tailwind. Adam Wathan (one of the Tailwind devs) explains the philosophy of this approach better than I could.
I don't know where the industry will move a few years from now, but for now, I love both of these frameworks and highly recommend them.