Website optimization for mobile devices: what for and how to perform

Website optimization for mobile devices: what for and how to perform 

 

In spring of 2015 Google presented its new project – a Mobile-friendly search algorithm aimed at identifying web pages adjusted to smartphones and generating additional popularity rating with really mobile-friendly websites taking up the first positions.

 

 

Taking into account the fact that mobile internet users make up more than 50% of all web users, it is highly important for digital media and entertainment websites, blogs, various e-commerce platforms (online shops, websites offering products and services of different companies, etc.) to have a mobile version of the website. The abovementioned websites are the ones that are most popular among smartphone owners.

 

More about Mobilefriendly algorithm

 

 

  • Google Mobile Friendly analyzes results of Google search engine only.
  • Google Mobile Friendly changes results of mobile Google search only, meaning the websites entered via a smartphone will be ranked on the basis of their optimization for such devices.  
  • Google Mobile Friendly service estimates only individual pages, not the website on the whole. That means it will be really useful for your website if you optimize at least some of the content for smartphones.

 

However, there are exceptions to the rule, and sometimes being smartphone-friendly doesn’t affect the ranking. For example, it could be brand inquiries, as well as websites with pages having high relevance score (quality content still remains one of the most weighty ranking factors even in case of mobile search). 

 

 

Website Evaluation criteria 

 

Analyzing to what extent the site is mobile user-friendly, new algorithm Google Mobile Friendly pays particular attention to the following key aspects:

 

  • Type and graphics size. If the page is displayed as on PC screen, then mobile user will find it hard to look through unreadable website content written in small print. Smartphone-optimized websites zoom in on main information and remove or transfer secondary info to separate pages.
  • Width of web pages. Pages of websites which are not adapted to mobile phones are wider than a smartphone screen. To look through the content you have to scroll the page right or left.
  • Size of active components. On a smartphone-friendly website you don’t have to zoom in to press an active button, banner or link.
  • Plug-ins. Some smartphones don’t read plug-ins which are common for PC. That’s why smartphone-compatible software should be used on mobile versions of websites. 

 

Another condition of website ranking, and quite an important one, is availability of website’s mobile version checked by Googlebot and installed on smartphone (only for Android for now). If a user is authorized in Google system, he or she will see a link to respective application in search results. Having clicked the link and launched the program, user will see a smartphone-adapted website. 

 

 

Check your web page!

 

Would you like to know how compatible your web page would be for Google Mobile Friendly algorithm? Then use special services for webmasters in Google panel:

 

  • Mobile-Friendly Test. Allows looking at website pages with the eye of search robot.

 

Mobile-Friendly Test

 

  • PageSpeed Insights. This utility program shows the page as it will be displayed on smartphone and also provides information about loading speed and useful advice in the technical area.

 

PageSpeed Insights

 

 

To estimate the amount of traffic from smartphone you can use an updated Google instrument – Search Query Analysis.

 

 

Ways of adapting the website for mobile devices 

 

There are a few techniques allowing to make an online page as readable for smartphone owners as possible. Making an optimum decision, each website owner will estimate complexity level of the task, its costly characteristic, pros and cons of every option.

 

 

Using different URL addresses


The idea of this technique is to provide separate URLs with different HTML variations for each type of the device (PCs and smartphones). So, as an addition to an existing resource an auxiliary one, specially for smartphones, is created. Usually a subdomain m.site.ru is used for that (or .mobi domain). 

Using different URL addresses

The additional resource provides only the most important information since its primary task is to let users quickly look through the website and perform some key operations (for example, download music, read news, buy something, etc.).

 

Both versions are interlinked by means of specific attributes allowing Googlebot to decide which modification should be displayed when a user is accessing the website.

 

To link the websites properly, making them interconnected components, you should:

 

  • Add rel=«alternate» attribute with two media meanings (reading screen definition and detecting if it’s necessary to turn to auxiliary version) and href (link to a smartphone-optimized version) to the tag “link” in HTML-code or Sitemap.xml file of full website version.
  • Add rel=«canonical» attribute linking to full version of the website to the tag “link” in the code of optimized version.

 

The main disadvantage of the technique is that in case of bugs in interlinking it may become complicated to correctly display the mobile version in accordance to its ranking.

 

You can find out more about the process in Google reference materials.

 

 

Dynamic display

 

It means a single URL but different HTML codes are used for both full and smartphone-optimized versions of websites.

 

Dynamic display

 

In practice, that is creating several layout templates with a focus on devices of various screen width.

 

Possibility to enable all advantages of JavaScript and CSS for mobile modification while, at the same time, offering a lite format of the web page is also on the plus side of the technique.

 

This is how the mechanism works: accessing the website, the browser sends a User-agent to the web page server to inform about the type of the device accessing the Internet. As a response, server sends respective format of HTML code and CSS which is exactly what the browser displays for a user.

 

Displaying correct modification is also important for search robot. For that purpose it is recommended to use HTTP header «Vary» which lets the robot know it’s dealing with smartphone-optimized content. This will allow the system to include the web page into its mobile ranking and move it higher up on the list.

 

As for downsides of this technique, these are the need to regularly update the list of user-agents, as well as frequent bugs in browser detecting the agent and displaying the correct HTML template.

 

 

Adaptive design


The idea of this approach is to use unified URLs and HTML codes. CSS will allow the website’s multipurpose architecture to automatically adapt to any gadget. Having analyzed screen width, the system will either diminish or enlarge type size, size and position of graphics and active components.

 

Adaptive design

 

 

This method is the most promising, functional and convenient since it once and for all solves the problem of optimizing the pages for different devices – PCs, netbooks, tablets, projectors, smartphones.

 

To implement the method:

 

  • Add «meta name=«viewport»» tag to metadata of the web pages which will inform the browser it’s dealing with a website of flexible structure.
  • For popular CMS websites use mobile adaptation instruments provided by platforms.
  • Use step-by-step instructions explaining how to create a website or a landing page with multipurpose optimization for user devices.

 

The disadvantage of the approach is the complexity of repairing possible bugs and problems (low page loading speed, for instance), which can only be eliminated by a high skilled expert with experience in this field.

 

 

 

SEO optimization of mobile version

 

Main requirements for smartphone-optimized websites are similar to general principles of website SEO-optimization. This includes creating unique, informative and quality content, competent adjustment of CMS characteristics, use of interlinking, etc. However, there are some additional aspects not to be ignored.

 

Inform search robot correctly

 

  • It’s crucial that you inform the robot about your website having a mobile version. This will ensure you a better position in mobile search results.
  • Let search robot index CSS, JavaScript and website’s graphic files in Robots.txt. If not, Google might not identify webpage’s smartphone-friendliness even if mobile modification is displayed correctly. By the way, you can detect bugs in indexing by Robots.txt. service and “View as Googlebot” feature.

 

Check redirection

 

If interlinking between website full and mobile versions has been performed incorrectly, then smartphone users might either face the problem of “error 404” – the page needed just won’t open – or they will be redirected to another page.

 

Using Google’s Search Console feature you can analyze the mechanism and redirection and make adjustments.


Don’t forget about multimedia content

 

Files read by flashplayers and other players with original locked code aren’t recognized by smartphones. As a result, users can’t watch such video or animation.

Don’t forget about multimedia content 

 

 

 To avoid this problem use HTML5 in mobile version of the website.

 

 

Remove annoying pop-up windows

 

Users find such components really annoying even when using full website versions, so imagine how irritated smartphone users get.

 

Bearing that in mind, use a small line with similar content of advertising or informative kind and place it on the main page together with other important information.

 

 

Increase loading speed


Many smartphone owners encounter the problem of low Internet speed which makes it difficult to load pages.

 

By compressing components and HTML code, removing secondary elements, using browser cash, etc., you can help your potential visitors of your website.

 

You can learn more about techniques in Google’s reference materials, Content Optimization section.