Grid—a simple guide to responsive web design

Grid—a simple guide to responsive design by Adam Kaplan.

Grid—a simple guide to responsive design by Adam Kaplan.

It feels like the web is evolving at a frightening rate these days, and while we’re being encouraged to design for mobile first even the technical specifications (particularly HTML5, and CSS3) haven’t settled down yet and are still subject to change.

For example, there is currently a lot of energy being put into how to deal with responsive images: you don’t necessarily want mobile devices (possibly with smaller screens and slower bandwidth) to download images that would be more appropriate on desktop browsers, with larger screens and possibly fibre-optic broadband connections.

If you are feeling a little overwhelmed by it all and wondered where to start then I can recommend Grid, a simple guide to responsive design, created by Adam Kaplan, a designed from Chicago.

In seven simple steps he unpacks all the important stuff: why and how. And then he ends it with an encouraging, non-threatening challenge: practice makes perfect.

Advertisements

Ten guidelines for university websites from the Nielsen Norman Group

University Websites: Top 10 Design Guidelines by Katie Sherwin on NNG

University Websites: Top 10 Design Guidelines by Katie Sherwin on NN/g

Last week (Sunday 19 January) the Nielsen Norman Group published an incredibly helpful article offering ten design guidelines for university websites: University Websites: Top 10 Design Guidelines.

Their summary:

Effective university websites can increase conversions, strengthen institutional credibility and brand, improve user satisfaction, and save time and money.

The web team are currently writing a business case and strategy detailing how we propose to take the University website forward over the next few years, particularly as access to the web using mobile devices is predicted by some to overtake desktop/laptop use this year.

Our focus will be on three activities:

  1. Standardise
  2. Simplify
  3. Consolidate

Publication of his article has come at just the right time for us, and is a good companion to this oft-referenced cartoon on xkcd: university website.

Website help redesign

Redesigned website help page

Redesigned website help page

In many ways it has felt like that saying about the cobbler’s shoes: we spend so much time fixing other people’s websites that we don’t have the time to fix our own.

But no longer!

This week we finally redesigned the website help pages.

The old pages had been there since we launched the website in 2007; very little had changed and a lot of the information was wildly out of date (sorry about that!).

In this redesign we’ve highlighted two things that we get asked most: how to report a problem and how do we book onto training sessions for T4 or writing for the web? These are now our biggest buttons on the right-hand side.

Combining sections

We’ve also moved the terms and conditions pages (which includes information about privacy and cookies) into this website help section, as well as the information about T4 Site Manager. It’s nice to have those consolidated at last. It made sense to group them under “website help”.

How to…

In moving things around I also discovered twelve pages about “How to…” in T4 that were written by Duncan and have been waiting for approval since 2010!

I think the original idea was also to include videos (screencasts) but when that never happened some pages that should not have been forgotten were lost. As Tolkien might have written.

Even without videos the pages were packed with really useful information, so they’re now live finally.

Conclusion

All in all, it’s been fun to get our own house into order. One of the drivers for this redesign was a project that I’m currently working on to standardise various areas of web development here at St Andrews, including a standard coding framework, design guidelines and coding style. I needed somewhere to put them… and now I have.

Now… back to playing Asteroids, which I’ve just learned was made by Atari and not Konami.

Updating the University shield

Move and replace dialog box

Updating the University shield in my SVN working copy.

Here’s a minor update that I made to the University website this afternoon: I updated the University shield across most of the central website.

As you can see from the screenshot above, the problem with the old one was that, while it looked fine on a blue background, when it was embedded on a white background (for example, if someone linked to a University page from within Facebook, or was printed) then it looked awful!

So I created a new one, at the same dimensions (42 x 52 pixels) and for the first time it now adheres to the new corporate identity guidelines…

Dimensions for University shield on a webpage

Dimensions for University shield on a webpage

It the little things that make me happy!

Update

A couple of people have asked me on Windows Live Messenger and on Twitter why it was like that in the first place.

Well, it was to do with a slight colour mismatch between the graphic files we got from the designers (who were using CMYK values) and the web team (who were using RGB values). So we made the shield’s inner blue colour transparent so that it could pick up the RGB colour in the header behind it.

It seemed like a good idea at the time.

I’ve been meaning to change it for some time, since receiving the new batch of updated University crests months ago (in which those who pay attention will notice that the lion has lost his genitals). And with today being Fix-it Friday… I fixed it.

The next time we do a major refresh of the University website’s design I expect we’ll use a PNG and some tasty alpha transparency for that even smoother finish.

International students landing page

International students landing page screenshot

Last year we were asked to create a section specifically aimed at at international students (current and prospective). This represented a reversal of the previous approach, which was to house information for international students in the appropriate sections of the existing websites aimed at prospective students, current students and current postgraduates.

Information architecture

This posed a puzzle in terms of the information architecture. The University website is structured into separate sections aimed at specific, distinct audiences. Visitors to the main homepage are given clear options to select: current staff, current students, or current postgraduates. In turn, information for prospective students is housed in its own specific section. These are quite simple choices from the user’s point of view.

Introducing a separate international students section into the mix complicates this picture significantly. The international students section contains information that is aimed both current and prospective students. Adding this option would be asking the user to browse different sections of the website rather than being able to find all the information they require within (for instance) the prospective students section.

One of the drivers for creating a new international students section was a requirement to somehow raise the prominence of some of the content aimed at international students.

The compromise solution was to create a landing page for international students, which would highlight key information, and take the users off to the relevant parts of the website.

However, in cases where content is clearly aimed at all international students (such as visa information), this has been added to the international students section.

Visual design

I struggled a lot coming up with the visual design of the landing page. To reduce the chance for confusion, I wanted to avoid the colour schemes used on the existing websites aimed at students. This rules out blue and red. (I am also fed up with so many of our webpages being blue!)

An early version of the design was yellow. I opted for yellow because it is the one colour in the University crest that is not used in a major way on the University website. However, after I created the yellow page, I soon realised why yellow isn’t used.

So I began looking at the University’s secondary colours. The most obvious choice seemed to be light blue. But despite blue normally being a safe choice, the particular shade of ‘St Andrews Light Blue’ (#00aeef) also looked very garish on screen.

That is how we have ended up opting for orange. I have never been terribly sure about it, but it got good feedback from those that saw it. And at least it makes a change from blue!

Redesigned: Current staff research

current-staff-research

A project that’s been lurking on our backlog for months (actually years) is the second half of an update to the research pages, overseen by the Research Policy Office.

Part one was the redesign of the high-level research pages, with links to the new Pure research portal plus the latest research-related news, press releases and blog posts.

Part two was a similar upgrade to the current staff research pages. This went live last night after 17:00.

For such a research-intensive university (check out some of our successes from the Research Assessment Exercise (RAE) 2008), the research pages – both public- and staff-facing were rather poor and something that we had identified when the website design was launched in 2008. We had just been looking for the opportunity and project sponsor to take it forward. Which is when the Research Policy Office approached us.

Hopefully these recent attempts to freshen the pages a little will help better showcase some of the amazing work that is being done at St Andrews, and enable, even in a little way, more research to be carried out.

Another satisfying project… now on to the School of Psychology, Saints Sport and Music Centre redesigns.

Visit the redesigned Current staff research pages.

New Museums and Collections website

I say “new”, but the Museums and Collections website actually launched a good few months ago now. But I have been so busy over the summer that I haven’t got round to writing about it, until now.

I recall that the very first meeting I had when I began working here two years ago was about the Museum Collections Unit’s web presence. The ultimate result was this new website, which we worked on during the spring and summer.

Screenshot of the MUSA homepage

The visual design was created by Steve Evans, the Web Manager. It was then passed on to me to build within our content management system, TerminalFour Site Manager.

It is a fairly complex website, and definitely the most challenging project I have worked on. I really enjoyed stretching my limits and working with T4 Site Manager in new ways.

Creating the homepage

My first task was to create the ‘four panels’ page, as I called it. This is the overarching Museums and Collections homepage, which links through to the individual websites for each of the four museums. Each museum is represented by a square, which expands to reveal more information when the user hovers over it.

Screenshot of the Museums and Collections homepage

This uses JavaScript, which has not been a particular strong point of mine in the past. But I am beginning to wonder if that has changed, because I surprised myself when I managed to achieve this result quite quickly.

Personally speaking, this is not the sort of design I would normally opt for. But in the end I think it has turned out quite well and feedback from others has been positive.

Building the website in T4 Site Manager

The five websites themselves all share the same basic building blocks, but are subtly given unique identities. For this, I had to be quite creative in the way I built the website in T4 Site Manager, in order to avoid unnecessary duplication. I did not want to create several styles (which can be a pain to maintain in the long run) and templates that all looked almost but not quite the same.

This meant creating lots of navigation objects and ‘related’ sections instead. This is one of the trickiest parts to get right. It is a jigsaw puzzle with lots of different potential solutions, but each with their own little pros and cons. So it takes some careful thought. But it’s easily worth it for the long-run benefits it brings in terms of ease of maintenance.

A bit of creativity in using existing navigation objects was also required to give each museum’s website its unique identity. This allowed me to use the same style (page layout) for each website, while still being able to assign different CSS stylesheets to each website’s homepage, and separate stylesheets again for the lower level pages. This is what enables each website to have its own colour scheme, yet still all use the same style.

Screenshots of three Museums and Collections websites

Other interesting bits

While working on this website, I also used the Google Maps API v3 for the first time for the maps on the visitor information pages. As far as I know, it is the only part of the University website that uses this newest version of the Google Maps API.

I was surprised to find it pleasingly easy to work with, and I think it provides a smoother user experience than version 2. The newer version is designed to work better on mobile devices too.

Another interesting part of the website is the virtual tour of MUSA’s Learning Loft. This was another first for me, working with Flash as well as JavaScript (normally we only use Flash for videos). But again this turned out to be reasonably straightforward in the end, and looks really good on the webpage.

Visual design

Initially the Museums and Collections website was going to be a more conventional affair. But Steve was inspired to create something more striking after seeing some of MUSA’s physical promotional material. Steve’s decision led to him creating a brilliant design. The Museums and Collections webpages are now, in my view, some of the very best looking pages on the University website.

On reflection, the decision to go with an image-heavy design makes perfect sense for a Museums and Collections unit that can draw on 600 years of history for its visuals. There are some fantastic images of some of the objects in the collections, which helps make these webpages particularly appealing to look at.

Summary

The new Museums and Collections website was a brilliant project to work on. It threw all sorts of challenges at me, but this was a great opportunity to learn. It took a while to get it right, but I think the result is a really eye-catching website.

Keeping a collection of screenshots for inspiration

Collage of website screenshots that I use for design inspiration.

Example collage of website screenshots that I use for design inspiration.

Back in late 2008 I read an interview with a Web designer who advocated keeping a scrapbook of cool designs that you’ve seen so that when the time came for Needing Inspiration™ you already had a volume of stuff to look through and be wowed by. It was a discipline that he’d picked up from art college, seemingly.

What a brilliant idea I thought and promptly started my own collection.

I keep two collections:

  1. One is for stuff that I cut out of newspapers and magazines that I glue into an A4 Black n’ Red spiral-bound notebook (simply because that’s what I had to hand).
  2. The other is for screenshots that I store in Dropbox in a directory called ‘Cool designs (inspiration)’.

I started to use Flickr for storing the screenshots but Flickr requires that you own the images, and technically I don’t as they often contain copyrighted designs. Also Flickr requires online access (which I can’t always guarantee) and it’s relatively slow for this process. I’m currently using the image viewer in Google Picasa to quickly navigate through the screenshots.

To grab the screenshots themselves I generally use SnagIt —it’s especially useful for long screens that require scrolling, SnagIt captures it automatically—but occasionally I resort to the good old Windows shortcut Alt+PrtScn.

These collections of screenshots and my scrapbook I find really, really useful. At the moment I’m working on a redesign of the University’s sport website and this has been a great resource to give me ideas and suggest alternative ways of laying out information. I recommend it highly.

Improving navigation on the University website

We are currently working on a project that will provide a subtle but significant improvement in the navigation of the internal University websites (for current staff, students and postgraduates).

What we have just now

Global navigational menuCurrently, the majority of webpages aimed at internal audiences have a global navigation menu that is the same across the entire website.

The screenshot on the right shows the menu used for the Current Staff webpages. These are links to the 11 main categories that are presented on the Current Staff homepage.

While these links allow users to skip easily between different sections of the website, they are not very helpful at all when it comes to navigating through the pages that you are currently viewing.

What will be changing

Prospective Students left-hand navigationOur aim is to reveal the true hierarchical structure of the webpages in the left hand navigational device. This will make it much easier to navigate through the website and drill down to content that is deeper in the hierarchy.

We already take this approach in many other parts of the website, including all of the pages aimed at external audiences. The example to the right shows a page within the pages aimed at prospective students.

All of the feedback about this has been positive, which has made us confident that this is the right thing to do.

The process of making these changes

Creating these new navigational menus is quite easy. It is simply a case of changing an option in the way the pages are set up.

However, we can’t ‘flick the switch’ yet. As soon as we began to look at this project, we realised that a lot of tidying up was required first. We are currently in the process of working to ensure that the structure is good and that content is up to date.

This requires a fair bit of work. We need to map out what is currently there, work out if anything needs to be changed and decide what should and shouldn’t display in navigation.

To assist in this, we have been using mindmapping software to map out the current behind-the-scenes structure of different parts of the website. To give you an idea of the scale, this is an image that shows how big the mindmap for the Money Matters section is — and this is nowhere close to being the largest section of the website.

Money Matters mindmap

Timescale

From this, we can quite easily see what pages currently exist and what needs to be done to improve the structure. We are at this stage of the project for most of the Current Staff website at the moment. But today we will be switching The Town and Beyond section over to the new approach.

Our hope is to have the new navigation system in place across all of the Current Staff website within the next couple of months. Over summer we will work to do the same on the Current Students and Current Postgraduates websites in time for the start of semester.

Developing a new theme for Moodle 2.0

At the start of the current academic session (2010-2011) the University introduced Moodle as its preferred learning management system (LMS), also called a ‘virtual learning environment’ (VLE) and began the move away from WebCT (which is now owned by former rival Blackboard).

Moodle (which I discovered is an acronym for Modular Object-Oriented Dynamic Learning Environment) is an open-source application which of course means that it’s free… up to a point: you still need to install it, configure it and create a new visual theme for it should you require. And that’s exactly what I’ve been doing this week.

screenshot

A dream to work with

Over the last few years I’ve worked on the redesign of quite a few third-party Web applications. Some have been easier than others. One quite literally drove me to tears with frustration. Moodle 2.0, though, has been an absolute dream to work with.

Moodle 2.0 is written in PHP which I have quite a bit of experience with, so that greatly helped. Having the right mental model of how something works really helps when you’re only working with one aspect of an application.

It also helped that we have a very helpful and responsive Moodle development team located within the School of Computer Science who have been great to work alongside.

Great documentation

The way that Moodle have organised how their themes work is logical and pretty clean, and the documentation on developing Moodle 2.0 themes is really good.

And I mean really good: it’s usable. I spent an hour or so carefully reading through the documentation and then got stuck in.

I did what many advise and started with an existing core theme and adapted it for our use, which took me about half a day. The rest of my time was spent working on icons.

Icons

I didn’t really like the default icons in Moodle, they looked quite pre-Windows 3.1. So I decided that I’d try to replace them using the excellent Silk icons set by FamFamFam.

Well, lo and behold if Moodle doesn’t also have an excellent document on how to use images within your theme as well as an example silk icons theme! Someone has already done the work for me!

I discovered that the example theme doesn’t contain all the icons we’re using and it didn’t customize the smilies so I complimented Silk with two other 16 x 16 pixels sets:

All-in-all that gave me over 4,500 icons from which to choose.

Moodle logic for icons, example 1

Something that really helped me was understanding the logic that Moodle uses to determine which icon to use. I was helped by this thread on the Moodle forum.

I discovered pretty early on that if your theme doesn’t provide a particular icon then Moodle will just use its own default icon. You include your own icons within three sub-directories within your theme folder:

  • /pix
  • /pix_core
  • /pix_plugins

Using Firebug or Chrome’s Web developer tools look at the URL of the icon you want to replace.  You’ll see that it looks something like this:

http://example.com/moodle/theme/image.php?theme=newtheme&image=icon&component=qtype_multianswer

The important bits are in bold which are, in order of appearance:

  • newtheme is the name of your theme.
  • icon is the filename of the icon file without the filetype suffix, e.g. icon.gif, icon.jpg or icon.png.
  • qtype is the name of the sub-directory. In this case (I think!) because it’s a ‘&component=’ it is a sub-directory within the pix_plugins directory.
  • multianswer is the name of the sub-directory within the above sub-directory!

In other words, that URL is for an image within this directory:

/theme/newtheme/pix_plugins/qtype/multianswer/icon.png

Moodle logic for icons, example 2

Similarly, the following code

<img alt=”” class=”smallicon navicon” title=”” src=”http://turret-new.cs.st-andrews.ac.uk/moodle-2/theme/image.php?theme=newtheme&amp;image=i%2Fsettings&amp;rev=235″&gt;

will look for a replacement icon in this directory:

/theme/newtheme/pix_core/i/settings.png

You can glean that from ‘i%2Fsettings’, as ‘%2F’ is the URL encoding (also called percent-encoding) for a forward-slash (‘/’), and the word that appears beyond that is the filename of the icon, in this case ‘settings’. As far as I can tell you can use any format you like from GIF, JPG and PNG.

Clearing the cache

The way that our installation is set up, every time I made an HTML or CSS change I had to clear the theme cache which was as simple as logging into Moodle 2.0 and navigating to Administration > Appearance > Themes > Theme selector then clicking on the button at the top of the page: “Clear theme cache”.

Later on in the development I discovered that Moodle was also caching the information about the themes, such as the theme name and any information that appears once you’ve activated a particular theme. I needed to get the Moodle administrator to clear that for me.

Conclusion

This has been a surprisingly fun project to work on. Surprising only because of my experience with other less-well designed systems. I wish all Web applications were this fun and this easy to edit.

Download

A number of people have emailed me asking for the theme and icon set that I developed/extended. Feel free to download the file below, on the understanding that I can offer no technical support on it.

This theme is released under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

About

University of St Andrews is a fluid-width, three-column theme for Moodle 2.0 that was adapted by the University of St Andrews web team, based on a theme called Leatherbound created by Patrick Malley.

Tweaks

This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\’ll still have the original files if you make a mess. More information on modifying themes can be found in the MoodleDocs.

Icons

License

This, and all other themes included in the Moodle core, are licensed under the GNU General Public License.

The following zip file is hosted at Let’s Crate.

Download moodle-2.zip (190 KB)