Mobile Web 101

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 ? –

1. Hardware capabilities – Desktops and laptops came with the adequate amount of memory and processing capabilities, the chances of your application crashing the browser of the user was zero, so could be totally sure of that css animation not being laggy, for eg if it works on great on your computer. Mobile devices with few exceptions dont have a great hardware configurations, so your code must not be fragile,  check for memory heaps, leaks etc is a necessity, especially for Javascript intensive applications. Processing can be slow, if you are planning front-end rendering beware,  you will be facing trouble. Its not that mobile devices in general cannot process at great speeds but the problems is the multitude of devices out there, some with great quad-core processors and some with 256 Mb of RAM. You need to consider performance on an low average configuration. (Especially in a country like India where more people browse internet through phones and phones made in China. ) Also there are lots of hardware access available via HTML5 APIs which can be greatly harnessed to make user experience more pleasant. (For e.g using the location API we at housing showed directions from current location of user to the listings location, which enabled him/her to visualize on which road the listing is and decide for to visit on the move).

2. Platform + version + browser(s) variations – In the world of desktops we have Chrome, Firefox, Safari and I.E ( >7) and platforms – Windows, Mac, Linux. Through my experience whatever you design for one browser and platform it almost seamlessly works same for rest all (except for IE – which most of dont care for). When it comes to mobile devices there are platforms – Android, iOS, Windows, Bada, Symbian etc, then there are browsers chrome, android browser, firefox, opera mini, dolphin, are to name some, there are lots and lots of them and people use them to browse and in a fairly good number (#GA stats). So whats the problem? Mobile platform is very young – the implementations are buggy. So if you make something is works in one platform and browsers there are lots of chances it not working on other platform & browser. And to your surprise it may work on one version of the platform (e.g Android 4+) and not on other versions (less than Android 2.3). Coming on to browsers each on has its own implementation of interpretation of  Javascript (& support for CSS3 properties), some support some properties and some don’t, you have to have to take care of fallbacks especially in case of Javascript applications. (i got this one with History API see http://caniuse.com/#search=history )

3. Network Bandwidth/Speed and Usage Charges – This are serious concerns, you hear all the times that now mobile browsing is lightning fast etc but still in countries like India people browse over 2G/EDGE and expect lightning fast experience. Speed is something that matters the most about any web app (see Marissa Mayer on speed – http://www.youtube.com/watch?feature=player_embedded&v=WFsQvcdmLxc). Cost of ping >> Cost of content, always remember this. Instead of making each page small and dividing stylesheets and javascript files, make a multipage – single page app. Combining all files into one. Had this been the case of Desktops you could safely assume a broadband/3G dongle. Network speed is not such a greater concern as it is expected to be fast. Also you have ample screen size to show usable content on landing itself.

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. 🙂

Advertisements

Hello World!!

Ok, the same insane stereotypical title – but c’mon as a developer for every beginning there is a “Hello World”. How can I not do justice with the most simple title ever. I have been thinking about to start to blog since long but always came up with lot of excuses, lack of time, where to start on the top of list.

So what causes the change of mind all of sudden and I start this very task to pen down remarkable life learnings (mostly hacks to make your website work 😉 ). Well most of the time my problems have been solved by landing on some great (wo)men(s) blog. The internet is vast and so are the problems while making it better for the people to use. Now is the time of mobile web, people are addicted to their smartphones, some are even married to and few sleep with them. There are infinite number of devices, lot of screen sizes and resolutions, JS/CSS interpreters etc. Many developers have made lot of contribution to make desktop web easy to build and they continue their efforts for mobile web too, we all share gratitude for them. But still, the number of resources for mobile web are scarce, so its very important that we share our learnings out there and make mobile web experience better!!

So in a way via this blog I would keep posting about the new hacks I discover – keep posted.