Compatibility:

WebSite X5 Evo and Pro

A 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 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  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  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  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  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).