Forgot Your Password? or not registered?

Home » Blog » Designing for the mobile web

Designing for the mobile web

Written by Gary Cottam on 24 September 2012

Walking in the park, sitting in an overcrowded train, sipping coffee on your way to work: wherever you are, mobile browsing is now the most convenient tool for accessing the internet.

It is no surprise that many business owners are beginning to understand the incredible value that mobile Internet can bring to their companies. In fact, more and more are optimising their websites for mobile browsing to reflect the way in which their customers access their sites and purchase their products.

Mobile usage continues to increase year-on-year

Recent research conducted by Google (The New Multi-Screen World Understanding Cross-platform Consumer Behaviour report) shows that the majority of online activity like Internet browsing, online shopping, checking bank accounts, social networking and accessing media begins on our phones.

If your business is not optimised for mobile browsing, the chances are you will probably receive fewer visitors via this platform. Instead, users are more likely to visit websites that are easier to navigate if they are specifically customised to smaller smartphone screens. As a consequence, you could lose out on business and vital website traffic, and could even compromise your SEO rankings.

How to make your website design mobile-friendly

A mobile website is generally much simpler and more minimalist than a web version. To provide the best user experience, it should be easy to navigate through the key pages to find relevant information and data.

Improve your users' perception of your website

The key to having a successful mobile website is for your users to witness a better 'perceived performance', which is particularly important in the event of a slow Internet connection. Users who experience network disruption or run a high number of applications simultaneously will typically experience slower browsing speeds. However, to keep people on your website, you have to give them the perception that they are not wasting time by waiting for your pages to load.

One way of achieving this is by including a progress notification system on the blank screen, which can indicate the percentage of the page that is currently loading. Look at all the animations and text in the page and see if they load individually If they do, this also gives the impression of progress and the user will be more likely to remain patient. If, however, users simply see a blank screen with no apparent progress, they will be more likely to click away and continue their browsing elsewhere.

Smart-loading mechanisms allow you to load the most visible content first before everything else is loaded. If your website includes a background image, you can make sure this loads before any thumbnails, pictures or text to give the user a better experience than the dreaded blank screen.

Maximise image performance with 8-bit PNG files

On any mobile website, image performance should be as fast as possible to improve the overall user experience. One of the best ways to keep the size of your images smaller is by converting them into 8-bit transparent PNGs. This can be achieved on Fireworks or ImageAlpha, which allow you to compress larger 24-bit PNGs into the smaller version. In fact, you can achieve a 20 percent reduction in file size for a very minimal decrease in image quality.

HTML5 for your mobile website

HTML5 offers many interesting features and optimisation for all the latest multimedia technology. Users can develop an almost limitless choice of apps, although getting to grips with the coding can be difficult at first.

If you're new to HTML or you simply aren't so keen on its technical jargon, Mobl is the solution. It is a free, open source language that helps you build mobile applications faster by typing in a set of instructions, rather than HTML or JavaScript.

Enhance the look of your site with CSS3

Another popular modern web technology is CSS3, which gives business owners the opportunity to enhance the user experience of their website with a wide range of special effects. For example, you can use a text-shadow to make your text stand out against the background, making it more readable in environments like bright offices. Sliding animation also allows you to make a more interesting page-to-page transition;  the border-image feature helps you create more scalable buttons and icons for mobile screens.

Get to know MobiCart, the perfect app for m-commerce

MobiCart, which launched in 2010, has rapidly becoming a popular shopping app for businesses and consumers.  Users can buy or sell products online by developing an m-commerce version of their website with the MobiCart native API. The app includes various themes and designs that can be optimised to your website, all of which support Magento, X-Cart, Prestashop, JShop, Magenta and many other platforms.

Three great software tools to help you create the perfect mobile website


Wirenode: Tens of thousands of companies have already used Wirenode to optimise their websites for mobiles. With Wirenode, you can track your page views, visitors, upload photos and create a tailored website design with an extensive choice of images and colours.

 

 

Mippin: For RSS-driven websites, Mippin is the perfect free software tool that can optimise your website for more than 2,000 handsets. Users can even earn additional revenue through advertising and can also receive website reports with basic analytics.

 

 

2ergo: 2ergo utilises the Mobile Site Builder content management system and also offers data capture, ad services and extensive technical support. 2ergo is already used by organisations such as The National Guard and Rightmove, which have taken advantage of its fast loading times and customised designs.


Test your website on your own phone beforehand

It is always a good idea to monitor the usability of your mobile website beforehand and check for any errors or issues. Test it on your own phone, see how it compares to your competitors' mobile websites and rate it on its user friendliness.

Conclusion

How you design your website and optimise it for a constantly expanding mobile audience will have a significant impact on your customers' experiences and your overall website traffic. Performance is an essential factor to consider in every aspect of mobile web development: from choosing the number of images to put up on your home page to making sure the key buttons and icons on your pages are physically optimised for mobile screens.

As more and more people perform their online browsing and shopping through their phones, website owners need to ensure their sites are designed and customised to satisfy their customers' demands and expectations in this constantly evolving industry.

 

About the Author: Gary Cottam is the founder of Doublespark Web Design & SEO and has 16 years' experience in online digital media. Doublespark recently opened a new office to offer its services to companies looking for web design in Cambridge.

comments powered by Disqus
Awwwards Nominee
+

Need a web design quote?

Get 4 free web design quotes from
UKWDA approved members.

Get Quotes