The “mobile” question for website owners is, and has been, a difficult one to answer. There are so many “recommended” ways of approaching mobile with regards to your existing or new website that there’s little that comes close to “Best Practice” to follow. This article is designed to inform and educate on some of the considerations that a website owner should make when they are coming from a traditional “desktop” approach, or (re)building from scratch.
The first thing to consider is why “mobile”? Are you including tablets in this scenario? What about other devices such as wearables (e.g. watches), or larger displays than desktops? “Device Ubiquity” here is the name of the game. You want your online experience to be complete and usable across as many devices and device types as possible.
With that out of the way, we’ll try to limit the rest of the consideration to the traditional “mobile” arena – making your website (existing or new) usable on mobile devices as well as desktop ones. Usable in this regard also applies to search engines. We want to be sending the correct signals to these important players so that you have the highest visibility regardless of how your customers/consumers will access your site. Lastly, we won’t be addressing Native Apps, other than specific considerations that leverage the natural web.
There are effectively 4 different ways to approaching mobile:
- None (Static) – leave your site as it is and let the browsers and search engines figure it out (Not Recommended)
- Responsive/Adaptive – a flexible (or “stretchy”) way of displaying your site that shrinks/expands to show users content based on screen size (Good for content-heavy sites)
- Dynamic – the code and templates are different depending on the view-port or screen size of the device you are using (Good for interactive sites)
- Separate – better known as the ‘m.dot’ approach where you have the mobile version of your site hosted on a sub-domain (or sub-folder)
If the above is confusing, take a look at the Liquidapsive site that demonstrates the first 3 approaches. Hopefully the ‘m.dot’ approach is self-explanatory. Clearly just expecting a site that was designed for a desktop experience isn’t going to translate well in a mobile environment – for a number of reasons, including:
- Mobile browsers may attempt to shrink the web-pages down to fit the smaller view-port (screen) of the device, making the content unreadable
- Horizontal scrolling may be required to read content, forcing users to break their reading continuum
- Mobile networks aren’t as fast as connected (Ethernet) or wireless networks, meaning that the content can take longer to load – especially when there are larger images, scripts and CSS styles
Without going into the specifics, Responsive/Adaptive and Dynamic approaches are the preferred options as they:
- Present content on the same URL regardless of the device being used, so no additional steps are required to provide correct signals to search engines (Note: Dynamic Serving using User-Agent detection does require ensuring that the
Vary: User-AgentHTTP header is sent with the response)
- Present content in a readable and usable context based on the device being used
- Reduce the amount of ongoing or subsequent development to maintain different versions of the site, even though extra work is required up-front
Dealing with Separate sites for Mobile
While Responsive/Adaptive and Dynamic are the preferred approaches, there can be legitimate reasons to have a separate mobile version of your site. These can include cost, technology, specific requirements and so on. So, if you’ve already got a separate mobile site, or need to build one for any specific reason there are some significant aspects you need to consider:
- Whether you use a separate sub-domain (the convention is using http://m.example.com/), or a sub-folder to hold the version of your site. Even these subtle decisions can impact the visibility and performance of your site. Using a separate sub-domain allows you to
- Use a different technology stack to provision the site
- Maintain a clear separation from the core sub-domain, simplifying webmaster tools registration etc.
- Simplify URL structures to allow for dynamic switch-board tagging (see more on this below)
- Ensuring you register the separate sub-domain with webmaster tools to monitor issues and indexation
- Ensuring you have bi-directional annotations (switch-board tags) between the desktop and mobile versions (and tablet if appropriate)
Mobile SEO Resources
If you’re new to this site, then we do have a specific section on our famous SEO Resources page dedicated to Mobile SEO. In order to save you a click, here they are:
Google and Mobile
These links are more specifically targeted towards SEO of Mobile, however, the way you approach mobile is intrinsically linked to SEO, as each method his different implications for SEO, Architecture, Visibility and more.
Additional Mobile Resources
Google has recently expanded it’s web developer documentation, including detailed information on each of the approaches listed above. Links to each are:
- Google Developers Guide to Responsive Design
- Google Developers Guide to Dynamic Serving
- Google Developers Guide to Separate URLs
We hope this helps you ensure you provide the best mobile experience.