Author Archives: Sam Trafford

Get your kit on

I’ve been looking at Typekit as a web font solution for headings, quotes, and promotional text – as an experiment I’ve mocked up this Blog post using Typekit; so you can get a feel for what it’s about.


So why would we need to use it?

I’ve harped on about web font limitations before; so I’ll just say that the fonts we could use were tragic and boring. I’ve also mentioned that we used sIFR as a fix for about six months, which was too quirky and jerky.

Hypothetically we could host fonts on our server and reference them using @font-face. This way all the fonts used in the printed prospectus, could be used on the website; but there’s the complex issue of copyright to contend with.

Speak the Web

We attended Speak the Web at Leaf café in Liverpool. I was impressed by Jake Smith’s presentation Putting the Font in Front End, especially his demo of Typekit.

Typekit offers a library of fonts: you pay a subscription; you choose which fonts suit you, and they deal with the legal stuff. I was impressed by the clarity of the sign-up process, and how easy it was to set up. The font libraries are impressive; all the big type foundries are represented.

The demo I put together uses the modest library of free fonts, supplied with the Typekit trial package. They are fine as a starting point, but they generally represent the less formal side of typography.

The Downside

The only problem I have is the way different browsers render fonts:  Some render crisply in one browser; but appear pixelated or weakly defined in another. They also lose clarity at smaller sizes. Unfortunately these problems are with the fonts themselves, so even if we hosted them we’d still have the same problem.

Consequently if we get a style guide that says Garamond should be used for headings, and I refer to Typekit, check the browser samples and find that it is unreadable in Firefox, we simply can’t use it. Straight away we would be looking at alternative fonts; when we didn’t want to fudge or compromise.

To Conclude

Weighing things up – I would use Typekit because it is easy to use and well designed, and any worries about copyright could be put aside.

The Computer’s First Christmas Card

number 11
It’s a Friday afternoon, I’m as busy as a bee, and I need to write my advent blog post in five minutes. I need a theme: think Christmas, think technology…….think poetry???


Proustian memory time

It’s the 1970s when school boys wore Clarks sandals and had dirty faces; we sit crossed legged on a shiny cork floor, and our teacher reads us a poem.

Picture an avuncular man in a kipper tie, imparting verse in the style of a Dalek!

You need to know that the final line is delivered with a self-satisfied robotic squawk; which brings about an outbreak of childish laughter.

The Computer’s First Christmas Card

By Edwin Morgan (1968)

jollymerry
hollyberry
jollyberry
merryholly
happyholly
jollyjelly
jellybelly
bellymerry
hollyheppy
jollyMerry
marryJerry
merryHarry
hoppyBarry
heppyJarry
bobbyheppy
berryjorry
jorryjolly
moppyjelly
Mullymerry
Jerryjolly
bellyboppy
jorryhoppy
hollymoppy
Barrymerry
Jarryhappy
happyboppy
boppyjolly
jollymerry
merrymerry
merrymerry
merryChris
ammerryasa
Chrismerry
asMERRYCHR
YSANTHEMUM

A Brief Look at Tomorrow

the number 4

Over the next year we will be looking at ways to improve the corporate website; including a hard look at the design and structure.

We are currently focussing on our top-end homepages, and approaching them independently; rather than applying a uniform concept to all of them – like with our current grid. This is so we can focus on the client, and identify their narrative as a user. In plain English this means: look at what you want; send you to where you want to go; and show you some interesting stuff on the way.

About Interesting Stuff

It’s been long established that online users don’t sit and studiously read long pages of text; they intuitively fix upon interesting content, and ignore the peripherals.

The key is to have enough types of content to engage each user at whatever point in the story they’re at: for example it could be someone seeking a virtual tour of the campus, or a committed applicant making a decision on a course combination.

We intend to mix authoritative writing and strong imagery with relevant news and events, videos, student profiles, blog posts, and galleries. We want to combine formal and informal voices with contrasting media, to appeal to different needs and tastes.

What I’m doing as part of the process

Following on from initial conversations, I’ve been putting together a series of monochrome wireframes, so we have something visual to refer to in forthcoming meetings. We hope these will lead to healthy debate, and help decision making.

We will continue with a group approach when addressing navigation and design concepts. I’m expecting a lot of creative input from our team and corporate marketing, and I’m feeling very positive about the project.

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.

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.

Confluence Design Templates

25 by Leo Reynolds.In a previous post How to Skin a Wiki, I was adamant that the Wiki design should be basic: This assertion was based on principle, but furthermore on naivety, as I was a novice when it came to Wiki mark-up. I now have some understanding of the potential for more complex design layouts in Confluence.

Is this it?

I got a sense that clients were underwhelmed by the simplicity of a basic Wiki page, and also that there was no way of presenting familiar content in an interesting way. As Confluence allows you to create templates as a starting point for a page, we decided to create some layouts.

When we began training staff to use the Wiki , we demonstrated the templates and I found that they struck a chord. I felt they accentuated the potential of the Wiki , and helped soften the learning curve.

Homepages

There is a basic image with text layout; one that incorporates RSS feeds; and others that enable departments to emphasise specific sections within their site …

Example 1

lists

Example 2

pictureCards

A-Z lists and FAQs

These are pages that are commonly found on department sites. I expect there will be more examples like this that will also be made into templates.

A-Z Document List

az

FAQs

faqs

Macros

I also created a macro to display contact details, which outputs the same vcard mark-up that we use on the corporate site.

contact

Copyright Liberation

Throughout the recent redesign of our departmental sites, we’ve used an array of images from Flickr, under Creative Commons licenses. This meant making additions to our copyright page that complied with the conditions.

We aimed to:

  • Display a thumbnail of the image and a link back to its original Flickr page
  • Credit the authour under the Attribution condition, and link to their profile page
  • Display all the CC conditions connected to the particular photograph

We decided to extract the data using the Flickr API, so that the information is accurate, and we can check if any of the conditions have been changed over time.

What is Creative Commons?

According to Wikipedia CC is a “non-profit organization devoted to expanding the range of creative works available for others to build upon legally and to share.”

It enables authors to relinquish the default “All Rights Reserved” copyright status of their work, but retain some rights; for example whether an image is used for commercial purposes; or is further adapted using Photoshop. People are motivated by a sense of creative community and openness.

Why use them on our site

We do use stock images when we need to communicate something visually, using absolute clarity. However, there are issues of cost and limitations of use, which make them impractical; also we know that our clients are media savvy, and turned off by some of the hackneyed symbolism used in stock photography.

By using images from Flickr, we have access to authentic pictures taken from personal experience.

A Good Example

On the History Department homepage there is an image of President Obama: we could have bought a small web-ready image from an established agency for around £50; but we wouldn’t have been allowed to adapt the image to fit our layout, and we’d have to remove it after an allotted time period. Furthermore the image is likely to have been formal and static.

By using an image by Flickr user Matt Wright, taken from the crowd at a Democrats rally, we have a dramatic image that we can adapt to our layout under the conditions of the license.

About Flickr API

Flickr offer one of the most comprehensive application programming interfaces (API) of any web service allowing anyone with a bit of knowledge to develop on top of their services to offer extra functionality or integrate with your own systems.  We’re not however using the main API.  Instead we’re making use of a new service offered by Flickr parent company Yahoo! – YQL or Yahoo! Query Language.  This service offers an SQL-like syntax to query the web.  For example to find out information about a photo, you could use the query:

select * from flickr.photos.info where photo_id='471634239'

That gets requested from a web service along with the return format – either XML or JSON – and they send back the resultset. No API keys are required making implementation a piece of cake. We’re doing it server side allowing us to cache the response to improve performance but YQL can also be implemented on the client using just JavaScript.

YQL isn’t just limited to extracting data from Flickr – many other Yahoo! properties are available and it can even be used to extract microformats and other data from any web page. Along with Yahoo! Pipes and Google Spreadsheets, it’s become a vital tool for anyone creating mashups of data.

New Departmental Sites

We have been redesigning and reorganising our faculty and departmental websites over the last two months, and we are pleased to announce that the majority have gone live this morning:

Why Do This?

  1. Firstly we wanted to put the sites into our corporate-site design template; because we felt it was important to have consistent branding, navigation, search facility, and page-layout across all outward facing pages
  2. Secondly we have a system to extract news, events, staff profiles and multimedia from our database; we can now employ this across our new sites.
  3. Thirdly, we wanted to formalise the top level navigation, then utilise tabs on lower level pages to cater for the individual needs of the department. For example, the Performing Arts department has a greater need for visual media, than say Law and Criminology

Homepages

The sites have a main homepage modelled on the established grid, with boxes linking directly to: About the Faculty, Courses, Research, and News and Events. There is space for specific promotional needs if a new courses or publication are launched for example. For departments with a number of internal departments, like The Department of English and History; these are clearly listed on the homepage.

english outlined

Sub-Homepages

The sites have five basic sections About the Faculty, Courses, Research, News and Events, and Contact us; I wanted the About The Faculty and Courses areas to have a befitting sub-homepage with a marketing focus.

About the Faculty

I wanted to use a strong representative image, which either emphasised the attraction of the subject, or highlighted the exceptional facilities that Edge Hill has in that subject area; I also wanted a friendly welcome message from the head of department, along side their portrait and v-card details.
About The Department

Courses

The courses homepages differ according to the volume and complexity of the department’s portfolio: For example the faculties of Education and Health identify the client according to their professional level, whether they are entering study for the first time or pursuing professional development or extra qualifications.
Faculty of Health Courses

Sites within The faculty of Arts and Sciences, the portfolio of courses can be divided into Foundation, Undergraduate, and Postgraduate courses, or into subject areas:

Business School Courses
Courses themselves can have homepages, with tabs for subject specific content. These complement the online prospectus pages – where the focus is on providing information – with the capacity to display more visual content such as videos, photo galleries or other multimedia. They will also serve as landing pages when courses are promoted on social networking sites.

Advertising

Staff Profiles

The profiles are pulled from the database: they can be displayed as a thumbnail grid with contact details in tooltip boxes; or as lists with details displayed vertically, with large or small thumbnails. You can toggle between theses states using buttons.

English Staff

News and Events

Departmental news pages now use the same system as E42 our university magazine

NGAS News

How To Skin A Wiki

Lay the Wiki on its back on a flat surface, and pinch the skin at the loose part in the lower belly………

Only joking, as we know a wiki isn’t a furry woodland critter that makes a durable Davy Crockett style hat. A Wiki is a website, with pages that can be easily updated via an interface, using simplified mark-up language. We are using Confluence, a “simple, powerful wiki that lets you create and share pages, documents and rich content with your team.”

What is the Difference between Designing and Skinning?

I’d define skinning as styling pages that already exist, a bit like redecorating a hall with outdated floral borders along the skirting boards. Whereas design is a process, where every stage is considered, from conception to sign-off.

I have already written about when you should and shouldn’t re-skin a site, it is generally frowned upon unless fresh functionality is being added. Skinning a wiki is different; it is a way of creating a bespoke skin that is true to the branding of your company or institution.

Aims

  • I wanted to approach the project as if I were designing for the corporate site. Even though I knew I would be working with pre existing code and structure, I still wanted to work from a finished design developed in Photoshop.
  • I wanted to work with the same web fonts as the corporate site: Arial for headings and Verdana for regular text. Also to use consistent spacing, line-heights, link-colours etc
  • I wanted to create a look and feel consistent with the GO portal, to contrive the semblance of a single application when navigating between the two.

Photoshop Designs

As noted in my previous post about GO, I’ve been determined to dispense with any conspicuous decoration, especially repeated background images and drop-shadows, I wanted the design to have a clear, utilitarian quality.

standard layout

The wiki breadcrumb and dropdown menus match the tabs in GO. The background images are white PNGs with their alpha transparency set to 30%; the background colour of the header can be altered, and consequently the tab’s transparent background image appears as a tint of that colour.

An example of this colour effect with the skin applied to the mail system:

Web Mail

The wiki will include intranet sites for University departments; they will be accessed via customised GO panels. We intend these sub-sites to have visually interesting and instantly navigable homepages.

Applying the design to Confluence

I soon realised that my idealistic intentions were a little impractical, when I noted the amount of page layouts, and methods of displaying data that Confluence offered. To try to design up front for every consequence was naïve, so I decided to stick to the most basic layouts only, and then play it by ear.

Confluence has a whole heap of style sheets with many generations of classes. Without Firebug and the Web Developer toolbar for Firefox, it would have been like deciphering the riddle of the sphinx.

As designers tend to do, I started from the top. Getting the breadcrumb, search-bar and drop-down menus to look indistinguishable from GO, this seemed fairly straightforward; then I cross checked it in IE7 and Opera and I quickly remembered how much easier it is to style your own code.

After this I concentrated on the basics: headings, paragraphs, lists, links, tables and forms, really trying not to be drawn toward the more idiosyncratic elements. When I approached elements that were unconsidered in the preparatory stage, I tried to apply principles that were consistent with what I already had. I removed borders, margins and text indents that busied the page composition, defining spatial consistency and alignment.

Was I Successful?

Well I’m still trying to iron out some cross browser quirks, especially where elements are floated, and CSS attributes have been inherited in varying orders, so this question is slightly premature. This will be an ongoing project that will throw up conflicts as different departments evaluate how they want their content to be displayed.

Evaluating things from how it looks in Firefox, I’m fairly pleased with the results; the pages look less like Confluence pages, and more like Edge Hill web pages, but there are still many echoes of the default look and feel. I think I have been successful in spacing the layout so that the pages flow better, and are easier to speed-read and analyse at a glance.

Where Now?

  • Internal faculty and departmental sites will gradually be moved into Confluence over the coming months replacing the current intranet.
  • The skin will be adapted appropriately for other systems like online mail and Blackboard.