Now that I have been using a smart phone for a while now, I am seeing the need for mobile friendly websites.  What I don’t like though is having to maintain two complete sites.  So I decided to update myself on CSS and JavaScript and learn how to setup a site that detects the browser and gives an appropriately formated page.

First I started watching the Web Development: Lay Out and Update Web Pages training videos from CBT Nuggets.  While watching these videos I got excited about updating my personal site make better use of newer HTML/CSS/JavaScript and PHP features.  Now I am not doing anything super fancy.  But I am using template and includes, and have as much as possible in my CSS.  Once I got my site the way I liked it, I got a Mobile Detection PHP script that will tell me if a visitor is mobile or not.  It does a lot more than that, but knowing if it is mobile or not was all I needed.

Once I was able to detect if a visitor was mobile, I had to do something about it.  So the first thing I did was look at might site with CSS turned off.  I then created a second CSS file with only minor color and style updates leaving the site to flow as freely as possible.   The other thing I did was change how the menu worked.  When you load a page with a mobile device, I hid the menu, only showing a Menu button that spans the page with the content below it.  When you click this button, the page is replaced by the menu with full width buttons. This makes it a bit easier to push the button you want with small devices.

So now I had a PHP script that detected whether the visitor was a desktop or a mobile device, and served the proper CSS and menu.  The next thing I wanted to do was give the user the option to switch views.  Just because they are on a mobile device doesn’t mean they wanted a mobile view.  So I added a little code to check whether they chose Mobile or Desktop. (There is a link in the footer to switch views) .

This I seemed happy with until I looked at my site in IE and it was a horrible mess.  I decided to look at an HTML Validator site to see how bad my code was.  I fixed a few things, but the main thing was adding a DOCTYPE line at the beginning, It seems that while most browser can figure things out, IE is rather dependent on this field.  Now it is much better in IE than before, not as good as FireFox, Chrome, or Safari, but much better than it was before.