Show sidebar

Better CSS

Categories: Events, Learning things, Useful/interesting

Recently James and I went to Canvas Conf and listened to a number of great talks on web development. We particularly got a lot out of Harry Roberts’ (Senior UI Developer for BSkyB) talk 'Big CSS' which focussed on writing maintainable CSS for big projects. While we predominantly write CSS for relatively small projects we still came away with some very useful ideas and practices that will help us do what we do better.

With CSS we'd always tend to write a rough set of styles that broadly cover the whole project, setting up basic things like a reset, typography, header and footer etc. and then write the rest of the CSS as specific chunks of code that do one thing.

Instead of doing this however we’re realizing that we can break down a lot of that stuff so it's more re-usable, so more efficient. Take, for instance, a list of links that supplements an article; there are many abstractions to this one object that we can break out and re-use:

  • A vertical list without bullets.
  • It has links inside.
  • It might have icons on the left of each link.

We can then apply some or all of those abstractions to another object, like a list of downloads, which would have all of the above plus an additional rule for the filesize meta-data that forms part of each link.

Another aspect we took away from Harry's talk was how important it is to structure your CSS sensibly. Firstly, we have to get out of the pattern of writing our CSS in the same order as the markup ... that just doesn’t make the best use of the cascade!

So instead I think we’ll be following something along the lines of this:

  1. Table of contents
  2. Reset
  3. Typography
  4. Structural framework
  5. Generic objects
  6. Specific components
  7. Style trumps

All the while we can be picking and choosing from our growing library of abstractions.

The final part of all this is comments. We came away determined to use more comments in our CSS; the uses comments can have are endless but for us I think the following practices will be fairly revolutionary:

  • Linking markup to the CSS by adding in blocks of HTML as reference.
  • Explaining weird bits of code or specific techniques used.
  • Linking back to an abstraction when overriding something further down the cascade or in another file.

So over the next few months, we’ll be steadily building a little CSS framework that works for us, with lots of abstractions that we can re-use and a structure that makes sense.

Art smarts

Categories: Events, Learning things, Useful/interesting

Art > Marketing > Family > Funds cycle

The other week I went along to an AMA Network event.

It was good. Though I don't work directly in arts marketing, I thought Sarah Gee's talk on how marketing and development teams could and should work together, pooling resources and wisdom, was fascinating. (And worded/explained much more entertainingly than that.)

It was so interesting that I've been meaning to write it up – but have consistently failed to find the time to do so properly, so on the off-chance there are any nuggets of wisdom discernible from my notes (made after-the-fact, tut-tut) here they are:

============

Arts orgs having to become more business-like in terms of 'customer retention'. No resting on laurels and becoming complacent because funding appears year after year; those days are over.

It's important to involve people from the organisation as a whole – and to be more open. And open to change.

Don't be shy about the fact the org is a charity. Nothing to be ashamed of! If people were more aware, they may be more inclined to give.

Don't concentrate on one route only. Crossover is vital e.g. capital appeals can help people understand an arts org. is a charity. [For example Hippo Stage Appeal which launched in the Prospectus we designed, aimed at key stakeholders and funders is now also a public-facing campaign.]

Being clear to audiences/donors about the organisation as a whole, not just individual projects. (A good point was made about the possibility of people becoming fatigued being frequently asked to fund individual 'projects' - that time/those resources should also be spent on long-term gains; building relationships with people who may eventually prove to be 'high value givers' or who bequeath a legacy.

Inform people about the organisation as a whole, as well as individual projects.

Interesting fact re. legacy-giving and inheritance tax – many people give away anything over the inheritance tax threshold as they don't appreciate being taxed for it again. Remember though – the 'baby boomers' may be the final legacy-givers as the rest of us may not have any money to bequeath! 

My favourite line: "Treat people as people". 

This is something the arts is very well-placed to do, particularly compared with corporates as so many people have and/or build emotional attachments with the arts; attachments which are much deeper and mean more to them than 'for profit' brands. Marketing plus development = the perfect range of skills to benefit organisations.

============

By the way, the diagram heading up this post is based on a slide from Sarah's presentation but I can't for the life of me remember who this marketing/fundraising cycle should be credited to. If you know, please pop a note in the comments and I'll update the post accordingly. Ta.

UPDATE:
Thanks to Chris Unitt for reminding me that the marketing/fundraising cycle graphic concept is by Michael Kaiser. Chris has also handily pointed me towards a slideshare presentation about it: The Cycle.

Village in a Town (Hall)

Categories: Extra-curricular, Learning things

The Imagined Village logo - styled like a directional street sign

Having recently been appointed to the design roster of Town Hall Symphony Hall (yay!), last night we were invited along to meet the marketing team and then watch/listen to The Imagined Village at Town Hall.

Having first learned a bit about Performances Birmingham (the charity who run Town Hall and Symphony Hall) in the Joseph Hansom Suite – yes, he of 'Hansom Cab' fame was one of the Town Hall architects – we joined the rest of the audience for The Imagined Village.

They're a kind of folky, world-musicy supergroup; but the sort of act you might perhaps expect to find in a smaller venue than Town Hall. In fact this bigger venue worked perfectly as the auditorium was packed enough to feel atmospheric but small enough to still have something of an intimate feel to it. Plus the sound's everso good, the lighting's great … and the seats are comfy.

It's local-hall-gig-gone-large; in a good way. (In a standing ovation sort of way in this case.)

Until last night I'd not been to see live music for ages and had forgotten how much I enjoy it, so I'm now keeping my eyes peeled for something else to get me out of the office/house in the near future. (If any local venues are considering booking Los de Abajo, I can assure you, you'll have at least one person in the audience …)

Designy reflecting

Categories: Learning things, Our work

8th birthday celebration image, with an octopus and eight-shaped underwater vessel

Supercool are eight years old. Eight!

To mark this milestone, we've been reflecting on eight years of intelligent, well-considered and effective design. While we were doing our thing …

200430 St Mary Axe (The Gherkin) won the RIBA Stirling Prize.

2005Git was released.

2006 Twitter launched.

2007 – Apple unveiled the first iPhone.

2008 – Jos Buivenga designed the hugely popular Museo – a font for print and screen.

2009 'In Praise of Shadows' was part of the London Design Festival.

2010 Get Satisfaction won the 'Business' category of the SXSW Web Awards.

2011 – A Book Apart published 'Responsive Web Design' by Ethan Marcotte.