Introduction
Just this month Morgan Stanley released their most recent epic, “The Mobile Internet Report”. The sequel to their “The Internet Report” that was released in 1995, this behemoth is 424 pages or 659 slides if you prefer to cover the material presentation style. It takes a look at recent trends of the mobile internet and makes projections on how the landscape will change over the next five years or so. If you have a lot of extra time on your hands this holiday season you can read the epic in its entirety on the Morgan Stanley website.
The Mobile Trend
Just in case you don’t want to read the entire report for yourself, I will summarize the report’s predictions in just a few sentences. They predict that the adoption of mobile browsing will eclipse growth rates seen in the last major tech boom with the PC. They point out this will be primarily due to the rapid worldwide adoption and innovation of mobile devices. That’s it, 424 pages boiled down into two sentences. Of course, there are a few supporting details, graph and statistics that I left out but you get the idea.
The Mobile World of Web Design
The world of mobile web design is basically the antithesis of standard web design. Instead of our designs being granted more screen space as average resolution and monitor sizes increase, with mobile devices we have to think smaller and smaller. While we get to add more and more to our internet web designs, we must now also look at how we can break pages and applications down into smaller pieces to fit on mobile devices.
As the mobile internet trend continues to gain momentum, web developers and designers are going to have to be able to wear both the internet and mobile hats with equal skill. If you have never done or even considered designing a website for mobile devices, there are several key points that will have you changing your way of thinking.
- Simplify – Figure out what your mobile users will be most likely looking for when they arrive at your mobile website. If you are a retailer you may just want to keep it simple by offering a search box to locate products, a results page to list the search results and page to display some details and perhaps an image of each product. If you offer content like HTMLGoodies.com, perhaps you may want a few simple drill-down pages to locate content topics and then pages to display the actual content. Whatever you choose to include, it should be a subset of your standard website tailored to mobile users.
- Divide and Conquer – Since mobile sites are so limited in space, you need to first figure out how to divide your standard content and features into smaller pieces. It’s basically the same principles you would use to break down an web-based form into a wizard. Analyze the overall content or functionality and then figure out how to logically break it down into separate pieces. The drill down example I mentioned above does exactly that by offering pages with topic categories so that the user can easily find their way to the articles and topics they need.
- Limit – Because of the limitations in screen size and browser functionality, you are not going to have the space to drop in banner ads, navigation menus, elaborate headers, etc. What you will have to do instead is to have dedicated pages for easy navigation, a simple image header, and content text that isn’t too lengthy.
In some ways developing websites for mobile devices is much easier than developing a complete website. Each mobile page has much less to create and manage. The graphics and layout are about as simple as it gets. There are some challenging pieces, though. You end up with many more pages to manage even though each page has significantly less content. Also, the mobile devices themselves and the browsers that run on them vary greatly. Fortunately, most mobile browsers and even some devices have emulators that allow you to test your designs before you put them out there for the world to use.
Blending the Two Worlds
It’s all about tailoring your website to the needs of your users. You should first create your standard internet website before starting on your mobile site. Get your content and functionality established then go about figuring out which parts make sense for your mobile site. Once you have determined the parts of your mobile site you can then begin to break down those parts into smaller pieces and build the structure for your site.
You will also need a way to handle incoming requests so that you know which site to route your visitors to. With most modern server-side development technologies like ASP.NET and PHP, there are easy methods to determine a user’s browser which you can use to properly route the user’s request. This can also be achieved with JavaScript, though it takes more effort.
The next question is, how do you handle what is essentially two different websites. A few years ago there was quite a bit of buzz around the new .mobi domain extension that was supposed to give website owners an easy way to make websites for mobile devices. The intent was that you would register separate domain names for each website, e.g. MyCoolSite.com and MyCoolSite.mobi. However, though well intentioned, it’s not catching on as much as many had anticipated. Instead the trend seems to be more toward creating a sub-domain for mobile sites, e.g. www.MyCoolSite.com and mobile.MyCoolSite.com. It’s definitely a cheaper solution.
Conclusion
Take some time now to start playing around with creating mobile device websites. The statistics and analysis provided by Morgan Stanley are solid and their projections are sure to be accurate. You still have some time before mobile sites become an integral part of website design and development. Take the time to create a few simple mobile sites and get a feel for how to organize and design them. Happy Holidays!
