With the vast majority of users now accessing the internet primarily through mobile devices, designers are now faced with many new qualitative problems which require unique solutions. We’ve discussed a few of the general philosophies underlying good mobile design practice, but here are a few common pitfalls that, if avoided, can really boost your mobile site designs.
Despite all of the last decade’s advances in web technology, many web designers still sadly cling to outdated ideas and models of what web design should be. The web is still plagued by mobile-unfriendly layouts, which poses a major issue when it comes to mobile web design.
Two major culprits tend to originate from a certain time period in web design, including:
- multiple large dropdown menus / navigation
Although dropdown menus still do have their uses when it comes to completing forms, and most mobile devices have a handy and simple way of interpreting form dropdowns, dropdowns as a navigational tool have had their time and really need to go. Sites with huge dropdown menu architectures are hell to mobile users, with many of them functioning totally inconsistently. Furthermore, these ‘megamenus’ are totally unnecessary, and encourage unnecessary page bulk.
- multiple columns
With desktops generally relying on a 4:3 aspect ratio, multiple column pages were originally a convenient way of getting a lot of content onto one page. However, while it is not impossible to implement multiple columns on a mobile site (particularly for tablets), generally they’re a pain to navigate.
Think about what the most convenient mobile interfaces allow users to do today. They are typically going to want to scroll upward and read the content as it comes up. Single-column layouts are perfectly suited to this; it is inconvenient to zoom into one column and then zoom to another
By considering what is ultimately going to be the most convenient way for a user to interact with the page on their device and by doing away with these unnecessary, outdated elements, your site’s layout will be much nicer for mobile users to navigate.
Speed is of the utmost importance when it comes to mobile browsing. Your site not only needs to be optimised for mobile users, but it should also be clean, simple, and straightforward enough that the number of calls are kept to a minimum.
Bad scaling and unresponsive design
We’ve dedicated a number of posts to this already (see: Acting responsively; other), but it bears repeating. A good mobile web experience relies on sites that scale quickly and accurately to the resolution and dimensions of an individual device’s screen. With so many different devices and screen sizes now out there, it is nigh-on impossible to design individual sites for individual resolutions and to expect there to be good results. By designing sites with mobile resolutions in mind first (i.e. mobile-first design) and then scaling up from there, you’re going to reach more users in a much more effective way.
Scaling doesn’t just apply to the dimensions of the layout itself. While, the factors we’ve already mentioned have a huge impact on the mobile browsing experience, scalability also applies to things like media content. Images, for example, should ideally be high-resolution enough to be future-proof when it comes to scaling for ever-increasing resolutions, but it’s also important to strike a fine balance between accessibility and speed.