Hey there, So it is time, you have decided to start designing/developing web app for mobile devices. Here are few basic start guides which will have you going with your mobile web application.
This will be a multi-part series, Here’s part one on differences in designing for Desktop and Mobile devices
Before you get going out there to code, I would like to tell you the difference between designing for desktop/laptops and designing for mobile devices.
There is no technical difference – but a lot of psychological changes do occur and usage patterns do change. Mobile comes with lots of hardware possibilities. The newer HTML5 APIs are providing more and more hardware access through mobile web and helping create more and more native like experience. So what is the difference in developing for mobile platforms and PCs ? –
4. Screen Sizes – There are billions of mobile devices out there, with atleast thousands of different screen sizes, resolutions. Whatever you make must look the same on all these devices. Its not a huge challenge till you stay away from any kind of hack to put that div right there. To my surprise CSS position : fixed was such a buggy implementation on Android 2.3 (see http://caniuse.com/#feat=css-fixed) that we had to change greater part of our UX. Sticking to standards and well established CSS specs is very important and noHacks!!. Being responsive is the best way to go for a mobile applications. Now if you were to develop for a desktop, a simple % dimensions would have sufficed :P.
5. Psychology and Usage Patterns – People now-a-days use mobile devices all the times. There are generally two purposes for using a mobile web app. Either it is for passing time (social networking, gaming etc ) or for some serious need (google search, find some restaurant etc). All these second category apps need to focus a lot upon the user experience. Understanding the psychology of the user is very important. Your user came to your web app with some purpose, the quicker you can ful-fill his/her purpose beautifully and elegantly, the more happier he/she will be and more will be the chances of him/her returning. People on mobile devices hate to wait, wait for the right content to appear, navigation is already complex and people are not so keen to figure out the navigation and controls. If you are not able to serve the right taste dish in right time, the potential customer is long gone. For the first category apps, your app should be fabulous at killing time, take angry birds or temple run for eg, they serve the purpose completely. User engagement is the key, the more the user feels engaged the longer he/she stays. Keeping it simple to use and engaging is the way to go.
To conclude, there are a lots of platforms you need one app to perform and look great. This requires some serious efforts, much greater compared to what you gave on desktops. People use mobile devices on the run or for killing time. Decide the category and design UX accordingly. Some properties behave differently on different platforms and platform versions, know them and find fallbacks. I will be posting a list of such properties I feel can cause trouble to a beginner in my next blog posts. Designing a great mobile web experience is a tuff job but if you are successful in doing so, You will be the most happy Front-end Engineer out there. 🙂