jimh009 - 10:49 am on Jan 10, 2011 (gmt 0)
Well, I spent the weekend watching football (Go Packers!)and designing this little mobile addition to my primary site. It was an interesting project. For anyone interested (does anyone even follow the Webmaster General forum anymore?), here's what I did.
1. Resolution - Since the vast majority of my mobile users were using iPhones and similar mobile devices that had a resolution of 320x480, I decided to design everything around this resolution (actually, 300x480, to provide a bit of "wiggle room"). People without smart phones aren't likely to find my mobile site addition useful anyways - so I thought it best to design for people who will actually find the content provided useful. I suspect the design should work well in other less-advanced phones, too, although scrolling and/or tilting the phone will be required.
2. Simple Layout/KISS - Even before reading tangor's reply, I decided to keep things exceedingly simple. I suspect I used the most simple and boring template around, complete with a boring white background. For my first design, I simply found a freebie template on-line somewhere and made a some changes to the CSS (more on that later). The template is a table-less layout, which I read was highly suggested for mobile devices. Another bonus was that the number of "div's" was quite minimal, making it easy to modify.
3. Validating the Design - Just as you can validate a normal web page at W3.Org, you can validate a mobile design too ([validator.w3.org ]). I discovered validating a mobile design isn't quite the same as a normal web page, as it's much stricter. But I got it done. Additionally, I got my design to score 96% on their little scoring system, which is good enough for more advanced smart phones.
4. Testing - How do you test a mobile layout if you don't own a smart phone? Go find a iPhone emulator, that's how! I found a nifty piece of free software on-line that mimics both an iPad and a iPhone. Assuming this software works as designed, the little mobile template I created actually looks halfway decent at the 320x480 resolution. For those who want to try the software, it's called iBBDemo and can be found here ([labs.blackbaud.com ]).
5. Page Size - Mindful of the slower loading speeds of smart phones and the need to minimize bandwidth, I kept all pages (so far) under 10K. Future pages that will have photographs (there will be a photo gallery users have the option of viewing) will be somewhat larger, but even those will fall well under 20K in size.
6. CSS - I used an external style sheet, as more advanced smart phones don't have an issue with it. Again, I'm designing for the "newer phone crowd," so I made a conscious choice to sort of let older phone users deal with any issues that might come up due to the use of an external style sheet. The stylesheet also matches the template in one sense - it's very small at around 1K.
7. PHP - I designed all pages as .php pages, and used .php includes. No problems from what I can tell so far. I suspect older phones will struggle with it, but oh well! The mobile validator didn't have any issues with it, either.
Anyways, this little project was a nice diversion from other stuff I needed to do. I'm sort of looking forward to seeing how one page in particular does on this mobile site, as I put a link up to it on the most popular page of my primary site which draws around 2000 - 5000 visitors a day and where 2-4% of the visitors use smart phones.