Do you remember the time, when web pages took forever to load at your smartphone? Fortunately, these times are gone for good. Today, signal capacity, speed and coverage allow us to use the Internet mainly from smartphones.

By the middle of 2018, average mobile traffic among BRAB customers reached 65%.

Global trends are similar.

  • In 2018, 52.2% of the world online traffic was generated by mobile devices. It is 1.9% more than previous year (Statista, 2018).
  • 70% of consumers googled the product before making a purchase (Google, 2017).
  • 89% of users are more likely to recommend your brand after positive online experience from their phone(Google, 2017).
  • Over 40% of online transactions are made from mobile devices (Google, 2017).
  • 80% of B2B companies’ managers use tablets to look up products and services after work day hours(IDG Global Solutions).

Today, proper display and functionality of your website from both PC and mobile devices are no longer just preferable but rather obligatory. And adaptive layout can solve this. It can be achieved through adaptive layout.

Adaptive layout involves changing website design depending on the screen size, user behavior, device and platform.

There is a number of typical mistakes developers make when designing adaptive layout. Let’s learn from their experience.

#1. SHORTENING CONTENT

Don’t force visitors to switch to full version. All information from your website must be entirely accessible from a mobile device. To hide part of the content because it doesn’t fit, is the same as to cut off your arm when it does not fit a picture frame. One site means identical functionality and content for all versions regardless of devices used.

Smartphone user must be sure that they get the same information as PC users.

#2. OVERSIZED IMAGES

Though switching to full version is back in the past, mobile Internet still can be slow at times. It’s common that large file size websites load heavily on smartphones. Best solution is to have images with proper file size and dimension.

According to Strangeloop research, 57% of users quit is the site take more then 3 seconds to load.

#3. TINY SYMBOLS AND ELEMENTS

‘Why do you have such big eyes, Granny?’ - ‘To see you better, my darling!’, as in comes from a Little Red Riding Hood. Thus it is highly unlikely that anyone is ready to peer through tiny icons, fonts and buttons in real life. Design your adaptive layout to make interface and navigation features to be visible as clearly as the Great Chinese Wall from space. Don’t force your customer to zoom in the button in order to tap it.

Use navigation elements that are big enough to be taped on the mobile device conveniently.

#4. IGNORING USER CUSTOMIZATION

Designing adaptive layout is important to consider the way people use certain devices. Take every detail into account: size, text entry mode, Internet connection, etc.

For instance, we use our smartphones mainly on the go with one hand. Additional score for large fonts. In this case navigation elements must be reachable with a thumb. Turn off hovers and animation, they are needless on mobile. Instead, care to make attractive static look without any extra effects.

Tablets are mainly used at home after work or in bed. It is important to include design for both vertical and horizontal position.

#5. MOBILE FIRST

Lately there is a trend to go ‘mobile first’ with website design. It contradicts the orthodox approach, where desktops are served first and mobiles later on.

There is nothing wrong with this new trend but some happen to mistreat it. It is false to start the whole project with the mobile version. The essence of this approach is to develop desktop and mobile versions simultaneously. This way you can think ahead and decide how to shuffle blocks, how to set those buttons, how to substitute animation, etc.

It is much easier to create a complex and detailed layout and simplify it after. Otherwise, you may end up doing the work twice and having flaws in final layout.

The point of ‘mobile first’ is to emphasise the importance of the adaptive layout. Mind that over a half of your customers will enter your site from a mobile device. That makes adaptive layout worth at least half of your time and effort. Creating the desktop version is only part of the job.