A mobile first strategy becomes essential when a website’s mobile audience grows larger than its desktop audience.
It doesn’t mean a publisher should do anything to hurt the desktop audience performance. It does mean a publisher should take a hard look at site analytics to see how mobile visitors can have a better experience.
At that point, a publisher has one of three choices with a mobile strategy:
- Use CSS media queries to identify mobile visitors and present the most effective design possible.
- Use a redirect to send mobile visitors to a separate mobile site.
- Develop Google AMP pages as part of a separate mobile site for visitors who arrive via the Google search engine.
These three options have different benefits and downsides.
The Media Query Strategy
Media queries inside of a CSS stylesheet identify the width of the visiting browser and present different style classes than what a desktop visitor would experience. For example:
@media only screen and (max-width: 400px)
Will show a specific set of CSS classes to browsers with a maximum width or max-width of 400 pixels. It may block entire sections of a page from appearing. It may size images much smaller. It may present different colors or fonts.
The Redirect Strategy
A strategy that redirects mobile visitors to a mobile version of the site, i.e., a URL such as m.mysite.com, solves the problem of downloading unusable desktop content, styles and scripts because they are not part of the stand-alone mobile site. But it requires much more work to implement because it requires a separate set of design templates.
This strategy makes sense for a site that has plenty of resources in the form of people who have the time to work on it. It may not make sense for smaller sites that can’t afford the cost of building and maintaining a separate mobile site.
That being said, more advanced site developers can build templates that largely have a dual purpose. A single template has some aspects that both share and others they don’t share. They are more complicated and require more work, but they focus on efficiency.
The Google AMP Strategy
Google grabs copies of the AMP pages and stores them on Google servers. When anyone doing a search on Google comes across AMP link and clicks on it, they are actually viewing the page on the Google servers and not the publisher’s server.
Altogether, the AMP product is a much faster way to view mobile pages. But it also has several downsides including the amount of time to develop AMP pages and learn AMP coding. In addition, publishers are building custom pages specifically for Google — only one source of visitors — and not for any other source such as Bing, Yahoo and other major websites.
Publishers should look at each of these three mobile first strategies as a progression from simple to advanced. The first one is an easy choice to make. The other two require some thought and caution.