I think we can all agree that having a mobile website is no longer a luxury but a necessity. In the latest Refresh the Triangle meetup Matt Henry of Viget Labs gave a presentation entitled “The Agony and Ecstasy of the Mobile Web“. The polarizing presentation discussed on a high level the state of mobile web design and why you should be addressing it right now. This post is both a recap and smattering of my own opinion. So let’s address the bad news first and cover some of the pain points that make mobile design so frustrating.
Would you say I have a plethora of browsers Jefe?
Supporting the huge range of mobile browsers is just one piece of the puzzle. Bandwidth comes into play big time with mobile. Data connections that aren’t 3G are pretty much like dial-up so every single byte makes a difference. People hitting your site on the go means that they are going to have little to no tolerance for a slow loading site. To help ease the bandwidth load, a carrier that shall go unnamed scrubs all the data on its non-iPhone traffic. So even though you tested the hell out of your mobile site design, this scrubbing can accidentally drop a tag which can blow up your layout.
What about features? Do you really need to create an exact replica of your desktop site for your user on the go? Most likely not. If someone hits your site on their phone it’s probably because they want to get in, see what they wanted to see and get out. They aren’t there to putz around and kill time, they have social networks and games for that. Trim down your site to the essentials and make sure that the content is presented quickly and clearly. This means that all the flashy features that aren’t essential to presenting users content don’t need to make their way into the mobile edition.
Dear Webkit, I love you! XOXO!
The title of Matt’s presentation mentioned something about ecstasy didn’t it? Okay, it’s time to stop talking about the misery of the mobile world and start talking about what’s great. Sexiness in mobile web design lies in Webkit. If you don’t know what Webkit is it’s the open source rendering engine behind Apple’s Safari and Google’s Chrome browsers. Webkit also powers their mobile counterparts in iPhones and Androids. Webkit was also ported to Symbian, the open source OS that powers newer Nokia smartphones. Webkit has strong support for CSS3, HTML5, geolocation and accessibility. I can tell you right now that it’s a dream to design for and since iPhones and Androids are all the hotness right now the future of mobile browsing looks bright.
I had a chance at my last job to design mobile website templates that were targeted specifically for the iPhone. It was rainbows and choir music every day because for the first time I only had one browser and one screen size to design for. I could round corners, apply drop shadows and gradients, even animate with ease because I didn’t have to worry if it worked in another browser like I do in the desktop world. This isn’t a realistic scenario however, and I was reminded of this by a tweet I saw by Rachel Nabors:
Until our coverage goes up and the cost of owning a smartphone goes down, developing for mobile is developing for one strata of society.
This is very important to remember because I get caught up in how awesome the iPhone is and forget that everyone isn’t a fanboy like me. So until the day comes where everyone is walking around with the latest Webkit greatness in their pocket, make sure that you are catering your mobile site to everyone else. Know your audience. Make a plan so that you know exactly what browsers you need to target and which ones you can ignore. Trim your site down so that nothing gets in the way of delivering an awesome user experience. If you do get lucky enough to design for a Webkit equipped phone then enjoy the ride because it’s the most fun you will ever have designing. But above all else, have a mobile strategy. Users with Internet in their pocket have come to expect being able to access content wherever they are, so don’t wall them off because you did nothing. Mobile can no longer be an afterthought.