Responsive design for all your digital pages

Responsive Design - website

Responsive design, With so many device types feeding our addiction for online information, business not catering to theme on their website is a major mistake on many levels.

What is know as responsive design, creates as close to an optimal experience for virtually every device, from smartphone to desktop, tablet to internet TV and with little or no additional cost and the following is a good starting point for you to do this with best practice principles in mind, without getting too technical.

Some people will try and argue that you should create a specific interface for each main device type, but for most of us that is too costly, not juts in the programming, but also the management of them too. Responsive design is now commonplace with many platforms, including WordPress, so there is no excuse for a site that doesn’t work, as it should on a mobile device.

Here in the UK, we have seen an explosion in smartphone adoption, probably more so than other countries around the world and it’s been shown that when people are “dual screening” or checking for local information they are most likely to be on a device that does not have the normal desktop or laptop screen and possibly software, for example things like Flash, in addition, you may also find the connectivity is slower too, so here are the things you should keep in mind when designing a responsive site.

The system is based on a series of grids, so remember this when working out what should be placed where. The other thing responsive design uses is Cascading Style Sheets (CSS) that allows the device to “tell” the system their screen dimensions and, that way again the page can be segmented and presented in the best possible way. Popular screen pixel widths are 320px, 480px, 600px, 768px, 900px and 1200px

In terms of navigation or the header area, this will work well across size variations, but make sure you check the site as it is being developed, as many people make the mistake of having too much in the header or navigation and it therefore does not look so good on a smartphone.

Next is the way images are seen, remember that they should be clear and crisp on the large devices but be able to convey your intended message or information on a small screen too, so make sure they are not overly complex. You are better to have strong simple images or even an image gallery.

When it comes to text, it’s already accepted that people don’t always read that much information online, so getting a good balance between information and readability, especially on smaller devices is really important.

If you have a larger amount of information to share on a site, then I highly recommend video as a way of doing this and better engaging the visitor, you can check out the video section to learn more about this powerful and easy to use website tactic.

When it comes to aspects like data capture, just think about how easy it will be for people to input text or give lengthy feedback, because when you have a responsive design, yes it will work when you have a full keyboard, but people will be please to use the site on a phone too, but maybe not so happy if they have to complete a lengthy form.

Last but not least, remember you need to make sure the legal aspects are still in place and also work across various screen sizes, but the great things is a phone number, when place correctly on a responsive site, can be pressed and a phone can make the call straight away, so remember don’t show a number as +44(1202) 7xxxxxx as this when pressed just doesn’t work.

So as with all design, it’s about easy of getting to the required information and the user experience, so make sure you check the design as it is being done and press every link and every button to try every feature, so you know that when your responsive design website is published it is customer focused, not technically clever.

We always have people ask us what do we use on this site, so here are a few of the most relevant service providers:

  • To manage our audience and email communication we use: Infusionsoft
  • For most of our images, we use: Shutterstock
  • Our web hosting and domain registration is done by: 123-reg and Realhosts.
  • To automated and centralise our social media we use: HootSuite
  • To help with SEO and lead generation we use: Webfire
  • Video on this website is hosted on: Wistia

If you would like to find out more about any of the providers listed above, we review them honestly, provide details of alternatives (as they may be more suitable for you) and also other services we use in our resources section.

By Adrian Fleming