As of April 21st Google put in place an update to its algorithm. This will specifically focus on placing mobile friendly websites closer to the top of the search results than other websites. If your website is not yet mobile friendly it is time to design for mobile. Writing for Digital Telepathy (2015) Annie Sexton explains that this will have a transformational impact on the search results. The goal of doing this is to make sure that users can more easily find the content that they need that is relevant to them. As Sexton points out:
“More than ever before, responsive design can boost your search ranking and user satisfaction.”
Indeed, more and more people are searching using mobile devices. It is shown that a study by Comscore found that considerable digital media consumption growth happened on smartphones and tablets in the past four years. Smartphone searchers were up by 394 per cent over that period and tablets by 1,721 per cent. Additionally 31 per cent of traffic to “top 10 digital properties” were visits from mobile only. All of this indicates the importance of mobile and why Google is taking this monumental step at this time. There are some recommendations that you can take to improve your website, focusing on the most important priorities first. These are now explored.
Design for mobile sizes
One of the most important changes to make quickly when designing for those coming from mobile is to make sure that the site is usable on mobile. A challenge with mobile sites is that designers sometimes do not take into account the fact that the screen size is small and so focusing on the most important steps that the user should/can take is important. The mobile site does not have to be an exact replica of the full website on a mobile phone. Rather it needs to focus on the key navigations that may be taken. This means focusing and prioritising what is really important and how customers are likely to use the mobile site.
Focus on performance
Focusing on performance should arguably be another priority. Not everyone has a very fast phone or connection, so making the site such that it takes a long time to load is a sure fire way to get customers to click away and go elsewhere. In many places 3G is still the norm, and this is true of many countries. This means that customers will have to wait anyway for the site to load. Making it take longer for them through poor performance is not going to be helpful to your business. The load time needs to be fast.
Simplicity is also an important concept to embrace with designing for a mobile version of a site. It is explained that typical web based e-commerce sites can be quite complicated and there can be many steps to take. This simply doesn’t work well on mobile. Making the navigation as simple as possible on mobile, by providing clear and obvious labels and steps to take will improve the user experience and be more likely to encourage people to use your mobile site. It is argued that using good drop down menus is helpful, and keeping the different options to a minimum is also helpful.
Optimising images is also considered to be necessary. It is recommended to minimise image sizes to no more than 200KB. Cutting back on the number of occasions that the user has to “ping the server” to get an image is helpful in reducing load times. One approach to achieve this is explained to be Sprite Sheets. These are fundamentally one giant image that includes all of the other images. When a customer clicks on the image, the cropped version of larger picture is shown to them. This saves on server requests for the browser that are unnecessary. It is additionally argued that HTTP requests can be reduced by concatenating scripts and style sheets.
Design for fingers
Some final bits and pieces to think about include designing for fingers. Some people have bigger fingers than others. There are guidelines for different kinds of phones that can help you in making sure that your site is user friendly in this regard. Also, using SVG images for icons and logos may be useful for retina or high resolution screens as they can scale and be presented at any size. Also for retina or high resolution screens you can double image sizes to make them look really sharp.