How to make your website responsive

How to make your website responsive

I would like to share some of my techniques on how to make your website responsive. This will improve the traffic of your site since most of the users nowadays browse your website using mobile/tablet devices and its good to view your website to have good reading experience in all your post and pages otherwise they will leave your website.

Here’s the DEMO

Step 1: Add META TAG code inside the HEAD tag.

     

Step 2: Add Media Query support for IE. Insert it inside the HEAD Tag

     

Step 3: After adding the codes above, its time to add media-query in your style sheets.
CSS for Laptop, Desktop PC’s etc with 1280px or less resolution

     /* for 1280px or less (for laptop, desktop pc) */
@media screen and (max-width: 1280px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}

}

CSS iPad Landscape, netbook, mini notebook with 1024px or less resolution

     /* for 1024px or less (for iPad Landscape, netbook, mini notebook) */
@media screen and (max-width: 1024px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}

}

CSS iPad portrait, tablets with 768px or less resolution

     /* for 768px or less (for iPad portrait, tablets) */
@media screen and (max-width: 768px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

CSS iphone, android devices, small tablet with 640px or less resolution

     /* for 640px or less (for iphone, android devices, small tablet) */
@media screen and (max-width: 640px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

CSS iphone, android devices, small tablet with 480px or less resolution

     /* for 480px or less (for iphone, android devices, small tablet) */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}

CSS iphone, android devices, small tablet with 320px or less resolution

     /* for 320px or less (for iphone, android devices, small tablet) */
@media screen and (max-width: 320px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 22px;
	}
	#sidebar {
		display: none;
	}

}

CSS for iphone, android devices, small tablet with 240px or less resolution

     /* for 240px or less (for iphone, android devices, small tablet) */
@media screen and (max-width: 240px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 20px;
	}
	#sidebar {
		display: none;
	}

}

You can write as many media query as you like depending on the resolution and style that you want, so you have the options on what content should be displayed in your website. The main reason of the media queries is to apply different CSS rules in order to achieve different layout so it would be easier to access in different devices.

Try this tool so you can preview your website in different devices, just enter your website url.
http://mattkersley.com/responsive/

Hope it helps! Ciao!

32% off New Product orders at GoDaddy.com! Expires 7/30/13.

Leave a Reply