10 tips to improve mobile web design

Mobile web design… More and more users are accessing websites from their mobile devices, which means you have to approach all projects with a mobile strategy.

These are 10 crucial elements that you must take into account from the beginning of your mobile web design project, from the strategy to the design and implementation:

1. Define the needs of your mobile web design

Generally, a mobile web design is produced by one of the following circumstances:

It’s a new website.
It is the redesign of an existing website, which will include a new mobile web design.
It is the addition of a mobile web design for a website that is not going to change.
Each of these circumstances has different requirements that will help you determine the strategy to follow, considering the following points.

2. Consider your business objectives

Prioritize these objectives and communicate them in your mobile web design, focusing on the priority objectives for your business.

3. Consider previous statistics

For a redesign or to add a mobile web design to an existing website, you should have Google Analytics statistics (or other software tracking indicators). Analyze from which devices and browsers users access the website and build your mobile web design by supporting these devices.

4. Implement Responsive Web Design

Optimize your mobile web design so that it can be navigated from desktop and mobile devices, with different screen resolutions and compatible technologies, using the latest web technologies such as HTML5, CSS3 and web fonts, so that your mobile web design can be adapted and viewed on any device. That’s Responsive Web Design.

5. Make it simple

As a general rule, when converting a desktop web design to a mobile web design, simplify it as much as possible and there are several reasons for this:

The loading time of wireless connections is still relatively slow, so the faster you can load the website onto a phone, the better.
The usability of mobile web design needs a simplified navigation, because with less space available on the screen, you must place the elements wisely. Simply put, less is more.
CSS3 gives you a surprising set of design tools, without having to resort to bulky images, which doesn’t mean you don’t use the images.

6. Column designs give better results

Not only does it help manage limited space on a smaller screen, it also helps you scale more easily between different device resolutions and move items from portrait mode to landscape.

7. The Vertical Hierarchy

It organizes the elements in a simple and digestible way, creating a foldable navigation. Stacks large blocks of content in folding modules, so that the user can open the information that interests him with a single touch, leaving the rest hidden.

8. Check your “clicks” and make them “touchable”.

In mobile web design, interactions are done with the fingers, not with a click, which creates a very different dynamic in terms of usability.

Review all “clickable” items (links, buttons, menus, etc.) and change them. Mobile web design requires large, thick buttons that can be easily pressed by a finger.

9. Provides a Feedback

Provide users with obvious feedback for any action that occurs on your mobile web design. For example, when a user clicks a link or button, it is good practice for that button to change its state visually (with color, motion, etc.) to indicate that the action has been initiated. It is visual information familiar to most users, which you can take advantage of.

Another good practice is to include loading images for actions that may take longer, indicating that something is in process. Desktop browsers have various indicators built in, but mobile browsers are not so obvious, so it is important to build a visual response into your mobile web design.

10. Test your mobile web design

As with any project, try it on as many devices as possible. If you find them hard to find, try installing the development SDK for the platform (such as the iPhone SDK and Android SDK) and using web-based emulators for viewing other mobile platforms.

Shopping cart

improve-the-user-experience-on-an-industrial-web