Understanding resolution breakpoints
There are two essential techniques in making a website useful on all devices (computers, tablets, and phones). If a website automatically adapts to the device's screen size, it is responsive and/or adaptive. If you are curious about the difference between a responsive and an adaptive design, css-tricks.com has an article on the topic: The Difference Between Responsive and Adaptive Design
. Sitemagic CMS uses both approaches.
First, let's briefly cover the technical part. To make a website work on almost all screen sizes, Sitemagic CMS uses the following techniques:
- Relative units of measure for dimensions.
We use the em unit which is relative to the font size on the device, and % which is either relative to a font size,
the width of a container, or the width of the browser window.
- Resolution breakpoints are used to adjust the "weight" of the relative unit em to different common resolutions.
The video below demonstrates this perfectly in under 30 seconds. Take the video full screen to make sure you can see the details.
As the video demonstrates, some things are just responsive by nature - for instance the background image. Other things, such as the text size, can be adjusted according to different popular resolutions; resolution breakpoints.
What the General section of the Designer does, is defining what 1em meanins. If we take the example from the video, 1em is equivalent to 14px by default (Base text size). Underneath Base text size we have the different resolution breakpoints where we adjust the meaning of 1em on different resolutions. In the video we see that on mobile devices we want 1em to be 80% of 14px. On tablet we increase it to 90%, on Desktop we set it to 100%, and then increase it further on higher resolutions.
Now, all that is left is to make sure that we use the em unit when defining the size of different elements - whether that be the height of the menu, header image, or plain text elements, they should all mostly be defined with the em unit. The image below demonstrates this.
Notice how the size of the links in the drop down menu have a text size of 0.9em. This is equivalent to 90% of 14px as defined in Base text size. The Line height of the element is 2.2em, which is 220% of 14px, meaning the height of the link will be approximately 30px.
Now, how exactly do we use all this? The key here, is to not think much about it initially. Just make the design look great on your computer - and make sure to specify all dimensions and sizes in the em or % unit. Once the design is done, go to the General tab and resize the browser window to one of the resolution breakpoints. If elements within the page looks too big, simply reduce the font size by specifying a value below 100%. If elements are too small, specify a value greater than 100%.
These are the resolution breakpoints available, along with the screen width that activates them.
Below or equal to 500px
Below or equal to 900px
Greater than 900px
Desktop 1280 HD
Greater than or equal to 1280px
Desktop 1600 UXGA
Greater than or equal to 1600px
Desktop 1980 FHD
Greater than or equal to 1980px
Desktop 2560 UWHD
Greater than or equal to 2560px
Desktop 2800 QSXGA
Greater than or equal to 2800px
Desktop 3440 UWQHD
Greater than or equal to 3440px
Desktop 4096 4K
Greater than or equal to 4096px