Posts tagged Common Web Design

As promised not long ago (earlier today, in fact) more work has been done on the Common Web Design to make it a bit shiner and a bit more ready for prime time. In all honesty, Alex did a lot of the work to actually make the design fit together, and now the challenge is how to make it friendlier for things like large text browsers. I suspect there will be much mucking around replacing pixel values with em values.

Anyway, regardless of what needs to be done I thought I should share with you some of what has been done – specifically mockups of a shinier Print From My PC support website, and the beginnings of I’d like to point out that these designs aren’t put together in Photoshop, they are genuine renders by the browser, in this case Safari. They also work in Internet Explorer as far back as IE6, Firefox, Opera, Chrome and even Lynx (people using screen readers will love us).

Mockup of Print From My PC using CWD.
Mockup of Print From My PC using CWD.
Mockup of using CWD.
Mockup of using CWD.

Shiny, huh? A nice side-effect of this design – and one which was planned to be doable from the beginning – is that they are easily tweakable to be touchscreen friendly with big, chunky menu buttons and fixed height presentation. I’ll leave it to your imagination as to what we could do with touchscreens and a nice web interface to University services, because we don’t have any plans (or even solid ideas) at this end.

Update regarding the state of emails: I’ve not heard official words from IT on the state of play of the email server, however my account (which was out yesterday) is now back in action. I’m guessing this is a good thing.

Today, along with 1/3 of the other staff and students at Lincoln, I’ve been devoid of emails. This is down to a problem with one of the three email stores at the University, and includes staff accounts beginning with letters A, B, M-O and V-Z along with a third of student accounts (pretty much at random). People are working on fixing it. You can keep up to date with it on Get Satisfaction.

Oddly enough this has let me spend a couple of hours working on stuff without being distracted by people asking silly questions. Instead I’ve been looking at the user interface tweaks necessary to encompass some changes to the student halls network access controller, and thinking more about the dream of a common design and components for web services.

Put simply myself (along with my partner in crime, Alex) have been throwing ideas backwards and forwards for a couple of weeks now on the subject of a single coherent way into all of Lincoln’s web services, inventively dubbed The idea is of a single website which collects and collates everything you might need to know from the myriad of services as well as letting you fine-tune how they work for you.

The current 'gateway' style used by Online Services.
The current ‘gateway’ style used by Online Services.

As a part of this (once I’d beaten another kink out of how Vista behaves with PFMPC1) I began mucking around with some CSS, aiming to throw together a layout based on something Alex mocked up. The old ‘gateway’ style in use in several places is actually quite messy behind the scenes, is extraordinarily narrow, and doesn’t provide much flexibility. You can put buttons at the top, and then a load of text.

There is also a ‘new gateway’ style which I knocked out for PFMPC which fundamentally looks the same (or at least very similar) but which is completely standards compliant with the exception of some little bits of CSS. However, this still has the problems of being narrow, a bit dull, and lacking in anything which makes you go “wow, this is a great, well designed web service”.

Which is why Alex and myself decided a change was needed. Something wider, faster, cleaner, smarter, more flexible, more appealing, ready for Web 2.0, ready for single-sign-on, accessible, standards-compliant and ready for use in every browser we could think of (including Lynx, and even including IE6). We’ve nicknamed it the “Common Web Design” in the vague hopes that the name will explain what it should be used for and people can latch on to the idea.

The very first version of the CWD.
The very first version of the CWD.

Along with this will come a set of guidelines on how to write content for the CWD so that everything clicks together nicely. The whole thing is specifically designed to be portable between services (perhaps using the storage location for CSS, images and JavaScript). More importantly I feel that the CWD is a deliberate disconnect from the old look and feel. Things using the design won’t be a re-hash of the old systems with the same quirks, they will be ground-up redesigns with goals of ease-of-use and interoperability explicitly in mind.

This is very much a work in progress and probably won’t ever be seen in the wild, but we can hope. Ideally I’d like to get the design finished and roll it out for PFMPC and LUNA to help spread the message that ‘things are changing’, but since I’ve mostly done this in my own time and off my own back I may surprise people.

  1. Print From My PC []