What does having a responsive a website actually mean?

Back to Blog

Getting a new website off the ground can be tough. You might be sitting there with a checklist of techy-sounding buzzwords, hoping you come across a web development company that sounds like they offer it all. You're looking for things like:

  • Hosting
  • Domain management
  • A Content Mangement System (CMS)
  • SEO
  • Responsive Design

Of course, there's a big difference between a company saying they do something, and actually doing it.

Let's take responsive design and development as an example. If a website has been properly, responsively designed, then it should adapt to whatever device it's being viewed on. It should be just as user friendly no matter how it is being viewed - it responds to the user's device.

responsive design

The site above was designed and developed by DelaneyDavidson, and looks great whether viewed on desktop or mobile. We've put together the image in photoshop, but the actual shots of the page aren't modified. Check out Armidale Boutique Accommodation's website on both a computer and a phone to see for yourself.

Unfortunately, some developers tend to understand a site being responsive as "this site will display on a phone," without taking usability into account. This doesn't sound like too big of a problem, however if you don't develop specifically for mobile, you get this:

responsive design poor

Fine on desktop, unusable on anything smaller. If your users have to zoom a screen in or scroll horizontally on a device, then your website is not responsive, and that's a problem - more than half of today's web traffic is coming from users on mobile devices!

 

Taking it a step further

For us, responsive development isn't just about making sure that a webpage looks good on any device - we want to optimise the browsing experience in every possible way.

 

Images

Images tend to be the biggest bottleneck when loading a webpage. Desktop and laptop computers need big images, especially if the page uses a full-width banner or the like. However, mobile devices require much smaller images to fill the same space, as their screens are physically smaller. We set up our sites to intelligently serve and resize images, so a phone will display a phone-sized image and a desktop will have a desktop-sized image, to optimise loading times.

 

Menus

Horizontal menus are the standard for desktop sites, but they just don't cut it for anything smaller. If you're viewing a site on a phone, menus should stack horizontally, and be expandable so as not to get in the way and occupy precious screen space when not needed.

 

Spacing

Having tightly-bunched elements on the page can work fine on a desktop, where the user has precise control over their interaction with a page (their mouse). However shrink this down to a phone, where users have much less finite control with the much larger surface of their finger, and spacing around things like buttons and links becomes very important. We make sure to remove the possibility of a user accidentally mashing three links at once, or hitting something they didn't intend to.

 

Order

The elements on your webpage might make sense a certain way on desktop, but on mobile the page loses clarity, the relationship between elements loses focus. That's why we take care to monitor the flow of a page, and reshuffle its contents its contents for mobile if necessary, so that your message is always clear and people aren't turned away because something doesn't make sense.

 

How does your website stack up?

If something doesn't function well on mobile, then all too often it's not worth visiting on desktop either. If you're looking a for a brand new or revised website that takes into account the need for responsive development, contact us to discuss what we can do for you.

An article by Coby Delaney / Senior Developer

Published on 20 December 2016