Compatibility:

WebSite X5 Evo and Pro

In responsive web design, however complex the website is, it is fundamental to develop a good content management strategy, considering not only what contents are to be included, but also how they are to be presented:

  • What content needs to be included in the page?
  • Do you want to maintain the same content for both desktop and mobile devices?
  • If not, which contents can you hide for mobile devices?
  • In what order are the contents to be presented?
  • Etc…


A good strategy is to make a list of all the contents that need to go in a page and put them in order of importance, from the highest to the lowest: this will help you identify the essential content, which needs to be present in all cases, and categorize the rest according to their effective utility so that you can hide them by degrees as the resolution lowers. Obviously, this operation has to be done for each page in the website.


To better understand this mechanism, the classic example is the website for a restaurant. When the website is displayed on a PC, you can make full use of pictures and animation to present the various dishes on the menu, to gain your visitor's interest and appetite! When the website is being viewed from a mobile device, however, you should consider that maybe the visitor will be more interested in the reviews or contact information than looking at big photos. So you need to cut down on the pictures and concentrate on the essential information that will interest the potential customer who is navigating from a smartphone or maybe even without broadband, etc. and just wants essential information quickly.


In WebSite X5, once you have created the page as it is to be viewed in the desktop viewport, you can start to define the changes that will be necessary at each breakpoint. This is what you have to do:

  • In Step 4 - Pages create the page by dragging the various objects onto the page layout table and add your contents. The page will be displayed as you create it here in the desktop viewport (i.e. in all the pages that have a resolution higher than the desktop breakpoint).
  • When you have finished creating the page, click on the Responsive button to open the Responsive settings window.  The Responsive Bar is shown in this window and it gives all the viewports resulting from the breakpoints that have been set up for the website (in the Resolutions and Responsive Design window). You have to work on all the breakpoints in order, starting by selecting the Desktop viewport in the Responsive Bar and continuing until you reach the Smartphone viewport.
  • When you select the desktop viewport, the configuration that you set up in the Page Creation window appears in a schematic diagram that is very similar to the page layout table. Click on the Display Order button to start defining the order in which the objects are shown in the page layout. The program automatically assigns a display order number to each object.
  • If necessary, change the objects' order according to the importance of the contents and where you want them to appear in the page. There are several ways of doing this
    • If you select Display Order > Order all the objects from the beginning, you must first click on the object you want to appear first on the page and then click on all the other objects in the order you want them to appear.
    • If you select Display Order > Continue ordering from an object, click on the object from which you want to manually set the display order. All the objects before this will maintain the order number assigned to them by the program, but you must click on each of the subsequent ones to define their position in the display order.

The ordering procedure is guided: when you select an Object, all the other Objects you can click to define the order will be marked red. The order chosen for the Desktop will be kept for the other Viewports as well (see, How the Object Display Order works).

  • You finish ordering the objects when:
    • You click on the last object in the page.
    • You click on Display Order > Complete ordering to manually end the procedure and confirm the current order.
    • You click on Display Order > Cancel object order to manually interrupt the procedure and cancel the changes made so far, restoring the original order.
  • Click on the Show/Hide Object button to start indicating which objects are to be made invisible. Click on the Objects that you don't want displayed at the resolutions that are lower than the current one. Click the Show/Hide Object button again to confirm your choices and end the procedure.
  • Click on the button to start defining obligatory line breaks in resolutions that are lower than the current desktop viewport. The program helps you by showing a broken gray line where you can enter a new line break: click on these broken lines to add a new line break in that position. Click on the Line break button again to confirm your work and leave this procedure (see: How to add Line Breaks and why you need them).
  • If you are using the Pro edition, there may be a maximum of 10 breakpoints set up. If there are any intermediate viewports, use the Responsive Bar to select the next viewport after Desktop. The page layout is updated with the new settings for the desktop viewport: you can now hide any objects you don't want to appear in this viewport and add any necessary line breaks. Follow the same procedure for each viewport you have.
  • When you get to the smartphone viewport you don't have to do anything because all the objects that remain visible (i.e. they haven't been hidden for other viewports) will appear linearized on screen, in the order you have specified initially when setting up the desktop viewport.


As you can tell from this explanation, the page layout reflects the page structure in each viewport. All the changes you make in each viewport determine the structure that the page will have in the next one.    


#tip - Empty cells. When you create a new page in a website that you want to make responsive, you should make sure that there aren't any empty cells in the page layout table. The program treats empty cells as though they contain (empty) objects and gives each of them an order number: you won't be able to change the number but you will be able to change the order on which they appear (although it will always be an empty space). To maintain greater control over the display order of the objects, it is better, therefore, to avoid having empty cells. If you really want an empty space, insert an object in the cell but don't add any content to it: if an object is added manually it doesn't affect the page layout and it can be manually added to the display order.