Library Web Chic

There are a number of different things that you can do to make your blog more friendly to mobile devices. This is something I’ve been working on for a while and there really isn’t one sure fire approach to see why check out this series of articles called “Mobile Web Design”. As a result, there are a couple tactics to making Wordpress render nicely for mobile devices. First, I’d reccomend you create a stylesheet specifically for mobile devices. This means creating a stylesheet for mobile devices that is named mobile.css The mobile.css file will contain the following code:


hr, #footer, .postmetadata { display: none; }
body { font-size: 10px; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
div { padding: 0; margin: 0 }
p { text-align: justify; padding: 0; margin: 5px 0}
#sidebar ul { margin: 0; padding: 0 }
#sidebar li { margin: 0; padding: 0; list-style-type: none}
#sidebar ul li.largelink ul {margin: 3%;}
a, a:link, a:hover, a:active, a:visited { text-decoration: none; color: #06c }
#header { background-color: #06c; color: white; padding: 3px;}
#header a { background-color: #06c; color: white; padding: 2px;}
#sidebar {
margin-left: 78%;
width: 25%;
}
#content {
float:left;
width:75%;
}
.commentlist li { margin-bottom: 4px }
.commentlist li p { margin-left: 8px;}


Once you’ve created the stylesheet go into your header.php file in your theme and add the following line:


<link media="handheld" type="text/css" rel="stylesheet" />


You can test your mobile stylesheet by using Opera and going to View > Small Screen.

For the mobile devices that don’t read mobile stylesheets, you need to use WAP and WML. More information on WAP and WML can be found at W3C Schools WAP/WML Tutorial. The best option to do this in Wordpress appears to be WP-Wap a plugin which creates a WAP browser compliant version of your site. Install this extension and then visit http://www.yoursite.net/wp-wap.php using Opera or Firefox with the WML extension installed. Make sure the page renders correctly. If it does you can include a redirect in you .htaccess file to redirect all WAP browsers to use the WML version of your homepage. Below are the lines you should put in your .htaccess file.


RewriteCond %{HTTP_ACCEPT} (x-)*(application|text)/(x-)*(vnd[-.])*(wap[-.]|wml)+
RewriteRule ^(index.php)*$ wp-wap.php [L]


One should be able to write a redirect rule that works for all the pages. But my regular expressions and rewrite skills are slightly lacking. I’m still learning about making sites friendly for mobile devices. What I have here are really some beginning steps. My handheld stylesheet has to be refined still. To do that I’m going to be using the tips in Pocket-Sized Design: Taking Your Website to the Small Screen by Elika Etemad, Jorunn D. Newth and 7 Steps to Better Handheld Browsing