October 19, 2012 | by Liam

What to Consider When Designing for Mobile Devices

The rapid rise of mobile internet access makes it all the more important for companies to design and develop their websites with mobile users in mind. With a further explosion in mobile internet usage predicted mobile websites will become a necessity. With this in mind here are a few tips on designing for mobile devices.


Consider the screen size – When designing for a mobile device you must consider the smaller screen size. The iPhone 5 has a resolution of 1136 x 640, the iPhone 4 640 x 960 and the iPad 1024 x 768. Some Android and Blackberry phones have a different screen size again.


Reduce the amount of content – Mobile optimised websites should contain a reduced amount of text as space is very limited on mobile devices. Only include the most important content and features, this will make the mobile site easier to read and navigate. Gerenerally, mobile browsers are slower to load than desktop browsers so you need to optimise your content and website for high speed content loading, the removal of unnecessary images will help with this. Remember here that less is more!


Change the navigation layout – It is much more difficult to tap links to other areas of the site on the small screen of a mobile device so it is necessary to maximise the font and space of your navigational links. There are a number of options:


  1. Use a dropdown menu
  2. Use a back button on all pages to take you back to the homepage and the menu. The downside of this is you cannot navigate directly from any section other than the homepage
  3. Display the menu options as a block so that the elements are displayed vertically. This method is suitable where users want to navigate or search straight away rather than reading content e.g. job sites.


Design for mobile interactions – Primary visitor interactions on mobile devices include finger swipe, touch, drag and zoom rather than mouse clicks and keyboard controls. Take advantage of this by using large buttons and navigation.


Make content easy to find – when viewing an m-commerce site the majority of mobile users use the search facility first before doing anything else. Use obvious navigational cues and utilise auto-suggest and auto-correct tools in search input boxes to tackle the difficulty of mobile typing.


Consider the orientation of the device – With smartphones you can now change the orientation of the device by tilting it on it’s side so it can be either portrait or landscape. You must ensure that your site will always fill the available space by keeping the site layout fluid.


Avoid using Flash or Java – Apple products do not support Flash and they don’t look like they intend too and as iPhones make up a significant portion of the mobile market you would be losing a large portion of your prospective audience. You may also find that a large number of phones similarly do not support Java.


Allow people to visit your full site – it is likely that there is going to be someone who wants to view some of the content you have chosen not to display on your mobile site so include links that allow the user to return to the full version of the site.


From Twitter