In this blog post we see what all things we need to know/take care of while making responsive design. This blog will mostly be a collection of important css resources which you need to know when starting with responsive design.
Responsive design basically means the design of a webpage which modifies itself as per screen size, to offer best viewing experience as per the screen size. Usually when we talk of different screen sizes, we mainly mean width. As we use different devices like desktop, laptop, table, mobiles the width of the screen is one which has most effect on the design. Height already has a scrollbar so it doesn’t effect much, so when talking about responsive design we mainly look at how to adjust according to width.
Testing Responsive Design on Browser
Before going to details of css implementation, lets see how to test responsive designs in your browsers.
FireFox: Press CTRL + SHIFT + M , you will see a different kind of window where you can easily resize the width/height of the page. You can easily test responsiveness of your design from here.
Chrome: Right click and do Inspect Element, and then follow as shown in attached screenshot
Device View Port
Device view port is another important setting which needs to be taken care of when working on responsive design.
“A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page’s width and scaling on different devices. ”
The most recommended view port setting is below, which needs to be added inside your
tag[html]
<meta name=viewport content="width=device-width, initial-scale=1">
[/html]
You can read more about it here
https://developers.google.com/speed/docs/insights/ConfigureViewport
% Based Width
We discussed above that width is the major factor to keep in mind when doing responsive design. So for our design to adjust as per screen size, the first important thing is to use width’s in percentage. It kind of a thumb rule in responsive design for width to % based width instead of fixed width. e.g
[css]
.container{
width:100%;
max-width:980px;
margin: 0px auto;
}
[/css]
So above with a combination of max-width and width we are able to make the width 100% but to maximum of 980px
Image Tag In Responsive Design
The images which we use in our design also need to be responsive. As we change screen size the image should also resize itself. To do this we should apply below css to all image tags
[css]
img{
width: 100%;
height: auto;
}
[/css]
This changes the image width as per screen size and height also reduces/increase as per aspect ratio.
You can also add max-width in case you don’t want the image to stretch beyond a level.
Fixed/% Based Width
As we discussed above, we should consider giving width’s in % when doing responsive design. But there are many cases when this is not possible.
Maybe our design requires that in large screen the width should be fixed and in small screen it should be % based.
For cases like this we need to use @media queries in css. With @media queries we can specify conditional based CSS on screen width. So basically if the screen width is more than 980px then which css should run, and if screen width less than 640px which css should run etc.
Here are few good links you can go through to understand @media queries
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There is another important concept of having a fixed width column and dynamic column together which you can go through here
Box Sizing
Another important thing while doing responsive design is box sizing.
You can read about it in more details here https://css-tricks.com/box-sizing/
Responsive Design Common Design Patters
One of the most common design pattern in responsive design is with top navigation.
Top Menu Design when screen is large screen
Top Menu Design on Small Screen
In Large screen the menu is very big and in small screen we usually see the 3 dash menu icon.
The trick to implement this is quite simple, you need to have two menu already prepared in your page, the large menu and small menu. Using media queries you simply toggle the small menu when screen size is small and same for large menu. If you try to implement this using a single menu and change design dynamically using media queries, it might become impossible. The best way is to have two menu and show only one depending on screen size.
Responsive Design Using Javascript
There are many instances when we require the help of javascript to make a design responsive. For you need to use the resize event to handle, this is used mainly in mobile to handle screen rotation i.e portrait/landscape.
But is highly recommend to use @media queries, use jquery only when you are not able to do it via @media queries.
[js]
jQuery(document).ready(function(){
if (jQuery(window).width() < 900) {
jQuery(".top-menu").css("display", "none");
}
});
jQuery(window).resize(function () {
if (jQuery(window).width() < 900) {
jQuery(".top-menu").css("display", "none");
}
});
[/js]
Fonts In Responsive Design
Fonts are another important thing when working on responsive design. In a standard design we would use ‘px’ to specify font size, but when working on responsive design ‘px’ doesnt work.
The problem with ‘px’ is, if we mention font size to be 16px that means the height of a single letter would take 16 pixes in screen. Each pixel is a small dot in the screen. Depending on your screen resolution the size and pixel density may vary, e.g iphone retaina display has a very high pixel density so 16px would look very small on that screen.
Pixels, ems, rems and Media Queries
The best way to implement a responsive font size is to use media queries along with fixed-size text, using ems, rems and px values:
px values specify the height of the letters in CSS pixels
em is relative to parent’s font size, eg. 2em = 28px if parent element’s font-size is 14px.
rem (root em) is relative to the html element’s font-size. 1 rem measures the same through the whole document. ems get hard to maintain in rules nested too deeply, but rems have no problem.
The best way to use ems and pixels is to specify a pixel font-size for the html element and use ems and rems for the rest. There are several reasons to do it this way:
The CSS is easier to mantain. Increase the html elements font-size and all the text gets larger. Using pixels would require to change each rule.
Using media queries gets easier for the same reason. You don’t have to change each rule, just the html element and fine tune what’s necessary.
Some browsers (IE8 and below) do not allow resizing fonts set in pixels. Users won’t be able to increase the font size in those browsers.
How to actually make the font size responsive? This is where media queries come in. If you are using ems, simply change the html font-size as necessary and fine tune the details. For example:
[css]
html {
font-size: 20px;
}
.unbehaved-element {
font-size: 2em;
}
@media(max-width: 1580px) {
html {
font-size: 18px;
}
.unbehaved-element {
font-size: 1.9em; /* Fine tune unbehaved elements */
}
}
@media(max-width: 980px) {
html {
font-size: 16px;
}
}
[/css]
Line Height In Responsive Design
There is another important properly line-height which needs to be adjusted in responsive.
You can read more about it here https://css-tricks.com/almanac/properties/l/line-height/