Mobile is quickly becoming the main way people are browsing the web. As of July 2012, approximately 10.5% of all web traffic occurs through mobile devices (rww.to/N2BS8Z).
Recent hardware advancements in mobile devices such as smart phones, tablets and Ultrabooks, as well as improving network access, mean that people are now browsing the web from a variety of places. These trends are set to continue with the advent of more web centric operating systems (rww.to/Mw2XCF) and the continuing evolution of smartphone apps (bit.ly/PG6YnU). Taking your brand on to the mobile web means you are going head to head with your competitors in a unique marketplace, and you need to provide your users with the best experience you can offer regardless of mobile limitations.
It is becoming more important to carry brands on to this platform in new and exciting ways. For some user groups this may well be the first interaction they have with the brand, so first impressions are very important. But how does designing and developing on mobile platforms differ from traditional web development?
One of the key aspects that must be considered is how you are going to develop your site on the mobile web. Do you want to emulate the look and feel of a native mobile app? There are some excellent frameworks out there which can help you achieve this such as jQuery mobile (jquerymobile.com) and Sencha Touch (www.sencha.com/products/touch). The main advantage of working with these frameworks is that the site will be more intuitive as it blends well with the device’s native touch gestures and exhibits similar behaviours. This can be particularly advantageous if you are required to build a site that acts like an app, or if you need to put together a mobile site in a short amount of time that you can be sure will be supported on major mobile devices. The disadvantages are the loss of some customisation and individuality that you may experience when building within a framework.
It must be considered where and how the user will potentially be using the site. User scenarios (blog.usabilla.com/how-user-scenarios-help-to-improve-your-ux) are an important tool that can help identify these. In terms of design, many of the visual elements of a mobile site can be developed purely using advanced styling techniques available in CSS3. Things such as gradients, shadows and shapes can be combined to create the graphical elements of your site without the need to load in images. Another big advantage of this approach is that you can resize these elements easily which is important given the variety of screen sizes on the mobile web. When you do need to use an image, look at ways to use it that will keep the file size down, such as creating your own repeating textures based on a small graphic. Remember, in order to support a range of pixel densities you will need to create at least two versions of each image, so it is worth spending time optimising them right from the start. All this helps to create an extension to your existing branding without compromising speed or quality.
A lot of the individuality in mobile sites and apps is in the details, such as custom designed icons that can be changed and adapted to work on different displays. The creation of a good icon that looks crisp and clean and sits nicely within the device’s native interface is another opportunity where you can use your branding to your advantage. As with images it may require the generation of multiple icons at varying sizes to support the range of mobile devices out there. Again, it is worth spending time creating these as a poorly rendered icon isn’t going to do your brand any favours.
Overall, a brand presence on the mobile web can be created to match and enhance an existing on or offline brand, the design and behavioural subtleties should remain almost invisible to the user. Most importantly it needs to work – wherever it’s being used.