There are many common mistakes when converting your site to go mobile, and below is a look into why.

Why Go Mobile?

The first mistake that ‘mobilizers’ make is simply assuming that they ‘need to’ build a unique mobile version of their web site. ‘Everybody is doing it’ does not count as a strategic goal — and in any case, one can find many high-profile web sites that function just as well on smartphones as they do in a desktop browser. Consider your needs and the current design of your site; you have several options — from keeping the site as it is, deploying minor design tweaks, redesigning your site to be device-agnostic, or providing one or more mobile versions.

Device Variations

Yes, we said ‘one or more’. With a wide range of mobile devices, your mobile site may have to take into account that it will be seen across various resolutions, orientations, technical capabilities, and the needs and habits of each operating system and its particular user base. This is especially tricky when it comes to the differences between smartphones and tablets, Android and iOS, or simply last year’s models versus cutting-edge devices. You can go in one direction with code that attempts to identify the device and deliver a tailor-made version, or you can build in overall scalability with standardizing elements such as HTML5 and web fonts.

Loading Times

You approximately one second of grace period before people begin to lose interest, and then you’ll lose 74% of your viewers within the next 2 to 5 seconds. Although mobile users are slightly more patient about response times than they’d be on a hardwired broadband connection, mobile devices also encourage a shorter attention span overall. Google provides a great Speed Test tool for your site with a specific mobile section — as well as some good speed tips. Cut out as much of the lag and load as you can, whether by decreasing image sizes and qualities, employing compression and caching, or even JavaScript optimizations. Your Webmaster or hosting company may be able to take care of many page load optimizations for you.

Clicking is Out, Multi-Touch is In

Elements on a desktop site are meant to be clicked, while the tap-and-slide interface of the majority of mobile devices will require a completely different approach. Links and buttons that work well with precise cursor control end up being far too small and fiddly for (non-zoomed) finger presses; see how much on-screen ‘real estate’ you can devote to making these elements as big as possible. Oh, and don’t forget to eliminate anything that is designed to react to cursor position (i.e., “hovering” actions).

‘Can Zoom’ Doesn’t Mean ‘Will Zoom’

Bigger screen sizes and resolutions aside, the average smartphone has a fairly small ‘window’ compared to the desktop browser. We all know how easy it is to pinch and zoom, or swipe and scroll, but you may as well assume that nobody will actually want to do these things when they visit your site. Although the emphasis on ‘the fold’ has been largely overstated in a desktop environment, simply assume that anything meant to engage the mobile user should be fully visible and immediately interactive as soon as the site loads.

Interactive Goes Both Ways

Desktop-bound web sites can get away with subtle indicators; mobile users need more obvious feedback that button presses and menu choices have been successful. With links, the standard ‘blue to purple’ color change won’t read as well on a mobile screen, and a few seconds of loading with no obvious feedback could mean the difference between waiting and moving on. Consider details such as animated ‘loading’ icons, changes in button shape as well as color, and investigate ways to incorporate device feedback (such as vibration) into your design elements.

How Simple is Too Simple?

It’s easy to fall into the trap of thinking that everything has to be made as minimal and ‘dumbed-down’ as possible for mobile sites, but go too far in that direction and you wind up with a bland, boring, generic site that does nothing for your brand or the user experience. Certain rules of thumb are worth keeping in mind — single-column, vertically-collapsing designs are a mobile standard for good reason. However, the potential for creativity in CSS3 and HTML5 provides many opportunities to establish a unique and memorable layout that nevertheless provides that essential intuitive user-friendliness.