Blog. Alles over websites, eCommerce en WordPress.

website design mobile first

No, you dummy! Website design for desktop is not the same as for mobile.

By now we all know that your website must look perfect on mobile devices. October 2016 was the first month ever when more web pages were viewed on mobile devices than on desktop computers.

Browsing a website on mobile is a very different experience than browsing a website on desktop. There are limitations web designers must deal with like screen real estate. And, instead of a mouse and keyboard we’re using thumbs which makes executing certain tasks a lot more difficult.

Making your website responsive is not enough
Responsive design is by far the only practical way to deal with the ongoing proliferation of screen sizes and resolutions in the mobile world. But it is a technique, not a one-size-fits-all solution.

Some key website design differences:

1. Content organisation and prioritising

With limited screen real estate, there are constraints for the mobile experience: limiting features for mobile is a viable option, just be careful what you cut out of the experience.

When implementing the mobile first design approach you must take in consideration the content. You need to prioritise your content. Identify which elements need to be on the mobile page. Consider the needs of mobile users which may be the same from desktop users but their browsing habits will differ.

Consider what information you want to serve your visitors. Keep it short and simple. Are the images paired with the content really necessary?

2. Forms

A poorly designed form is a guaranteed conversion-killer. On mobile, this is not different. Forms are one of the most important components of digital product design.

Keep forms short and place then on one column. We all hate to fill out a form, so only ask for the absolute minimum, especially on a mobile device. A form done correctly will increase completion rates.

3. Menus

Making your menu work on mobile is without a doubt the most delicate aspect of building a responsive layout. You cannot create a good user experience without a functional navigation bar.
The desktop version probably has a mega-menu with different categories and sub-categories. This works very well for desktop users with large screens but it’s a complete other story on mobile.

The toggle approach, a menu slides into view from the left or right, is a good-looking solution, it is scalable and user-friendly.

John Lewis’ desktop site has large mega-menus with tons of categories.

desktop menu

mobile menu

 

Of course, there a plenty of other features you must think of when designing the mobile version of your website. But these three features are the most important ones. Don’t forget to always consider the needs of your mobile user as well as the unique ways in which they consume information.