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.

Awkward layouts

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.


Site bloat

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.

While a bad layout can lead to a lot of unnecessary bulk (as we’ve already discussed), there’s a wide range of other factors that can slow down your site, including plugins, extra pages, unnecessarily large and superfluous image files, as well as large amounts of blocked Javascript and CSS. These not only can be inaccessible to mobile users, but to Google as well. This heavily affects how your site is indexed (see previous link) by Google, and can severely impact your rankings and traffic with both desktop and mobile users.

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.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.