Web Design for Mobile – Factors to Consider

Gone are the days of the fixed 960-pixel width for web design. The current market for computers, smart phones and tablets is a setting where a website is required to function in diverse screen sizes. For instance, the desktop is over 2,000 pixels in width while certain mobile phones are just 400 pixels or even smaller.

Our society is now living in a mobile phone prevalent world where almost large majority of browsing is done using mobile devices. A mobile compatible website is specifically designed for mobile devices that aims to give users a similar experience to using a desktop computer. If the user visits a website using a mobile phone, he will be redirected to a mobile compatible website version that is optimised for smaller screens. For example, when you go to the URL www.twitter.com, you will notice that it automatically changes to www.m.twitter.com. This is due to the fact that you were redirected to a specific site for designed for mobile browsing.

Right now, most websites are completely unsuitable for mobile viewing. They are either too heavy and takes a long time to load or the page goes out of alignment because it’s squashed onto a smaller screen. However, a large number of businesses are also currently releasing mobile versions of their websites which results in higher website traffic.

If you are going to have a web design for mobile, you must consider the specific design processes for specific mobile devices as well as the limits. For instance, a tablet like the iPad can accommodate the entire site but a smartphone can’t. Hence, you must be able to design for both resolutions to be able to provide the best experience for the user.

This variation in the density size of the pixels, not to mention the different browsers in various operating systems became a major factor that made the industry rethink users’ website experience. Here are some tips on web design for mobile and some common problems with their solutions:

Objectives

What are your website objectives now? What are your website objectives for the future? Building something that will suit future resolution options from the beginning is more cost effective than building something that will require complete redesigning whenever a new technology pops up. It is better to define your immediate and long term mobile website needs without disregarding the pros and cons of investing in a site that works across a variety of devices.

Device Variety

Knowing the variety of devices that people use to view your website on is another key element especially for the design process and the mobile website strategy. It is not safe to assume that just because many people have smartphones that everyone else also does. A mobile device that has internet facility is supported by different platforms and operating systems such as Android, iOS (Apple) and RIM (Blackberry). Therefore, consider looking into what devices your target audience is using by doing research or with the help of analytics. Consulting analytics will be very useful in determining the devices to focus on especially in terms of operating system, version or screen size. You can actually see all these website statistics in Google analytics.

Knowing what device your target audience mostly uses will let you know what factor for web design for mobile should be altered. For example, you can consider your site’s screen size or resolution for your website design for iPad. For the iPad’s high pixel density, it is practical to use large-sized elements and a generous amount of space because clarity will always overpower density. On the other hand, some of your users may be using a smartphone with a smaller screen and you must not deny them the experience just because of their phone’s screen size. You can try using certain enhancement techniques for your website so that it can support a wider variety of environments.

Platform Diversity

Today, mobile devices are used almost anywhere and everywhere and for the same reason why people use a desktop and these may be supported by various platforms and operating systems such as Android, iOS (Apple) and RIM (Blackberry). When it comes to operating systems, each has a set of user interface (UI) and interaction principles the users are used to. Therefore, you cannot just take your iOS-optimised website and use it for Android. You should recognize that each operating system is different and conduct mobile web design testing across multiple platforms.

However, building separate sites for desktop and mobile or smartphones and tablets must be avoided because in the long run these will be more costly and time-consuming to maintain as it means doing modified ones for different devices. Thus, building something that will work on as many devices and platforms as possible will provide you with the most practical set-up for focusing your budget and resources on the content rather than the maintenance.

Content

When it comes to content, it is a strong argument that the desktop version should be reflected on your mobile website due to the notion that people use their mobile devices for the same tasks as on desktops. Also, it is safe to assume that people are used to navigating the desktop version of your site and they might find it difficult to do the usual task they do on your site if the mobile version is substantially different, both structurally and visually, from what they are used to. So, keeping the core contents the same and keeping in mind that the user will move from one device to another or one platform to another are the keys here to make the users experience worthwhile on your site – be it on the desktop or on mobile.

On the other hand, keeping the core contents the same doesn’t mean you can’t optimise your web design for mobile. Actually, both should be optimised in terms of content display and interactions where appropriate. There is obviously a great opportunity provided by mobile for the innovation of an even better and more tailored experience than on desktop. Moreover, when optimising for your content, avoid overlays and pop-ups because they delay the user from getting to your real content. Sometimes, they pose usability issues wherein your users can no longer close these overlays.

Another thing to avoid is the overwhelming sets of media exchanges and interactions which can make your site unconventional and can even overpower your content. Your content is more important so make sure that your cinematic design can place the focus on your content. To avoid type of problem, feature your contents over the user interface (UI). Sell your brand’s identity. Also, old or simple UIs are not outdated, they are traditional and convenient. When doing website design for iPad, ask yourself, “Is the UI more handy and convenient to use or is it just richer?”

On the other hand, be wary of the possible design-interaction clash. Sometimes the mobile app’s design clashes with the interaction’s design. For example, Apple Calendar looks like it can be swiped but the pages cannot be. Some controls are placed at the bottom which makes them too far and too small to be hit. Your UI must be in sync with how your app is supposed to be used, so avoid mixing metaphors. The tablet can do lots of things like a computer, a book, etc. Just pick a single route to use. Offer people the use-and-touch experience rather than the mainstream menus or buttons.

To avoid the clashing of your web design for mobile and its interaction, avoid mixing metaphors and focus on a single one. Give the user hints and touch prompts and use digital advantages.

Flash Compatibility

Using Flash will cause issues for users who browse via mobile especially with video content. So, ditch Flash for jquery web design for mobile, especially for iPad because Apple’s OS is incompatible with it.

Our melbourne web design team at WPM Digital will be able to assist in converting Flash where possible into jquery that can be compatible with mobile phones.

We can also provide you with custom web design for mobile and tablets like the iPad to guarantee that your site is both mobile and user-friendly.