How to create the desktop and mobile versions of a website

Best Practices > Step 2 - Template > How to create a "Mobile-friendly" website  >

How to create the desktop and mobile versions of a website

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

There are several ways of giving users the best possible navigation experience when visiting a website, whatever device they are using. One way is to adopt a Responsive Web Design, a design criterium that involves creating a single website that automatically adapts itself to the various devices. Another way is to create separate versions of the same website, each one published on a different URL and optimized to be displayed on a specific device.

A configuration with separate URLs, with respect to a Responsive Web Design, allows you to build less complicated projects, because each one is designed specifically for a certain type of device, but the disadvantage is that all the updates and changes have to be repeated for all the projects.  

Click to expand/collapseHow to configure redirection according to device resolution

Imagine you want a website with specific versions for desktops, tablets and smartphones: you can use the Entry page to set up automatic redirection according to the resolution of the browser that is detected.

First of all, you need to create the desktop version of the website, defining the structure and contents.
In Step 1 - Website Settings | Advanced click on the Entry page button and select the Show the Entry Page option in the window that opens, then select Detect the resolution automatically.
Use the commands to create the Breakpoints. Click on the Add... button to add a new breakpoint at 480px, in addition to the existing default breakpoints.

Now there are 3 breakpoints that define 3 different intervals: the first interval includes all the resolutions that are higher than the currently selected template; the second interval includes the resolutions between those of the new breakpoint you have just added and that of the current template, the third interval includes all the resolutions that are lower than the new breakpoint.

The current project is automatically proposed for the "desktop" viewport, which corresponds to the first interval, and you don't have to do anything else. For the other viewports, however, you have to set up the links to the most appropriate website versions:

Select "Viewport 1", which corresponds to the second interval, in the Breakpoints and click on the Edit... button to open the Breakpoint settings window.
Type the URL of the tablet version of the website in the URL for this breakpoint field: for example, http//www.mysite.com/tablet/, if you are going to publish it in the "tablet" sub-folder of the main folder on the server.
Repeat these operations for the "Smartphone" viewport, which corresponds to the third interval, and link it to the relative URL: for example, http//www.mysite.com/smartphone/, if you are going to publish the website's smartphone version in the "smartphone" sub-folder in the main folder on the server.

The website is now set up to redirect according to the detected resolution of the device used to navigate the website, but you still need to prepare the website in the tablet and smartphone versions!

You can create your tablet version of the website more quickly by starting from a copy of the desktop version: in the initial Project Selection window, select the project for the desktop website and click on the Duplicate button. Then, click on the Rename button to change the name of the project.
Open the copy of the project and make all the necessary changes to the template and contents.
In Step 1 - Website Settings | Advanced, open the Entry page window and disable the Show the Entry Page option.
When you have finished the tablet version of the project, repeat the same procedure for the smartphone version.

Now you are ready to publish your websites on the server:

Publishing the desktop version of the website: the desktop version is the one the Entry page is associated with. When you publish websites on the server, an index.html file is created, which corresponds to the Entry page, and saved in the folder from which the website is published online. You need to create the "tablet" and "smartphone" sub-folders so that the URLs of these two versions can be found.

When you have done all this, the desktop version of your website will be online and the code for detecting browser resolution and redirecting to the other website versions will be active in the Entry page.

Publishing the tablet version of the website: publish the project in the newly-created "tablet" sub-folder on the server, so that redirection to the tablet version of the website works in the Entry page.
Publishing the smartphone version of the website: publish the project in the newly-created "smartphone" sub-folder on the server, so that redirection to the smartphone version of the website works in the Entry page.
Click to expand/collapseHow to correctly indicate the desktop and mobile URLs in the page code

Google expressly approves separate URL configurations for desktop and mobile versions of the same website, but it recommends using specific tags to allow its algorithms to correctly interpret them:

Add the link rel="alternate" tag in the desktop page, for addressing the URL of corresponding mobile devices.
Add the link rel="canonical" tag in the mobile page, for addressing the URL of the corresponding desktop.

This type of tag tells Goggle's algorithms that the two URLs have equivalent contents and should be considered as a single entity rather than two separate ones. This is very important because, if the desktop and mobile versions of a page are considered as two distinct entities, both URLs will appear in search results. And this could also mean that both pages may drop in the rankings because they could be penalized for duplicate content.

When you add the tags, be careful that:

you maintain a 1:1 ratio between desktop pages and corresponding mobile pages. In particular, avoid adding tags in lots of desktop pages that refer to the same mobile page (and vice versa).
make sure redirections are implemented only between pages that are actually related to each other.

When you are working with WebSite X5, the easiest thing is to create the mobile version of the website as an exact copy of the desktop version: this will ensure that both websites have exactly the same pages (files with the same name) and it will be easy to keep a 1:1 ratio between them.

Let's suppose we have to add the tags that Google wants to manage 3 versions of the same website: desktop, tablet and smartphone. We need to:

Open the website project for the desktop version and, in Step 1 - Website Settings | Advanced, open the Statistics, SEO and Code window and go to the Expert section.
Now, in the Custom Code field, select the Before closing the HEAD tag option and write:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/[CURPAGE]">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/[CURPAGE]">

Save the changes and then you can start working on the tablet version of the website:

Open the website project for the tablet version and, as above, go to Step 1 - Website Settings | Advanced, open the Statistics, SEO and Code window and go to the Expert section.
Again, in the Custom Code field, select the Before closing the HEAD tag option and this time write:

<link rel="canonical" href="http//www.mysite.com/[CURPAGE]">

Repeat the same operations for the smartphone version of the website: the link tag is the same.

For a better understanding of how this process works, remember that:

When you set the tags in the Statistics, SEO and Code window, they are automatically added to the code of every page in the websites.
When you write the tags, you must give the URL of the page you are working on as the href attribute: the [CURPAGE] string identifies the name of the page's file and this is automatically added by the program.
You need to use the link rel="alternate" tag in the pages of the website's desktop version to declare all possible alternatives: in this case, it is repeated twice to link both the tablet and the smartphone versions.
When you add the link rel="alternate" tag, you also have to declare when redirection is towards the tablet version or the smartphone version, rather than the desktop version. In the code of the example above, the media query strings indicate that Google must redirect to the URL of the smartphone version for resolutions less than 480px, and to the URL of the tablet version for resolutions between 481px and 1024px.

If the desktop, tablet and smartphone versions of a website do not contain exactly the same pages and/or contain corresponding pages but with different names, you have to intervene manually in the code of each page to make the necessary corrections to the tags.

Open the desktop version of the website. In Step 3 - Map select the page to work on and click on the Properties button.
Open the Page Properties window, go to the Expert section and place the cursor in the Custom Code field.
Select the Before closing the HEAD tag option and write the following tags:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/page-1.html">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/page-1.html">

where http//www.mysite.com/smartphone/page-1.html and http//www.mysite.com/tablet/page-1.html are the URLs of the smartphone and tablet versions that correspond to the desktop version you are working on.

Repeat this last step for all the pages in the website, so that the tags with the URLs of the corresponding smartphone and tablet pages are added.

The same procedure must be followed for the pages in the smartphone and tablet versions of the website. This time, the tag to add is:

<link rel="canonical" href="http//www.mysite.com/desktop/page-1.html">

where http//www.mysite.com/desktop/page-1.html is the URL of the page in the desktop version of the website that corresponds to that in the smartphone or tablet version that you are working on.

 


Best practice:

-

How to create a "Mobile-friendly" website