The concept of responsive web design using media queries is on the one hand very important and on the other hand challenging to implement. It is said that at least 50% of users currently access the Internet on mobiles devices. The small screen sizes on these devices means that their viewing experience is very different from someone using a laptop or desktop. Therefore the structure and design of a website needs to take into consideration how a site will render on small screens up to large screens so as to provide all users with a pleasant experience. However, with so many manufacturers and so many versions of their products available, there is no "one size fits all" solution.
CSS coding is used to address this. Using what are called media query breakpoints, browsers are given instructions on how to display a site based on different screen sizes. Using @media in the CSS stylesheet, changes to the main style are coded based on the pixel values coded. When a website reaches a given pixel value, the site transforms so the appearance of the site gives the best readability to the user. The two approaches to setting these breakpoints are:
- Breakpoints based on device
- Breakpoints based on content
Breakpoints based on device is not considered to be the best approach as there are so many possible options of screen sizes. However, as this approach is used, there are many common breakdowns given for extra small, small, medium, large and extra large devices and for the orientation of the browser. There are even common breakpoints available for viewing on TVs and Smart Watches. What is considered to be the easier and better approach is to base breakpoints on content. Whenever the content on a site looks misaligned, distorted or awkward, that is where a breakpoint would be inserted.
Since media queries are a responsive web design technique, it is good practice to design for Mobile First. A basic layout will look good on a small screen and load faster. Some site elements can be hidden from viewing on the small screens and enhancements can be added with media queries for larger screen sizes. One tip given was to define margins and paddings using em or percentage values instead of pixels as those will render seamlessly.
End users will just assume that a website will look good no matter which device they may view it on. To help developers see how their site may look on various devices, a number of sites are available that have tools to test how a site renders on different devices by entering the URL and selecting one of the listed devices.
Website sources for this review:
- devfacts.com
- browserstack.com
- w3schools.com
- responsivedesign.is
- lambdatest.com