How to make your website responsive?
You may read the previous article What is Responsive web design?
Viewport meta tag
Making the website responsive across all devices might sound intimidating in the beginning but you will find it at ease as you go along. We may use media queries to make our website responsive but to make it work we must use the viewport meta tag.
The viewport meta tag helps to control the width and scale the browser.
The width = device-width is applied so the website matches the screen’s width. We can also mention a specified width like, width=”800”. The website will adapt to that specified width.
Initial scale =1 is used to fix scaling factor of the webpage. It prevents the default zooming of the page. Using this parameter, responsiveness of the page work.
Maximum-scale defines the maximum scale it can be zoomed in. Maximum-scale=1 is the maximum-limit and it won’t allow the user to zoom.
User-scalable =1 refers the users zooming in and out of the web page. If you want to disable zooming you can specify user-scalable=”no”.
What is a breakpoint?
Breakpoints are specified width up to which the rule should obey. It is always advisable not to write rules based on device and prefer width specific ones.
Media query
@media is used to declare rules and the conditions like screen width, orientation are specified in the statement. An example of the rule is
@media screen and (min-width: 1024px) and (orientation: landscape) { }Difference between min-width and max-width:
body{
font-size:14px;
background-color:#fff;
}
}
@media screen and (max-width:767px){
p{
font-size:14px;
}
}
Min-width applies the rule from 0 to maximum width.
Max-width applies the rule from 0 to 767px and not beyond that.
How to choose breakpoints?
For choosing breakpoints and writing @media rules for responsive screens we are diversifying our approach into two. The classification is decided based on the design flow.
- Mobile first approach
- Desktop first approach
Mobile first approach:
If you have chosen mobile first approach flow, you can use min-widths for media queries.
@media screen and (min-width: 320px) {
/* defaults styles will target mobile devices first */
}
@media screen and (min-width:480px) {
}
@media screen and (min-width:991px) {
}
Desktop first approach
If you design for desktops first and take it to mobile screens max-width is preferred. The style sheet will look like,
body{
/*default styles will apply for desktop screens*/
}
@media screen and (max-width:1199px){
}
@media screen and (max-width:767px) {
}
@media screen and (max-width:480px) {
}
Orientation of the device
When making responsive, orientation of the device is another factor to be considered. If the user is viewing in portrait or landscape mode in nay device, the site should render fine.
@media screen and (orientation: landscape) {
.grid-column{width: 50%;}
}
@media screen and (orientation: portrait) {
.grid-column{width: 100%;}
}
It is always advisable to go for minimum lines of CSS rules and plan our designs and code base accordingly
We can make use of Chrome Dev Tools, for making the site responsive. There are numerous options provided. Device mode option in Chrome Dev tools renders an approximate look of the web page in the devices.
Apart from making it responsive across all devices make sure that your site is also mobile friendly?
To summarize,
Comments
Post a Comment