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:
|▪||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 Evo edition of WebSite X5 handles 3 breakpoints; the Pro 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:
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 Evo edition, you cannot delete the breakpoints that are there, or add new ones.|
|•||In the Pro 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 Pro 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 Evo edition you are asked only to define the Smartphone breakpoint, but in the Pro edition, you can define up to 10 breakpoints, including the default Desktop and Smartphone breakpoints. If you use the Pro edition to open a project that has been created with the Evo edition, the Smartphone breakpoint will be maintained and others can be added.