The 5-Minute CSS Mobile Makeover

Updated August 8, 2024 • 60 comments

More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site readable via mobile device.

This tutorial will show you how to retain visitors and reduce bounce rate with a super-easy 5-minute mobile makeover.

You think I’m joking

Before we begin, I feel it necessary to emphasize the serious need for millions of mobile makeovers. There are waay tooo many sites that are completely inaccessible on the Mobile Web simply because their owners are either too lazy or ignorant to do anything about it. Think I’m joking? For those of you who haven’t surfed via mobile recently, allow me to share a few surprisingly borked (read: unusable) websites:

[ Mobile Screenshots: WordPress.com, About.com, Go.com ]

Mobile screenshots of WordPress.com, and About.com, Go.com

[ Mobile Screenshots: Alexa.com, DailyMotion.com, MediaFire.com, Hi5.com ]

Mobile screenshots of Alexa.com, DailyMotion.com, MediaFire.com, and Hi5.com

[ Mobile Screenshots: Go.com, Wikipedia.com, imdb.com, Conduit.com ]

Mobile screenshots of Go.com, Wikipedia.com, imdb.com, and Conduit.com

As you can see, it’s a bloody war zone out there. And we’re not just talking about smaller, personal sites either — all of the screenshots shown above were taken from the top 50 sites on the Web (according to Alexa, which may or may not be the most accurate source of information). Sure, some sites are still readable, but if there is a better alternative elsewhere on the Web, I’m there. Other sites are just too terrible to even consider, and get bounced out of the browser before you can say, “WTF?” If this sounds like your site, or if you’re just not sure because you’ve never actually seen your site from a mobile device, it’s time for a mobile makeover.

Mobile stylesheets to the rescue

Even if you do nothing else to fix your broken site, add an alternate stylesheet for mobile devices. Really. You don’t even have to include any styles — the very presence of a mobile-specific stylesheet will override all styles from your screen stylesheet, thereby simplifying the presentation of your site. Including a mobile-specific stylesheet is as easy as uploading a blank .css file and adding the following code to the <head> of your web pages:

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

The key here is the media="handheld" attribute, which tells browsers to apply the linked stylesheet to all mobile devices. This method isn’t perfect, especially considering the difficulty of testing on the millions of different mobile devices currently available. For example, the Windows Mobile browser will not apply media="handheld" stylesheets if a media="screen" stylesheet is also included. This is unfortunate because virtually all websites use a screen-media stylesheet to style their sites. Fortunately, there is a simple yet effective fix that will force Windows Mobile browsers to apply handheld-media stylesheets whenever they are available.

The trick to getting Windows Mobile to recognize handheld stylesheets is to capitalize the media attribute value for the screen stylesheet:

<link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

Notice the capital “S” in “Screen”? That’s all it takes to get handheld stylesheets working in Windows Mobile browsers.

Take-home message for basic mobile-friendliness: clear your default browser styles by including a blank handheld stylesheet via the “Capital-S Method” described above. Then, once your site’s presentation is reset to (mobile) browser defaults, move on to the next section for additional mobile-makeover tips.

Dinosaur protection

At this point you should be delivering at least two separate stylesheets, one for screen media and another for handheld media. So far so good, but we need to account for older browsers that may ignore the handheld attribute and apply the mobile styles to the page. This could have a devastating impact on the look of your site in older browsers. To help prevent this from happening, we want to enclose any mobile-specific styles within an @media selector as follows:

@media handheld {

	.selector-01 {
		padding: 0;
		margin: 0;
		}
	.selector-02 {
		padding: 0;
		margin: 0;
		}
	.selector-03 {
		padding: 0;
		margin: 0;
		}

}

This is merely a precautionary measure aimed at preventing old browsers from applying your mobile styles to your normal screen styles. All CSS styles that are placed in your handheld stylesheet should be enclosed and qualified by the @media handheld selector.

Apply some mobile styles

Now that you’ve got everything setup and ready to go, it’s time to apply some sweet mobile styles to get your pages looking oh so tuff. Of course the amount of styling is entirely up to you — you design your mobile pages as elaborately or as minimally as desired. As mentioned, by merely including the mobile stylesheet, you will have effectively neutralized any full-size screen styles that you may have had in place. Thus, as you start out, you will see something similar to this:

[ Screenshot: Default Mobile Browser Styles ]

Default mobile browser styles on the HTC 8525 mobile device

As you can see, compared with the atrocious examples shown above, the simple act of including even a blank stylesheet can take your site from “WTF!!!” to “FTW!!!” in the blink of an eye.

But why stop there? Sure your site displays all nice, crisp and clean on mobile devices, but there are a few basic improvements that can greatly enhance the look and feel of your mobile site. For example, mobile browsers are usually pretty tiny, so you will want to maximize every pixel of available screen space. One way of doing this involves eliminating extraneous margins and padding from around the <html> and <body> elements. Nothing too extreme, perhaps a nice 3-pixel bit of padding to give the content just enough breathing room. While we’re at it, let’s ensure we’ve got a clean white background and some nicely contrasting text color:

html, body {
	background: #fff;
	padding: 3px;
	color: #000;
	margin: 0;
	}

Of course, the goal here is to get you thinking about how to customize the presentation of your site. Background colors, text colors, and even font families are all fun things to play around with. To keep things basic, we can add a simple, sans-serif font with a decent font-size and line height:

html, body {
	font: 12px/15px sans-serif;
	background: #fff;
	padding: 3px;
	color: #000;
	margin: 0;
	}

Mind your floats please

An important thing to keep in mind as you implement a new handheld stylesheet is that all of the content will appear in linear order in a single column down the length of the page. Floated items such as sidebars, callouts, and other items will appear either above or below your main content, depending on the order of appearance in the source code. This is a good thing, especially considering the extremely narrow screen-widths of most mobile devices.

To include a floated sidebar would require users to scroll horizontally as well as vertically. As you may know, horizontal scrolling sucks, especially when working on the go. So keep this in mind before re-floating anything in your handheld stylesheet. To be extra cautious, the truly paranoid can add this declaration:

* {
	float: none;
	}

There is no width

Similar thinking applies for content width. Any explicit widths (those set in pixels or ems) that you set in your mobile stylesheet will probably do more harm than good, especially considering the extreme variation in screen widths across devices. Specifying a width for your content may result in proper display in a few devices, but there inevitably will be many more that will require horizontal scrolling to display the content. A good solution is to either specify your widths in percentages or avoid specifying widths except where required for layout purposes (e.g., for small graphics, etc.).

Eliminate clutter

Keeping things simple is one of the primary goals when designing for small screens. On a full-size web page, you’ve got plenty of room for lots of buttons, badges, advertisements, photos, and anything else that tickles your fancy. The question you need to ask yourself is, “how much of this content is necessary for my mobile visitors?” Only you can make that decision, but there are a few questions that may help you think through the process:

What are mobile visitors looking for? What information do they want/need?
Do mobile visitors have time/interest in all of my tedious sidebar content?
With a barebones stylesheet, which elements are clearly superfluous?
Which navigational elements are absolutely necessary? Which are redundant?
Are there entire regions of my page that would be better off not displayed?

And so on and so forth. Hopefully you get the idea: only display what is absolutely necessary or essential. Perhaps an example will serve to illustrate the point. Here at Perishable Press, I recently implemented a mobile-friendly stylesheet for some of my themes. The thinking/design process went something like this:

First, reset everything to default mobile styles.
Most mobile visitors are here for one thing: content.
Thus, there is no need for a sidebar or a super-footer.
I decided to display a small logo, some header nav, and a small footer.
Basic styles were applied to post content and comments.
The result is a clean, easy-to-use mobile version of my site.

And of course, to hide the unwanted elements, I added the following CSS:

#sidebar, #footer {
	display: none;
	}

Hopefully that is clear, the idea is to apply display:none; to the outermost element of the area that you would like to hide. As a noob way back in the day, I didn’t realize this, and instead applied display:none; to every element within the hidden area. So silly ;)

More mobile-makeover tips

Here are some more tips for improving site appearance on mobile devices.

Slim down heading elements

On many mobile devices (at least on the ones that I’ve seen), heading text frequently appears to be heavily overweighted (new word), especially text within <h1> and <h2> elements. To alleviate this issue, we can add the following CSS to our handheld stylesheet:

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	}

Control your images

Images are another element that you may want to consider. Chances are that many of your images exceed the width of most mobile browsers, which may or may not automatically resize them. Fortunately, we can apply a maximum-width to our images that will help insure their proper scaling in supportive browsers. The trick is choosing a max-width that accommodates the widest variety of mobile devices. As an example, here is how to apply a max-width of 250px for all images in our main content <div>:

#content img { 
	max-width: 250px;
	}

Front and center

Centering headings, footer credits, and other information is a uesful way to bring a sense of organization and balance to your mobile presentation. Here is an easy way to do so:

.center {
	width: 100% !important;
	text-align: center;
	}

Link me deadly

Last but not least, links are perhaps the most important element on the mobile page. When easily identifiable, links help visitors navigate easily and efficiently. When poorly styled or otherwise obscure, links are essentially useless, leaving your visitors groping in the dark for their next move. Thus, when styling your mobile links, it is good practice to emulate conventional link appearance with an underline, distinguished color, and perhaps a slightly contrasting background color to boot. Here is an example that keeps links looking crisp and clean:

a:link, a:visited {
	text-decoration: underline;
	color: #0000CC;
	}
a:hover, a:active {
	text-decoration: underline;
	color: #660066;
	}

Apply styles to the iPhone

As you go about applying styles for the mobile presentation of your site, you will inevitably want to target the ubiquitous iPhone and apply a few iPhone-specific CSS styles. Fortunately, the iPhone has a rather unique screen width, enabling us to target specific selectors with the following @media selector:

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

	.selector {
		padding: 0;
		margin: 0;
		}

}

With this technique, you can target any elements you wish. Simply enclose your iPhone-specific CSS with that crazy-looking @media selector and enjoy the results. Note that there are other (non-iPhone) mobile browsers that also have the same screen width as the iPhone, so any styles targeting the iPhone may also be applied to a few other devices as well.

Another useful technique for the iPhone involves controlling the automatic resizing of text. The iPhone has an annoying habit of adjusting font size according to the width of the web page. While occasionally useful, this “feature” has a tendency to make your web pages look like crap. Fortunately, we can override this feature with the following slice of CSS:

html {
	-webkit-text-size-adjust: none;
	}

This is a proprietary property aimed exclusively at Safari. Accepted values are as follows:

none — this is the default value. no text-size adjustments will be made
auto — leave it up to Safari to handle any text-size adjustments
%value — an explicit percentage value by which to adjust text-size

Have more sweet iPhone design tips? Share it with a comment! :)

Putting it all together

Let’s put everything together to create a basic handheld stylesheet template. Applied to your site via separate external handheld stylesheet, the following code will give your site a quick 5-minute mobile makeover:

/* mobile styles */
@media handheld {

	html, body {
		font: 12px/15px sans-serif;
		background: #fff;
		padding: 3px;
		color: #000;
		margin: 0;
		}
	#sidebar, #footer {
		display: none;
		}
	h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}
	#content img { 
		max-width: 250px;
		}
	.center {
		width: 100% !important;
		text-align: center;
		}
	a:link, a:visited {
		text-decoration: underline;
		color: #0000CC;
		}
	a:hover, a:active {
		text-decoration: underline;
		color: #660066;
		}

}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) { 

	html {
		-webkit-text-size-adjust: none;
		}

}

These are some of the CSS rules that I use for various themes here at Perishable Press. After customizing a basic set of styles with some fresh link colors and a few other bits of presentational seasoning, I have transformed my complex screen designs into something crisp, clean, and easy to read for my mobile visitors:

Mobile Screenshot of Perishable Press

No more excuses

With these simple steps, you can ensure that your visitors are able to access your content in a user-friendly way. You don’t need to create a complete mobile version of your site, but adding a few basic rules will ensure that your site is available, accessible, and useful for your mobile visitors. So no more excuses! We have the technology and skills to make the mobile Web a better place. Get on board and pimp your sites for the Mobile Web today.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

60 responses to “The 5-Minute CSS Mobile Makeover”

Jeff Starr 2009/11/04 9:51 am • Post Author

@Bren: Absolutely, and I discuss that point in the article under the “Eliminate clutter” subheading.
Tom Allen 2009/11/11 12:21 am

This article has been so useful – I’ve just been contracted to adapt a site for middle-ground mobile-friendliness without a complete overhaul, and this has sorted me right out. Especially the screen/Screen fudge – I was pulling my hair out wondering why IE Mobile was mashing all my new handheld styles into the existing screen styles. Thanks!
Jeff Starr 2009/11/11 10:09 am • Post Author

My pleasure, Tom — glad the article provided some help. Thanks for the feedback :)
Mark McKay 2009/11/11 11:03 am

Thanks for the article.

It was just what I needed to start making my site http://www.spokentext.net more mobile friendly.

Mark McKay
Tom 2009/11/12 7:53 am

Just one thing – Windows Mobile 6.5. This seems to be barfing on all my otherwise good work.

:(
Jeff Starr 2009/11/22 10:04 am • Post Author

Hi Tom, did you happen to try using the “capital-S” method of including your stylesheets (as described in the article)? Or is it just that WM6.5 fails to render things properly?
David 2010/01/08 9:47 am

I just got my new HTC an I tested the capital-“S” method on my site (and of course on these). Unfortunately it doesn’t seems to work with windows mobile 6.5. On wich version did you test these trick?

In Opera Mobile, the mobile stylesheet only works if the option “mobile view” (or something like this) in the settings is enabled.

Never the less, your moblie styles are very usefull. Thanks a lot.
Jeff Starr 2010/01/09 9:25 pm • Post Author

Thanks for the information, David – I tested on the latest 5 version, so I can’t verify for mobile 6+. Keep in mind that the trick provided in this article is merely one (simple) method of browser detection. If you search around a bit, you should be able to find some excellent scripts for more advanced mobile phone browser detection. Cheers.
Christopher Sampson 2010/01/11 9:33 pm

Can you tell me if this article is for ALL websites or is this pointing toward websites for “perishable press” or was that just used as an example? Please let me know if I could use this for my website and if I can where do i put the code? I use DreamWeaver as my html editor thank you in advance……I do have an iphone and I am trying so hard to convert mt site to be able to see it on my Iphone.
lisa 2010/01/12 6:06 am

I recall reading an article about what people are looking at on their mobile devices and the article claimed that people were reading a lot of blogs.

I recently had a thought (don’t even go there)…what do blogs look like on a mobile device? I do not have access to the web via my phone unfortunetely. I wonder what this blog site looks like on a mobile device. A lot of people are paying big money to have their company blogs look just like their websites and I’m curious if anyone has taken this in to consideration. lisa
Jeff Starr 2010/01/12 10:40 am • Post Author

@Christopher: I use Perishable Press as an example, but the techniques described in the article may be generalized to any (X)HTML-based website. Also, recall that the iPhone will use your default stylesheet (i.e., the same one used for regular, non-mobile browsers).
Tom combs 2010/01/16 12:28 pm

Thanks for the article. I am hopefull that “captial S” works. I developed our homepage for mobile and it looks fine using Dreamweaver Device Central but our members indicated content that I had marked with “none” was still displaying. I suspect that in many instances their mobile phones where not recognizing the media=handheld. We will see.

« Previous Comments • 12345 • Newer Comments »

Comments are closed for this post. Something to add? Let me know.