Mobile Web Design: Overview, Examples and Tips

How many people do you know who uses their cell phone to surf the Internet? Most likely it’s going to be a large number of people. Many Americans are getting information on the go and companies large and small are jumping at the chance to optimize their site for mobile browsers. Mobile Web Design is getting more and more popular, almost every popular website, online service provider or web app offers a mobile version now.

With that being said, it is wise to get up to speed on everything there is to know about mobile web design. Being educated in this area of web design can help you stay ahead of the curve and gives your clients another avenue to pursue.

In this article we trying to present you exemplary mobile web design trends, and best practices with complete information about what you need to know.

What Is Mobile Web Design?

Before you can start designing great content for mobile websites, you must first familiarize yourself with what mobile web actually is. You will be glad to know for the most part there isn’t much new technology to learn, its more revamping your style for the smaller screens and operating systems of the different cellular devices out there.

He goes on to tell us the most popular browsers in mobile web which are:

Safari for the iPhone

Android browser

Opera Mobile

WebOS browser (on Palm devices)

BlackBerry browser

Internet Explorer Mobile (on Windows Mobile devices)

Code wise there are three common browser based codes (keep in mind there are more) these codes are: proprietary code, WebKit and Gecko. After researching what your visitors are going to be browsing on you can then decide how to go about which designs will be better for their cell phone. Remember that all phones have different size screens and their browsers can handle different amounts of content. An iPhone browser for example will have a different loading time than a BlackBerry will.

A Short History Lesson in Mobile Web Design

Below is a chart simplifying how we got to mobile web design language. Some of the terms you may not be familiar with so the definitions are as follows (the chart is courtesy of learnthemobileweb.com via Little Springs Design):

Standard Generalized Markup Language – Also known as SGML was created around 1986 and is a metalanguage. It was mostly used for printing and publishing industries.

Handheld Device Markup Language – also known as HDML was developed in 1996. This lead the way for the wireless markup language WML, but wasn’t official standardized.

Wireless Markup Language – Mentioned above, WML was developed in 1998. This is an XML-based language specifically for mobile devices.

Compact HTML – Also developed in 1998 this language is a subset of HTML and some consider it better than WML.

XHTML Mobile Profile – Developed in 2001 this language is build on the XHTML and is targeted for mobile phones, and most consider this to be the strongest language for Mobile Web.

Advantages and Disadvantages of Mobile Web Design

Like with most things there are always good aspects as well as not so good aspects. Mobile design is no different. Below are some points on both sides of the fence about mobile web design.

Advantages

Starting off with the good, there is of course mobility itself. Anyone can access the Internet in the palm of their hands. The time of just surfing the net at a desk or home is long gone. We are information addicts these days and you can reach your audience while they are on a bus, train, or local grocery store. If they need to find information about what is around them, they can find it—making your website a must on the go.

Another advantage, is the use of mobile web has gone up and seems to be rising. Making the demand high for the need to have mobile web pages. Clients are going to be asking you more and more about this and is something most web designers should be schooled in.

Disadvantages

The two main disadvantages are the small screen size, and loading time. Both of these are MUCH different on a cell phone than a computer. Because of this you will need to figure out how to design a page that is pleasing to the eye in a small area and still give the same information the visitor will need.

Cutting out “fluff” will help with text, and because the visitor will not be using a mouse try and stay away from them needing to click around for the information.

Why You Can’t Ignore Mobile Web Design

Mobile design is becoming increasingly important as the usage of mobile browsing rises. A study done by RipRoad shows the following about U.S mobile usage:

234+ million Americans have cell phones (that’s almost 85% of the U.S. population).

An average of 42.7 million Americans, roughly 18% of cell users, actively used smartphones between November 2009 and January 2010.

One thing we must not forget that is although 18% of Americans are sporting smartphones, we cannot count out the other 191 odd million Americans who have cell phones. Smartphones may be easier to navigate the web, but it doesn’t mean they are the only ones doing so.

According to Pewinternet, “83% of adults have cell phones or smartphones and, among them, 35% have accessed the Internet via their phone.” These are numbers business owners (especially Internet based business owners) will not ignore. The solution–optimizing a site for mobile browsers.

Cell phone provider Ericsson has found that, “Mobile data bits traveling around the world outnumbered voice traffic for the first time during December of 2009.” Although this is mostly due to social media usage and viewing videos, it seems this trend is not going anywhere soon.

Where to Start

When approached by a client about going mobile, you must first decide on one of two aspects—converting a site already on the web, or creating a new site entirely. Both can be done, but using a sub domain of the main site seems to be more popular.

Once you have decided which course of action to take, you need to decide what content stays and what content will go. When people are browsing the web via their cell phone, they usually don’t have the time to wait for a long loading time. They want to get in and get out so to speak—a less is more approach works well with mobile.

Screen Size

Remember you are no longer designing for a computer screen. You now have to come up with aesthetically pleasing pages on a much smaller size scale. Another thing to take into account is the iPhone allows viewers to see the screen vertically and horizontally. “It’s much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles,” says Alessandra dos Santos of the Abduzeedo graphic design blog.

When Testing the Site

When you are testing your mobile site you need to see how it looks, navigates and loads on both a smartphone device and a non-smartphones. Even between smartphone browsers there could be a discrepancy. Testing the site on multiple devices will ensure users on all platforms will have a good experience.

Examples of Mobile Web Design

A great resource for mobile web design galleries is Mobile Awesomeness. They are always showcasing the latest in mobile web design—below are some screen shots to give you an idea of some great design layouts for different industries such as fashion, fast food, tech, and airlines.

14. H&M

15. Tabo Bell

16. McDonald

17. Ars Technica

18. iWeathr

19. Amazon

20. eBay

21. Digg

Conclusion!

As you can see most are simple, get to the point but still utilize pictures and their company’s logo. Just think of mobile web design as a smaller version of the non-mobile site. You don’t need to throw out your knowledge of web design, just scale it down for the smaller screen and loading times and you should be able to come up with a successful page your client will love.

Image Credits

Like it? Share it.

Meet the Author:

Shannon Suetos

Shannon Suetos is an expert writer on how to buy debt leads based in San Diego, California. She writes extensively for an online resource that provides expert advice on purchasing and outsourcing decisions for small business owners and entrepreneurs such as debt consolidation at Resource Nation.

34 Comments

Aleksander April 9, 2010

I’m sorry, but I find this article not only faulty but down right not helping at all. The browser list doesn’t even include the most popular web browser for Mobile Opera Mini, but rather mentions on the lot less used Opera Mobile.

i concur with aleksander Opera Mobile is a lot less used because Opera mini is java which every phone supports, and you skipped the Nokia S60 Web Browser from the list apart from that nice article a mobile version of a website should be clutter free and simple after all it’s about retrieving information quickly no need slowing it with detailed images.

Interesting is the example of the most popular sites adapted to the mobile version. I noticed that facebook is really reduced to the essential: there is no application. This suggests that the site should be done in a concise and simple. I have only one doubt about the video (since they are very much followed and appreciated). Is to recommend the inclusion of video in mobile web version?

I am very regular user of Mobile Internet, and the surfing is more fun when its done on iphone. But in this era there are not many websites who offer mobile version. It would be very beneficial if all the web site owners offer mobile version.

Great article, Ive been a web designer for 2 years now and I have noticed the demand for mobile sites increase over the last few months dramatically. Customers are very aware of the need to have a good mobile site is just as important as a ‘standard’ website. All web designers should be getting on board with mobile sites its not a future trend its NOW!

Great article. Thank you. These websites were manually converted to be mobile compatible, thus the extremely high quality of design. For those who are interested in an “automated” converter, check out WebtoSmartphone.com. It converts on the fly and it works pretty well on most wordpress blogs.