How To Build a Mobile Website

In the last couple of years, the use of mobile web has increased considerably to the stage where it can no longer be ignored by web designers and developers. This is being fuelled by cheaper data services and faster mobile connections in wealthy countries. In developing nations a large increase has been seen where people are going straight to mobile phones.

The introduction of mobile websites means that mobile development is more than cross-browser as there are a vast number of mobile devices available which makes it very difficult for thorough testing. Each device can also use different mobile web browsers. For example an Android phone can have Firefox Mobile or Opera Mini installed. As long as a progressive browser is used then it will be fine.

Also the development of the mobile web has reintroduced some issues that have been ignored in the past. These issues include bandwidth which affects mobile users and the reduced screen size which presents a problem for layout sizes. To deal with these issues we are going to talk about how to get around them:

Implementing mobile stylesheets

This is the first step for adding mobile support to a website by including a stylesheet to adjust the CSS for mobile websites.

Server-side Methods & The UA String

One method of implementing mobile stylesheets is to use a server-side language to detect the user agent string. This technique allows sites to detect mobile devices and either uses and appropriate stylesheet or redirects to a mobile domain such as m.facebook.com. This approach has some advantages: it allows a website to display special content to mobile users and guarantees a high level of compatibility.

Client-side Methods & Media Queries

The easiest method involves client side detection of the mobile device. This can be achieved by taking advantage media queries, which will target the styles to the width of the device. As most mobile devices have smaller screens, devices can be targeted by detecting screens that are 480px or smaller.

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

This method targets newer mobile devices but media queries aren’t supported by many older devices, so a hybrid approach will need to be taken to reach a bigger audience.

Firstly, two stylesheets will need to be defined, one for normal browsers and another to hide elements from mobile browsers. These will then need to be linked in a third stylesheet. Finally, another stylesheet will need to be created for additional mobile device styling.

What To Change With Mobile Stylesheets

Now that mobile stylesheets have been implemented, we can now decide what styles we want to change.

Increase & Alter Screen Space

The aim of mobile stylesheets is to change the layout for a smaller screen. This means reducing layouts with multiple columns to a single column and horizontal space also becomes ‘expensive’ so mobile layouts can rarely have more than one column for content. The next stage will be to reduce clutter by adding display: none; on elements that are less important.

Reduce Bandwidth

Reducing the bandwidth is essential for slower mobile networks. This can be done by replacing or removing large background images and setting display: none; on any images in the content that are unnecessary. Another way to reduce bandwidth is to replace the navigation with plain text and css if images are used.

Other Things to Consider

In addition to stylesheets, there are a few special mobile features that can be added in to the HTML.

Clickable Phone Numbers

All mobile devices have a phone so we can make phone numbers clickable. To do this you can use the code below:

<a href="tel:441788513408" class="phone-link">01788 513 408</a>

With this snippet of code, mobile users can just click the number and call it. This link will be clickable whether it is viewed on a mobile or a computer but depending on the method of detection a class can be added to hide that it is clickable. The phone-link class can be used to disable clicking in the normal stylesheet and enabled in the mobile stylesheet.

Special Input Types

Another concern with mobile browsing is the difficulty of typing compared to a standard keyboard. This can be made easier by taking advantage of some HTML5 input types:

<input type="tel" />
<input type="email" />

Using these input types will allow devices such as the iPhone to display a keyboard that is appropriate for the input type. The above code type=”tel” will display the numeric keypad to be able to enter phone numbers and type=”email” will show a keypad with the @ and . buttons.

Conclusion

As the shift to mobile continues across the globe, support for handheld devices will become more important. Hopefully this article has given you the necessary toolkit and the desire to create better mobile support for your websites.

Related posts:

  1. 6 jQuery Plugins For A Better Website
  2. 10 Website Design Galleries
  3. Great Website Design Books
  4. Useful Guide To A Successful Website
  5. New Website Designs

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482