Clients have been asking us more and more for our opinion on the best way to set up a mobile website. We hear questions like “this is how our mobile website is set up, but someone told us we should set it up this way?” or “we’re not happy with our mobile site and want to change it to be like this.” Many of the other requests fall into the ballpark of a general, what’s the best way to set up a mobile website category.
Interestingly enough, in the past several months some of the most common questions have been around creating a “separate mobile website”. For the record, by no means are any of these questions silly. In fact, it’s very good that clients are concerned about optimizing their mobile site. It’s official as official can get: Mobile-first indexing is here. Yes, like really, really here. Your mobile site is the first thing that search engines are looking at.
“Starting July 1, 2019, mobile-first indexing is enabled by default for all new websites”
Don’t believe it? Here’s a screenshot from Google Search Console.
Let’s Start by Defining a “Separate Mobile Website”
Likely, you’ve seen the “m.website.com” url before; this is an indication of a separate mobile website. Meaning that the mobile site lives on a totally different domain then the desktop version of your site. Separate mobile websites are designed specifically for mobile phones and most times are quite different from the desktop version of your website. Typically, content is cut down to a minimum and the mobile website only shows a subset of the information that is on the full desktop version of your site. Separate mobile sites only show the information that has been deemed mobile-appropriate, leaving out most of the extra details.
A mobile-dedicated site may include things like:
- no video
- less text
- simplified navigation
- smaller images
- only a portion of the pages
- different pages than desktop
Very recently, Google has advised us that the content on a mobile website should be the same as the content on your desktop site. There are SEO issues that have been known to arise from people creating a mobile site that has vastly different content. On the opposite side of the spectrum, many questions have also been raised about the issue of duplicate content – a terror we all try to avoid for ranking purposes. Thankfully, there’s a way around Google giving you a knock down if they believe you have duplicate content.
What is this way around? Something called bi-directional annotation. This is needed to tell search engines that this is the same page and not duplicate content.
Here’s how Bi-directional Annotation looks:
link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/”
This is placed on your desktop site to point to the mobile version. Then on the mobile version, set the desktop version as the canonical, like this:
link rel=”canonical” href=”http://www.example.com/”
This two-way annotation between desktop and mobile page versions allows search engines to view both as a single entity, and serve the right version in the right environment.
The Pros of a Separate Mobile Site
- A separate mobile site is a sure-fire way to ensure your website has the exact UX that you know will serve your hand-held audience best
- You can focus on creating a perfect mobile experience with all the right placements, content, and navigation, without worrying about how it translates to desktop
- With bi-directional annotation, it’s also possible to prevent your site from taking an SEO hit
The Cons of a Separate Mobile Site
- There is a higher cost of maintaining a separate mobile site. Instead of having one site to manage, you now have two
- There are some intricate steps to take to make sure your site is search engine optimized
- Google has recently advised against using a separate mobile site, telling us that mobile content should be equivalent to desktop content
- Mobile-dedicated sites often exclude content and functionality that may prove relevant to at least some portion of users
The Alternatives?
Responsive Design Sites
Responsive websites have the ability to tell what device type the visitor is on and can automatically adjust the layout of the content being shown to match the user’s screen size. For example, let’s say you use have multiple columns of text on the desktop site, this might get squeezed down to a couple columns on the tablet screen, and maybe just one column on a mobile screen.
Responsive sites can also be easier to maintain than separate mobile sites. With just one url, any changes are made to one site vs. having to make changes to go in and update two separate sites. Most importantly, same functionality and content is used on all versions of a responsive site. There will no longer be a debate on what features are good for desktop and which are good for mobile. The site will stay the same across the board.
The Pros of a Responsive Design
- A responsive site is easier to maintain and make adjustments to – there’s only one url being used across devices, so there’s no need for complicated device redirection
- With just one application, your site is made to be device specific for a variety of screen sizes across mobile, tablet and desktop
The Cons of a Responsive Design
- If your site contains bigger pages that might work fine on the desktop screen, they can be slow to load on the mobile screen
- Responsive sites don’t offer a truly mobile-centric experience for the user, meaning that there might be small elements that could be optimized for mobile
- It requires advanced development skills and can be more timely to build out a responsive site
- It can be fairly costly to build a totally responsive site, and it might cost more money than building a separate mobile site
Adaptive Design Sites
Adaptive design sites (sometimes called progressive design) are a version of responsive design, where the server can tell what the capabilities of the user’s device are, and then send appropriately sized elements to that device. Instead of having only one page layout that changes to fit a screen, adaptive sites use a handful of different layouts for various screen sizes. So, instead of the site dynamically changing sizes to fit the screen, there are pre-made layouts on standby awaiting their chance to get pitched onto the user’s screen.
When using adaptive design, if someone’s device isn’t very advanced or has a poor network connection, they get sent a lighter version of the page that contains the bare minimum. On the flip side, if an advanced device is detected, it receives an enriched version of the page, loaded up with all those awesome javascript and CSS features. This draws people towards using adaptive sites, because they reduce slow load times that can be experienced with responsive design.
The Pros of Adaptive Design
- Adaptive design sites have the ability to create a fully mobile-centric experience
- Only one url is used, so the need for bi-directional annotation is eliminated
- This method offers a complete differentiation of mobile content, because there’s a layout created for every individual screen size
- These sites tend to load faster than the standard responsive site
The Cons of Adaptive Design
- Adaptive design sites have a very complex technical implementation, and are not necessarily cheap, quick, or easy build for developers
- This method also comes with a slightly higher cost to maintain. If a new device gets introduced to the market, the dev team might have to go in and create a new layout to fit that screen size appropriately
- There’s somewhat of an ongoing maintenance that has to align with the mobile market
What’s the Most Well-Rounded Option?
Rather than saying each version has their own advantages/disadvantages, and it depends on the nature of your needs and what you’re hoping to accomplish…yadda yadda. We’d like to actually answer the question “Are Separate Mobile Websites Bad?” and give you our opinion on what type of mobile website is the most well-rounded.
Believe it or not, Google has recently advised against using separate mobile sites, and on top of that you’ll have to manage and maintain two separate websites. Many resources say that they don’t notice any big SEO issues with mobile-dedicated sites, but the warning is out from Google and it’s better to play safe than sorry. The issue of duplicate content is also something to keep in mind, and you’ll need to include bi-directional annotation to avoid it. To answer the question, separate mobile websites aren’t necessarily bad, but they aren’t “the best”.
The most effective choice is likely going to be a responsive design site. This type of mobile site meets your SEO needs, isn’t overly complicated, doesn’t call for tedious maintenance, and can be built more quickly than adaptive design sites. The possibility of duplicate content is eliminated with responsive design and Google’s preference for mobile content to mirror desktop is also ensured with this option.
If you’re in need of a team of developers to build and optimize your mobile site, reach out to us today. We’ll make sure to take the friction out of the process.
