A Quick Look at Mobile Web Designs

February 8th, 2010 by Brujo Owoh | 24 Comments | Stumble It! Delicious

If there’s anything web designers learned from the past year, it’s that mobile web usage will continue to soar.

Thanks to smartphones and social networking sites like Twitter and Facebook that promote on-the-go interaction with web applications, the amount of people using mobile devices to access the web has grown exponentially.

There are over 4.5 billion mobile phones in usage today and it’s estimated that by the end of this year, over 1 billion users will be accessing the web via a mobile device.
While these numbers are overwhelming, the mobile web experience is yet to live up to its full potential as compared to the traditional web experience. Web developers and designers need to understand practical techniques that will enhance the mobile web browsing experience.

Putting careful consideration into the design of a mobile web application must be a paramount activity that we need to integrate into our workflows. Designing for the mobile web is not the same as designing for the traditional web, and though as an industry we’re just learning as we go, we have to learn to adapt quickly to these new demands.

Let’s take a quick look at some concepts to keep in mind when designing for the mobile web.

Designing Content for the Mobile Web

Designing Content for the Mobile Web New York Public Library on a mobile device.

Content on the mobile web must be user-focused just like in traditional web design. However, presenting content with utmost consideration and forethought is all the more critical to the mobile web experience because of the smaller screens and internet connectivity concerns that aren’t issues to the traditional desktop web-browsing environment.

If you’re working on an existing site’s mobile web interface, only the essential elements should be brought over to the mobile web. Mobile users don’t want to have to look for information or scroll through multiple pages to find what they are looking; they want their needs to be met quickly.

Get into your users’ head, figure out what they’d be most interested in and give them just that (and nothing more).

Using Rich Media Effectively

Today’s smartphones are pretty capable of displaying multimedia content. And that’s a good thing.

Facebook mobile version.

You can watch a YouTube video while riding on the train or view photos of your drunken escapades last night that your friend posted on Facebook.

On the other hand, keeping rich multimedia to the barest minimum or providing alternatives to users that can’t access multimedia content is essential because of internet connectivity and technology limitations that our mobile web infrastructures are still working on to improve.

Not everyone uses an iPhone that has a built-in web browser, and many mobile web users have metered mobile internet connections that can cost them an arm and a leg when viewing these hefty rich media assets.

Simplicity Equates to Usability on the Mobile Web

Overstock.com mobile web version versus its traditional web version.

The great part about the mobile web is its simplicity. While it’s an advantage for web designers, its significance cannot be ignored. In the mobile web design context, I’d like to say that simplicity equates to usability. Keep the design clutter-free and as lightweight as possible.

Maximize the screen real estate. Mobile web users will be able to get more out of a simple and uncluttered interface that they can navigate through.
Also, keep in mind that many mobile web users don’t have access to the traditional keyboard and mouse, so a simple design is critical in order for them to be able to move around the site with ease.

Understanding How Mobile Devices Work

The first thing most aspiring mobile web designers should educate themselves on is how websites and web applications are rendered in their target mobile devices. With so many users accessing the mobile web from many different and disparate devices, understanding and prioritizing your target devices is paramount in creating unique and effective browsing experiences.

A mobile web application designed for the iPhone will not be viewable on an S60 device. A mobile website designed for Blackberry Bold 9700 would look different on a Sony Ericsson Satio.

Knowing the users’ devices help web designers create content and experiences specifically for that device.

The Blackberry 9700 uses a display size of 480 x 360 pixels as compared to the Satio’s display size of 360 x 640 pixels.

Simplifying User Interaction

Make input as simple as possible. Use buttons or selection methods as much as possible. Use textboxes only when necessary and have auto-complete/auto-suggest features to reduce errors.

Mobile Gmail offers easy access to the most frequently used Gmail commands and mobile keypad shortcuts.

Since it’s a mobile device, shortcuts to common and repetitive site tasks are necessary. The basic reason behind this is efficiency. Accessing information on a mobile device is quite a different user experience. The display is small and the keypad is even smaller. Therefore, the use of shortcuts simplifies the whole user experience.

Empower Users with Freedom and Flexibility

Give the user more freedom and control over their actions. For example, the user should be able to choose between different font sizes, backgrounds and turn on or off whatever controls that they desire.

Picasa, CNN Video On the left, Picasa, an image sharing site. On the right, CNN Video on the mobile web.

Develop mobile web application and websites that are intuitive and offer seamless animation without affecting the overall functionality. Flash Lite is quickly becoming the norm because it’s a highly optimized mobile web application development platform. Designers should use and support these projects as a way of contributing to the growth and improvement of the mobile web landscape.

There’s no reason why the mobile web should not be every bit as interactive as its web counterpart.

How do we create better mobile web designs?

We’d like to hear your thoughts on designing for the mobile web. Do you have additional tips and important considerations that web designers should keep in mind when creating mobile web designs? What are some great examples of mobile web designs?

Share your thoughts in the comments!

About the Author

Brujo Owoh is an university student majoring in Multimedia Systems. He specializes in web design and 2D animation. In his spare time, he enjoys reading fiction, hanging out with his mates, or keeping up with design trends on Twitter. Want to hire him or connect with him? Get in touch on Twitter: @Brujo2.

24 Comments

App Sheriff

February 8th, 2010

Yea, Mobile Web has a strong future.Take a look at this Video: jQTouch and mobile design for iPhone and iPod touch

Link: http://tinyurl.com/yjrfpnr

DB.

February 8th, 2010

The important thing to remember when designing for mobiles is content and how quick and easy it is to find it and view it.

Benjamin

February 8th, 2010

Nice article in itself. This is a bit strange to recommend flashlite while we know that the iPhone owns more than 50% of the mobile web browsing and that it doesn’t support flash.

Jordan Walker

February 8th, 2010

Mobile design is going to be of greater importance as the new generation continues to embrace the technology. Call it a paradigm shift.

designi1

February 8th, 2010

Nice reading here Brujo

i´ve create recently one article around this concern and give you some tips how to mobilize your web site.

Brendan

February 8th, 2010

All of the Gawker network sites have mobile web designs which are pretty nice. I mostly stick to lifehacker and kotaku but I’m pretty sure they all have one.

Codesquid

February 8th, 2010

In many developing nations, many people have decided to skip the traditional desktop computer and just get a web-enabled mobile device. Considering the population explosion in many of these countries, that equates to a lot of mobile device browsing in the near future. They’re not all going to be using the same device either. We need to plan ahead to get our sites ready for this growth.

WDS

February 8th, 2010

Great article! Mobile web design is becoming so huge, that I need to start thinking about adding it to my services. If anybody wants to get into fast, I would suggest jQTouch; it is very sleek, very content-oriented and very easy to use.

robin

February 8th, 2010

nice article! i’ve been stressing the same points recently as well.

for those out there publishing with wordpress, i’ve used a plugin called wptouch (no! i’m not a shill :) ), meets my k.i.s.s. approach to this subject. really nice coding as well.

Matthew Heidenreich

February 8th, 2010

I really hate when websites don’t give you the option to view the full site within your mobile phone. When i’m on my iPhone, I want the ability to view the whole site in many cases, because…that’s what an iPhone does. So when some of these sites give you a condensed version without a choice, it causes me to stop visiting their site.

Camilo Sabogal

February 9th, 2010

Great article. A lot of improvements have been made on mobile transcoding to ensure optimum layout for display web page content on mobile devices, but still there’s a lot of work to do.

Poonit Patel

February 9th, 2010

Thank you very much Brujo for posting this article here. Very helpful for web designers who want to work for mobile and other hand hold devices.

Mayur Joshi

February 9th, 2010

Hi Mr. Brujo
Very nice post and very useful for web designers.
Thanks

Ninh Nguyen

February 9th, 2010

Thank you so much for a nice post. BTW, I wonder how tablet web design will be. It should be a trend soon.

Michael

February 9th, 2010

When I see all these mobile website articles, no one mentions espn.com. They have a very well done mobile site (the one non-full browser phones is ugly).

iPhone Dev

February 9th, 2010

It’s also important to keep coding as light/minimalist as possible… speed is critical in mobile.
Can’t wait to see how the iPad changes our world…

bractus

February 9th, 2010

Initially I designed mobile version of application (http://bract.us/demo/m) for old/conventional mobile devices. We used xhtml and tried to keep all the pages as simple as possible. Avoid using images and complex layouts.

But, since new phone like iPhone, andriod based, smart phones are going to be the future of the mobile communucation, I like we should reconsider our application.

Nick Pettit

February 9th, 2010

I’ve found that giving the user fewer options and just cutting out features entirely really helps simplify things. The experience of browsing the web on the go often renders most features useless anyway. I think the thing that people forget when designing for mobile sites, is that people are usually out someplace or know exactly what they’re looking for. There’s less casual browsing, and more information seeking. Restaurants are most guilty of this, due to many chains having Flash based sites.

We just did a Doctype episode about this recently. Here’s the link:
http://doctype.tv/mobile

Apeeples

February 9th, 2010

Thanks so much. Very usefull.

Jacob Rask

February 10th, 2010

Nice writeup. The main thing I’ve learned when designing for mobiles is that in the sentence “Mobile users don’t want to have to look for information or scroll through multiple pages to find what they are looking; they want their needs to be met quickly.” you can remove the word “mobile”. If you reduce unnecessary components from your site for mobiles, you’ll soon realize that they’re probably not necessary on desktop either. Good usability on mobile very often equals good usability on desktop.

Nguyen Ngo

February 10th, 2010

Nice collection Brujo, the web designs on mobile also based on the ability of the phone to support the output (display). So, as long as the phone is now getting better & better, the design would be more like you see it on the normal windows, I think so.

Ben G

February 10th, 2010

Good read about mobile web… Nice job.

Chris

February 11th, 2010

Any suggestions on how to develop and test for so many mobile platforms with different settings and resolutions? I recently built a mobile app but without actually owning several different phones, my testing has been limited.

Thanks,
Chris