8 Essentials For Good Mobile Web Design

Get your website displaying effectively on smartphone devices using these eight essential design tips will give your business multiple benefits in the mobile user market. And as this accounts for over 60 % of how users access the internet getting this right at the start will provide greater success online. These include:

  • Better usability
  • Longer dwell time on mobile
  • Higher user engagement
  • Higher conversion rates and user actions
  • Reduced bounce time
  • Increase share value on social media
  •  Clearer messaging
  • More compelling

Here are eight essentials that provide the above benefits.


1. Keeping the top navigation height slim.

Keeping the top navigation slim with just the company logo and the proverbial three bar menu icon ensures more screen space for the user. Quite often the top navigation menu can take up unnecessary space even going to a quarter of the viewable space.  This lessens the visual space available to the user as he/she scrolls down. Maximising on the available screen display page content can be done effectively by getting the top navigation bar to be as slim as possible.

2. Visually engaging sections

As the mobile user scrolls down is incumbent from a design perspective the the content is visually stimulating and clear messaging. This valuable design strategy involves creating sections that fill the viewable area and are graphically engaging with visuals, balanced with brief messaging and design elements. People are more visually orientated than ever before and so giving the user what is expected will produce better results.

What does not produce results is endless amounts of scrolling text, this is bad, (unless you are writing for a blog or publishing a book). No one wants to have to scroll through lines and lines of text especially when they have just arrived on your mobile website. This is a sure way to turn users of and disengage.  Best practice is to make the areas as the user scrolls as engaging as possible. Strive for more visuals that fill the screen along with high contrast sections.

3. Performance enhances the brand differentation.

Because performance is an essential element in the user experience it directly helps to differentiate the brand. Giving the user what they need and making their lives better gets a positive perception and ultimately increases the base following.

The performance of a mobile website can depend on a few factors such as:

  • The hosting server
  • Page size
  • Image sizes
  • Video auto play
  • Flash and other animations
  • Site framework
  • Type of website platform
  • Amount of request per page

Here improvement in these areas mobile website speed and performance will go up by many factors. When it comes to images these may have been added into a desktop website, however it is best practice to have separate images kept specifically for mobile use. This involves optimising mobile images to be as little as 40 – 70 kb in file weight so ensuring a lighter page and faster load for the user.

You can test how mobile friendly a website is by using this resource here: https://search.google.com/test/mobile-friendlyhttps://search.google.com/test/mobile-friendly

4. Mobile optimised contact form.

A mobile optimised contact form should be clear and fill the screen with input fields large thus making typing in the message easy.

5. A clickable phone number.

A clickable phone number clearly displayed will produce more leads. Just by adding this simple piece of code any number will be active for one click calls. <a href=”tel:065 6890590″>065 6890590</a>

For best practice keep the number at the bottom of the mobile screen. Use in either a call to action format or in an app style layout on the footer.

6. Get rid of sliders.

Sliders and other animated elements may be ok for desktop however for mobile these same elements will affect loading times. Sliders for example can use javascript to make the images move across the screen automatically. The fewer the requests the browser needs to make leads to better performance.

One caveat on sliders is that while they may look good on desktop typically these landscape orientated sliders degrade down to be out of proportion with the primary page visuals. 

7. Colour

Colour is more than just a design aesthetic or brand orientated it can be used with functional elements on screen to draw attention to a specific area or call to action. Colour also work great on mobile to separate and define sections as the user scrolls down, as a result makes for a better visually enaging experience.

8. Visuals in portrait mode.

Which is better on a mobile screen in terms of visuals and impact, is it a rectangle or a square? The correct answer is mainly by using square based images. A rectangle on a mobile screen may take up only 1/6th of the screen area whereas a square based image can account for 50% of the screen. In our opinion the best impact size is a ration of 10/14, this means most of the screen area gets filled by the visual leaving cues below/or above for continued scrolling.

some more additional reading here https://developers.google.com/web/fundamentals/design-and-ux/principles/

share this article..