Scott Weisman

How I Made a Mobile Version of This Site

March 24, 2012

When I first looked into how to create a mobile website, it sounded easy. But it actually turned out to be a little harder than I expected. Here's how I did it.

CSS Media Queries

CSS Media Queries allow you to specify CSS rules for particular screen sizes. For example, if you want to set specific CSS rules for screens that are 480px or less (like iPhones), you could place those specific rules within the following CSS:

@media only screen and (max-device-width: 480px) {

}

As long as you put @media rules like this at the end of your CSS file, they will override your standard CSS when a mobile device with the specified width visits your site.

Single or Separate Stylesheet

You can either place your @media rules at the end of your existing stylesheet (as shown above), or use a separate stylesheet. To use a separate stylesheet, your HTML needs to specify when each stylesheet should be used.

<link rel="stylesheet" type="text/css" media="only screen and
(max-device-width: 480px)" href="mobile-device.css" />

If you use the separate stylesheet method, the browser will rely on the HTML to direct it to the correct stylesheet for the device. Therefore, you do not need to specify the @media rules within the stylesheet itself.

A good rule of thumb is to use separate stylesheets when you are building a more complex mobile site. The mobile version for this blog is very simple, so I just specified @media queries within my existing stylesheet.

Set Viewport

Whether you put your mobile CSS within your existing stylesheet or keep it separate, you should specify a viewport width in your HTML. To do so, put the following meta tag in your <head> tag:

<meta name="viewport" content="width=device-width" />

Testing Mobile Layouts

Testing mobile sites can be a pain. Typically, you would need to commit changes to your live site and then visit the site on your phone to see how everything looks. Fortunately, there's a better way to do this.

ProtoFluid is a tool that lets you preview your changes on various mobile devices right in your browser. ProtoFluid is only about $7 for unlimited use. They also offer a free trial.

To use ProtoFluid, download the most recent .js file and follow the documentation to include the .js file in the <head> of your HTML. Don't forget to also download and specify jQuery. The <head> of your HTML should look like this:

<script type='text/javascript' src='/js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='/js/protoFluid3.02.js'></script>

Next, you also have to make a slight adjustment to your media queries by adding max-width. This allows ProtoFluid to simulate what the mobile version will look like. Your media queries should now look like this:

@media only screen and (max-width: 480px), only screen and
(max-device-width: 480px) {

}

Once you have ProtoFluid installed and your media queries updated, all you have to do is add #protoFluid to the end of your url, like this: http://yourwebsite.com/#protoFluid

If you have everything installed correctly, your browser should look like this: ProtoFluid Screenshot

One of the best features of ProtoFluid is that you can preview changes to your code right in the browser with Web Inspector or Firebug.

This makes it really easy to figure out which elements you need to change to make your site look great on mobile browsers.

I preview changes for this site on my local server. With ProtoFluid I can just visit (http://localhost:3000/#protoFluid) to see what my site will look like on the iPhone, iPad, and other mobile devices.

So, how does it look? Have any other mobile tips? Get in touch with me on twitter @scottweisman and let me know.

More Information

Check out the following sites for more information:

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Media Queries for Standard Devices

ProtoFluid Documentation