Mobile Website Strategy Depends on 1 of 3 Choices

Credit: Pixabay Creative Commons license

A mobile website 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 give mobile visitors the best experience possible.

At that point, a publisher has one of three choices with a mobile strategy:

1. Use CSS media queries to identify mobile visitors and present the most effective design possible.
2. Use a redirect to send mobile visitors to a separate mobile site.
3. 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. They 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.

Regardless of what it does, this approach is fairly simple to implement. But it potentially displays slower pages to mobile visitors because it will include unused CSS styles, javascripts specifically for desktop users and other desktop-specific content that mobile visitors will download but not actually see.

The Redirect Strategy

A strategy that redirects mobile visitors to a separate 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. They are not part of the stand-alone mobile site. But a standalone site requires much more work to implement. It requires a separate set of design templates.

This mobile website 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 AMP is a web component framework that makes mobile browsing much faster. Publishers create separate site templates and use a Google version of AMP HTML and javascripts.

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.