Creating a responsive webpage

Having a responsive website is almost mandatory in modern web development. The way people view websites has changed. People use their phones and tablets almost more than their desktops and laptops. This means people will be viewing your site on mobile devices. Luckily, there are a couple ways to handle this. Javascript and jQuery are likely the most interesting and advanced way of handling this obstacle. However, if you want to keep things nice and simple with full functionality, simply use CSS3 media queries. Here is an example.

@media all and (max-width 560px){

div#nav{

height: 300px;

}

h2{

font-size: 80%;

}

}

This code will only execute on a screen of width 560px or less. With this you can easily fix the errors that occur on the mobile view without effecting your website on devices with a width larger than 560px. You can drag your browser's width to match your query and you'll see the code execute. You'll have to do various tests to find out at what page widths cause elements on your page to work incorrectly. Then, write a query to correct it and test to see if your correction was sucessful. You can use the chrome extension Mobile/RWD Tester to emulate different phone browsers from your computer. Using these tools, anyone who knows CSS3 can make a responsive website!