You may have noticed some sections of the website have been updated recently. The About, For-Business and International sites have been migrated to a new and improved theme which utilises “responsive design” to optimise the viewing experience for users – no matter what device they are using to access the website, be it smart phone, tablet, desktop or even widescreen TV.
So much has been written about responsive design that I won’t go into a detailed explanation of precisely what it entails here, instead here’s Wikipedia with a helpful summary:
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries…
Currently around 15% of visitors to City’s website are using mobile devices and this number is increasing month on month. The new design gives all users the best experience possible by adapting the page layout to the width of their device. On mobiles that means a minimum of resizing, panning and scrolling to read content, on larger screens type and line length are optimised to give a comfortable reading experience.
For those interested in learning more about responsive design, I recommend starting with Ethan Marcotte’s classic book on the subject.
As well as going “responsive”, the new design also features a revised navigation model. The old design had vertical and horizontal navigation for each site section, as well as a breadcrumb trail and the global navigation which is included at the top of all City pages. The screenshot below illustrates just how much of a page was dedicated to navigation:
All this navigation was detracting from the most important element of any web page – the content. We have striped this back to one element stretching horizontally across the page – which takes the place of the horizontal, left hand navigation and breadcrumb found in the old design. Condensing the navigation into one consistent element allows the content room to breath and can be collapsed down on mobile devices.
The Need for Speed
We have also taken this opportunity to improve the underlying code of the website. This involved a fair amount of tidying up and re-factoring of code – making it easier for us to make the site better in the future.
Some of the “under the hood” improvements include:
- A subtlety updated look and feel that replaces image based design elements such as gradients and rounded corners with modern CSS 3 techniques.
- This includes using an icon font rather than images for many of the icons used throughout the site. Less images = faster loading pages.
This is not the end of process by means. As we continue to roll out the design across the site we will continute to iterate the design and make improvements based on user feedback and usability testing.