"Mobilegeddon" it was called on April 21, 2015 when Google rolled out the program that would impact website search rankings based on "mobile compatibility.” The effects of the change were serious as older sites scrambled not to lose search positioning based on their mobile performance.
Some were ready and some weren’t, but many people still don't really know how mobile websites work and the different methods used to achieve this. The truth is, there are really only two ways and in this post we will cover the basics of both.
Seperate Sites Based On Device
Having completely separate sites was the old school way and is simple in concept—create mobile responsive websites for small devices and create separate sites for tablets and PC's. This is achieved by using scripts to determine what type of device the end user is on and then directing them to an independent site created for that device. A common way to determine the method a site is using is to check the URL. A URL that looks like “m.website.com,” “mobile.wesbite.com,” or “www.website.com/mobile” are telltale signs of a mobile specific website. This has problems however.
The biggest issue with this solution is that it requires some complex setup for google to read it correctly. When using the multi-site approach, Google will index your site but will find more then one URL with the same content. This looks bad in the eyes of a search engine. Why would a website have two different pages with the exact same content? It seems like a bad experience and looks like the website is trying to "stuff" keywords. There are ways around it but even to a non SEO savvy developer it can be challenging to overcome. It also can be troublesome to manage the same content on two different systems. Once again a strong developer can make this relatively painless but it's not what I would consider easy.
It's very easy to make the experience great for the end user because you have separate platforms dedicated to that experience. Sites that have tons of content and navigation such as large publications and news websites usually benefit from this approach.
One Responsive Wesbite
Responsive websites are currently the most common solution to the mobile problem—one website that "responds" to the device the end user chooses. This is done effectively with what we call "break points.” Based on predetermined sizes the layout of the site usually changes at 4 different points based on pixels. At Prime, we use 1200px, 992px and 768px. When the screen gets smaller each of these sizes adjust to fit the layout of the screen. We can also show or hide elements and content which make the experience better for the end user.
The code is more dense because of this and can be bulky. It needs to be well optimized to make sure load times are appropriate and that the experience on all platforms is still exceptional.
One site, one url does it all. This makes for cleaner indexing for search engines and is much less stressful on your content managers and your content management system. It eliminates any trickery and much of the testing of a multi-site system.
Mobile responsive websites are the way to go. The limitations are much easier to overcome than multi-system solutions. It's easier to manage and easier on you and the end user. It also gives you more scalability in the future. Using existing frameworks like Bootstrap, 960, or Foundation can help alleviate a lot of work and in our case make us faster developers. When you are looking to make your site work on mobile make sure to ask your developer how they achieve mobile compatibility and the pros and cons of that choice. If they don't have any cons, it’s a red flag.
Want to learn how you can improve your digital marketing? Check out our digital marketing analysis below.