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:

 

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.