Resolutions and Responsive Design

Step 2 - Template > Customization >

Resolutions and Responsive Design

Previous pageReturn to chapter overviewNext page

With the number of mobile devices around continually on the increase and more and more people preferring them to access the Internet, before you start creating a website, you should carefully consider the public you are aiming at to decide whether it should be designed primarily for desktop use or if it should cater for navigation from all types of device. A website whose layout and contents can adapt automatically to the size of the screen of the device it is displayed on (desktop, tablet or smartphone) is known as responsive.

You don't have to create a responsive website, although this is the recommended solution. In  some cases, you may feel that, for your project, it would be best to create two versions of the website, one for desktop and one for mobile devices. In other cases, it may be sufficient to take advantage of WebSite X5's optimization facilities that exploit the browsers' capacities to zoom pages so that they can be displayed on mobile devices.

For more information, see How to create a "Mobile-Friendly" website

In this section, you can define the kind of website you want, which may be:

Desktop Site: the website will be optimized for Desktop display: if it is displayed on a mobile device, the layout and contents will not change and the user may have to zoom in and out with the browser.
Responsive Site: the website will be optimized for display on all devices, from desktops to smartphones, to give the user the best possible view of the contents, whatever device is being used.

If you choose to create a Desktop Site, you must specify the:

Site Resolution: this indicates the width of the website pages in pixels. The default value varies according to the chosen template but, in all cases, it can be changed.

The default value of the Site Resolution is calculated for optimized viewing at a resolution of 1024x768 pixels.

If, on the other hand, you decide to create a Responsive Site, you need to indicate the breakpoints.

A responsive website can be displayed on a number of devices that have differing screen sizes (resolutions). A breakpoint is a point at which, in the range of these varying resolutions, the website's page layout changes in some way to adapt its display to a different resolution (screen size).

To help clarify this concept, the window below shows a diagram which arranges the main device types in sequence.

Click to expand/collapse

The breakpoints that correspond to the reference resolutions, which are commonly used for each device, are shown on the Reference Resolutions line:

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

Immediately below this line you can see the Selected Resolutions line that shows 3 breakpoints that are defined automatically when a new project is opened:

Desktop: this breakpoint indicates the size over which the website is always displayed in the desktop viewport.
Intermediate: this breakpoint allows for a more fluid passage from the desktop viewport to the mobile viewport.
Smartphone: this breakpoint sets the minimum resolution under which the website display will always be linear.

By default, the resolutions associated with these 3 breakpoints are automatically set according to the current template.

On the Selected Resolutions line, the segments between two breakpoints, that correspond to the viewport intervals, are shown in different colors. For greater clarity, the same colors are used for the icons in the table in the Responsive settings window and on the Responsive Bar in the Template Structure window and in the Browser that is used to display the website previews.

The breakpoints are displayed on the Selected Resolutions line and they are also listed in a table with the following items:

Breakpoint: all the active breakpoints for the project are listed in this column. A breakpoint indicates the resolution value at which the website's page layout must change to adapt to a new screen size. Each breakpoint is identified by the resolution at which it becomes active.
Viewport: all the viewports that are determined by the breakpoints are shown in this column. A viewport corresponds to a specific layout for the website. In the table, each viewport has a colored dot next to it: the same color appears on the Selected Resolutions line, along the segment that corresponds to the interval that the viewport applies to. For greater clarity, the same colors are used for the icons in the table in the Responsive settings window and on the Responsive Bar in the Template Structure window and of the Browser that displays the website previews.
Intervals: this column shows the intervals (the range of resolution values) between two consecutive breakpoints for which the relative viewports are proposed. The interval for the Desktop Viewport is not between two breakpoints, but is generically defined as greater than the highest breakpoint.

You can use the commands alongside the table to work on the suggested breakpoints and resulting viewports:

Add: this adds a new breakpoint and indicates the resolution at which it becomes active. You can have a maximum of 10 breakpoints.
Edit...: use this command to change the resolution of the selected breakpoint.
Remove: this deletes the selected breakpoint. Although the Smartphone breakpoint cannot be deleted, the Desktop breakpoint can be selected and removed but, in this case, the next breakpoint automatically becomes the new Desktop breakpoint. When a breakpoint is deleted, all the settings associated with it (set in the Responsive settings window) are applied to the lower breakpoint. There must be at least 2 breakpoints, one for Desktop and one for Smartphone.

The Professional edition offers more freedom in managing breakpoints as you can have up to 10, including those associated with the Desktop and Smartphone viewports.

It's difficult to decide in advance how many breakpoints will be needed: the important thing is to set up breakpoints so that you create macro-categories that cover all possible cases and guarantee satisfactory navigation on all devices.

Let's take, for example, a website which has a template that is 960px wide. The table shows the 3 default breakpoints which determine 4 intervals, corresponding to 4 different viewports:

Breakpoint: 960px - Viewport: Desktop - Interval: Greater or equal to 960px

For resolutions that are higher than the Desktop breakpoint,  the template for the Desktop viewport is used (defined in the Template Structure window) and the contents are organized according to how the pages have been created in Step 4 - Pages.

Breakpoint: 720px - Viewport: Viewport 1 - Interval: Between 959px and 720px

For resolutions between the Desktop and Intermediate breakpoints,  the template adapts according to the settings given for this viewport in the Template Structure window. In this case, the width of the Page Contents is set at 720px but the browser window may reach 959px and the excess space is occupied by the Page Background. The objects in the pages are arranged as in the previous interval, corresponding to the desktop viewport.

In the Professional edition, this breakpoint can be changed or deleted and, unlike the Evolution edition, the objects in the page are arranged according to the settings for this viewport in the Responsive settings window.

Breakpoint: 480px - Viewport: Viewport 2 - Interval: Between 719px and 480px

For resolutions between the Intermediate and Smartphone breakpoints, the website is linearized: this means all the objects are displayed one above the other (respecting the settings for their order and visibility specified in the Responsive settings window). As for the previous interval, the template assumes the settings given for this viewport in the Template Structure window: the width of the Page Contents is set at 480px but the browser window may reach 719px and the excess space is occupied by the Page Background.

In the Professional edition, this breakpoint can be modified or deleted and, unlike the Evolution edition, the objects in the page are not linearized but arranged according to the settings for this viewport specified in the Responsive settings window.

 

Breakpoint: 0px - Viewport: Smartphone - Interval: Less than 479px

The website continues to be linearized for resolutions that are lower than the Smartphone breakpoint. The template appears according to the settings for this viewport given in the Template Structure window and the page width is set as a relative value, and not absolute, so that it always occupies 100% of the available space. In linearized sites, the objects are all displayed one above the other (respecting the order and visibility settings specified in the Responsive settings window) and they are also set up to occupy 100% of the width.

This breakpoint is also displayed in the Professional edition, but it cannot be either modified or removed.

If you create a project with the Evolution edition and set it as a responsive website, then you open it with the Professional edition, all the breakpoints that were initially set are maintained. When you work with the Professional edition, you can set new breakpoints and/or change the existing ones.

When you start a new project, the program applies a randomly-chosen default template to it: this template is maintained until you choose to apply a different one.

 


Best practices:

-

How to create a responsive website