With its five user-friendly modules our platform is the ideal basis for stable and flexible online operations. Together the modules give you full control over your webshop(s), assortments, prices, stocks, customer data and marketing campaigns.

Mobile web design trends for 2017

31-01-2017 Bram Peulers

2017 is the year of mobile web design. Designers now work mobile-first and then adapt their designs for laptops and desktops. We are also seeing Google’s ‘Material design’ gain in prominence. Here, we highlight nine trends that will come to the fore this year in mobile web design.

1. Material design becomes more influential

It wasn’t very long ago that Google introduced its Material design as a template for Android devices, but now the majority of designers work with this style. Its user-friendly structure gives designers an intuitive way to build layouts for mobile devices and e-commerce websites. Recurring elements of Material are the so-called ‘card’ lay-outs, responsive animations and effects as well as clear structures (buttons, blocks, icons, drop shadow and fonts). Google has even posted a handy online guide with some design rules. 

Examples of Material design

2. 3D makes a comeback

Three-dimensional was frowned upon before Material design; now it’s been given the green light as long as it is purely functional. Designers ‘are allowed’ to use drop shadows again, as well as highlights, patterns and rounded corners – for the simple reason that it makes the elements look more elegant and realistic. 

3. Mobile-first

A large proportion of online purchases are now being made on mobile devices. In response to this, websites are being increasingly designed primarily for use on mobile devices (a development called mobile-first). Hamburger menus are becoming a more frequent feature of desktop websites; better use is made of the full width of the screen; images, buttons and icons are larger and clearer. 

4. Moving gifs 

The moving gif is totally back – in the form of a ‘cinemagraph’. This is a still image (a photograph for instance) with a small, recurring movement – a sort of mini-video. These gifs appear in the background, as headers, banners or sometimes they can function as the product image. Gifs can also help to communicate better (or faster) than text or video. 

nOeser, a CloudSuite customer, uses moving gifs 

5. Long scrolling and ‘lazy loading’

To avoid long load times but remain user-friendly, web designers are increasingly using a technique known as ‘lazy loading’ which makes objects appear only when they are necessary – i.e. as a user scrolls down. 

6. Misaligned grids

The fashion is for everything to be organised and clean, but it can be relevant and creative on occasion to make elements go outside the grid. Take this example from Bang & Olufsen.

A great example of a (purposefully) misaligned grid 

7. Product photographs in context 

Product photographs in 360° or shot in context grab the visitor’s attention. Creative product photography is going to be huge this year. 

The brand Beoplay shows its product in context 

8. Full screen menu under the hamburger icon

A full-screen menu when you click on the hamburger icon – we get this more and more often. The advantage is that the user can see the complete website structure at a glance.

NS.nl – the Dutch railways – uses full-screen navigation under the hamburger menu

9. Geometric shapes 

Triangles, hexagons and diamonds – a retro-style that is coming back into fashion. You feel as if you’re in the 80s! 

You will be seeing more of these geometric shapes in web design