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.
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.
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.
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.
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.
• Be blazing fast!
• Be accessible and give users content parity
• Be device agnostic / future friendly
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
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 a variety of accessibility best practices.
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.
We hope you like the look and feel of our new website. As always, we would be delighted to hear your thoughts, please leave your views in the comment section.
If you would like to know more about what we did, and how we did it, feel free to get in touch!