The designer’s guide to creating better mobile sites

Fast facts
Good mobile sites are elegant and clean. Try to understand what people visiting a website will actually expect to see – ask clients what’s important to them and consider what information their users will want to access quickly, such as reservation information, menus and location maps on a restaurant website.

Limited layers
Try to keep to a maximum of three levels of navigation through a mobile site – I usually aim for just two. Mobile users want to get information quickly, so they won’t tap here, there and everywhere just to find what they’re looking for.

Type right
While you should try to avoid using serif fonts unless they’re very sharp and easy to read, mobiles have advanced enough that you can be more creative with type and you can now embed fonts on a mobile site. You still need to keep things as simple as possible for users though.

Big picture
Create graphics at 72dpi and they will be pixelated on mobile phones like the iPhone 4 with higher-res screens. It’s fine to make an image that’s bigger than the bare minimum – using an optimised JPEG so that the file isn’t too large – and then let the code take care of shrinking it where needed.

User’s viewpoint
Try to learn to use a device from a user’s point of view. Test your design on that device and ask your clients to test it too, so you can see if there’s any information that shouldn’t be there or if anything’s missing. User testing is always really important as well.

Lighten the load
When someone accesses a website from a mobile device it’s likely they won’t be at home – perhaps they’ll be walking along a street or on public transport. Many mobile users are also subject to data limits, so if your website is too full of graphics it might be too expensive for them to load it up.

Build relationships
While it’s the design that first sells your product, the relationship that then develops is between the user and the website – it’s about how they interact with the site and whether it does what they want it to. Your presentation should be simple and fluid enough to build a strong relationship with your users.

Same differences
While you do need to be mindful of the fact that not everyone is using the same device – for example, not all smartphones have touchscreens – the technology used on different mobile devices is fairly similar. So remember that not everyone has the same screen resolution or input, but don’t get too hung up about it.

Now check out 20 pro tips on creating a mobile website from Creative Bloq.