Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

This is a question that we are beginning to get asked more and more and soon, will most likely be the only type of website that any studio, agency or freelancer designs and builds. It’s not a buzz word – it’s something serious and really cool.

Definition

Responsive web design is the service of planning, designing and building a single website that automatically fits on a variety of different sized and shaped Internet capable devices. Typically this means a website that functions well on handheld, touchscreen smartphones (e.g. iPhones), tablet computers (e.g. iPad) and desktop computers, although can apply to almost any device.

How does it work?

Using modern and up-to-date HTML5 and CSS3 code, a responsive website is configured with ‘breakpoints’.  These do as they sound – they break the website at certain points. During the planning of a responsive website, we’ll make a list of the devices the site needs to support and then insert a breakpoint for each one. Many devices share common breakpoints however so you can often configure fewer breakpoints than there are devices.

So what is a breakpoint? How is it used?

In reality, a breakpoint refers to the pixel size of a device. An iPhone 4 for example, has a resolution of 960px x 640px on a 3.5” screen. When we configure a responsive website with a breakpoint at this size, the CSS code we write will re-arrange and re-size elements on the screen to fit more appropriately to the size of the device. If you’re reading this on the Voltronik website and on a desktop computer, try resizing your browser window. You’ll see, if you do it slowly, the website changes certain things at certain points – these are the breakpoints in action!

Why is responsive web design the way forward? What are the benefits?

  • The main benefit is that you get a website that works on a range of popular devices, making it more accessible to users no matter what device they’re on with only a little extra work.
  • You reduce your web design costs as you don’t have to maintain a separate website for smartphones, another for tablets then another for desktops.
  • You can keep your content strategy simple as anything you create for desktops, also works right down to smartphones, including photos and video.
  • You can add or remove breakpoints at any time as and when new devices come out or old ones are discontinued.
  • You will have a website that is modern in that it understands that Internet capable devices are all around us and are widely used to access the internet on the go – you leave fewer potential customers unreached.

How long does it take to implement?

To design a new website that is responsive from the ground-up doesn’t take much longer than designing a standard, static-width website. Our average is an extra 5 days to plan, design, and build a small responsive website, more for a larger one depending on its final size.

To implement responsiveness into an already built, static-width website takes less time – our average is around 2 days.

All our standard and responsive websites are built using a content management system and come with our bespoke help system baked right in.

Summary

Responsive websites are the way forward. They open up your website to a larger range of potential visitors with only a little extra work and provide a better user experience on mobile devices.

If you’d like a website that you can update yourself and that’ll work on a range of Internet capable devices, why not get in touch so we can plan and build something amazing together?