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 = Creative thinker. Passionate about free and open Web.

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

Jeff Starr 2010/01/16 11:01 pm • Post Author

Very true indeed. Let us know how it goes.
Cynthia 2010/01/21 12:07 pm

Excellent advice, it’s taking more than 5 minutes, but doable for me (raw beginner) in a couple of hours. Thanks so much!

But…. I can’t get my images to shrink. I’m initially testing on my blackberry’s original browser, which is awful, to see a worst-case scenario. Do you have any advice on that? It’s driving me nuts!
Jeff Starr 2010/01/23 10:27 pm • Post Author

@Cynthia: CSS max-width comes to mind ;)

img { max-width: 200px; }
Muthukumar 2010/05/06 2:51 am

Hi,

I am going to develop a website should be compatible to Web and Mobile as well.

I want to know what all points should I take into consideration before I start developing this project.

Can you please guide what needs to be taken care while I develop the CSS.

The CSS of the website is going to very simple, as simple as Google Search Engine is and will not have too much images or styles to the website.

Can you please guide me with some links or reference that I could read through and take into consideration while I develop CSS.

Please can you mail me with any details.

Thanks & Regards,
Muthukumar Subramaniam
Jenine 2010/05/21 4:59 am

this a very concise look at the specific issues for mobile CSS design. Thank you!!
Robin 2010/05/27 6:20 am

Especially the

-webkit-text-size-adjust: none;

CSS trick was very useful! Thanks!
Travel Tools 2010/08/01 9:01 pm

Thank you, Jeff! For me it was a mix of your article above and http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/ to eventually get it to work.

Now I have my first mobile website. Yey!

Best,

Caspar
rebecca 2010/08/13 12:19 pm

Jeff – Thanks for this article. I don’t even have a mobile web device and I am very bad at working on websites in the code view (CS4 DW), but some how I managed to make the necessary stylesheets to make a new website work in most devices using Device Central. I wanted to exclude my flash header and Javascript laced spry menu, so I used display:none in the mobile stylesheet on these two classes. Then I created some new divs in my template that are display:none in the regular stylesheet and display:block in the mobile stylesheet for a simple, small logo header, abbreviation navigation menu and footer info. I think it is working.

My only questions:
On the iPhone specific stuff. Do I place that code in the mobile.css file also?

And is the Screen.css blank?

Thanks again for the help! -RZ
Jeff Starr 2010/08/14 5:36 pm • Post Author

@rebecca: Yes, the iPhone stuff goes in the same mobile stylesheet, assuming you are using the max-device-width targeting trick. No need to duplicate the iPhone rules in the Screen.css file. :)
Robert 2010/08/16 3:00 pm

You have incorrectly used an extra semicolon “;” :

.center {
       width: 100%; !important;
       }

It should be written:

.center {
       width: 100% !important;
       }

Otherwise, thanks for all the tips!
:’)
Jeff Starr 2010/08/17 10:45 pm • Post Author

@Robert: Fixed – Thanks :)
Sharon Smith 2010/08/18 6:07 pm

Thanks Jeff

I was trying to work out how you get a site to show mobile.

This was an incredible help. I will try to implement the cosing ASAP, but who knows I am a bit old for all this :)

Sharon

« Previous Comments • 12345 • Newer Comments »

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