This week, we are proud to announce the official launch of the ‘CH Hausmann & Co’ responsive website. This project is a great example of how the team worked relentlessly to create a striking design that works great on every platform.
CH Hausmann & Co. (CHH) is a prestigious and well-established law firm based in the West End of London working with embassies, established businesses, start-ups and high-net-worth individuals, amongst others. They commissioned Cyber-Duck to produce a website and enhance their brand.
The website focussed around prestigious and classy HDR photography
How we came up with the vision
When we first visited their offices to kick-off the design process, we quickly identified that CHH’s character is far from the stuffy, corporate environment that is usually associated with the legal industry; CHH is a highly personable, creative and professional law firm led by a team of lawyers who are charismatic and experienced. The Ducks were equally impressed with CHH’s offices; a distinguished listed building with marble décor throughout, Victorian exterior, legal antiques and classy artwork.
We took a deep breath and brainstormed the creative direction and decided that for such a splendid law firm nothing less than the ‘Godfather’ of websites will do. We decided to take a visual approach that completely avoided obvious, clichéd stock photography. We hired Rob Clayton, a vastly experienced and talented photographer, to help capture the ‘character’ of the firm.
Professional photographer, Robert Clayton ensured we captured the essence of the character of the company.
We chose Robert Clayton because of his amazing portfolio and very impressive HDR (high dynamic range) technique that produces truly remarkable photographs. After a day of shooting at the client’s offices in London we had some photographs to focus our design around. To bring these images to life, we prototyped and experimented with parallax scrolling on the images themselves. This added a depth that made the photographs pop out from the page and feel extremely immersive.
This is where Cyber-Duck’s award-winning development and design team came in, to collaborate and produce a dramatic and stunning design combining parallax techniques and HD visuals as the user scrolls to create a faux-3D effect. This took a lot of experimentation as the website also had to work perfectly on less powerful smartphones. Making a responsive parallax website is not easy, but we managed to achieve a design that progressively enhances the user experience with higher quality visuals and parallax animation effects as and when the browser and screen size is capable of displaying them.
Mobile first approach?
Cyber-Duck has always maintained that agencies should not exclusively take a ‘one-size fits all’ mobile first approach to design. Instead, they should take the approach that is appropriate for the project. Mobile first can sometimes lead to “safe” designs as decisions tend to be led by questions such as ‘how would that work on mobile?’ and ‘will that cause issues with mobile performance?’ as opposed to concentrating on what the brand needs to communicate. This project embeds Cyber-Duck’s belief that a flexible approach to art direction and RWD should encourage better creativity and more innovative solutions to design problems.
The website loads fast on mobile, whilst offering feature enhancements to leverage device capabilities in more powerful computing devices and displays.
The website runs seamlessly across all devices.
Here is a quick breakdown of some of the techniques we used on this website:
“Parallax Scrolling” is rarely combined within responsive websites, this is because it does not render well on mobile and most tablets. To make this work with responsive web design we added this as a progressive (or feature) enhancement. This means that the script for the parallax scrolling is not loaded on mobile and tablet and is only called upon when viewing at a larger breakpoint in the design. This keeps the loading times down, as the smaller devices are not loading large unused scripts. It is always important to ensure that your website isn’t entirely reliant on scripts to provide the basic user experience.
As a graphically led design, much of the weight of the website came from image assets being downloaded. To optimise these images we experimented with various techniques to reduce filesize of the high quality graphics we used. By applying a ‘posterize’ effect (with approximately 30 levels) to certain images in Photoshop we were able to decrease the number of colours into fewer regions of tones. On many of the images this did not affect the quality noticeably, but did drastically reduce the output size.
As Photoshop is notoriously bad at PNG compression, following our initial optimisation, we ran all the PNG images on the website through Tiny PNG which in many cases further reduced the PNG image size by over 50%.
Tiny PNG is a great tool that all designers and developers should have stored in their bookmarks.
For JPEG graphics, we used ImageOptim, a Mac app which automatically finds the best compression parameters and removes any unnecessary data from images to further reduce file sizes.
‘Adaptive Images’ is a server-side PHP script that creates and serves up images dynamically based on the screen size of the viewing device or browser. This drastically improves loading times, as the device does not have to load a large image and then scale it down to fit the screen. This works especially well if you are using full screen / cover images, as they need to retain a good resolution for larger breakpoints to maintain clarity.
Calling Separate Images
The Adaptive Images script is perfect for compressing and resizing jpegs but when outputting PNGs the compression is not as effective. Our solution to this was to create two separate versions of the image, one for desktop breakpoint and one for smaller devices. This helped radically improve loading times on mobile internet speeds.
An issue that we quickly identified with having a one page website was the large amount of scrolling when the design is shown on mobile devices. To solve this issue we decided that on mobile the content for each section of the page should collapse down into expandable accordions.
The Ducks experimented with various techniques to achieve a responsive parallax effect.
Adaptive design philosophy
By combining both responsive and adaptive techniques (read our article on UX Magazine about RWD and AWD) we were able to achieve a design that is visually led but is optimised for viewing on any device. This website helps to demonstrate that RWD does not mean as a designer you are limited to the art direction that you can create. Whilst producing this website, we looked for techniques and methods that would make this design work across all platforms, we did not let specific platforms dictate our design.
At Cyber-Duck we are constantly striving to improve loading times on all of our websites and this website is no exception. We will be continuing our experiments to reduce the file size further to make the website load faster on mobile networks. Please take a moment to look at the new CHH website and let us know what you think.