The 5-Minute CSS Mobile Makeover
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 ]](https://perishablepress.com/wp/wp-content/images/2009/mobile-styles/screenshots-01.jpg)
Mobile screenshots of WordPress.com, and About.com, Go.com
![[ Mobile Screenshots: Alexa.com, DailyMotion.com, MediaFire.com, Hi5.com ]](https://perishablepress.com/wp/wp-content/images/2009/mobile-styles/screenshots-02.jpg)
Mobile screenshots of Alexa.com, DailyMotion.com, MediaFire.com, and Hi5.com
![[ Mobile Screenshots: Go.com, Wikipedia.com, imdb.com, Conduit.com ]](https://perishablepress.com/wp/wp-content/images/2009/mobile-styles/screenshots-03.jpg)
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 ]](https://perishablepress.com/wp/wp-content/images/2009/mobile-styles/screenshots-05.jpg)
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 madeauto— 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: Perishable Press ]](https://perishablepress.com/wp/wp-content/images/2009/mobile-styles/screenshots-04.jpg)
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.
60 responses to “The 5-Minute CSS Mobile Makeover”
Thanks a lot Jeff, really interesting article. I will put the advice to good use right now!
No excuses indeed! Your suggestions illustrate a very practical “middle ground” mobile web solution for web designers. I’ve often been overwhelmed by the daunting task of creating an entirely separate mobile version of my websites. Now I have a very workable alternative. Thanks!
Very cool man; I mainly browse via my trusted HTC as its the only time I get free to read!
Appreciate the little trick…cant ask it from other people unless I do it myself (hops away to play with css)
Nice post. I think we forget about windows mobile a lot with all the iphone hype. Thanks for putting this together.
This is an excellent article. Well-written, unique and filled with practical and useful ideas.
As a developer w/o a mobile device (we live in the sticks – no cell coverage here), I can think of a couple bit of information that would be good to add:
1) Can one easily find the %age of mobile-use visitors for a site?
2) Link to an online mobile browser viewer for non-mobile toting designers?
Excellent and most timely article, squire. My ageing Ericsson P900 runs Opera quite smart, but teh cost of mobile Internet in the UK makes real-life testing exquisitely expensive.
I’ve been messing with handheld browser emulation-ware on teh XAMPP, and I recommend your readers consider it. WinWAP Smartphone Browser Emulator is freeware I got from Softpedia.com, worth a try.
Btw, I wuz exhausted by the time I finished reading teh article.
All teh best, mate!
very nice article indeed
Nice collection. Thank you very much. ;-)
the nokia phones doesn’t compatibile with hendheld media type :(
As always, you deliver material worth contemplating.
Keeping it simple (stupid) is really the way to go here, because I’m not sure that keeping a “perfect” mobile stylesheet is doing us developers any good in the long run. Internet Explorer on any mobile device basically sucks, both in rendering and usage. Microsoft need to realise that they need to do something about it. Clearly, Apple has done many things right with their webkit browser as it’s the most common one in the mobile market. It renders “non-mobile” web sites just fine without the need for any extra stylesheets, making life for us developers realy pleasant. As network speeds and screen sizes/resolutions increase, people will use their mobile devices to browses the web more and more. This will lead to better browsers, and so we won’t need separate mobile stylesheets for more than a few tweaks and hacks perhaps (for IE of course ;) ).
By cutting IE users out, Microsoft will need to improve IE further to get back in the game, which of course is beneficial to us developers!
Just my 5¢.
With mobile sales still skyrocketing, and the cost of unlimited mobile bandwidth decreasing, it’s definitely a good idea to optimize any site for mobile viewing.
Tweeted.
Awesome post, though i have iphone, some time i face read problems. I should try your trick out.
:)