Mobile Website Design Considerations

Posted on: August 17, 2012

Thinking about taking your website mobile? Mobile website design is certainly the way to go but it does present specific challenges. For instance, one mobile website visitor may have an iPhone, another may have an Android, and a third may be viewing your website on a Tablet PC. To further complicate matters, each of these devices may have a different screen resolution. Additional constraints include small screen sizes, slower internet connections and visits to your website are often given only partial attention and in shorter amounts of time.

Smaller screen sizes in particular force website owners to think about what will benefit their customers the most. The website designer will need this information for determining the best layout and navigational structure for the mobile website. There simply is just not enough room to show everything that a typical website would. Slower connections also play a key role so the mobile website design should be created in a way to allow for faster page loads.

More on Mobile Website Design

For many years a big concern, when designing a website, was the available screen size on the desktop. This led to many debates because of the multiple monitor sizes and screen resolutions that were available. Eventually the web community landed on 1024×768 pixels as a good baseline for most website designs. As long as your design fit within this parameter, you could safely assume that the majority of website visitors could view and navigate your site with ease.

When smartphones first hit the market running iOS, WebOS and Android, they all for the most part, used a 320×480 pixel resolution. Meaning 20% of the available screen area was missing from that of the desktop. Unless, of course, the mobile website visitor did a lot of horizontal scrolling. Knowing this, certain reactions could be assumed and adjustments could be made in the website design to appropriately fit the mobile screen.

Now, with rapid changes in technology and the wide variety of mobile screen sizes and resolutions, new considerations have to be made to make sure your website displays appropriately – no matter what type of device it is being viewed from.

Mobile Website Design, Desktop Website Design or Both

To address such a wide range of design scenarios, there are few methods of approach. While each method has pros and cons, one particular method or the other should be decided on before development begins. If you having an existing website, your selections may be more limited. But if you want to go mobile, you will still need to address how you want to handle your mobile website design.

One method is to add a “mobile only” website to your existing website. This is typically achieved by building the website on a sub-domain. For instance,

  • This new mobile website design will be specifically created to fit the screen size of mobile devices but can certainly include a link to your main website.
  • One upside of this method is that the design can be drastically scaled down for faster loading pages to accommodate slower connections on mobile devices. If properly created, it will also provide easier navigation.
  • A downside of this method is that there will be two websites to maintain for content.

Another method is to create a new website that will display appropriately based on what type of device your website is being viewed on.

  • This new website is “responsive”. Meaning, no matter how large or how small the display size, the design will respond appropriately and fit the current screen size.
  • The plus side of this method is that there will be only one website to maintain for content.
  • One downside is that there is an investment of both time and money to build the new site.

A third method is to do both: build a mobile website design and restructure your existing website (or build new) to become responsive.

  • While taking into consideration both of the previously mentioned pros and cons, this method may be more widely in practice than you think.
  • The benefit would be that you could have a mobile site displaying only the most important information in a fast loading and creative way. If the user visiting your mobile website design wanted more information, they could easily click a link and visit your full website. Which, of course, is now responsive and would fit nicely on their mobile device.
  • The downside is similar to the other: you will have to maintain two sites for content and your costs are going to be higher.

At Web Considerations, we chose the third method for our own site. Check out on your mobile phone and you will see exactly what we have been discussing.

Let Us Know

If you would like to learn about these options in more detail, contact us and we will be glad to discuss options for your own mobile website design.