EdGEL…what EdGEL?

Jokes. Well, half jokes.

Last week, the CAHSS web team attended a hands-on co-creation workshop on how to improve the EdGEL website, with a long game of increasing awareness and implementation of the GEL and standardising our digital output using best practice and GEL standards.

So, EdGEL.

For the uninitiated, EdGEL is Edinburgh University’s Global Experience Language: a set of digital design and development standards, built to ensure that anyone who uses any of our digital services has a consistent experience. An unbelievable amount of work has gone into creating the GEL but it has not been widely adopted. This workshop was part of a plan to redress the balance.

Discover EdGEL as it currently stands
Some of the University of Edinburgh’s finest minds in digital led the workshop, otherwise busy with content editors, designers, developers, project managers and project sponsors (forgive me if I have excluded anyone from the list!). Everyone at the workshop was keen to make a success of the GEL (this is actually the most crucial element of adoption in my view – the desire to implement).

Our tasks in the workshop were to define
• What is the EdGEL website for?
• What content should it have?
• Design a front page of the website as a screen design (including navigation and content)

And to try to answer some key questions
• How can the website facilitate adoption?
• How can the website support adoption?
• What content should the website have?
• Should the website become a destination experience?

After lively and intelligent debate, across a spectrum of skillsets, we presented our ideas informally for consideration.

It is this type of engagement, that will keep EdGEL alive and it is our responsibility to use it to inform our design and development, whilst EdGEL’s new site is being developed. We look forward to a new-look, updated site, which supports our aims of creating usable, accessible digital output that reflects our needs as digital support staff.

In the meantime, asset creation, guideline consideration and examples of the flexibility of EdGEL principles in situ are being curated: watch this space!

ECA Degree Show website

The Edinburgh College of Art Degree Show opens on 24th May, and we were tasked with developing a new website for it. In many ways this is a dream project, as there is so much fantastic content! When you have such rich content, the job of the website is simply to showcase it with an unobtrusive design. Nicky Regan at ECA produced attractive designs, based on the new ECA branding, and we brought it to life as a Drupal website.

Home Page

Home Page

Drupal was chosen mainly as it’s what the new ECA website is built on, and will ultimately be the CMS for the new University website. It made sense to give admins a similar interface as the ECA site, and it was also an opportunity to further our own technical knowledge of Drupal.

Continue reading

Twitter Bootstrap

Twitter BootstrapHere in the College web team we have been experimenting recently with building websites using the Twitter Bootstrap toolkit.

Bootstrap offers a very lightweight set of tools (it’s perhaps overkill to call it a ‘framework’) to set up a functional website in a very short space of time, that does everything that you might expect a modern website to do. With it, a website can be created very quickly that offers ‘out-of-the-box’ modern browser-based client-side technologies such as JavaScript jQuery interface components (e.g. navigation toolbars, tabbed or drop-down menus), and conforms to modern web development guidelines and standards such as the use of valid HTML (and HTML 5), CSS, accessibility, SEO and cross-browser support.

In particular, Bootstrap v3.0 offers the ability to easily build a Responsive Web Design (RWD) website so that the same codebase can be used for multiple browser/hardware client platforms of all sizes, including tablets and smartphones, without too much effort.

We’ve also been experimenting with using Bootswatch to theme (fonts, layout, formatting and colours) the default interface template offered by Bootstrap, and using the Drupal v7 Bootstrap module to integrate the functionality of Bootstrap into a Drupal v7 theme. The combination of the server-side PHP/MySQL Drupal Content Management System and the client-side jQuery/CSS Bootstrap toolkit is a very powerful one that allows a relatively sophisticated website to be built very quickly.

Bootstrap fits in very well with a Rapid Application Development (RAD) methodology or even an Agile development methodology. It’s perfect for building functional web prototypes or basic small-scale operational websites, but perhaps its limitations should be recognised – like a lot of WordPress-based websites there is a danger that without some customisation, the website interface can be too much like any other Bootstrap-based website and becomes a boring ‘vanilla’ website. It’s also not really an option if a website is designed to conform to a demanding specification, such as an interface that will feature some groundbreaking functionality or attractive and unique design that perhaps will be used for branding and marketing an organisation or idea.

What is does do though is allow a web developer more time to concentrate on the advanced requirements of developing a website on the server-side without having to worry too much about building a ‘quality’ website on the client-side from scratch for every single project, to gather valuable user feedback at an early stage of development, and it offers a scalable platform for future development and customisation.