Research

Mobile websites Best Practices – Differences In Desktop And Mobile Application Design and Layout

 Best practices of creating mobile applications and websites, did you ever think about this while designing or coding it. The world is going mobile and it has been accepted that the future is in mobile technologies, so far we have seen iPad, iPhone, android smartphones and tablets, windows mobile phones etc. And we know there is lot more to come and rule the world for a while. Today geeks are using their beloved handhelds/smart phones and tablets to access web applications for all the purposes they normally would have done from laptops or desktops. As internet on mobile phones is quite a recent phenomenon user can be a little confused because of the layout and navigation difference of the same website in smart phone and desktop. Therefore it has become important that how the applications looks on mobile devices and ensure its consistency on different platforms like iOS, Androd, WebOS etc.

As internet is getting more popular, numerous web applications for different purposes are being developed. And different platforms like iPhone – iOS, Android, Windows Mobile, Blackberry, WebOS etc. are taking the place of netbooks and laptops. So now-a-days, to make the application consistent with different platforms, while developing a mobile application or website the designer/developer needs to consider many aspects. Let’s take a look.

1. Screen Size

The screen size of smart phones ranges between 3.00-5.00 inches and screen size of tablets ranges between 7.00-10.00 inches as compared to that of a desktop which is normally 15-17 inches. Because of the difference in the screen sizes the mobile web application design is quite challenging. The very small screen size of the mobile devices is making place for only crucial information and necessary links. However the traditional websites include a wide variety of content. Hence mobile site design focuses on the prioritization of content which the user is most likely to use while accessing through mobile phones

2. Resolution

In addition to screen size, the resolution on mobile devices too varies from that of the desktop and among the mobile devices itself. Considering the fact that leading mobile devices are made by different hardware manufacturers, it’s very obvious that each one will differ from others in its hardware profile. While designing a mobile application designer should consider the screen resolution too.

3. Layout

As most mobile devices is having the vertical screen configuration, the layout of the mobile site should be vertical in contrast to the horizontal layout of desktop websites.
Vertical layout leads to guided approach, one step at a time.
The use of hypertexts/hyperlinks should be minimal on mobile sites, these hypertexts/hyperlinks should be replaced by buttons and bars which are quite easy to tap and access using fingers on touchscreens.
So the design of website has to be user friendly and in accordance with the size and color scheme of the mobile screen to avoid its distortion.

4. Navigational limitation

There are two types of navigations possible on websites that is global navigation and contextual navigation. Navigation on the desktop is quite complex and multi-layered contrast to the flat structure of mobile devices. While a desktop makes use of both types of navigations, mobile is limited to just global navigation with almost total absence of contextual navigation. Global navigation remains consistent across a site while contextual navigation shows the changes depending on where a user is on a site. Thus the navigation on mobile sites should be kept simple and uncomplicated.  The content on mobile sites has to be placed such that user need not dig deep to get his work done.

 5. Mobility of Mobile Devices

A mobile device is used while travelling, shopping etc. whereas desktop will be on user’s office/room. Mobile applications have to be developed in such a way that they do not restrict the mobility of a person when accessing them.

6. Processor and Memory capabilities

The processor of a desktop is quite different than that of a mobile. Mobile memory is very much less than that of desktops. Moreover the user would want faster response and quicker access to services with least processing time. Mobile devices and desktops also differ in the amount of audio and video stuff which they support. A desktop site can contain multiple video files, heavy images and Flash animations. But all this cannot be supported on mobile sites because of browser and bandwidth limitations. Hence heavy applications cannot work smoothly on mobile phones. With this limited available memory and processing capabilities implementation of many technologies like Flash and JavaScript gets limited. Mobile sites have to be developed in a way that it uses minimum resources on phones.

7. Rendering on devices

The traditional websites are typically built on HTML. HTML websites are user friendly and error free. Whereas the mobile sites were basically build on WML. Due to the rapid changes in technologies, the use of HTML for developing mobile sites has increasingly replaced WML for it.
As the mobile platforms vary so the compatibility of the mobile site over various devices also varies.
A site may appear to function vary smoothly on Blackberry devices but the same may not be the case while accessing it though androids or iOS. Hence it is important to check how a site is rendered on different mobile platforms like Android, iOS, Blackberry etc.

8. Other Aspects about mobile devices

Mobile phones are basically communicating devices which nowadays are equipped with more enhanced features like camera, music player, games etc.
One unique feature of mobile devices includes geo-location services and support. Mobile phones make use of GPS to pinpoint locations; mobile devices can make use of the location information in searching for local results. This feature of personalized search is totally missing on a desktop.

 http://www.android-app-market.com/mobile-websites-best-practices-differences-in-desktop-and-mobile-application-design-and-layout.html