How to set breakpoints for a Responsive Website

2020-07-16 19:38
Modified on: Thu, 5 Sep, 2019 at 5:15 PM


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.

Total Reply 0

Total 104
Number Title Author Date Votes Views
Join a Microsoft Teams meeting
author | 2020.09.22 | Votes 0 | Views 3174
author 2020.09.22 0 3174
How to delete songs and albums from your Google Play Music library
author | 2020.09.19 | Votes 0 | Views 3349
author 2020.09.19 0 3349
Watch Prime Video on Chromecast
author | 2020.09.14 | Votes 0 | Views 3353
author 2020.09.14 0 3353
How to Fix the Win­dows 10 We Could­n’t Con­nect to the Update Ser­vice Issue (2)
author | 2020.09.09 | Votes 0 | Views 4158
author 2020.09.09 0 4158
IONOS Joomla! Standard Installation
author | 2020.09.02 | Votes 0 | Views 2100
author 2020.09.02 0 2100
How to improve the life of a Battery: (1)
author | 2020.08.25 | Votes 0 | Views 2135
author 2020.08.25 0 2135
Laptop battery not charging
author | 2020.08.21 | Votes 0 | Views 2440
author 2020.08.21 0 2440
Plugged in, not charging (1)
author | 2020.08.21 | Votes 0 | Views 2250
author 2020.08.21 0 2250
How to add reCaptcha plugin to a custom form on my WordPress website?
author | 2020.08.13 | Votes 0 | Views 2432
author 2020.08.13 0 2432
I can't log in to the WordPress admin dashboard after installing and activating Limit Attempts plugin
author | 2020.08.13 | Votes 0 | Views 2105
author 2020.08.13 0 2105