XHTML & CSS For Mobile Development
If you follow me on Twitter or on Facebook, you’ve probably heard me talk about the mobile site I’ve been developing for Amazon Audible.
The mobile site consists of over 50 mockups that needed to be developed in HTML/CSS and made to work for the iPhone, Android and Blackberry. While coding simple HTML/CSS mockups sounded pretty easy, I found that there were several hurdles and differences from doing mobile HTML and normal HTML.
Doing a mobile site from scratch was a big learning experience, so I’d thought I’d share some of the things I learned, that differed greatly for mobile dev.
Think Small
Doing mobile development means you have to think small and in terms of percentages, not pixels. You can’t have a 320px layout for the iPhone, because if you rotate the phone into landscape mode, you’ll have a skinny site running down the middle. You have to make sure the layout stays consist, while expanding for both portrait and landscape modes on the phone.
CSS3 Wonders
One of the biggest changes that were difficult for me to get over, and one of the best, was the fact that I could use CSS3 freely. I no longer had to worry about Internet Explorer, and al of the prominent mobile devices support it.
When trying to do some tricky styling without adding additional markup, I caught myself remembering that I could actually do it with nth-of-type and not having to worry about it breaking! So feel free to break out your CSS3 and even some of your HTML5 skills.
Special Meta Tags
There are a lot of little quirks in some mobile devices, but since I have an iPhone I’ll mention the ones I found in that device. The iPhone has this neat trick, where it links phone numbers in the browser and allows you to click on them and call them instantly.
This is awesome, except for the fact when it tries to do it on non-phone numbers. It seems to have difficulty sometimes determining what is and isn’t a number, especially when it comes to things like part/order numbers.
The awesome thing about Apple, however, is the fact they came up with a ton of meta tags that allow you to manipulate the way the iPhone device reads the website. I think these tags may also work on the Android, but don’t quote me on that.
To disallow the linking of phone numbers of your site, simple add this in between your <head> tags:
<meta name="format-detection" content="telephone=no">
I also ran across a problem where the iPhone likes to blow up the size of text in landscape mode, which was obviously a no-no and broke our layout. This was fixed simply by adding this style to the body property:
body { -webkit-text-size-adjust: none; }
The IE of Mobile
Of course, there’s always something that has to make a developer’s life difficult, and in this case it’s Blackberry. While it’s not as bad as Internet Explorer, it still became a thorn in my side.
Apparently, some models of Blackberries don’t support CSS3 properties, like opacity. I haven’t had any problems with advanced selectors though, so I’m not sure what is and isn’t supported.
The Blackberry also seemed to interpret spacing and paddings differently from the Android and the iPhone. For the most part, besides a few text differences, the Android and iPhone were quite similar in rendering the site.
Browser-Testing
Browser, or device, testing for mobile is a bit more difficult to do than normal web browser testing. While you can download pretty much al of the web browsers if you’re on a Windows machine (or use a simulator on a Mac), I’m fairly sure most devs don’t have an iPhone, Android AND a Blackberry.
For beginning testing, it was enough to resize my Firefox window as small as possible, but most of the testing I did on my iPhone, especially because the iPhone renders inputs and some backgrounds and paddings quite differently than Firefox.
For Android and Blackberry testing, I had to rely on the help of several of my Twitter friends (thanks guys!). A lot of the simulators you can download, especially the iPhone ones, never seem to actually renders the site like the actual device would. The client also had access to all three devices, so there were a big help in finding bugs.
Teaching the Client
The problem with percentage based designs, is that it’s impossible to have it “pixel-perfect” with the mockups, because you’re not using pixels. This was something I discovered early on, and something I had to teach the client about as well, especially because they had handed me size guides with the exact pixels everything was spaced out to.
This is a bit difficult to explain to a client who wants the mockups to look exactly the same in portrait and landscape mode, but with a little persistence and documentation, it wasn’t impossible for them to become relaxed in their layout expectations. You just have to be a bit more fluid when it comes to the mobile world.
Progress
I haven’t completed all the mockups yet, but you can check out the progress on the mobile site I’m working on for Audible for the next week or so before it’s taken down to become live.
Your Thoughts
What are some of the differences and difficulties you’ve experienced while coding for mobile sites?
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Nice points Amber. All of these have persisted from the days when I used to do J2ME development as well as ASPX pages for PDA’s and SmartPhones about 6 years ago. Seems like not much has changed, but I prefer developing applications that can just be accessed via a online store
But thanks for the recap on all the work that goes into developing a mobile site, and what needs to be checked on multiple devices as they are not similar as one would think 
Mobile web is very exciting, I’m actually trying html5 and css3 support on mobile devices and found a lot of interesting stuff. Of course iPhone has the best documentation out there and Apple’s meta-tag are really helpful. The iPhone Simulator en MacOs render pretty much the same as my iPhone Device, but I couldn’t try the Android Emulator.
One good point about iPhone is that you know the screen size and resolution, but there’s so much Android devices so I guess the best is to keep to percent and fluid layout.
Blackberry are somehow outdated with there browser, but let’s face it, they’re not the worst. In a few month Windows Phone 7 will be available and we’ll face the same troubles as on computer… IE rendering.
Tip for quick testing before going to a mobile device:
Use Safari, change the User Agent to iPhone (very easy to get to under the developer tools), and resize your browser. It’s just about identical to the iPhone and Android and renders more closely to what you will actually see vs. Firefox.
I’ve tried that before, but it never seems to actually work. It would render the site correctly when it would actually be messed up on the real iPhone.
You could just download xcode from the apple developers site it has a real iphone simulator, only works on mac though but it’s great.
I have xcode since I’m also working on native apps, but it doesn’t always render the same either. Nothing beats the real thing
There’s some pretty good tables of mobile device support for both CSS and Javascript on Quircksmode.
http://www.quirksmode.org/m/css.html
http://www.quirksmode.org/m/table.html
They are admittedly incomplete works in progress, but any documentation is better than flying totally blind or having to rely on whatever mobile devices you can get your hands on to test with.
Also, you’re productivity level is pretty astounding.
Haha thanks
Great article! I’ve been looking into mobile development and wanted to get my feet wet soon so thanks for sharing your experiences so far.
I found it’s great doing mobile web projects, so many different challenges to normal websites! I found a ton of great resources to help – don’t know if these might be of interest:
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ (although this is from last year)
http://www.useit.com/alertbox/mobile-usability.html
The W3C have a surprising amount of resources too on this – the full doc is here: http://www.w3.org/TR/mobile-bp/
I really liked that it’s such a different mindset to develop a project without having to worry about IE!
great site.. yo no what i mean?
oh just what I was looking for, thanks