Responsive Web Design Practices
There are many devices in use today with different screen sizes ranging from mobile phones and tablets to desktop devices. When you visit a website on different types of devices, you easily notice that the styling and layout may appear different. When viewing it on a mobile, there may be layout and style changes compared to when viewing on desktop devices. Regardless of the style differences, the content remains the same. Why does this happen? If the content of a website was to be rendered on a mobile the way it was on a desktop, due to the difference in size, this is lead to the content overflowing on a mobile in all directions, leading to frustration and a bad user experience. This is where responsive web design comes into play.
Responsive Web Design is a design approach to make websites fit and behave well on any screen size or device type. This approach gives any website the ability to alter or adapt its behaviour to best suit the device type and screen size being used to view it.
Components Of Responsive Web Design
There are three (3) main components of responsive web design:
- Flexible layout
- Flexible media
- Media queries
Flexible Layout
CSS Grid and flex are very useful properties used for web responsiveness. They both tell how the child elements behave inside a parent. The items in these containers expand and contract to fill the space in the containers.
By using flex, we make the items in the flex container either in the direction of a column or row. By default, flex has a direction of a row, ie arranging its items in a horizontal line.
.flex-container{
display: flex;
}
.flex-container{
display: flex;
flex-direction: column;
}
To alter the container to adapt to the screen size, flex-wrap can be used. The items may have specific widths and will be automatically layout according to the screen size.
.flex-container{
...
flex-wrap: wrap;
}Grid display, on the other hand, contains both rows and columns. Depending on the device size, the number of grid columns can be increased the wider it is and vice versa.
.grid-container{
display: grid;
gap: 2rem;
grid-template-columns: repeat(4,minmax(0,1fr));
}
Flex is used for creating one dimension layout while grid is used for two-dimensional layout. In terms of layout structuring, grid gives you more options to work with.
Flexible Media
When adding images, videos, or canvas to your website, setting the width and max-width is a good practice in order to avoid page overflow which causes a scrollbar to appear because the media item is wider than the page it’s being viewed on.
Setting the max-width of a media, an image for example, to 100% will allow the image to adjust to the size of any screen, encompassing the screen width. This will automatically make the image responsive on all devices. Max-width property is basically setting the image’s maximum width to the width it initially was. This means even when the screen is larger, once it reaches its original size, it stays there, and when the screen shrinks to lesser than the image's original width, the image adjusts to fit the screen size. The image doesn’t go larger than its original width.
img{
max-width: 100%;
}
In cases where you want the image to fit the screen even when the screen is greater than the image width, it is best to set the width property of the parent image to 100%, with the width of the image also at 100%. An important thing to note when setting the image width to the width of a larger screen is to provide a high-quality image so it doesn’t come out blurry.
.img-wrapper {
width: 100;
img{
width: 100%;
}
}
Media queries
Media query can be said to be the main component of responsive web design. It is a CSS function that styles or runs code on websites or applications based on a certain viewport, targeting a specific given rule.
The query usually includes a CSS at-rule(@media), a media type, and a media feature:
@media type and (feature: value) {
...
}Although different device sizes exists, there are some commonly used breakpoints(a width where a change in style is introduced) in popular CSS frameworks like Bootstrap, Tailwind, and Material UI, which caters to the most common screen sizes available.
These breakpoints include:
xs(extra-small, eg mobile):@media (min-width: 0){}sm(small, eg iPad, phablet, tablet):@media (min-width: 600px){}md(medium, eg tablet): @media(min-width: 768px){}lg(large, eg laptop):@media (min-width:1024px){}xl(extra-large, eg laptop, desktop, TV):@media (min-width: 1200px){}
These min-widths vary from framework to framework but the point remains that at any of these breakpoints, the styling changes to accommodate better behaviour of the page.
Media query is very essential to responsive design in the sense that mobile view and desktop view look entirely different for better usability and overall user experience.
In conclusion, a combination of all the responsive design practices mentioned above will not only result in user-friendly websites but also gives you cost-effective and a time-managed website. With responsive web design, you only get to manage a single website which removes the need for multiple websites with the same exact content, and also increases your website’s performance on all devices, leading to a better search engine ranking and more user engagement.
