Style Matters

Style Council - 13.03.1987

Yahoo! have just launched a new Style Guide online and in print. Now style guides are not new – newspapers have had them for decades – but these invariably have their roots in print and there are many differences online.

The Yahoo! guide is written with digital publishing as the focus, concentrating on things that make writing for the web different to print. While most of what Yahoo! have collected isn’t new, it is good to see things collated in one place.

The guide also contains prompts for things organisations can do to build their own style guide, for example forming a style committee (one might say a Style Council, ha!) to make decisions, and maintaining a word list.

With an increasing demand for everyone to be able to publish to the web, a formal style guide may be required to ensure our high standards are maintained and advanced.

Going mobile

a Mobile phone Timeline

Exactly a year ago we launched our first mobile websites at Edge Hill using a plugin for WordPress to provide a mobile friendly theme for our blogs. Yesterday we committed the first code for a mobile version of the main Edge Hill website.

It’s been a long time coming with a lot of talk followed by research and attending conferences but we’re finally on our way.  Universities all over the UK and abroad are waking up to growing mobile usage and an expectation that we will provide services on multiple platforms.  And there are almost as many approaches to take as there are universities from dedicated mobile applications for each platform to open source libraries.

Each HEI must decide who their target audience is, what they want from mobile services and the best way to deliver that information. For us, with limited resources, that means making choices about where to start and prioritise.

At Edge Hill we have for a long time had quite a clear split between internal and external content.  The corporate website – www.edgehill.ac.uk – is the place for public information about the University: courses, history, departments, news, events etc.

GO on the other hand is clearly inward facing.  It targets staff and students with personalised information of interest to them. Access to web based university systems is provided through it most of the time you only have to log in once per session to get to everything.

This provides a nice divide that can apply to what we do for mobile devices. Initially we will be working on a mobile version of the corporate website with internal systems following later.

So what does that mean? For me there a number of things that we need to address.

  1. Make pages look good on small screens
  2. Tailor information for mobile-device situations
  3. A new mobile information architecture

Let’s address each of those in turn.

Make pages look good on small screens

With the new iPhone 4 having a resolution of 960 × 640 pixels it’s no longer fair to say they are low resolution – that’s higher than a printed page! But there’s no escaping that mobile devices have small screens.  This means that normal web pages must be zoomed out to unreadable levels to display fully.  Additionally, older devices have poor quality web browsers unable to properly render the complex HTML we use on our websites and making the site look even worse.

For mobile devices we will be redirecting requests to a separate version of each page rendered with a different template.  Pages will be stripped down and designed for maximum readability.  Exactly how pages look will depend on the phone (and the web browser).  I can’t give an exact list of devices that we’ll be testing against and aiming to support but it we will initially be focusing efforts on higher-end phones for example, iPhones, Android and Palm Pre.

Aside: there are two main factors that promote the use of mobile websites – devices and data.  Modern phones make browsing mobile websites much easier, they often have applications for direct access to services like Facebook or Twitter further promoting use on the move but without data this is impossible.  Unless a user has free or very cheap data they will be disinclined to make use of services. Therefore we can get maximum return on investment by targeting services at those users with both devices capable of accessing our site and the data package that allows them to do so.

Tailor information for mobile-device situations

I was struggling to come up with a good title for this point, can you tell? Essentially it breaks down into two things: place and position.  Place is where you are when accessing a mobile website, for example you’ve got off the train at Ormskirk railway station and need to know how to get to campus.  Position reflects common use of mobile devices while sat on a couch or on the bus in lieu of a normal computer.  Both these affect the type of information you offer and may require changes to be made to existing content.

A new mobile information architecture

Tying together these two things is the site structure. Having pretty looking mobile pages is no use if you need to navigate through several pages to get to the information you want.  What might be a feature on the homepage of the desktop website may be unimportant for most people accessing from a mobile device.  The aim here isn’t to make some content inaccessible, merely to highlight key areas and make it easy for users to find that information.

So this is week one and it’s still early days.  Because the mobile website will sit alongside the existing site it’s likely we will preview alpha and beta versions ahead of a full launch. We obviously cannot afford to buy every possible device so we’re looking to recruit testers that we can get feedback from so if you have a mobile phone with free or cheap data that you don’t mind using to try out our mobile sites, let me know in the comments or by email.

Stay tuned for more about the progress of this project over the summer – there should be lots of juicy technical detail of our design and development process!

A mobile phone timeline by Khedara.

Purple Rain

Prince XML Logo

Prince XML is an application that enables you to create PDFs from HTML documents, using formatting from your print stylesheet. This is handy as browsers don’t really do print very well, and don’t support the CSS selectors that create multi-column layouts.

I first heard about Prince XML in a presentation by Håkon Wium Lie of Opera at the @Media 2007 conference. When I looked into Prince after the conference I didn’t really see its potential for us, as PDFs were something we generally avoided.

I was asked recently to do some further research and came across this presentation on YouTube, as a consequence I see its true capabilities.

So why use it?

We have a lot of fresh and accurate content on our website, so why not use web pages as the source for high quality printed material?

If a print style sheet can manage a layout as effectively as QuarkXPress or Adobe InDesign, when outputted in an automated way through Prince, then that saves a lot of extra work.

In the Prince GUI you select the web document you wish to convert, click Go and it creates the PDF, it’s very simple.

Thinking in Print Terms

As a web designer I’ve learnt to avoid print values when using CSS, like millimetres and points in typography, but there is so much more to think about.

If I’m following instructions from a print designer, I need to be able to format columns, page-breaks, pagination, headers, footers, footnotes, crop-marks, not to mention the mysterious widows and orphans.

Also we will be able reference the typefaces in the Edge Hill style guide that we can’t use on the web.

Some print specific CSS examples

Formatting a page:

@page {
size: A4 landscape;
}

Formatting headers and footers with page numbers:

@page{ size: A4 portrait; margin:1cm;
@top{ content:"BA (hons) Film Studies"}
@bottom{ content: counter(page)}
}

Formatting left and right pages:

@page :left {
margin-left: 4cm;
margin-right: 3cm;
}


@page :right {
margin-left: 3cm;
margin-right: 4cm;
}


Page breaks before specific headings:

H2{page-break-before:always}

Column layouts:

Body{column-count:2}

RGB and CYMK colours

H1 { color: rgb(255,0,0) }
H1 { color: cmyk(0, 100, 50, 0)}

Font Formatting

h1 { font: 28pt "miso-regular"; text-transform:uppercase; border-bottom:thin solid #336699 }

Finally Does it work?

From the experiments I’ve done it seems to work really well, but I won’t be fully confident until I’ve followed real style guidelines to the letter, and received the thumbs up from an experienced print designer.

That 3D thing

James Cameron's AvatarLast week my brother who is the last person in the world I’d expect to hear give a film recommendation, phoned me to wish me a happy birthday and then went on to tell me that I just had to go and see Avatar, coming from him, it had to be good.

So on Saturday I took the family. The effects were astounding and you really feel that you were watching an event, the future of how all visually rich films will have to be produced to come anywhere close to this. That said, the plot was typically Hollywood but you couldn’t fail to give it 9/10 for entertainment (I never give 10).

A couple of weeks ago the first 3D TV was trialled in pubs in Manchester, using an Arsenal v Manchester United match.

So with all this 3D about I wondered if there was any 3D web development going on. Seems like there’s quite a bit. Here’s a sample of 3 flash sites using 3D (some take a little while to load):

  1. http://ecodazoo.com/
  2. http://www.whitevoid.com/portfolio.html
  3. http://www.cleoag.ru/labs/flex/parkseasons/

These are all of course Flash sites and more and more we’re seeing opposition to building sites in flash, with some people controversially venting their spleen.

There are few alternatives in javaScript or SVG. So for now I think that Flash will continue to lead the way in this experimental media.

Video, Silverlight and jQuery

During our 25 days of blogging last year, Sam talked about some of the new websites designs that we’ve been working on.  The 125 website was the first to go live last month and today we have released the website accompanying the exhibition for a new sports development.

For both sites we’ve developed some new ways of displaying information as well as improving the designs. Bot the homepage designs use jQuery to create visual effects on the page. 125 has multiple “slides” of information. Each slide transitions to the next after a short period of time or when you click the link on the right.

New Sport also uses some jQuery transitions, this time to change the background image and headline when you hover over links to each section.

There’s a few more new additions to the sport site. We were provided with a DVD containing lots of aerial photos of the campus to feature in a gallery. We’ve done the usual thumbnail gallery but we’ve also got a fancier way of showing off photos.

Microsoft Photosynth is a tool from their Live Labs project. It works by taking a set of photos, working out how they fit together and creating a 3D model in which you can navigate around them. Our set of photos is 71% “synthy” – a measure of how we matched they are – pretty good I’d say! The one negative thing is that viewing the resulting photosynth requires Silverlight on the browser.

Photosynth of Edge Hill

Another new development that’s being released for the first time on this site is a video browser. The observant may have noticed last week video pages on the Edge Hill site changed slightly, doubling the size of the video and moving around some elements on the page. This was to allow us to highlight related videos right along side.

Video player

One final little thing we’ve incorporated into this site is embedding the PDF of exhibition boards – normally a sizable download – into the page using Scribd. Using third party hosted services has risks associated with it but here it clearly benefits the user to be able to quickly scan through pages without the need to download a large file and open in Acrobat.

Higher Education homepages in the snow

Over the last couple of days there’s been a bit of snow around the country and I’ve been keeping our homepage up to date. Yesterday morning in between making changes I did a quick scan around some websites to take screenshots of their homepages. It’s interesting to see the different approaches which often didn’t correspond to the severity – some had big banners saying, effectively, “we’re open!” while others had a standard news announcing closure of campus well below the fold.

I’ve uploaded the screenshots to my Flickr stream and highlighted the relevant areas or watch the slideshow below:

Our approach was to insert an additional notification area above the main feature. I think it’s obvious enough to be seen and appreciated as a temporary announcement while not being confused with, or detracting from, the main feature area. We also had announcements on the GO news area and posted updates to the Edge Hill Twitter account and Facebook “Fan” page

Brian Kelly posted this morning about his use of Twitter yesterday to find out that the University of Bath was closed for the day and of course we already know they’ve had experience of doing this before. On the Edge Hill account, I tried to blend news announcements with interesting things like a link to Andy’s photos but it’s hard to say how well used it was – we certainly added a few (real) followers to the account over the last 48 hours.

New Homepages for 2010


We’ve recently used heatmap software to get an impression of the way people use our homepage; disappointingly, the central area, which we use to promote university achievements, major news and events, is often bypassed. This indifference is largely down to everyday visitors using the homepage as an entry point to the GO portal, but we are concerned that major announcements are going unnoticed.

We’ve had some strong homepages over the past year, as yesterday’s blog post attests; but we seemed to have got stuck in a rut by using the same three story template time and time again. It is clear that the single story homepages with the dedicated background images have far more visual impact, and are harder to ignore as a consequence.

compare

The obvious step was to add some interaction, so that we can navigate between stories, therefore individual stories can fill the whole area making a greater impression. Also by adding a random element we can ensure some freshness for each visit.

newGraduation

Typography

We’ve been using uppercase Futura Bold for our homepage headlines since the 2008 redesign; the justification for this was simple, that I felt it had more impact. Over time I’ve noticed that the blocks of text have a solidity, that consumes too much of the negative space around the letters; as a consequence the headlines are less readable.

futuraBold

So I’ve opted for lowercase Futura Book instead, as it seems to create more breathing space, but still has enough oomph for a headline.

futuraBook

Navigation

The coloured bar on the right will be used to flip between screens, there will be a colour association based on tints in the image itself, or as a direct contrast to the background colour; and this will also be used as the highlight colour in the headlines.

There will be sub navigation across the bottom where applicable: the links will have titles if the sections are different, or can be generic circles if you are flipping through a gallery.

125prev

The new homepage style will make its debut for Edge Hill’s 125th anniversary celebrations, which begin in January 2010.

125prev2

Form Follows Function, But How Far Behind?


I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

More calendars to watch

We’re not the only kid on the block this December so be sure to check out some of these other advent calendars:

24 Ways

If web design is more your thing then you could do worse than following 24 ways for the next few weeks. Variety of well known web folks share their ideas as blog posts… Kind of like the Web Services blog but without the well known bit!

Equally useful is the archive right back to 2005 so you’ll have stuff to read into the new year.

University of Warwick

This will be particularly interesting to watch because I thought about doing an advent calendar for main Edge Hill website a few months ago but it didn’t get off the ground in time.  Ideas for next year though!

Symfony Advent Calendar

The original symfony advent calendar, published in December 2005 was one of the key things in persuading me to adopt symfony for the Education Partnership website.  Symfony now forms the core of the corporate website, GO and Hi – it’s adoption at Edge Hill has radically changed the way we build websites.  This year the symfony project have created a brand new advent calendar and I look forward to following it.

Newby’s Advert Calendar

Binary Calculator from Newby's Advert CalendarIf you like surreal comedy advert calendars satiring local newspapers then there is literally only one advent calendar for you this year! The Framley Examiner created this quite a few years ago but I still love it.

There’s a few I’ve come across – post a comment to tell us about any other cool online advent calendars, or even just to tell us what the one on your wall is like.

>