The must have features of a mobile responsive design in 2017:

By Shan Balasuriya Posted Date: 2017-09-25

Mobile Responsive Design Features

The use of smartphones and mobile internet has been increasing steadily over the last few years. The Deloitte mobile consumer report at the end of 2016 showed that 84% of Australians own a smartphone which is an average of about 16 million smart phone users. In 2017 this number is set to rise, which means it is absolutely essential that every business with an online presence must consider mobile device compatibility in order to remain relevant.  

In addition to making your website mobile friendly (which is now a basic standard), you can make use of some good features of mobile responsive design in order to stay ahead of the competition. Discussed below are some of these great responsive design features you can use:

  • Minimize & Hide Content: 
    The nature of mobile devices is such that you are limited in terms of the real-estate you have available to work with. This means, all the content from your desktop site may not look as great if shrunk down to the mobile responsive version. Your webpages could end up being very long, and users will have to scroll, scroll… and scroll to reach the end. This is not ideal and you are more than likely to lose that visitor resulting in a bounce and missed sale. 

    In order to prevent this, it’s important that your web designers cater content on the mobile devices for the optimal mobile experience. You can exclude some content from the desktop that may not be essential to the mobile experience.  Use tools like Google Analytics to see how your website visitors (on mobile) behave, this way you can determine what content to include and what not.  Making use of elements that reveal themselves on a touch can be ideal for organising content on the limited space of mobile screens (eg: features like slide down items).

  • Responsive Images & Scalable Vector Images: 
    The variety of mobile devices will have a range of different needs. For instance a desktop site may need a wide image with high resolution while in its mobile responsive view, a smaller lower resolution image would do. Make use of multiple images of varying resolutions in your responsive design, this will also improve load speeds on mobile. Since the mobile responsive site will ‘call’ a lower resolution image of a smaller size rather than loading and shrinking the one (large) image. 

    In addition to this it’s a good idea to make use of vector graphics and images that are scalable. By scalable the graphics can increased in size without compromising on quality or sharpness. In addition to this, scalable vector graphics have the advantage of having significantly lower file size resulting in better performance. Such vector graphics are especially useful for icons and buttons throughout a responsive website. 

  • Make use of mobile device features: 
    Smartphones and tablets with their calling, geo location and gps capabilities give you the option to do a wide range of tasks. This includes making phone calls, sending messages, opening apps etc. directly from the web browser. It’s always a great idea to make use of these features in order to give the mobile user the best experience possible. 

    For instance on a desktop site you would list out your business phone number and address. Whereas on the mobile responsive business website you could display the phone number as a ‘Click to Call’ button and the address as a button that will open directions on the device maps app. 

  • Appearance of text: 
    It is vital that the text content of your website is readable across all mobile devices. In order to give the mobile user the best experience possible it is essential to alter font sizes and colours, even the font itself depending on the device or screen-size it is being viewed on. Certain fonts although they look great on desktops and larger screens may not be as attractive or readable on smaller screen devices. Even the amount of text within a key sentence or paragraph must be taken into consideration so as not to make it too long.