How to Create a Responsive Website

Best Practices > Step 2 - Template > How to create a "Mobile-friendly" website  >

How to Create a Responsive Website

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

A responsive website 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.

Click to expand/collapseHow to define breakpoints

One of the first things to think about, when designing a responsive website, is the range of breakpoints to include.

A breakpoint is a point along a reference line of various resolution values that indicates where the website's page layout must change to display at its best in the presence of a different screen resolution (remember that the screen resolution, or size, is given by the number of pixels that can be displayed horizontally and vertically, and it is the horizontal value that interests responsive websites - how wide the available display area is).

The diagram below may help clarify this mechanism. This example schematically represents the behavior of a website which has 3 breakpoints set up: the first at 960px, the second at 720px and the third at 480px.

The different colors represent the different template layouts, 3 breakpoints create 4 viewports. The viewports in the diagram are shown in different colors. The way a web page is displayed on screen changes at each breakpoint. The display remains basically the same for all the resolutions in the interval between one breakpoint and the next. The change of color in the diagram corresponds to the change of page layout in each new viewport. At resolutions of less than 480px, the website has a blue background. When the browser window reaches a width of 480px, the background becomes green. It remains green until the width reaches 720px, then it becomes yellow. When the browser window reaches the resolution of 960px horizontally then the background turns red.

How many breakpoints do you need? There isn't a single answer to that question: a lot depends on the characteristics of your website, its layout, the public it's aimed at, and so on. The best thing is to define as many breakpoints as the number of different screen sizes you think your public is likely to have on their various devices (PCs, large and small tablets, bigger or smaller smartphones, etc., without forgetting landscape and portrait orientations).

Most people tend to set up breakpoints on the basis of the varying screen sizes of the most common devices. WebSite X5 does the same and proposes the following breakpoints on the Reference Resolutions line:

960px: Desktop
720px: Tablet with landscape orientation
600px: Tablet con portrait orientation
480px: Smartphone with landscape orientation
Less than 480px: Smartphone with portrait orientation

What you should aim for is breakpoints that identify macro-categories: there are so many different devices available that it would be impossible to fix a breakpoint for each one. The Evolution edition of WebSite X5 handles 3 breakpoints; the Professional edition, on the other hand, can handle up to 10 breakpoints, including those associated with the Desktop and Smartphone viewports.

When you have pondered the breakpoints to set up, the procedure for creating a responsive website with WebSite X5 is as follows:

In Step 2, open the Resolutions and Responsive Design window and select the Responsive Site option.
Remain  in the Resolutions and Responsive Design and define the list of breakpoints to set up for the website, using the commands provided.

When you set up the breakpoints, you should remember that:

By default, all the breakpoints are set according to values taken from the graphic template you have chosen for the project.
All the breakpoints, apart from the Smartphone breakpoint which automatically assumes the value of the higher breakpoint, can be changed, using the Edit... button.
In the Evolution edition, you cannot delete the breakpoints that are there, or add new ones.
In the Professional edition, you cannot delete the Smartphone breakpoint but it is possible to delete the intermediate ones (with the Remove button). The Desktop breakpoint can be selected and deleted but the following breakpoint will automatically become the new Desktop breakpoint. There must be at least 2 breakpoints, one for the Smartphone and one for the Desktop.
In the Professional edition, you can add up to 8 new breakpoints (with the Add button), giving a maximum of 10, including the obligatory Desktop and Smartphone breakpoints.
The Smartphone breakpoint defines the minimum resolution under which the website will always have a linear display: all the objects are shown in a single column (respecting the order and choice of visibility made in the Responsive settings window) and, as with the page width, they occupy 100% of the available breadth.

All the breakpoints are listed in the summary table and repeated in the Responsive settings window

In the Evolution edition you are asked only to define the Smartphone breakpoint, but in the Professional edition, you can define up to 10 breakpoints, including the default Desktop and Smartphone breakpoints. If you use the Professional edition to open a project that has been created with the Evolution edition, the Smartphone breakpoint will be maintained and others can be added.

Click to expand/collapseHow to define the template

If you think about how a website is displayed on different devices, you'll realize that the graphic template needs to adapt itself too, so that the contents are always displayed in the best way on each device. As the screen resolution gets gradually lower, there may not be enough room to display some parts of the template and so you may prefer to remove those which are less important.

In WebSite X5 you can work on the template to indicate how this is to change in the various viewports, between the active breakpoints.

After deciding whether to use a default template, a custom template or create your own, go to the Resolutions and Responsive Design window, select to create a Responsive Website and set up all the breakpoints you wish to handle.
Still in Step 2, go to the Template Structure window.
Use the Responsive Bar to select the Desktop viewport and use the available options to specify how the template must appear in this viewport and, consequently, in the corresponding resolution interval.
The Responsive Bar displays all the intervals which result from the breakpoints set up in the Resolutions and Responsive Design window. When you have defined the template for the Desktop viewport, select the next interval on the Responsive Bar and make the necessary changes to the template.
Follow this procedure for all the intervals in the Responsive Bar, making the appropriate changes to the template for each one.

When the template layout has been defined, you can customize the header and footer: these sections may also vary according to the resolution the website is displayed at.

In Step 2, go to the Header and Footer Content section. Because you are working on a responsive website, the Responsive Bar also appears in this window.
Select the Desktop viewport interval on the Responsive Bar and create the template's header/footer.
Select all the intervals in turn on the Responsive Bar and make the necessary changes to the header/footer for each one.

In each viewport, it is possible to

add new objects. The new object will be visible in the current and following viewports, but not in the preceding viewports (where it will be automatically hidden).
hide objects. To select an object, click on the Show/Hide Object button and indicate whether it is to be hidden only in the current viewport or in all subsequent viewports.
show previously hidden objects. Click on the Show/Hide Object button to open the menu and then click on Hidden Object Management. A new window opens where you can select the object to work on, from the list of objects, and select the Visible option.
change the position and/or size of objects. All the other object properties remain unchanged in all the viewports.

It may be that some objects are not completely visible in some viewports, first time round. They are automatically re-positioned, which means they are moved but not re-sized. You may find that some objects now overlap each other. Use the preview to check how the objects behave in the header and footer in the various breakpoints.

Remember that all the default templates in WebSite X5 are optimized for creating responsive websites: this means that a certain set of breakpoints is set up by default for each template and becomes active when you select the Responsive Site option in the Resolutions and Responsive Design window. You can change these default breakpoints as necessary.

The settings for the template's responsive behaviour are saved in the template file, and not in the project file. If you change the template and choose a different one from the list of default templates, a window opens where you are asked to indicate how you want to handle the change between the old and new templates.

Basically, this window warns you that the styles will be over-written and asks you to choose whether:

the breakpoints of the current template are to be maintained or whether you want to replace them with those of the new template,
you want to keep only the objects added to the current template in the header and footer, only the objects present in the new template, or all the objects in the current and new templates.
Click to expand/collapseHow to manage the content

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 (see How to create a page using the page layout table), 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.

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.

WebSite X5 guides you through the display order process: when you select an object, the borders of all the objects which could follow it in the display order are shown in red, so you know which ones you can and cannot put next in the order. The order of the objects that you decide for the desktop viewport is maintained for all the other viewports as well.

For further information, see How the Object Display Order works.

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.

For further information, see How to add line breaks and why you need them.

If you are using the Professional 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.      

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.

<%%EXTOGGLE>How to check a responsive website works using the offline preview

To check that a responsive website works properly before you publish it online, just have a look at it in the offline preview because this gives you all the tools you need to simulate page behavior in the various resolutions.

In Step 4 - Pages, after you have created the page and given it the necessary settings to make it responsive, click on the Preview button to display a preview of it in the Built-in browser.
The built-in browser displays a resolutions bar that shows all the breakpoints that have been set for the project. Click on one of the breakpoints in the bar to automatically resize the browser window to the corresponding resolution so you can check the page's layout. Alternatively, you can manually change the size of the browser's window to adjust the width and then check the page content layout.
If the page doesn't look right in the preview, click on the Show numbering button: the page contents are outlined, corresponding to the objects that have been added, and each one has its display order number shown. This makes it easier for you to work out where you need to intervene to obtain the desired result.

We suggest you check the preview of every page in each breakpoint to be sure that the website will work correctly when it is published online and on different devices.

 


Best practices:

-

How to create a "Mobile-friendly" website

-

How the Object Display Order works

-

How to add line breaks and why you need them