Designing for Mobile Devices

New technologies give us more opportunities to develop internet-based applications for several, and different, devices. It would seems as though the challenge ahead of us is providing relevant services on mobile phones. Recently I came across an article which said it’s expected that there will be more people browsing the Internet through mobile devices versus desktops or laptops by 2013. And while this trend has been happening for some time, it essentially means that more so now than ever before, designers should be designing for mobile users. Here’s a few idea’s around designing for mobile devices.

Website or Application?

I think the first question is whether you are building a Website or Application. App’s have their own advantages in user experience, off-line usage, and overall customer retention. And while App’s have been popular, Mobile websites are growing and what you should expect to be developing for the foreseeable future. There is always the possibility that they might have customers invested heavily enough in their brand that downloading and installing an app is still a likely path. That aside, Mobile sites are faster to develop and they are also accessible by any web browsing device.

Smaller Screen Size Design

It is important to take into considerations the smaller size of the screen when designing for mobile devices. Those accustom to designing for large HD monitors may find it a little more difficult at first as your previous work will be for resolutions of 1920X1200 and higher. The iPhone 5 uses a 1136×640 resolution display with 326ppi, with the iPad higher again. These resolutions are high when compared to many other devices. Blackberry and Android phones can be as low as 320×240. Considerably smaller than what many designers will be used to working with. However it is critical to be aware of this as you design your mobile website.

 

Separate URL’s for Mobile Sites

Consider the URL when you are building a separate site for mobile phones and tablets. One example would be http://www.yoursite.com/mobileor add a sub domains to your current domain such ashttp://mobile.yoursite.com. By keeping the mobile site URL structure simple like these examples, you will help the users experience and make it easier to be followed and remembered.

 

Mobile Friendly Single Column Structure

Pages are typically zoomed all the way out when they first appear on a mobile device. This ensures that all content fits onto the screen. However usually the page cannot be read until it is zoomed in due to the small size of the screen. Reading your content can be difficult without zooming in and as such, this isn’t ideal. In some cases, the user may have to scroll both vertically and horizontally in order to read the page. A one column layout which fits within a mobile screen may be the solution. Most likely you will find that the user will have to scroll, but it will only be vertically.

Simplify Your Content

With mobile websites it is certainly a case of less is more when it comes to organizing your content and structure - keep it simple. The easiest way to do this is to remove extra links and various forms of content which do not form part of the main content area. Items which are commonly found in the Navigation or footer of traditional sites can sometimes be taken out altogether which allows the focus to be simplified. You can reduce the page size and load time by removing this content. This is easily one of the most important things to consider when designing for mobile

Consider the Device Orientation

Almost all smart phones such as the iPhone can alter the screen orientation from portrait to landscape by simply tilting the phone. Another reason why you should maintain a fluid layout in your design which will allow it to fill the screen no matter what the orientation is set to.