At Cyber-Duck, today we celebrate the launch of our new fast and fully responsive website. The new website has been created from the ground up to deliver a great user experience (UX) on as wide a variety of devices and browsers as possible.

responsive web design

Our new website performs well across devices. 

Our website is optimised for use across an array of devices. It was Benjamin Franklin who once said, “When you are finished changing, you're finished”. Anyone working in the web industry will appreciate this sentiment. We work in a medium, which evolves with developments both seismic and small every single day. Keeping abreast of this ever-changing landscape is a challenge, but it’s what makes working with the web so fantastic and exciting.

For the past couple of years at Cyber-Duck, we have adapted to an increasingly mobile web audience by producing responsive and adaptive mobile websites for our clients. So in mid-2012 when we sat down to review our own website, we decided a change was needed.

A look back

This website is our 6th major iteration and marks a fairly significant shift here at Cyber-Duck. Gone (but not forgotten) are our beloved 3D ducks and quirky, fun animations that have long been our calling card. It’s not a move that’s without risk; many of our customers loved our 3D duck animations.

old cyber-duck website
Our beloved 3D Ducks on our 2010 website (version 4).

So why bother changing? Well, we wanted to produce a website that was flexible, easier to manage and would work great regardless of how it was being accessed. Up until this point, we had a desktop website which we iterated upon and improved each year. For example, last year we stripped all Flash from the website and implemented the 3D duck animations using HTML5 video.

Alongside the desktop website, we had separate tablet and mobile optimised websites, a strategy borne purely from the need to quickly tailor to an increasing number of tablet and mobile users at the time.

Adapting to responsive

Despite these websites performing well for us, there were several factors that helped us to decide that this approach was no longer sustainable:

  1. Supporting multiple codebases
  2. Content management
  3. The emergence of new mini tablets and ‘phablets’

The former two were not ideal, but at least were manageable from our perspective. The latter, however, was a deal-breaker. With so many more web-enabled devices of all shapes and sizes entering the market every day, it would only be a matter of time before we then needed to think about optimising for new form factors.

card sorting
Our design team used card sorting exercises to help organise our existing content for the new website.

It was at this point that we decided to completely overhaul all three websites and create a responsive web design that could provide the best possible experience for all of our users regardless of how they accessed our website.

What’s new on this website?

At the very start of this overhaul, we set ourselves some simple goals, or guiding principles if you like, that we wanted to achieve with our new responsive website:

  • Be blazing fast!
  • Be accessible and give users content parity
  • Be device agnostic / future friendly

mobile strategy discussions
Our Managing Director, Danny and the team deep in conversation about our mobile strategy.

Speed matters

Improving speed performance doesn’t just benefit mobile users; it benefits everyone. From stripping back our 3D animations to going as far as to entirely remove our CMS (with the exception of our blog) we have designed with performance in mind from the outset.

We’ve implemented lots of performance enhancements, including:

  • Removing our CMS, this alone massively improved loading speeds
  • Only conditionally loading scripts when browsers can support them
  • Developing our own fast, flexible and light-weight CSS grid framework
  • Optimising all assets and using GZip compression
  • Reducing HTTP requests as much as possible
  • Using a content delivery network (CDN) for faster delivery of images and CSS

designing-performance
Ramon developed early prototypes to see how we could improve performance and responsiveness.

Inclusive and accessible

We really wanted to make sure that our new website is accessible to as many people as possible.

The starting point was ensuring that our users would have access to the same content across any device or browser, rather than locking users out from content based on the device they’re using to connect to our website.

To further promote inclusiveness on our new website, we also implemented access key shortcuts along with with a variety of accessibility best practices.

Device agnostic design

In the search for a truly responsive design, rather than designing for specific devices, we took the approach of designing layouts and interfaces that would fluidly adapt regardless of screen size. This approach ensures that we do not need to optimise the code further as and when other devices come out to market. We included (but not limited) breakpoints at 240px, 600px, 760px, 980px, 1360px as well as targeted media queries for certain content and also high pixel density screens.

responsive grid
The website responds fluidly between each breakpoint.

Though we did not design breakpoints based on specific devices, to ensure further future friendliness, we did test our website across as many devices or browsers we could get our hands on; from the more common (a variety of phone and tablet devices, desktop browsers); to the less common (Screen readers, games consoles such as PS3, the new Kindle Paperwhite, the PSP Vita and others). We even tested on a recently data-enabled feature phone and the website simply worked.

device testing
Our UX producers and front-end team tested the new website on a wide variety of devices, including those which were less common.

Just the beginning

For us, this is just the beginning. We have lots more planned for our new website to continually improve performance, accessibility and future friendliness. We hope you like the look and feel of our new website. As always, we would be delighted to hear your thoughts. If you would like to know more about what we did, and how we did it, feel free to get in touch!