How to set up a redirection according to the device resolution
Website
Author
author
Date
2020-07-16 21:04
Views
2078
Modified on: Thu, 28 Nov, 2019 at 12:41 PM
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.
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:
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.
- 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.
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.
- 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.
- 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.
- 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 2168
|
author | 2020.07.16 | 0 | 2168 |
72 |
LiveChat Object. How to add a chat
author
|
2020.07.16
|
Votes 0
|
Views 2070
|
author | 2020.07.16 | 0 | 2070 |
71 |
RESPONSIVE DESIGN TROUBLES (2)
author
|
2020.07.16
|
Votes 0
|
Views 2276
|
author | 2020.07.16 | 0 | 2276 |
70 |
How to check the correct functioning of a responsive Website using the local Preview
author
|
2020.07.16
|
Votes 0
|
Views 2101
|
author | 2020.07.16 | 0 | 2101 |
69 |
How to change Header and Footer
author
|
2020.07.16
|
Votes 0
|
Views 2087
|
author | 2020.07.16 | 0 | 2087 |
68 |
How to manage the contents of a responsive website
author
|
2020.07.16
|
Votes 0
|
Views 2272
|
author | 2020.07.16 | 0 | 2272 |
67 |
How to set up a redirection according to the device resolution
author
|
2020.07.16
|
Votes 0
|
Views 2078
|
author | 2020.07.16 | 0 | 2078 |
66 |
How to correctly report the Desktop and Mobile URLs in the page code
author
|
2020.07.16
|
Votes 0
|
Views 2213
|
author | 2020.07.16 | 0 | 2213 |
65 |
How to create the Desktop and Mobile versions of a website
author
|
2020.07.16
|
Votes 0
|
Views 2083
|
author | 2020.07.16 | 0 | 2083 |
64 |
How to create a Responsive Website
author
|
2020.07.16
|
Votes 0
|
Views 2084
|
author | 2020.07.16 | 0 | 2084 |