Step 2 - Template > Resolutions and Responsive Design

With the widespread use of smartphones and tablets, most users now access websites from mobile devices. For this reason, when designing a new website, it is essential to plan from the start a structure that can automatically adapt to different screen sizes.

A website in which layout and content dynamically adapt to the device used (desktop, tablet or smartphone) is defined as responsive. This approach makes it possible to provide an optimal browsing experience in any context, improving both usability and search engine visibility.

Through the sections of this window, you can make your website responsive by managing breakpoints and the necessary settings. The available commands are organized into the following sections:

▪	Breackpoint

▪	Text and margins

In most cases, creating a responsive website is the recommended choice. Only in specific situations should you consider creating separate versions for desktop and mobile.

WebSite X5 provides all the necessary tools to design responsive websites in a simple and controlled way, allowing you to adapt layout and content to different breakpoints. For more information, see Responsive Design. How do you create a responsive website?ow to create a Responsive Website

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

▪	Responsive Site: èthis option is enabled by default. The website is optimized for viewing on any type of device, from desktop to smartphone, in order to provide users with the best possible experience regardless of the device they use to browse.

▪	Desktop Site: the website is optimized for desktop viewing. This means that on mobile devices the website is displayed in the same way as on desktop: layout and content are not adapted based on resolution but simply zoomed by the browser.

If 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.

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 in 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 Pro 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.

If, on the other hand, 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.

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 Pro edition, this breakpoint can be changed or deleted and, unlike the Evo 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 Pro edition, this breakpoint can be modified or deleted and, unlike the Evo 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 Pro edition, but it cannot be either modified or removed.

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

If you choose to make the website responsive, the commands in this section allow you to manage how text and margins behave, so that their size is reduced proportionally to the available display space. The goal is to ensure optimal readability and spacing management in all situations.

First, you need to enable the option Enable automatic reduction of text and margins. In this way, the program automatically adjusts some key aspects of the layout, such as: text size, line spacing, letter spacing, text distribution, margins and spacing.

Once this is done, you can adjust the following options:

▪	Maximum reduction factor (%): sets how much text and margins can be reduced when moving to lower resolutions. It is expressed as a percentage of the original value.

▪	Minimum text size (pt): sets the minimum size in points below which the text cannot be reduced, ensuring good readability at all times.

Automatic optimization is applied to the main elements of the website, including:

▪	template texts and typographic styles;

▪	page and section titles;

▪	text content of Objects (Text, Blog, Products, etc.);

▪	margins and spacing of objects and sections.

Read the guides:

-	Responsive Design. How do you create a responsive website?
-	Breakpoint. How do you correctly set the resolutions of a responsive website?
-	Text and margins. How do you automatically optimize readability and spacing in responsive web pages?