If you have old sites built with tables running, then its time to wake up and convert those pages to “responsive”. The share of mobile browsers is catching up and is almost 40% to desktops and also Google penalizing sites which are not responsive yet. If you happen to use firefox, you can have a preview using the developers responsive design view.
Here are some of the easiest and cool tips for you to make responsive.
The first line of code to get started with responsive design is to be placed in the head section of the page. You must start with Responsive Header, placing this code inside the head of html page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Responsive Images
You can convert all images scale up and down to different screen width and heights.
.img {
max-width: 100%;
height: auto;
}
Use % in Padding and Margins
When it comes to responsive, forget about setting paddings, margins using em, px. Its time to use %
margin-left: 5%; margin: 3% 5%;
In smaller screens like mobile browsers, assuming the screen width is 300px, then 5% of 300px is 15px, similarly on larger screens of 1600px, then 5% is 90px. If you dont set in %, then the content appears too narrow.
Another approach is to use measurements vw, vh (virtual screen width, virtual screen height).
l-box {
padding: 2vw;
margin: 3vh;
}
Font Size Scaling
You can set responsive font sizes using %, vw, vh. Using % works best, sometimes font-sizes specified using vw or vh appears too small in small mobile devices. You can get around this issue by creating a new media query targeting small devices and specifiying a constant font size.
font-size: 100%; font-size: 120% font-size: 1.7vw;
Vw is another trick to use instead of %, as specifiying vw automatically scales up or down all screen content. Assuming you have set the default font size
body { font-size: 1em; }
content { font-size: 2vw }
Responsive Form Elements
Pay attention to form elements like text boxes, text area and buttons and make them responsive.
input, textarea, select, checkbox { max-width: 90%; }
Fixed width Responsive Container
If you have a fixed width container in pixels, here is a small snippet of code to set the container responsive adjustable to screen width.
.container {
width: 800px;
max-width: 90%;
}
Responsive Videos
You can stretch youtube videos to the width specific height using the iframe code. Just set width to 100%
<iframe width="100%" height="315">
Responsive Google Maps
You can set the width of google maps stretch automatically by setting the iframe width to 100%. It should be responsive. Of course you can modify the height to whatever you want. Remove the fixed width in pixels and set it to 100%;
<iframe width="100%" height="450" frameborder="0" style="border:0" allowfullscreen
Convert Tables to Responsive
You can convert tables to responsive ones, using a simple media query
@media (max-width: 400px) {
td {
float:left;
display:block;
}
}Codepen: http://jsfiddle.net/RnmLF/1/
