City University London Web Team

Going Responsive

Development, Responsive Design.

City's new theme as seen when viewing website on a smart phoneYou 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.

New Navigation

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:

Too much of the page is taken up by 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 navigation menu is collapsed on smaller screens to save space

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:

  • Switch to HTML5, utilising new features such place holder attributes on forms and data attributes to store semantic data on elements to can be picked up by JavaScript.
  • 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.
  • Optimised and re-factored JavaScript. As well as rewriting our main script file and using Yepnope.js for asynchronous script loading we have significantly reduced the number of JQuery plugins used.

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.

About Lawrence Naman

Web Team Leader at City University London, specialising in HTML5, CSS, JavaScript, interface design and lots of other awesome front-endy things View all posts by Lawrence Naman →

Comments are closed.

Find us

City, University of London

Northampton Square

London EC1V 0HB

United Kingdom

Back to top

City, University of London is an independent member institution of the University of London. Established by Royal Charter in 1836, the University of London consists of 18 independent member institutions with outstanding global reputations and several prestigious central academic bodies and activities.

Skip to toolbar