3 Options for Creating a Mobile-friendly Website

In a previous article we told you more about the latest web design trends and the importance of keeping pace with them. We also emphasized on how useful it is for your website to be liked by users so that they wish to visit it often, share it and talk about it. Your website must be accessible from everywhere so as to increase traffic to the maximum. For that reason the existence of your site’s mobile version is crucial.

Mobile compatibility is important for each and every web user. Interesting statistics about mobile’s share of web traffic, made by StatCounter, shows that the average share of web browsing via mobile device is 33%, as there are countries where it exceeds 70%!

Do you want your website to be easily accessible across all devices? Here is what you need to know!
There are three ways to make your website mobile-friendly:

• responsive design;
• dynamic serving;
• separate URLs.

Responsive design

The website’s appearance in the browser depends on HTML and CSS code.With responsive design the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. This means that when your website is loaded on a mobile device the design will adapt (adjust) to the screen size. The URL stays the same regardless of the users’ device (desktop or mobile), which makes the site’s link easy to share across all devices.

Responsive design has many advantages. By using it you do not need to upload web content twice or redirect from desktop to mobile version – create neither a separate website version, nor a separate subdomain for mobile devices only.

If you choose responsive design for your website, avoid making the following common mistakes:

• Unsuitable font size – when a page is resized for smaller screens the users should still be able to read the contents.
• Not enough space between links – since on mobile versions users tap or pinch, navigation through the website might become complicated if links are too close to each other.
• Small buttons – buttons and anchor text should be easy to tap. In this way users will enjoy spending time on your mobile website as much as they would on its desktop version.
• Avoid elements, such as videos, which are not playable on mobile devices. It is not recommendable to have errors on your website explained with “The content is not available on mobile devices”.

Dynamic serving

Unlike responsive design, here the website is served differently, depending on whether it is requested by a mobile device or desktop. Dynamic serving is a setup where the server responds with different HTML and CSS code depending on the user agent requesting the page.

Dynamic content serving actually happens when: the website responds with different content on the same URL depending on the features of the user accessing the site. This is implemented through detecting the User-Agent.

Тhe website can identify a desktop or mobile user from the information which is provided in the HTTP header. When a user accesses a website, the browser is presented to the server as User-Agent containing information such as browser name, version, user operating system, etc.

The website will select a suitable content version based on this information.

When a website serves dynamic content it’s highly recommended to notify clients about that through the HTTP vary header: User-Agent. In this way search engine bots crawling a page from this website will detect that this is not the only available content version.

This is crucially important for Googlebots, since they  in order to access and crawl separately each website version. Thus visitors using different devices and platforms are able to find the most suitable content.

The advantage of dynamic serving is that the server responds on the same URL just like with responsive design (i.e. the mobile and desktop domains are the same). You do not need to redirect links either.

A disadvantage here is that sometimes errors occur because the device used might not be recognized properly by the server.

Separated URLs

In this configuration, each version has a different URL serving mobile-optimized or desktop content. For each of them HTML and CSS are different. The URL also differs. This means that if you use superhosting.bg domain for serving desktop users, the mobile version can usually be found on the m.suuperhosting.bg subdomain. Thanks to user-agent, the web server recognizes the specific requirements of each device and loads the suitable website version. The difference with dynamic serving is that if you type superhosting.bg in your mobile browser, you will be redirected to a new URL – m.superhosting.bg. However, this process of redirecting might be an obstacle in mobile configuration.

A possible solution is: When some of your webpages does not have a mobile version, just do not redirect it. Better leave it like this. Thus its desktop version will be served.

Different websites implement different redirection policies. Some websites only redirect mobile users visiting a desktop page to the mobile page (“unidirectional” redirects), and some websites redirect both mobile and desktop users if they visit pages on, respectively, the desktop and mobile sites (“bidirectional” redirects).
In this case it’s crucial to specify that there are two different versions of a website so that search engines identify them. You can do this by adding the rel=”canonical” tag (to the mobile version) and rel=”alternate” tag (to the desktop version).

The advantage of this configuration is that you can publish different content on mobile and desktop versions if you want it to be available only on one of the versions. The disadvantage of this method is a possible redirection error, as well as sharing a link from a mobile version and serving it on a desktop version, if bidirectional redirect is used. In this case the code of the mobile version will be served on desktop.