In one of our previous articles, we talked about the importance of having a website optimized for mobile devices. Today we will elaborate on its execution and give a few tips for a better performance of your mobile version. Although there are a few ways to create an optimized website, we will talk about the two of them.
1. Separate mobile version of your website
In this case, the content for desktop and mobile is on different pages with different URLs. Typically, a mobile site is hosted on the m.site.com subdomain.
If you've created a mobile site, don't forget to associate its pages with desktop custom attributes. To do this, set up a tag on mobile pages with a rel = "canonical" element pointing to the desktop page. And on desktop pages - with a rel = "alternate" element that will point to the corresponding mobile page. Each desktop page should have only one mobile page, and vice versa. You can also set rel = "alternate" using special attributes in the Sitemap.
Set up a URL redirection. You need to set up an automatic redirection using HTTP request or JS. The HTTP request redirects the visitor to the appropriate version of the site. Google documentation recommends setting up a 302 server response for such a redirect. A JS redirect could take some precious seconds to load the page. If the minimum width of the device screen is equal to a certain value in pixels, then it redirects the user to the corresponding page rel = ”alternate”. The browser will first load the page, then execute the JS, and then redirect the user to the appropriate version if necessary.
Overall, a separate mobile version is a great way of optimization in terms of loading speed, and the pages can be designed specifically for users with mobile devices. In addition, it is possible to select the display version. Since this is a separate mobile site, as a rule, a subdomain, the HTML, styles, URLs of some structural pages will be different. So, you need to configure HTTP or JS redirection of users from desktops to a mobile site and vice versa.
2. Adaptive version
The URL and HTML-code of pages on different devices are the same, and the only changes are in the CSS. Specifically, the size and position of elements on the page, depending on the size of the device's screen. Things to keep in mind:
You need to allow Googlebot to crawl CSS, JS, images on pages.
When implementing a responsive version, it is important to set up the meta name = "viewport" tag.
The meta tag informs the browser about the width of the device's screen. Based on this data, the browser builds the CSSOM (CSS Object Model).
The desktop and mobile versions remain accessible from one URL with one HTML code, and the website adjusts to the screen size of any device. There are no errors in defining a user agent and redirecting because there are simply no such requests. In addition, Google recommends using responsive design to optimize the resources. However, the advantages of the adaptive also cover its disadvantages. Since the HTML is the same, content for smartphones and tablets cannot be changed for each separate version. While you may hide the unnecessary elements from the user for a mobile version, they would still take the time to load.
The above-mentioned options tend to be the most common ways for optimization, however, if you already have a mobile version of your website, you might find useful the following tips that would help your site perform better.
The simpler the better
Focus on simplicity. The pages on mobile devices tend to load slower than on the desktop. Make sure there are not too many pages on a mobile version and try to make a streamlined website layout as it would provide the best user experience. Think of how the users would move through your website and plan this accordingly.
Create a responsive navigation
The most important aspect here is to make sure all of your buttons, especially CTA ones, are large enough for easy interaction, but not too large to ruin the design of your page.
Compression tools can be your best friends
Some of the most popular tools are HTML compressors. They delete unnecessary white space, code, and content of your website. Some other tools, like CSS minifier and CSS compressor, are able to link the code in chains to improve and help your site perform better.
Do not neglect your branding features
While the desktop version could be your primary source of traffic and a more important asset, it is essential to make your mobile version identify with your business. For that, use the same color scheme and fonts as in your desktop version, and do not forget to put your logo and all the other branding features.
Use of space
Do not overcrowd the screen with too much content. It does not necessarily mean limiting the amount of content you upload (which also is not a bad idea), but rather giving some space between the text and the visuals.