Once upon a time, we only had desktop sites. Then, we had to scramble to build mobile versions of our sites. We had mobile views, templates, and subdomains – and maybe even AMP pages – and used meta tags and canonical URLs to describe the relationships between them.
But that was always a bit messy, and overly simplistic. A mobile experience isn’t always just a ‘lite’ version – sometimes, mobile experiences can (and often should) be richer than their desktop equivalents. But what even is a ‘mobile’ experience, nowadays?
We have ‘mobile’ screens which are larger than some desktops, while elsewhere we see a return to deliberately simplistic mobile interfaces. The range of device types here is vast. You don’t know where your content will be consumed. Desktop. Phone. TV. VR headsets. Toasters?
So, how should we think about this? Well, Google is ‘mobile-first’, so that gives us some constraints. ‘Mobile’ is usually going to mean ‘small screen’ & limited real estate. So, what can you fit on a small screen? What do you show first? What might you re-order vs desktop?
You need to start with ‘device-agnostic’ optimization, then layer device-specific optimization on top of that. But you also need to maintain a reasonable degree of parity between experiences.
So if you’re moving things around, or hiding things, you probably want to be doing that via CSS based on media queries, instead of changing the HTML or underlying structure.
