Making Your Site Mobile Friendly – CSS

July 8, 2008 – 7:34 pm

CSS is vitally important in making your site mobile ready. I ended up making 3 CSS media sections in one CSS file:

• @media screen – contains all the CSS positioning informaiton, font sizes needed for the screen, etc.
• @media handheld – the CSS for handhelds. This removed a lot of unneeded parts of the screen (footer text), and doesn’t include positioning information.
• @media print – CSS for when the page is printed. This changes the font size for printing, labels links for printing, turns off unnecessary navigation (left hand menus, footer, etc) and anything else to make your site look good when printed.

All CSS for these sections should be contained within curly brackets {}

@media print{
 *{
 	font-size: 12pt;
 	font-family:Georgia, "Times New Roman", Times, serif;
 }
 a{
 	color: #520;
 	background: transparent;
 	font-weight: bold;
 	text-decoration: underline;
 }
}

All of these sections can be in their own CSS files and included using the include syntax:

<style>
 @import url("print.css") print;
</style>

or

<LINK rel="stylesheet" type="text/css" media="print" href="print.css">

Related posts:

1. Making Your Site Mobile Friendly Setting up CSS for mobile phones is easy enough...
2. Make Wordpress Mobile Friendly Following on my theme for this week, here are...
3. Search Engine Friendly Site Map Date created: 22 August 2004 If you’re having problems...
4. Copywriting Makeover: Search Engine-Friendly Can Also Mean Visitor-Friendly By Karon Thackston © 2005 http://www.copywritingcourse.com When it comes...
5. SEO Site Review – http://www.silvaheeren.com Daniel Silva asked me to comment on the SEOing...