Introucing the Common Wed Design version 3.0

The Common Web Design version 3.0

The Common Web Design version 3.0

Almost a year ago we introduced the Common Web Design v2.0 (it was actually version 1.0 but we realised that a number already sites, developed before Nick and I started, we using a similar design). A year later 30 sites and applications are using it, as well as over 50 blogs.

We’ve learnt a lot about creating Internet Explorer CSS hacks to force it to do our will, watched the HTML5 and CSS3 standards develop, and we’ve created some gorgeous websites including Linking You, Print from My PC and Opportunities@Lincoln.

As we were developing Total ReCal we began to realise that the current CWD (version 2.3) wasn’t quite customisable enough for our needs. We still believe that the most recent version of that branch is brilliant for text heavy sites, we need a framework for developing web applications and very graphical sites.

For Total ReCal we ended up branched 2.3 to created CWDx:

Total ReCal (CWDx v1.0)

Total ReCal (CWDx v1.0)

CWDx 1.0 was built with using the new HTML5 and CSS3 standards however it wasn’t generic enough for normal sites. What we did gain from it though was a complete tidy up of the code and we removed some of the old hacks because they were no longer appropriate or we found better ways of doing them.

Enter version 3, “Edradour”

Using CWDx as the starting point for the typography and base reset styles, I ripped out Blueprint which we’d been using for our CSS grid and started from scratch designing a grid with 12 columns each with 10px padding to the left and the right of the column. This now gives us a grid of 984px (up from 950px when we used Blueprint). The HTML is now all HTML5 and is marked up with WIA-ARIA attributes for accessibility. We are encouraging the use of the new semantic elements such as <section>, <article>, <header> and <footer>.

All of the element IDs are now namespaced too, e.g. #cwd_header, #cwd_footer, etc, because this was causing us some problems before when integrating the CWD into existing sites.

I’ve also recently been working on our single sign on platform which the CWD will use to initiate a session for you (if you’re on a corporate desktop or are using Eduroam), and it will tie in with our future plans for a messaging platform for the student communications project. It’s all very clever! Additionally, the CWD will include a OAuth 2.0 user agent client library meaning that you can authenticate in a Facebook Connect / Twitter @anywhere style popup in a the page. Boom!

Other 3.0 features include drop-down menus (which don’t rely on JavaScript (!!!) and even work on iPhones + iPads), a beautiful typography framework (Arial <3) and lots of helper CSS classes to make your sites look gorgeous. We’re still bundling in jQuery and Modernizr in the JavaScript, and you can easily include jQuery UI with out custom theme.

We’ll be updating a number of sites currently using 2.3 to the new 3.0 version in the next few weeks and we’re very excited about the new possibilities this framework offers.

We are also this time properly committing to developing some useful documentation so watch this space!

Checkout the v3.0 website for some demos and early documentation., 10 years later

University of Lincoln home page

Over the past ten years, the University of Lincoln’s home page has evolved into a monolithic repository of course descriptions, staff profiles, news items, policy statements, information for staff, students, parents, the media, and anyone else who may stumble across the site.

Using an online sitemap generator I have created an XML sitemap and and a plain text list of all of the publicly accessible URIs on the site. I’ve removed anything that isn’t an html document (i.e. if it doesn’t have a mime of text/html it wasn’t counted). This amounts to some 4189 pages on the site. I’ve parsed this out further to what essentially are the top level directories:

My immediate impression is that there are are a lot of directories – over 100! Also what on earth do all of these acronyms mean?

Some are URIs are obvious and you’d find them on most sites – /home, /webteam, /contact. However the library section is under /lr instead of /library (LR according to the page title means Learning Resources, however the pages talks about Library and Learning Resources – i.e. so should it not be /llr?). I was interested to discover /lsad is The Lincoln School of Art, /luac stands for Lincoln University Assessment Centre (aren’t we technically The University of Lincoln – Lincoln University is in New Zealand (or also in three places in the USA)), /shsc is Lincoln School of Health and Social Care (again, why not /lshsc) and finally /socs is the Lincoln School of Computing Science (*cough* not /lsocs – also sometimes student societies are refered to “socs” so there’s even more confusion here). There seems to be an awful lot of inconsistency here in terms of the acronym used for the directory and the actual acronym we use internally. However the main problem here is that an outsider doesn’t understand our internal acronyms – if I was a potential arts student I’d have thought an all encompassing /arts would be better understood than /lsad.

There also inconsistency in the directory hierarchy. Some information is a subdirectory of /home whereas everything else is in the root directory /. It could be that URIs that start /home/ are less important than others, but then you could subjectively say that /home/legal is more imporant than /surveys. Likewise why is /opendays not under /events/opendays.

There is also a lot of apparent repetition. Campuses are represented under /home/lincoln/brayford/, /home/lincoln/cathedral/, /home/lincoln/cathedral/, /home/hull/ but Holbeach is on the root at /holbeach, and then there is also /riseholmecampus and /hull. Should all of these pages not be under /campus/ or /locations/ ?

Every school or faculty page (what’s the difference between a school a faculty and a department if you’re a potential student? Is one better than the other? Do I need to apply to the school or faculty? Does a school represent the academic side and a faculty represent the administrative side, if so, what is a department?) has a section contains staff profiles e.g. (by the way /cjmh stands for Criminal Justice and Mental Health, which apparently is an entity of the Law school a research group). However some departments/faculties/schools/research groups have a the member of staff’s name in the URI (as above) whereas this member of staff’s page is just a number – (again with inconsistent acronyms – LISHPA somehow stands for Lincoln School of Humanities (surely LSH?)). Note how the first staff page is a .htm whereas the second is .asp (is there a joke here about one being more dynamic than the other?). Over in CERD (Centre for Educational Research and Development), one member of staff can be found at – why does this URI contain the word “staff” twice (likewise all the other profiles for CERD except one contain “staff” twice too)?

Whilst we’re on the subject of strange URI features, what’s with the funky underscores for course pages, e.g., and Some pages also don’t replace spaces in the file name with underscores or hyphens e.g.

To conclude, I’ve highlighted a number of big inconsistencies and problems with the current URI structure for the corporate site in this post. My opinion of the URI structure that is currently in place is that the website has been influenced by corporate policy and politics and a lack of understanding by some departments in how they represent themselves on the web has resulted in a messy collection of pages. This isn’t one person’s fault, it’s just the organic development of a site which has lost its message. I believe the Linking You project is an excellent opportunity to explore the reasons why this institution has a website in the first place and through the technical and blue sky consultations which we plan on having with different internal and external stakeholders, we can develop a plan for a new website which is consistent, obvious and relevant.

Following this post will be a post by Nick that describes a hypothetical corporate website that was developed from scratch with no preconception of how the current website works. Coming up, we’ll also be writing about the URI structures for some of the web based software we use at Lincoln such as SharePoint, WordPress and Blackboard. We’re also going to write a presentation to present at our first technical consultation that we plan on holding in March.

N.B. In this post all staff names have been redacted and all links have attributes of rel=”nofollow”. Also I realise that department names have changed over the years and the website hasn’t updated in some instances for legacy or SEO reasons, but an outsider or a search engine has no knowledge of this.

Related Posts

  • No Related Post

Introducing Total ReCal – the Web Application

Total ReCal interface

Building on our experience from developing the Common Web Design (CWD), we present the CWDx 1.0, designed specifically for awesome web based applications.

CWDx is 100% HTML5 and CSS3, includes extensive WIA-ARIA mark-up for accessibility, is Ajax driven and is wonderfully minimalistic.

The application is build using the CodeIgniter 2.0 PHP framework, and uses MongoDB as the database. The front end uses jQuery, jQuery UI and a number of functions from PHP.js.

The calendar itself is an amazing jQuery plugin called FullCalendar which emulates a lot of Google Calendar’s functionality.

Currently students can view their academic timetable and if they have any, their Blackboard assignment deadlines. Both staff and students also have their own calendar which they can write to. Everyone can subscribe to their calendar on a mobile device or in another application such as Google Calendar.

In the next few weeks users will have access to their library book return dates, will be able to create new calendars and share events, and we’re currently developing a CalDav system that will allow true event syncing across multiple devices and applications.