Designing for Mobile Interfaces, Email Marketing, Business Web Hosting, Web Design

Return to the Blog Homepage

• Designing for Mobile Interfaces

  • Date: 17/11/08

  • Category: Web Design and Development

  Designing for mobile interfaces can be difficult due to the following:

  1) The vast number of mobile devices
  2) A broad range of browsers
  3) Input / output limits
  4) Lack of guidelines and resources
  5) A lack of standards

  

  The common problem for mobile internet browsers is the website loading time, and navigation difficulties. This and the fact that the mobile equivalent of a computer mouse is a finger means that it is difficult to design the navigation or links without someone complaining that the links are either too big or too small. This hang-up makes it difficult to determine which font size to make the links in a way that will please everyone.

  Although it can be difficult to design a website for mobile devices it is important to cater to the mobile internet browsers needs. Mobile devices are an important part of society as people use it for work and leisure. Mobile interfaces are attached to quite a few devices, such as the I-Phone, PlayStation Portable and of course, cell phones. While these devices rise in popularity so does the demand for mobile-compatible web designs.

  Mobile web design is up and coming in the web design industry. People are either looking for developers who can make their existing website, ‘mobile compatible’ or creating a copy of the website to be used exclusively by mobile interface browsers. Web designers who are looking to increase their client base are encouraged to take the time to learn how to design for mobile interfaces. The market is rapidly expanding and with the rise in popularity of online browsing such as the media attention with the launch of the i-phone means this market is key for web designers.

  Mobile web designs are fast becoming the future as shown by the fact that there are three times as many mobile phones as PC’s. Some of your options for making your web designs mobile-accessible are to:

  1) Use raw HTML with no styling
  2) Use media “handheld” style sheets
  3) ‘Mobile structure’ – Developing where your images, content and codes are specifically designed for mobile users.

  The advantages of just using raw HTML are that it is readily viewable by various mobile devices, usually loads pretty fast and due to the slow pick up of many mobile browsers to stylesheets are viewable to everyone. The disadvantages of using raw HTML is that the file sizes can still be pretty high, and scrolling problems occur due to lots of content.

  A media “handheld” style sheet has the benefit that, the web developer will only have to deal with one additional style sheet, and make sure it is consistent with the Device Independence principles. However a major problem with this is that CSS support is very inconsistent in different mobile interfaces.

  The last option mentioned is to restructure the websites images, code, and content specifically for mobile users. Basically creating a ‘mobile-specific website’. Why do this? With this option it means the files are smaller, thus cutting down the users bandwidth expenses. Further, this method will address how content is accessed and then what it looks like.

  The disadvantages of this option is the fact that the web developer will have to maintain and update two sets of files- desktop and mobile. Generally, alternate web addresses are likely to be required and this method is also inconsistent with the Device Independence principles.

  Before deciding which method to go with it is important to consider the user goals, business goals, development resources, and the size of the website or application.