It was a lot of work to make my website look pretty decent in mobile browsers. It’s still not perfect, but it is useable.
I wasn’t quite sure why I need to spend all that energy – other than increasing my own personal nerd-fu – until the author and artist session I was at last weekend. Each person had about five minutes to speak, and the venue had plentiful wi-fi.
And I found myself looking up people’s web pages.
So for example, here are my sites – stevensaus.com and alliterationink.com – viewed through my iPhone:
I made some efforts to make them recognizable if you’d seen the main site, but still have a coherent layout and legible text at the default resolution.
Here’s another publisher’s website:
There are some very clear design differences between their site and mine, but the key elements are very easy to read, the menu button works just fine, so hey, it’s all good.
Another group – whose website looks great at full resolution – has some more problems though.
We’re having some real legibility problems here. Luckily, the columns are such that you can tap and zoom in on each column. It works – but it’s awkward.
But then there was this one:
It didn’t zoom for me to the center column. Nothing is legible at this level. The website title tag is “Home”, so even if I mail the link to myself or bookmark it, it won’t clearly be the author’s website. I wouldn’t follow up.
People talked about “digital business cards” a few years ago, but I think we missed the point. With the market penetration of mobile browsers and smartphones, people no longer need to wait to get your paper business card after the talk or panel. They’ve already looked you up on the web. They’ve already looked at your site.
Use the same principles for your business card for the mobile version of your web page.