IT ENGLISH BOARD

How to set up a redirection according to the device resolution

Website
Author
author
Date
2020-07-16 21:04
Views
977
Modified on: Thu, 28 Nov, 2019 at 12:41 PM




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 > 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.
h8erx3JUhaivzlFnMV9slbGxC2qaYpFWJQ.png?1574940952

  • 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.
O6sXQxLXaXaszhapP0U4LZ2pmRUTXqBJMQ.png?1574941178

  • 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: 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.
Total Reply 0

Total 104
Number Title Author Date Votes Views
73
Website not working in smartphone view   (6)
author | 2020.07.16 | Votes 0 | Views 1002
author 2020.07.16 0 1002
72
LiveChat Object. How to add a chat
author | 2020.07.16 | Votes 0 | Views 988
author 2020.07.16 0 988
71
RESPONSIVE DESIGN TROUBLES (2)
author | 2020.07.16 | Votes 0 | Views 1213
author 2020.07.16 0 1213
70
How to check the correct functioning of a responsive Website using the local Preview
author | 2020.07.16 | Votes 0 | Views 1022
author 2020.07.16 0 1022
69
How to change Header and Footer
author | 2020.07.16 | Votes 0 | Views 1040
author 2020.07.16 0 1040
68
How to manage the contents of a responsive website
author | 2020.07.16 | Votes 0 | Views 1142
author 2020.07.16 0 1142
67
How to set up a redirection according to the device resolution
author | 2020.07.16 | Votes 0 | Views 977
author 2020.07.16 0 977
66
How to correctly report the Desktop and Mobile URLs in the page code
author | 2020.07.16 | Votes 0 | Views 1148
author 2020.07.16 0 1148
65
How to create the Desktop and Mobile versions of a website
author | 2020.07.16 | Votes 0 | Views 1035
author 2020.07.16 0 1035
64
How to create a Responsive Website
author | 2020.07.16 | Votes 0 | Views 1020
author 2020.07.16 0 1020
New