Guide to Mobile Website Design

Posted by | February 02 | Digital Marketing & Strategy, E-Commerce Websites, Web Design

The popularity of smartphones and the ease with which mobile applications can be developed have contributed to a glut of mobile development, mobile apps, and specialized websites that have been optimized for the mobile platform. Any company doing a serious amount of business needs to create a mobile version of its website to capture the mobile customer and this requires attention to a new model of design.



A Few Tips

First of all, the W3C has created a set of accessibility design guidelines for mobile handsets and following those guidelines will put you in good form. Keep in mind that you are dealing with a small amount of screen real estate, so what looks good on a full-size screen may be completely useless on a mobile platform. Tables are probably not going to appear right, you will need to use CSS in your layout, and XML or XHTML will ensure better character encoding. Avoid JavaScript and Flash, as some mobile platforms do not support it. And finally, remember that a mobile page should be no more than 20Kb.

User Interface

The user interface will need to take the mobile display into account. While in a standard website, you may incorporate simple text boxes for users to enter information, this is more difficult for users of smartphones. Make more use of drop-down boxes, lists and radio buttons for gathering information. Pop-ups should not be used on a mobile platform—there’s just not enough room for them. By the same token, avoid a navigation that opens up a new window if at all possible.

Simple Design

A standard website very seldom translates well to the mobile platform. The mobile version of your website needs to be much simpler than your main website—your menu structure may need to be redone completely, and you may need to eliminate many of the graphics that your main site contains. However, depending on the mobile device being used, the visitor may prefer to see your standard site, so give them the option if their smartphone can accommodate it. Provide an easy and readily-accessible toggle switch so visitors can select the version they prefer.

Make it Easy to Navigate

It’s quite common to include links directly from text, but it’s difficult to click on a single keyword to navigate on a smartphone. Make your navigation links easier to get to with larger buttons.

Not All Smartphones are Created Equal

It’s nearly impossible to create a universal mobile website that can be read on any mobile platform. Mobile browsers don’t support the same properties and HTML elements, and your markup may appear very different depending on the mobile browser or platform. Also, smartphones may have differently sized screens, and some of them (such as the iPhone) switch between horizontal and vertical. This switching makes browsing easy for users, but it means you can’t used a fixed width—go with a percentage instead.

Consider a Professional Mobile Website Designer

Having a mobile version of your website can pay off big in increased traffic and sales, but you need to make that mobile site professional, attractive, and easy to navigate. If you’re not well acquainted with mobile development, consider using the services of a web designer which specializes in mobile platforms.

  • Facebook
  • Twitter
  • Google Plus

Our Clients


We are obsessed with our clients' goals, and we move mountains to achieve their objectives. Our passion for achievement is what drives us and our customers alike.