The winning solution for a mobile compliant website is to have a single HTML structure for every visitor, and just choose the appropriate CSS to render the page correctly for both worlds; so, I’m not speaking here about a /mobile/ folder under your website root, nor any ?mobile query string, but about the exact same URL, that has all the candy when viewed by a desktop browser, while is super-compact and sleak if the browser is running on a smartphone.

How do you do that?

First, get yourself two stylesheets suited for desktop and mobile, or rather, like I did, prepare a set of CSS files, where there is a “common.css” always used, and a “desktop.css” and “mobile.css” that get loaded when needed. Also, get yourself minify in order to define a “desk” and a “mobi” group of files to load with a simple URL (I use this procedure on another website).

Then add this to your .htaccess file, fairly early after the start of the RewriteEngine:

RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).* [NC]
RewriteRule ^stylesheets\.css$ /min/index.php?g=cssdesk [L]
RewriteRule ^stylesheets\.css$ /min/index.php?g=cssmobi [L]

First of all, these directives do not consider the iPad as a mobile device, since it has plenty of screen space in my opinion to just work as a desktop browser; if you do not agree, just insert an “ipad” string in there together with the rest.

Some explaining is in order: credit for the RewriteCond’s goes to the creators of WP Supercache, which has been a model to write my own caching system on another website of mine (next article is coming about the caching routine itself).

Those RewriteCond lines tie the next RewriteRule directive only to desktop browsers (since they exclude all user agents that can be associated to mobile devices), so the first RewriteRule redirects to the /min/index.php?g=cssdesk minified CSS set tailored for desktops (change it as needed). The [L] directive right after it tells .htaccess to ignore everything else after that. When the RewriteCond’s are not met, it means a mobile device is coming to your site, so the first RewriteRule is ignored, and the one after that is used that redirects to the mobile CSS set instead.

You see that I redirect requests for a file named “stylesheets.css”. Guess what, this file doesn’t exist on my website, and it just references from the template’s HTML: it’s .htaccess that deals with giving the browser the correct data. In this case all you have to do is reference the stylesheets in your HTML code like this:

<link rel="stylesheet" href="/stylesheets.css" type="text/css" media="screen" />

The advantages? This is faster if compared to the same operation done with PHP, since a webserver processes .htaccess directives faster than it compiles PHP code, plus you may be saving an additional include operation on an external PHP file. Also, an approach of this type is absolutely needed if you want to implement a no-PHP-execution caching system, because then there would be no PHP code to use to address browsers to the desktop or mobile CSS, would it.