How to create a Responsive Website

2020-07-16 20:47
Modified on: Thu, 5 Sep, 2019 at 4:17 PM


WebSite X5 Evo and Pro

Responsive Website is a website that can adapt its layout and contents to the user's requirements, recognizing factors such as the screen size, the platform running the website and how the device is oriented. This means that when a user passes from his/her PC to a tablet or a smartphone, for example, the Responsive Website automatically adapts (responds) to the new resolution (screen size expressed in pixels) and continues to offer the best possible interaction and use of the contents in the new viewport (the window containing the web page).

The basic principle of Responsive Design is that it isn't necessary to create different versions of the same Website: instead, each Website must adapt to the growing variety of devices it may be displayed on.

To reach this result, responsive web design uses a mixture of grids, layouts and flexible images, plus a pondered use of CSS media queries. Leaving aside the technical terms, however, in order to create a responsive website it's important to fully comprehend the objectives of this type of design and how these objectives influence the way in which content is organized and managed.

The ultimate end of Responsive Web Design is to offer the user a positive experience in all circumstances, and so the objectives are:
  • to adapt the layout to the greatest number of screen resolutions possible (from cell phones to PCs);
  • to adapt the size of images (and of all fixed-width content in general) to the resolution and size of the screen they are displayed on;
  • to simplify the layout of the page for mobile devices with small screens;
  • to hide non-essential elements on these devices;
  • to provide a user interface that is suited to touch interaction for the devices that support this technology.
Keeping in mind these basic objectives and that the ultimate aim is to guarantee the best possible navigation experience, that is independent of the device being used, it's possible to create Responsive Websites with WebSite X5 because it is the program that simplifies content management and provides the code necessary for creating the pages.

These are the steps you need to follow in order to create a Responsive Website:
  • Go to Step 2, click on Resolutions and Responsive Design to access the settings window and select the Responsive Site option.
  • While in the Resolutions and Responsive Design window, define the list of breakpoints you want to activate for the Website (see: How to set breakpoints for a Responsive Website).
  •  Now you can move on to the Template. On Step 2 again, access the Template Structure section and use the Responsive Bar to select each Viewport and arrange how the Template should be displayed for each resolution (see: How to set up  the Template of a responsive website).
  • The contents of the pages need to adapt to the various resolutions, too. Go to Step 4 and, after having created a Page for the Desktop resolution, click on the Responsive button oAFnV_DCQUshQU7NtIrBfMtD7LVPTCjBtg.png?1567688844 to open the Responsive settings window  (see How to manage contents of a responsive website).
  • Use the Responsive Bar again to select the Viewport you want to work on: start from the Desktop one and proceed step by step until you reach the Smartphone one.
  • For each Viewport, click on the F1wZCvGvsDKBXkFmK7rN_vWZOWYg5wn9_Q.png?1567688386 Display Order button, then select the different Objects inserted in the Grid, so to give them the appropriate order (see: How the Object Display Order works).
  • If there are some Objects which you would like to remove for particular Resolutions, click on the bJTzkyYeyxuNRNJZNzinUzHCiUInKfQuhA.png?1567688386 Show/Hide button and then select the Objects you want to hide.
  • If you are working with the Pro edition, you can force some Objects to be displayed on the following line: click on the 2KnmtCFC2JEzd07QY69ZWcznDciCKSfXxA.png?1567691226 Line breaks button, then click on the  broken gray lines which you find between the Objects in the Grid to signal you want to add a line break there  (see: How to add line breaks and why you need them).
  • When you're done adjusting the way your Pages should be displayed, you just need to check if everything is working correctly: click on the Preview button to open the local browser preview. Use the cs9NcsHC_-6LDOcRoQO_AWf2ZWMf3EiZXA.png?1567688386 rUBOCTeOX572WgpucErJ8fT6bgFLxo83xA.png?1567688386 0Bix0Od-bjNqEduWT9lcuE8djSMjIUJL0Q.png?1567688386 7sKC37K8wRh2sDliK81fF8lrywwJvunCzQ.png?1567688386 buttons to simulate the pages visualization for the different resolutions (see: How to check the correct functioning of a responsive website using the offline preview).
Total Reply 0

Total 104
Number Title Author Date Votes Views
Website not working in smartphone view   (6)
author | 2020.07.16 | Votes 0 | Views 1002
author 2020.07.16 0 1002
LiveChat Object. How to add a chat
author | 2020.07.16 | Votes 0 | Views 988
author 2020.07.16 0 988
author | 2020.07.16 | Votes 0 | Views 1214
author 2020.07.16 0 1214
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
How to change Header and Footer
author | 2020.07.16 | Votes 0 | Views 1040
author 2020.07.16 0 1040
How to manage the contents of a responsive website
author | 2020.07.16 | Votes 0 | Views 1142
author 2020.07.16 0 1142
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
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
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
How to create a Responsive Website
author | 2020.07.16 | Votes 0 | Views 1021
author 2020.07.16 0 1021