Did you know that by the end of the year, there will be more mobile-connected devices in the world, than humans? Well, that’s if we’re to believe the predictions in Cisco’s “Visual Networking Index (VNI) Global Mobile Data Traffic Forecast Update”. The popularity of smartphones and tablet devices is also growing and by 2016, the report suggests that more data will be consumed through smartphones than through laptops and netbooks, and more data will be consumed through tablets than through home gateways.
With people on the go more than ever before, it is essential that companies consider how a website or app will translate across multiple channels, because one size simply will not fit all. A well-executed design will not only function better, but also holds the potential to generate greater brand loyalty and increase conversion rates.
This process may seem daunting, but broken down logically and with the guidance of a good design team, you should be able to create a top notch website that will work well on any device. Here are some top tips to get you started.
Mobile first
Mobile phones are designed to be, well, mobile and this obviously equates to having a fairly small screen. They aren’t the easiest to read content on and, coupled with the fact that those accessing a website in this way are often on the move, means that mobile sites should contain only the minimum, essential information. This is a good way to start the design process; not only will it help you to organise the most important elements of the website, but it will also provide a good framework which you can then pad out for bigger devices.
- Put important links in the centre of the user’s line of vision – that way, they will be able to access what they need quickly and easily. Imagine the user trying to load the website on the motorway carpark in order to find directions. Simply put, don’t annoy them.
- Remember that thumbs are bigger than cursers, so all buttons should be big enough to tap on a touch screen – at least 40 pixels tall or wide as a minimum.
- If you need to include a form on your mobile website, keep it simple. Forms can often be a pain to fill out on a mobile or tablet but obviously, for an ecommerce vendor or cinema for example they’re essential. Just make sure you strip out any complexity and make it really easy for users to enter the data.
- Think about what your audience will be looking for. In reality, most people accessing the web via a mobile device are interested in a sub-set of content and will choose to view the full information on a larger machine. For example, mobile users often access company / contact details, directions, or maps if they’re lost. This content should therefore be brought to the fore.
It’s all about mobile context. Again, to use the cinema example, if you were looking at a cinema website on your phone you would probably have an immediate need, i.e.. find your nearest cinema (which could incorporate geo-location services), see what’s on in the next hour, 24 hours, or week and then book tickets – all with the minimum amount of effort or screen changes.
Automated mobile bookmarking is often overlooked but is great for users that want to get to a website directly by clicking an app like icon on their mobile home screen. When they visit your website a simple message saying “click here to add our website to your home screen” helps users discover this.
Not all devices are created equal
There are countless devices on the market, each with their own set of specifications and a different screen size. This is an obvious problem for the traditional ‘fixed grid’ 960 pixel layout.
- Build a website that works on any size device. You can do this by using percentages to scale the layout rather than doing so in pixels, e.g. the top banner may be 100% wide, rather than 960px and the left column would be 33% wide rather than 320px and so on.
- iPhone and iPad users make up a considerable portion of the market. Remember that these and various other Apple devices won’t play Flash, so it’s best to avoid it if you want to include them (and you should!).
- Keep everything W3C standard. Although web browsers can cope with bad code, some phones simply reject websites if they aren’t compliant.
Bandwidth doesn’t grow on trees
Not everyone has unlimited bandwidth and if you rack up someone’s data bill, they’ll never forgive you. Additionally, with the ever increasing number of mobile-device owners, along with an expanding level of data consumption, competition for bandwidth is intense. This means that even if users have plenty on their tariff to play around with, they may not be able to access much if they’re in a crowded environment.
- Keep images to a minimum – or better yet, serve smaller resolution pictures to smaller screen devices.
- Remember that background images use a lot of data and can cause visibility problems for those viewing on a phone while outdoors.
So, keep it simple…
Modern devices are becoming increasingly powerful and are capable of handling a lot in terms of graphics and animation. But as discussed above, not all tablets and phones are the same, so some will be less able than others. Remember that people viewing on mobile phones or tablets will often be out and about so they won’t have broadband connections speeds. The site should undoubtedly be interesting and content should captivate your audience – however, you need to strike a balance and ensure that it’s not so rich in content that your visitors get bored of loading and quit.
Design your way to success
Keeping the design of your site aesthetically simple, has more benefits than just reducing the burden on bandwidth. The design should be consistent from one platform to the next and this will be much easier if your design is uncomplicated. Consistency is important to maintain user engagement and in turn to foster brand loyalty. It used to be the case that you could be more creative with apps, than you could with mobile websites, but this is changing as storage for mobile websites is improving.
- Most companies go for a design using a block-based grid system so that content appears in chunks, for example the BBC website. This looks better on smaller devices and is easier to read.
- Create a reactive website, which gets smaller with the size of the window and allows all content to shrink in proportion so that it will automatically adapt to the size of the screen. The other option is to create different versions of the website for different devices – but this is obviously more time consuming.
Reaching the end goal
At every stage, functionality is key. Keep in mind the aims of your website and think strategically about how users can reach them. For example, if you have an e-commerce site, your end goal will be the final purchase, so think about how you can make this process as quick and easy as possible in order to limit the level of abandonment mid-way through.
- It may not be possible to complete the entire process using a mobile phone, so think about how you can navigate your viewers back to another device, in-store or to a phone call. Make sure necessary information is readily available.
- Enable a ‘save state’ function to insure against loss of connection, so that users can pick up easily where they left off when they become reconnected.
- Make it easy for users to login on any device, so that settings or browsing history are readily available on any platform.
Building websites that work across devices is an opportunity for you to reach more people, in a more targeted and user friendly way. This can have a positive effect on your brand loyalty and your bottom line. So don’t cut corners by opting for a one size fits all approach.
