How to Make a Website Mobile Friendly and Responsive

On: March 30, 2012   By: Travis Millward   In: Apple , Django , OS X , Web , Web Development , Web Usability

This is how to make your website mobile friendly and what is known as responsive. Also known as Responsive Web Design.

Do this.

Add this to the <head> tag:



< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no"/ >
	
< link media="handheld, only screen and (max-width: 1024px), only screen and (max-device-width: 1024px)" href="PATH_TO_CSS/mobile.css" type="text/css" rel="stylesheet" / >

If you don't want the mobile style sheet to take over when the window (or viewport) is 1024px wide, just change the values to when you want it to take over...

MAX-WIDTH is when your computer screen will let the style sheet rules apply and

MAX-DEVICE-WIDTH is the width that your iPad or iPhone will let it take over at.

So you could have different style sheets for horizontal and vertical modes on your iphone, ipad, android, etc...

Now all you need to do is create a mobile style sheet (mobile.css). This is what mine looks like for this site.


#nav ul li {
	float: none;
}
#header .inner {
	width: auto;
}
#nav ul {
	width: auto;
	margin: 0;
	padding: 0;
}
#nav ul li {
	margin: 0;
}
#content .inner {
	width: auto;
	padding: 10px;
}
img {
	max-width: 100%;
	height: auto;
}

#why #nav ul #why-page a,
#pricing #nav ul #pricing-page a,
#contact #nav ul #contact-page a,
#clients #nav ul #clients-page a,
#blog #nav ul #blog-page a,
#print #nav ul #print-page a
{
	color: #fff;
	background: #000;
}

textarea {
	max-width: 75%;
}
.fLeft, .fRight {
	float: none;
}
* {
	width: auto !important;
}



#topper #see {
	float: left;
	width: 25% !important;
}
#topper #em {
	width: 25% !important;
}
#topper #why {
	width: 25% !important;
}
#topper #kay {
	float: left;
	width: 25% !important;
}


#blog-body {
	float: none;
	width: auto !important;
	margin: 0;
}

#blog-side-nav {
	float: none;
	width: auto !important;
	padding: 10px;
	font-size: inherit;
}

Mainly I just disabled a bunch of floating elements and things that were statically sized

width: 1000px;
I changed to 
 width: auto; max-width: 100%;

 

That was really useful for things like images such as my header image.

So after you put this code in, resize your browser. Make it skinny make it wide.. Test it out!

Go ahead! try it out right now on this site, make your browser wide, then make it skinny. Cool eh?

Posted in: Apple , Django , OS X , Web , Web Development , Web Usability