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.
You may be interested in the following related articles as well.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
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:
He goes on to tell us the most popular browsers in mobile web which are:
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.
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):
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.
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.
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.
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:
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.
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.
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 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.
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.
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.