Compatibility:
WebSite X5 Evo and Pro
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.
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.
3 breakpoints create 4 viewports. 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.
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 Resolutions Reference line:
- 960px: Desktop
- 720px: Tablet with landscape orientation
- 600px: Tablet with 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:
- 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 change, using the Edit button.
- In the Evo edition, you cannot delete nor add the breakpoints.
- 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 have up to 10 breakpoints (with the Add button), including the obligatory Desktop and Smartphone ones.
- 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 width.
All the breakpoints are listed in the summary table and repeated in the Responsive settings window.
#tip - 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.