What is responsive design?
Responsive web design is an approach to website design and development that provide users with good viewing experience no matter what type of device they’re using. With responsive design, the same HTML code is served regardless of users’ device, but renders differently based on the screen size. There are few other approaches to provide specific user experience for different type of devices, such as dynamic serving, which can be useful in certain case. However, the responsive approach is recommended in general.
Why should we use responsive design?
TL;DR. You want to provide your users with the best user experience to delight your users.
As more and more devices can be used to surf the Internet, making your site responsive becomes increasingly important. Web traffic coming from mobile device has exceeded desktop due to its convenience and faster cellular speed. As a result, making your site mobile-friendly is a must, not to mention that Google has put more weight on mobile friendliness and ranks those mobile-friendly sites higher vs. ones that are not for mobile search.
How to make your site responsive
Set the view port<meta name="viewport" content="width=device-width, initial-scale=1">
Setting this meta tag instructs the page to match the screen’s physical width. For example, the screen width for iPhone X is 375px. Without it, the mobile browsers render the page at a desktop screen width around 980px, which varies across devices. Thus it will render the desktop site with tiny font on it.
Size your content wisely
- DO NOT use large fixed width elements, it can go out of your viewport (eg. showing a 600px div on a 375px wide screen); Use relative width such as % or flex instead, together with min-width and max-width if needed
- FlexBox is your best friend most of the time, as it was designed to solve the complication with responsiveness; Grid is another good option too and it is getting better and better browser support, but worse comparatively
CSS media queries
@media (query) {
/* your CSS when the query matches */
}- Example
Responsive images
- Make sure to apply the following style to prevent your images overflowing the container
img, embed, object, video {
max-width: 100%;
}- There are more tools that you can use, such as srcset attribute in <img> tag or <picture> tag. For more details, please check Web Fundamentals about images.
Some extra tips
- box-sizing: border-box make using FlexBox a lot easier as the width you set includes padding and border width
- Use media query with only min-width is recommended (like the example above). With the one direction styling approach make your styles easier to read and manage, and results in less code in general. And it aligns better with mobile-first design approach.
Thank you for reading and hope this help
Special thanks to Web Fundamentals from Google which provides enormous valuable content of web development.
References:
