A step to be ahead: start designing for mobile devices
Our world is evolving. New technologies and new researches are giving us more opportunities to develope internet-based applications for several, and different, devices. In particular, taking a look to the new telecommunication frontiers, it seems to be clear that the challenge is to provide a lot of services on mobile phones. The next level, so, will be to communicate in mobility. I'm not speaking just about WiFi on your iPhone or Android-based phone, but about a mobile network technology that will allow us to browse our favorite website and use our useful web-apps everywhere (WiMAX, Long Term Evolution and so on).
Why should we consider mobile users now?Well, if I'd ask you the main use of a mobile phone, I'm sure that the answer is 'to communicate with people.' It is not a One Million Dollar Question, but if I'd ask you how many ways you know to communicate today, the answer will be articulated. Nowadays, thanks to social networking platforms (such as Facebook or Twitter) or instant messaging services (such as Skype, AIM, Google Talk), people communicate using different approaches, with few clicks you can send a notification to a list of friends or write a short message in real time. Try to imagine if this is possible ever and everywhere... this is the future: the mobility. It's evident that the web, the classic web, is dying. Internet users are not dummies or beginners who looks for some information. They want services, they want to stay connected with their friends, sharing their passions, in real-time. So, website owners, who offer good information and who love their users, must create a service, not jut a website. Creating a good mobile version of a website contributes to build a good service, right now!
What mobile users want?Hard question, at the moment... the technology in this field is evolving and there is an epic 'battle' among the companies who works to improve their products. There are new features and hardware upgrades every month and too many devices; so the users don't have a 'standard behaviour,' but there is a fact: they want to stay updated! Often is sufficient to create a new version of the website (or web-app) simplifying the layout and focusing attention on the content (highlighting the recent articles).
Ride the challengeYes, it's a challenge. The number of users browsing the Web from mobile phones is rising, but the mobile context has a wide variety of devices with different screen sizes and features. You have to create a mobile website that should works considering the screen dimensions of most common phones available: 128x160px, 176x220px, 240x320px, 320x480px; you have to synthesize the content, the navigation menus and the links of your website; you have to design for an optimal user experience. The mission is not easy, but as web designers and developers we have to stay on top in order to create useful services and to get relevance in the industry. Mobile website development will be really significative for our next web projects; so below there are some points to keep in mind planning the mobile version of a site.
Target your usersThis is an important step in all web projects, but in this case you should trace a more detailed profile of your kind of mobile visitors in order to provide them a better service.
The simplicity is the keyAs said, the mobile users need quick updates or to accomplish some basic tasks on their favourite web-apps. So, try to provide only relevant information and tools on the mobile version of your website.
Emphasize yor contentSatisfy the visitors delivering what they want. If your mission is the sharing of good and useful information about specific topics, you should show the content hiding other unnecessary elements and providing only the essential navigation options to the user.
Design a responsive websiteIf we've learned a lesson, it is that there so many devices able to render a website or a web-application. For this reason our designs should be really adaptive and responsive to engage more mobile users. One-column liquid layout and/or the use of media queries could be great ideas.
Test to enhanceThe best way to improve your design.
Don't stop to learn and stay updatedIn this field the changes are frequent and new technologies are developed daily. The best way to stay on top of is to learn new things day by day. Stay updated, follow interesting blogs and people on social media!
Showcase of well-done mobile websites
Articles and resources
- Designing for the Mobile Web
- Responsive Web Design
- Mobile screen size trends
- More on mobile screen size trends
- CSS3 Media Queries
- Mobile Web Design: Best Practices
Emulators for testing:
- Android Emulator
- BlackBerry Simulators
- Firefox Mobile emulator
- iBBDemo2 - Cross Platform iPad and iPhone Simulator
- Mozilla Fennec emulator
- Nokia Mobile Browser Simulator 4.0
- Opera Mini Simulator
- Windows Mobile Developer Center