Compatibility:

WebSite X5 Pro

Imagine you want a Website with specific versions for Desktop, Tablet and Smartphone: 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 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 ones.


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 set 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 2", 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, /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, /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: click on Home > Open project and  in the Edit an existing Project 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, 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.