Most of the time it is easier to design for mobile than for PC’s, even if a lot of designers are reticent to this new area. Of course there are a lot of differences, starting with the screen size, fonts, the use of images, technology support (JavaScript, Flash, even HTML and CSS) and finishing with the way users interact with the devices and what content they should see first on mobile.
Designing for mobiles is not just about minimizing things, is about user experience, content management and flow actions. You can work with the same design principles but you should be aware of the main differences: screen sizes and input method.
The most important issue is the screen size. There are a lot of mobile devices ranging from small smart phones (320 x 240 pixels) to tablets (1024 x 768 or higher). The next issue is about the browser ans OS: Android (Chrome) has a different user interface than iOS (Safari), not mentioning Windows Phone (IE).
What is a website without it’s content? If you ask this question you will understand that the content is the only thing the website is made for. While desktop sites are large, have multiple columns, big images and a lot of features displayed simultaneously, the mobile should offer a narrower view to the user, so he can easily reach the content through the small screen. Also the design should be adaptive so the content will take the entire shape and size of the screen. In other words, the user should reach the needed content as faster as possible and should read it as easily as possible. Thus, the content management and design needs to go hand in hand together.
The interface has to be simple, minimalist. There are standards that should be considered when designing buttons, forms, menus and other common UI elements. When using a touch screen, the user has to easily tap the needed elements with the finger. Regarding the layout, there is no enough space to waste with big borders, heavy backgrounds and other artistic artifacts. There should be only vertical scroll for all the pages.
While a content oriented website is pretty straight forward, a web application is another story. There are functionality and flows involved. The application should deal with technology limitations, like JS support. The functionality needs to be broken into smaller steps (for example wizards, registration forms, etc.) and reduced as much as possible. Take a look at a social website like Facebook on mobile, or YouTube. You can see that there are dramatic changes in the way that various features are displayed. The user might not have the same things available but the ones that remains are better used.
I think that we are assisting at the beginning of a new era of the internet, and in no time we will see migrating all the websites to mobile as the people will use this technology.
There are a lot of resources on the web for mobile design:
- iOS Human Interface Guidelines
- Android User Interface Guidelines
- Windows Phone User Experience Design Guidelines
- Touch Gestures (reference cards)
Here are some very useful articles related to mobile design: