Introduction
Imagine having to eat from your small plate with a big cooking spoon, or trying to navigate a big ship on a small body of water. That is what it looks like when we build websites that are not responsive and adaptive. In this article, we will be discussing responsive web design and how we can achieve it when building websites. Without taking much time, let's get started.
What is Responsive Web Design?
Responsive web design is a web design technique that allows websites/web apps to adjust their layout, and display content according to the size of the viewing screen and the orientation of the device being used to access the website. As frontend developers, one thing we should keep in mind is that majority of the users who will be using our websites, use their mobile devices, hence, when developing websites, we should develop them (the websites) keeping in mind that we are to build for a variety of screen sizes and orientation.
How can we make our web design responsive?
Responsive web designs can be achieved by following some set of patterns when developing and putting some implementations in place. These patterns and implementations include but are not limited to the use of fluid layouts, flexible/responsive images and the use of CSS media queries.
Below is an explanation of how we can achieve the aforementioned patterns and implementations:
Use of fluid layouts: In web design, fluid layouts are the use of relative measurement. Yes, it is as simple as that. It is the use of measurements that are relative to a particular value or entity. Examples of this are using measurement values like percentage (%), view widths and view heights. These measurement values are relative either to the size of the viewing device or the container/parent for the element being styled. This will ensure that when a change of size in the viewing device is detected, the styles are adjusted appropriately and the element adapts to the new screen size. Fluid layouts can save us a lot of stress and time when it comes to responsive design.
Flexible / Responsive Images: This is the use of images that adjust their size based on the width of their container. This can be achieved by using the min-width and max-width properties in CSS. An image with a max-width of 50%, will not take up more than 50% of the container no matter the size of the container. This technique works better when combined with fluid layouts.
Media queries: Media queries are CSS rules that allow you to style web pages, based on the device type, shape, size or orientation. It allows us to create responsive designs that adjust and adapts to different screen size, resolution and orientation and even color schemes in some cases. You can choose what and what not to display on your website, how you want them to be displayed for different screen sizes/orientations and many more using media queries. To build websites/web apps that display nicely and correctly across devices varying in size and shape, we will need to use media queries for our CSS.
There are 2 major approaches to writing media queries, which are the mobile-first approach, and the desktop-first approach. I'll be creating a future article dedicated to media queries and I say you watch out for it
Benefits of Responsive Web Design
Better user experience
Easy code maintenance
Cost-effectiveness
Increased user traffic
Decreased bounce rates
Conclusion
Websites should be accessible and look pleasing to the eyes no matter the device we are using. This is the goal of responsive web design; to develop websites that look good across any device it is viewed on. We should aim to make our website as responsive as possible and I hope this article has done justice to what responsive web design is and how it can be achieved.
I hope to see you in my next article and till then, stay cool and keep building devs.