Blogs

City University London Web Team

Author Archives: Lawrence Naman

Development Tools for Windows

Productivity.

For many web developers, Windows is perceived to be a hostile environment in which to develop. But you don’t always get to choose your OS, so over the years the Web Team have adopted a number of tools and services to speed up workflow in a predominately Windows world.

In the interests of posterity I’m sharing them here. Not all of them are exclusive to Windows and it’s not an exhaustive list (please add your favourites in the comments). If you care about what your are building, you should care about your tools. (more…)

Responsive Navigation

Information Archiecture, Responsive Design, Usability.

The Web Team have recently launched two responsive websites: a resource for New Students packed with useful information about the induction process and a micro-site celebrating Cass’s Ten Year Anniversary.

One of the biggest challenges in developing these sites was tackling navigation. For better or worse, City’s website has a complex navigation system and shrinking this down to fit into the limited real-estate of a mobile phone screen threw up a number of IA, design and coding challenges.

Given that responsive design is a relatively new phenomenon, a number of design patterns have emerged to deal with navigation on small screen devices. After prototyping and testing a number of different options, we settled on a hybrid approach that prioritises search and gradually reveals layers of navigation when users click a “toggle” button.

Here’s an example from the Cass website:

Mobile navigable – collapsed and expanded

Desktop Navigation

These screenshots illustrate how on smaller screens the global navigation is collapsed and hidden. When users click the menu icon, the navigation then slides down. This emerging “toggling navigation” pattern has sparked an interesting debate amongst the web design community about which icon best represents a hidden menu. We went with the three horizontal lines approach as this appears to be emerging as the most popular pattern and has been adopted by major sites such as Facebook, Twitter and Google. Also, when we tested the design with users it didn’t cause any confusion – it appears to be a design pattern that many users instinctively understand.

To aid user’s understanding of the icon we included the label “menu”. Again, there is debate over the best label: “navigation”, “navigation menu” etc. but “menu” appears to be emerging as the most widely used. In time I suspect that enough users will understand what the three horizontal lines means that the label can be dropped altogether.

The global navigation differs between the Cass and City website but we have adopted a very similar pattern to keep some consistency between the two.

Here the navigation works in exactly the same way except that the sub levels have been removed to simplify the experience, and we retain the “Cross domain” navigation above the global navigation.

These sites are still very much our first forays into responsive design and we will continue to test and refine these patterns as we “responsivise” more of City’s websites.

Unifying a University’s user experience

Uncategorized.

Following the launch of the new global navigation on our external website, we have rolled out the design pattern across three other online products: Moodle, the Student Intranet and Library.

Screenshots of how the global navigation looks across City's online products

The design is part of our drive to create a consistent experience across the range of City’s online products. We want users to enjoy complementary transitions between our most used online applications and websites and hope the new design will help users discover where they are within City’s digital landscape and be able to easily navigate across the breadth of our products.

Admittedly, creating a unified user experience is by no means an easy thing to achieve in a University environment – with a diverse (and constantly growing) range of online products, individual schools with their own brand considerations and priorities and separate teams responsible for each product.

However, by reaching out to teams and people across the University (big thank you to the Moodle team) we have made a small but important step in unifying the experience of City University London online.

Serena Collage Virtual Machines

CMS.

Because our legacy CMS does not play nicely with modern web browsers, the Windows Team have kindly set us up 5 “virtual machines” with Windows XP and Internet Explorer 6 installed.

CMS users are now able to remotely log onto one of these machines to edit and publish their content using the browser the CMS was designed for. We hope this will alleviate some of the pain of using poor old Serena Collage.

(more…)

Image Galleries with Squiz Matrix and Galleria

Development, Tutorial.

Tools: Squiz Matrix, JavaScript

A recent addition to the City and Cass websites are image galleries. The key requirements for the galleries were they:

  1. Should display images in a visually attractive and engaging way
  2. Should be quick to load i.e. not loading all images on page load
  3. Should gracefully degrade to a useable gallery for users without JavaScript
  4. Should be easily editable by content editors

Here’s how we built them using Squiz Matrix and the jQuery plugin Galleria, taking a cue from the tutorial over on Matrix Users.

(more…)

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