Responsive Website Design

If you want your business website to look good on a mobile device it needs to be responsive. Although customers are generally more forgiving on the load time for a website when using mobiles, they still demand good performance. Bad performance can force your customer to leave your website and in many cases never return.

Therefore you need to ensure your website can be accessed on mobile devices and perform within expectations. Learn some of the best techniques to creating a responsive website in this blog post.

What Is A Responsive Website?

A responsive website is one which can be viewed easily on any mobile device. Every mobile device is different both in terms of actual size and the pixels it can display. Having a website which can adjust its look so it can appear professional no matter what it is viewed on is essential.

If you are not familiar with the concept of responsive website design, here’s a video we made that might help:

Furthermore, if a web page is not able to load within 7 seconds, it is likely your mobile visitor will leave your site. Although this is longer than the 5 seconds which is generally attributed to desktop visitors, it is still a short period.

Careful design can cut down the load time of your website.

How Many People Use Mobile Technology To View Websites?

Mobile technology usage is constantly on the increase. According to research, about 90% of French mobile owners will use their devices to browse the Internet every day. In America at least 55% of smartphone owners go online.

It is not just those who are on the go who use their mobile devices for online activity. The rise of mobile technology has allowed families to spend more time together in the living room while still being online. That is why one of the most popular places for surfing the web while using a mobile device is at home.

Here is a breakdown of the top five locations people surf the web using their mobile devices:

• Home: 96%
• On the go: 83%
• In store: 76%
• At a restaurant: 70%
• At work: 69%

In the US, mobile technology is also being used to make purchases. On Black Friday, a traditional high consumer spending day, one in five online purchases were made using a mobile device.

Therefore, without a responsive website, your company could be making a huge loss.

The Challenges For A Responsive Website

There are many challenges to overcome when designing a responsive website.

The first is keeping the content readable. Scaling is a particular issue: 14-pixel font size on a 1920 pixel wide screen is likely to seem much smaller on a 320-pixel wide iPhone screen. Equally, text on a desktop site should be designed to accommodate scaling. Therefore a balance needs to be found between the desktop and mobile ready sites.

The second challenge is to make sure the site is easy to browse. Too much text in one column can be difficult for the user to read. Therefore at times, elements need to be hidden.

The third problem that responsive websites often suffer from is keeping them touch ready. For a website to work on mobile device it needs to allow the selection of links. Apple recommends buttons be about 44 pixels square, although buttons of about 25 pixel squares are often the industry standard.

How To Create A Mobile-Ready Website

Creating a website that works across many device touchpoints can take various paths.

One method is to create one site where no matter what device is used; the website looks aesthetically pleasing. This is called Responsive Website Design (RWD).

Another method is to create two or more website designs. One is for the desktop, the other for mobile devices. This can often create more personalised experiences for users of different devices, but also means maintaining more than one site, and all that entails in terms of content, SEO, etc.

Either way can be used, and your choice will depend on a number of different factors:

1. Does your site have lots of interactive points?

2. Do you want to maintain content and marketing efforts in just one place?

If the answer is yes to both of these questions, then the first option may be best. In this scenario you are looking to create a media query.

A Media Query might look like this:

media=screen and (max-device-width: 480px)

This query, which is embedded in your CSS, has two components. The first is the media type (the screen) and the second is the condition (whether the screen is less than 480 pixels in width). If the condition finds that the device has less than 480 pixels width, it would show the visitor certain styling for that size of screen; otherwise it would show alternative styles.

How To Build A Responsive Website

If you are looking to build a responsive website then you need to consider several functions to ensure they are mobile optimised. The first thing to do is to contact your web developer or hosting platform and check they support mobile ready websites. If they do not, you need to look elsewhere.

Then you need to look at these elements to maximise the responsiveness of your website.

Target Devices: Have at least three different sizes for your site, to target different browser widths. This way you can have a website which is best for phones, tablets and desktops, and always allows your visitor to freely roam your website – increasing the chances of converting them.

Content: On each version, decide what content you want to keep. You might decide to hide certain elements for smaller screens to decrease load time and the length of the page.

CSS Constraints: Design your website so that it allows as many page elements to be in pure CSS as possible, as opposed to images. This allows more flexibility when resizing pages and reduces load time.

Images: Ensure you are using minimal graphics on your website. Images can take up as much as 70% of the load time.

HTML: Where possible use the same HTML for all resolutions. Start with the biggest version and then reduce down elements when creating the smaller resolutions.

Links: Limit the number of linking text and buttons in your content.

Use Gzip: Use Gzip to compress your website and allow it to load faster by using less bytes per page.

Conclusion

Mobile internet usage is continuously on the rise and many individuals will use their mobile devices to browse websites, even in their own home. Having a responsive website which matches their expectations is a must if you want to convert them into a paying customer or sign them up to your email list.

Action Steps:

• Use your mobile device to look at your website. Does it look good, is it functional?
• Go through the above checklist and see if you can implement any of those changes to create a more responsive website.