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.
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.
Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.
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.
Further References!
- MobileAwesomeness | Mobile Website Showcase
- 38 Mobile (iPhone) Sites
- Designing for the Mobile Web
- Mobile Web Design: Tips & Techniques
- 10 Tips to Create a More Usable Web
Image Credits
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.
Please review this link and adjust the entire article accordingly:
http://gs.statcounter.com/#mobile_browser-ww-monthly-200903-201004
Designers need to remember that although the iPhone is cool there are a lot of other more popular and more used browsers out there. Design for users not for other designers.
Nice.Superb article. you could have split this up into seperate articles for an increidble series on mobile web design. The examples are great.
It´s the Future!
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.
Good wakeup call
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?
Designing for mobiles is here. From now on we’ll have to consider it very seriously. Thanks for the article.
great article, i really like the useful info in it.
Nice example.. Mobile Web Design is the next and the future design.. maybe…
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.
This is an excellent article, more and more people are using mobile browsing, we as developers need to cater to them.
I think you make a good point that designing for Mobile will be necessary more and more.
I also digg the examples you provide.
But what of the technical aspects: how do you make use of the subdomain technique… how do you help mobile devices find the mobile-compatible part of your website?
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!
This is a very useful post, great information.
thank you for sharing this with us.
Really cool article.!!
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.
You provide enriched information for us,thank u.
This is going to be good inspiration for the team. Thank you.
I agree that mobile web design is the future. I like the examples it gives a better idea of how it should look like. Thanks
The examples are great. I guess in few years, every company will deliver also a mobile-version. Very good article
I really enjoyed this article. It gave a lot of good info in a fun way!
Thanks for providing this article,Thank you for sharing the text.I admire it very much.it is very useful for me.
Very helpful. Thanks.