I’ve spent some time thinking about design of the authentication pages that we show to users when they (currently) sign in to Zendesk, Get Satisfaction, My Calendar or Linking You.
The current design uses a cut down version of the Common Web Design (CWD) v2.3. The main problem is that it doesn’t easily convert into a mobile design. Additionally, CWD v2.3 itself is full of cross browser hacks and lacks support for new browsers.
Current sign in page
The proposed design uses our new 3.0 version of the CWD which has excellent browser and mobile support. With a move to OAuth 2.0 for more services, including Blogs and My Player (and hopefully Blackboard too), in the new academic year staff and students are going to be seeing this screens increasingly more and so for sign in screens for external applications I took a leaf out Facebook’s and Twitter’s books and a list of permissions that external applications are asking for.
External sign in page
Internal application sign in will just feature a sign in form.
Internal sign in page
Mobile sign in screen
We are planning on updating the screens over the summer period.
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)
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.
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!
This has been a big month for Total ReCal. We’ve now perfected our event importers for Blackboard assignments and academic timetables, and we’ve started working on the main web application (screenshots too). We’ve also launched a beta registration page for interested staff and students to sign up for early access. Finally, our Talis Keystone service that the University has recently purchased will be in place very soon meaning we can also start importing book return dates for staff and students.
After numerous code re-writes we’ve got a rock solid API for adding, updating and deleting events in our Nucleus data store. Our import code has also had many updates to support logging of changes to events which will be invaluable to students to keep them up to date. Once the main Total ReCal application has been developed we’re going to sit down and work out how we’re going to best make use of these logs.
When a lecturer calls in sick the central timetabling department isn’t informed (unless it will affect lecturers for a long period of time). Therefore based on our current nightly timetable imports we won’t find out about any changes. We’re going to develop a tool for faculty administration staff to make changes to events as they’re going to be more aware of what the situation is day to day. This means that we can then inform students of changes that day as soon as someone changes it.
In terms of the front end, I’ve forked our common web design, called it ‘common web design x’, made it fluid to adapt to browser size, made it completely semantic HTML5 based, and taken the concept of progressive enhancement to new levels. It will also make use of our new OAuth 2.0 based single sign on service that I’ve written and it will automatically adapt to mobile layouts.
