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 = Fullstack Developer. Book Author. Teacher. Human Being.

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

Marc 2010/08/19 1:19 pm

EXACTLY the type of article I was looking for. Thanks, Jeff.
duktus 2010/08/20 12:52 am

very helpful tutorial, thank you so much!
David Roudebush 2010/08/21 9:44 am

This is a great article. Thanks. I’m glad it led me to your site.
When I visit the site using my Samsung Calber, I get your normal browser screen (just very, very tiny) instead of anything like the screens you are showing above.
So presumably, the site isn’t detecting my browser. Any ideas on that?
Thanks again
Jeff Starr 2010/08/23 10:02 pm • Post Author

Hi David,

That may be because there are no styles defined within the mobile stylesheet for this particular theme. The browser on your phone probably found the mobile.css file, saw that it was empty, and decided to use the screen-media stylesheet instead. Just a hypothesis, not really sure what might be happening there..
Kaara 2010/09/08 10:45 am

Hi! :)

Your site is really useful and clear; however, what is the correct way to …well. My site already uses CSSs. I thought if I typed it this way:

<link href="http://www.utk.edu/cs/templates/css/global.css" rel="stylesheet" type="text/css" media="Screen"/>
<link href="http://www.utk.edu/cs/templates/css/blue2.css" rel="stylesheet" type="text/css" media="Screen" />
<link rel="alternate stylesheet" href="http://eppserver.ag.utk.edu/dhensley/mobile.css" type="text/css" media="handheld" />
<link rel="alternate stylesheet" href="http://eppserver.ag.utk.edu/dhensley/Screen.css" type="text/css" media="handheld" />

that it would call the style sheets for mobile when on a mobile device, and screen if it was on a screen. Instead, it still defaults to the original. What am I doing wrong? Is it something with the @media handheld? Should I be titling this? I’m so confused and could really use help! :)
Jeff Starr 2010/09/13 1:54 pm • Post Author

Hi Kaara, the best way to clear up the confusion would be to test different combinations of the CSS <link>s. For example, you may start with just the mobile styles and see if they are applied in mobile browsers. Then try adding one of the “Screen” stylesheets and see what happens. You may also want to consider consolidating your CSS into a single stylesheet to help improve site performance. To do this, you would target mobile browsers using various @media selectors to target mobile devices.
gary B. garman 2010/10/08 1:20 pm

thank you so much for addressing the iPhone automatic text enlargement issue. i searched extensively for a solution to this and was relieved to come across the information found here.

my site host – Squarespace – has a “Custom CSS” section so all i had to do was insert..

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

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

}

…in this section. now on the iPhone the text is no longer enlarged!

gBg
bombadda 2010/11/23 12:40 am

Excellent breakdown, I’ve been searching for this. Thanks!
However… I can’t seem to implement this @ www.h2grohydroponics.com.au :(

I have linked a handheld stylesheet in index.php and uploaded my .css to web root.

This is from my live page source:
———————————-

———————————

Still displays styles from existing stylesheet.css

What did I do wrong?
Mike Edward Moras (e-sushi) 2011/01/13 5:30 pm

Just a small correction: the standard css 1.0 (used by many (older) mobile devices does NOT support the star selector (*), rendering your code invalid. Check the W3C docs…

So, this is wrong:

[quote]
* {
float: none;
}
[/quote]

Also, you should tell people that many devices FAIL to correctly read stylesheet link media attributes, resulting in the fact that they’ll “load it all”.

And… @media selectors have poor support too, resulting in the fact they aren’t loaded at all (which is “ok” since it falls back to not using any styling at all in most cases).

Gosh, I bet we’ll all be laughing in a few years when HTML5 and CSS3 made it as standards on both desktop and mobile browsers. But until then: be aware that there are zombie-machines out there that will sure rip the soul out of non-valid code. ;)
Mike Edward Moras (e-sushi) 2011/01/13 5:33 pm

Short addition. I hope that by today, you have discovered that about.com, wordpres.com, alexa.com and even wikipedia have mobile versions of their websites? They simply use other URI’s… but they exist and render A-OK!
Joshua Jackson 2011/01/24 1:29 pm

I just wanted to update that windows media 6.1 (internet explorer and opera 10) doesn’t display media=”screen” or media=”Screen”, properly. Opera 10 does, if it’s set to mobile view, but mobile view is off by default. I’m assuming that most people that use it will not get the mobile css.
Also, iphone and android browsers don’t use media=”screen”, either.
I was just frustrated when trying to implement this quick fix to my work website.
:(
JJ
Jeff Starr 2011/02/05 4:45 pm • Post Author

Hey I am going to close the comments on this post, which was written over a year ago. Much has changed in the mobile market, and the techniques described need to be re-evaluated before implementation.

For my own designs, I no longer concern myself with restyling anything or sending different content to different devices. Build one for all is increasingly a reality.

Note to WordPress users: there are some really great plugins available to make mobile versions of your site. A search for “wordpress plugin mobile theme” should get you there ;)

« Previous Comments • 1…345

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