Whenever you create any website, you often see the desktop version of it, but what if someone sees it on a smaller screen size like a mobile phone or a tablet, in that case, the design and look of your website can drastically change.
The main idea behind Responsive Web Design is to make a website that can adapt to any device that is being used to display it. Not only on larger screen sizes but also mobile phones and tablets.
Most of the users that will visit your website will be using a mobile phone just quickly to go through it, so it becomes necessary for you to make sure your website looks fine in either case otherwise what will happen is your navbar will be going somewhere else, and your main section somewhere else, and at the end the user experience decreases drastically.
So, here are somethings that you should keep in mind while making any website so that it looks good no matter what the screen size is -
One and the most important thing, to begin with, is websites are responsive by default, it's you who makes them unresponsive. For example, you created a div added some text to it, no matter what the screen size is, it will automatically adapt to it. But the moment you add a definite width or height to it, it becomes restricted and thus looks good on some screens and ugly on others, and then what you do is apply a lot of breakpoints and make the code even messier, same goes with images and every other thing.
So now let's get started with what the things you should keep in mind while creating a responsive website -
1) Viewport
Viewport is the region within the browser that displays the webpage, the viewport changes with the change in screen-size.
If you don't apply the viewport meta tag or any other property, the mobile browsers will render the page at a desktop screen width, and then what will happen is the user will have to zoom in, zoom out to get a perfect fit and the site dimensions will vary from user to user, giving a bad user experience.
What you can do is apply this meta tag in your head tag,
<meta name="viewport" content="width=device-width, initial-scale=1">
Using this meta viewport tag will make the width=device-width to match the screen's width. This will make sure your content renders properly no matter its a mobile phone or a laptop.
2) The layout and flow
Now there are quite a few layout designs in CSS, and understanding the flow of your website and using the best-suited layout for it matters, you can go for a flexbox or a grid layout. Prefers not to use float as it can cause some side effects and then you have to clear and all that, but yeah choose the best layout for your site and design the website such that the elements can stack one after another on smaller screen sizes and you can get smooth user experience.
3) Relative Units
This is an essential aspect of responsive web design, the problem with units like pixels is that it is definite, doesn't matter you view it on a mobile or a laptop, the size will remain the same and its a negative point because 700 px width may be small for a laptop. Still, it won't fit on a mobile phone ever, and your content will overflow here and there.
So rather than using values in pixels try to use units like em, rem, vw, vh, % which are relative units and have a tendency to adapt to different screens for eg, vw that is viewport width is relative to viewport width of the screen that the website is being viewed on, so its a good practice to use units like these, but make sure you understand the basics of how these units work and where to use which, otherwise it can cause issues.
4) Breakpoints
Now, breakpoints are useful in most of the scenarios, but make sure you are using them when required and not unnecessarily using them here and there.
What you can do is define few media queries, and initially start with bigger breakdowns, open the chrome dev tools go to the device menu and there you can check the responsiveness of your website at a given width and height of the viewport, try to play around with it and find areas where your site is losing responsiveness and mark the breakpoints and apply this method till you get that perfect look on all screen sizes.
5) Mobile First or Desktop First
There is a great debate that goes on as to whether to use the mobile-first approach or the desktop first approach while building any website. I believe most of the people coming on your website will be going through your website in mobile so it's better to stick to a mobile-first approach website so that you get the perfect looking website on a mobile and then you can easily set the layout for desktop, and a lot of people say mobile-first is a better way of creating websites, but in some use cases the desktop first website may seem good and at last, it varies according to the project needs and your preference, but if responsiveness is your first priority, then the mobile-first approach will give better results.
6) Frameworks
Okay, so what if you are in a hurry, and you cant take all the pain of responsive websites from scratch? You can use a responsive framework like bootstrap, which works on the grid system or Bulma, etc.
You can use the pre-build components in bootstrap and can get started with a nice looking responsive website without any issue. But on a condition that you know how things work under the hood, for beginners, it is not advised to jump directly to frameworks until you have a solid foundation of CSS; otherwise, there is no benefit of using frameworks, and you will struggle with CSS afterward.
Well, that's it, there are a lot more things to responsive web design, but for a beginner level you can get started with these, and as you dive deeper into the concepts, you can learn many such more things ;)
If you liked this article, don't forget to follow me on Twitter, where I share my journey with the world.
My twitter handle - @thisisgarv
daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Top comments (0)