Top considerations for YOUR mobile web design strategy:

The web has gone mobile, love it and embrace it. The time to turn back is long gone.

With more users accessing the web on the go this means if your website doesn’t have a mobile strategy you’re pretty much doomed to fail. Your strategy (or your client’s) will depend on a number of factors, from whether it’s a static website, content-driven or even an interactive web application so pursuing an approach where all bases are covered would be beneficial. 

Define the need for a mobile site, each bringing its own unique set of requirements:

• A brand new website needing both a desktop and mobile strategy.
• A redesign of an existing website which will include a new mobile site.
• An addition of a mobile site to your existing desktop one.

The business objective component:

As the designer/developer you are hired to design a mobile site for a specific business and as with any design you’ll need to prioritize these objectives. When converting your design to mobile you will need to focus on the top priority objectives for the business even further.

A good example is Hyundai’s website (both desktop and mobile). When you load Hyundai the (desktop version), the first thing you notice are the bold, big images of their latest vehicles. This hasn’t been lost when you now loadthe mobile version of their website. The same emotional connection to their cars is instigated through the use of large imagery

• Taking past data into account before moving forward:

As most web design projects now are redesigns of existing websites or a mobile addition to your desktop platform, hopefully your site has been tracking your past traffic data (Google Analytics or any other metrics tracking software. Thoroughly analyze which browsers and devices are accessing the website and with your results prioritize all the way from design to launch.

•  Responsive Web Design:

The days of checking your site in a few web browsers before launching are over due to the frequency at which new devices get released. Optimization is key and to do so you should utilize the latest and most forward-thinking web technologies such as HTML5, CSS3 and web fonts. Making sure your site scales and adapts itself to any device it’s viewed on is what we call responsive web design.

• Simplicity….how far should you go:

The norm dictates that when you convert your desktop site to a mobile format, you simplify anything and everything you can. Obviously the smaller file your site is the faster it will load as well as with the smaller screen real estate available choosing your placement of elements is wise. Less is more 

• Single Colum Layouts and Vertical Hierarch:

With layout, you will find that single-column structures tend to work the best. This not only helps you manage the limited space available but also assists on scaling between different device resolutions and flipping between portrait and landscape modes. Check out Basecamp mobile, they do a great job at taking multi-column desktop sites and adapting it to a single-column layout. This brings us to vertical hierarchy, if your site has a lot of information that needs to be presents on a mobile site then a good way to organize it is to set up a collapsible navigation. They allow users to tap to open the content they’re interested and hide the rest. 

• From “Clickable” to “Tappable”:

As interaction on mobile sites are done via finger taps rather than mouse clicks the dynamic  is very different in terms of usability. Revisit clickable elements such as links, buttons, menus, etc and make them tappable as there is no hover state in mobile websites. 

• Interaction Feedback:

It is important that when users taps a link or button for there to be a visual change to indicate it has been tapped and that an action has been initiated. It is common to see a white-coloured link turn to blue on the iPhone when tapped. Remember you don’t want your user to tap away 5 or 6 times whilst the next page is loading. Building visual feedback into your mobile site design is very important.

• Test Your Mobile Website:

As with any project, testing on as many mobile devices as possible is vital. We don’t expect you to owe all these devices so a combination of installing developer SDK platforms and using web-based emulators for viewing other platforms is a good way of achieving some comprehensive testing.