How to manage the contents of a responsive website

2020-07-16 21:12
Modified on: Wed, 27 Nov, 2019 at 4:34 PM


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 BRcD_8LanQ17ADivjgFSZCDG3-KCW_ktxg.png?1550561685 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 G8e5S6zFwTLA4f7sH-TrtxoHft7mAX7YMQ.png?1550561753 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 iTs6LthJRDZhUHiP0lsuq-xUanwQ1gbbEQ.png?1550561900 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 KHtrF76L724CzUycm9ZAGh1r3QpGgX8ywQ.png?1550561920Show/Hide Object button again to confirm your choices and end the procedure.
  • x41neHLKUVOK2FEKXkb05cdxMbheEWZzBQ.png?1550561950Click on the LjJsoPbdjR8O6I-znTA1m5j1imuygiI7Yg.png?1550561942 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 D9LgQMd6xavaK0uWfn4UN4mNLCiZ81pjQA.png?1550561975 Line break button again to confirm your work and leave this procedure (see: How to add Line Breaks and why you need them)
  • zuiAb9mZ8btiephToZOjFWmd-OO03-pLNQ.png?1550562036If 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.

Total Reply 0

Total 104
Number Title Author Date Votes Views
Join a Microsoft Teams meeting
author | 2020.09.22 | Votes 0 | Views 1800
author 2020.09.22 0 1800
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 1959
author 2020.09.19 0 1959
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 1724
author 2020.09.14 0 1724
How to Fix the Win­dows 10 We Could­n’t Con­nect to the Update Ser­vice Issue (2)
author | 2020.09.09 | Votes 0 | Views 2445
author 2020.09.09 0 2445
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 994
author 2020.09.02 0 994
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 1012
author 2020.08.25 0 1012
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 1306
author 2020.08.21 0 1306
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 1134
author 2020.08.21 0 1134
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 1266
author 2020.08.13 0 1266
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 932
author 2020.08.13 0 932