Mobile First Starter Pack

This is it. You’ve found it. The simplest most succinct mobile first starter template on the infonet today. Are you ready? Are you sure? Okay. Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<!--[if IE 6 ]><html lang="en" class="ie6 "><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7 "><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8 "><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9 "><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--[endif]-->
<head>
	<link rel="stylesheet" href="style.css" />
	<!--[if (lt IE 9) & (!IEMobile) ]>
		<link rel="stylesheet" href="ie-reset.css" />
	<![endif]-->
</head>
<body></body>
</html>

Wow. What about the CSS?

1
2
3
4
5
6
7
8
9
10
/*mobile: base layout given to all*/
body {background:url(iphone4-bg.png);}
 
/*desktop-media-query*/
@media only screen and (min-device-width:961px) {
 
/*all your iefixes go in this file too!
.ie6 body * {zoom:1;}
 
}

So what’s with that ie-reset.css stylesheet?

That’s the one compromise. It seems a reasonable concession to us. Do yourself a favor, and maintain a one-way relationship between the contents of the desktop media-query to the ie-reset stylesheet. Then you just copy > select all > and paste. It’s a pain, but way better than the alternatives.

What about *allthatsh!t* you didn’t include?

It’s true. You’re right. I didn’t include html5.js or modernizer or the no-js classname on the html tag. I know, I should die the firey hot death of a thousand suns. I also didn’t include a title tag. Or yepnope. Or a css reset. Or microjs.com references. GA code with the async hotness. Or the apple save-to-home-screen icon reference. Or the favicon – how could I omit the favicon link?! Or the charset meta tag. Or the title and description meta tags. I am a d-Bag. Or what about JqUERY!? Or markup in the body tag! All of which (sans modernizr and jQuery) are all in my personal starter pack.

Maybe if people get all angry and hateful, I’ll post the proper files on github.

But for now this demonstrates the technique.

  1. Deliver mobile style information.

  2. Augment for desktop via media-queries.

  3. And copy and paste to fix IE.

Done, done, and done. Srsly, that’s all there is.

Go as crazy as you wanna with different resolution (grouped) fish-ladder steps. You’re welcome internet. Back to building fun things.