It wasn't long ago when mentioning a mobile website sent shivers down a designer's spine; now designers immersing themselves in the new Mobile 2.0 market get a whole new excitement when the opportunity arises. Here at nclud, we are always excited about new mediums to distribute a brand through, especially when it's in everyone's pocket.
With that said, we took advantage of this new opportunity while launching our realign, and built an experience that complements its desktop counterpart brilliantly tailored to your mobile device, modern or not.
Complementing the Desktop Counterpart
The single most important rule when designing your mobile web site is to ensure the experience across every medium remains as consistent as possible. In today's new Mobile 2.0, it's not just about content and context, we now have the capability to add a whole new layer of presentation to the experience.
My primary goal when designing an interface for the advanced mobile device is carrying the user experience from your desktop over to your mobile device. Your first emotion should be the feeling that you are experiencing the best mobile translation you can have. One thing that keeps me away from showcasing a site on CSSiPhone.com is when a website's mobile experiance feels nothing like their desktop counterpart.
Reuse and Translate, Don't Recreate
I've built enough [modern] mobile web interfaces to understand what will translate well, and what will not. When I set out to design the mobile interface for nclud, I sat down and studied what Alex had already designed. I took note of what would translate well onto a smaller screen, as well as what was dominant and consistent throughout the design.
In this example, the logo was a little big and it wouldn't translate well so I sought to find a different solution to express the brand. Luckily, Alex had implemented a small green branded logo throughout the design which can be found on the homepage and the about pages; I used this as the ideal logo for the mobile site.
Every color, graphic, and pixel is already designed in your desktop version so don't seek out to recreate something new, condense and translate what is currently there into something that will work for a smaller screen.
Graceful Degradation on the Mobile Web
The world where you can stop worrying about IE6 isn't here yet, and it's the same with the mobile web; we can't forget about the Nokia's and Motorola's just yet. Even though the new mobile web is becoming more popular with over 80% of mobile traffic coming from the iPhone, it's still the perfect platform to practice degradation.
Typically when I talk about graceful degradation, it's in the context of Browsers, JavaScript, Flash, and/or CSS; however, here lately we've really been pushing this term more in the context of the mobile web. We can compare the current state of handheld devices to the unfortunate browser war starting almost a decade ago. We have our modern browsers, such as Safari or Firefox; and, we have our modern devices, such as the iPhone or G1. With proprietary devices using their own browsers, your "old" mobile device still owns the same market share as IE6, 20%.
Deciding to develop for just the iPhone is like saying you will only test in Firefox with Javascript turned on. Don't get ahead of yourself, the new Mobile 2.0 experience isn't completely here yet, so scale gracefully.
We designed for the desktop screen, optimized for advanced mobile devices and degraded for the lowest common denominator.
Go Do Something About It
I hope that this post, and what we did with nclud, helps inspire web designers and developers to optimize for the mobile web. If you are a freelance designer, inspire your clients. Work at an agency? Inspire your team members. Lastly, if you work in a government or corporate environment, go inspire the decision makers!
With the mobile web getting better and more popular, I can assure you that you will see more topics and posts from me in the near future.
Kelly
March 6th 2009
I’m reading this on my iPhone. Great post and a great mobile experience too.
I’ve yet to get to do any mobile work, but when I do this will be a source of inspiration.
Evan
March 6th 2009
I think “beautiful” is an understatement. Good job Mike.
Jenna
March 6th 2009
I agree that this is more than beautiful. The sticky interactivity and the little details that seem to retain us users is a huge benefit. With SXSW a week away, you kids are going to have people checking this out and passing the phone around at the events. Smooth move.
Scott Beckman
March 6th 2009
Michael,
Two words Simply Amazing
Not to mention I love the article keep up the great work man.
Matt Sanders
March 6th 2009
I have to admit that I am impressed. I knew it was only a matter of time before people would start making good use of jQuery and the mobile web.
You’ve heard me say it before, but excellent work.
Martin Ringlein
March 6th 2009
Great write-up Mike; and even though I’ve said this to you a million times (even in person), you really did an amazing job. Like everyone else, I have to agree that it is one of the best mobile experiences. It makes browsing a website on the iPhone fun again ... I just can’t stop clicking all the pages.
The most impressive part from a design perspective is how you really kept brand experience top of mind. While Alex did an amazing job designing the desktop view, you took that and really kept it in tack while making it completely unique.
Ken Ward
April 4th 2009
Very nice work! How do you guys recognize the browser and switch the styles?
Michael Dick
April 5th 2009
Ken, thanks for the question..it’s a good one.
We are not switching the stylesheet, but rather the HTML markup we serve to the browser.
Technically, we are using PHP to read the user_agent string from the browser; from there we run the string through a series of conditional statements to determine if you’re on a desktop, modern mobile device (such as iPod Touch, iPhone, or Android), or older mobile device; then that serves the appropriate markup which then calls the CSS we need within the markup itself just like any other <link> tag.
Whew…now that’s a mouth full!