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.
According to Cameron Chapman, the most popular operating systems are:
- Windows Mobile
- The iPhone platform
- Palm OS
- Mobile Linux
- Symbian OS
- The BlackBerry platform
- Android
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.
01. Facebook
02. Nclud
03. Mail Chimp
04. Mixx
05. Mashable
06. Smashing Magazine
07. Deviant Art
08. Cnet
09. Walmart
10. Viget Labs
11. Coosh
12. Intel
13. United 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.
