strangerpixel » News

WordPress + Next Gen gallery – remove default scripts

Alastair — Wed, 02 Mar 2011 13:00:29 +0000

Next Gen gallery is probably the most full-featured, customisable WordPress gallery plugin out there.

I’d been using it for a year or so before I read Dave Rupert’s post on optimising WordPress for speed. Looking at the source, I realised that Next Gen was loading additional jQuery script files even if they weren’t required for the gallery theme.

The solution is to block this in the wp-config.php file like so:

/* Prevent load of NGG JS */
define('NGG_SKIP_LOAD_SCRIPTS', TRUE);
/* That's all, stop editing! Happy blogging. */

Streamlining CSS on www.fashion.arts.ac.uk

Alastair — Wed, 05 Jan 2011 18:20:18 +0000

I recently began a mini-project to streamline and upgrade the London College of Fashion CSS stylesheets. The overall aim was good housekeeping – and the wish to put new skills to use in polishing up the site’s front end. This post is a work in progress, I’ll be updating it as I go.

Why upgrade the CSS?

Some background: the LCF website was redesigned in 2007 as part of the University of the Arts London family of websites. The original designers implemented some generic styles used by all College sites, as well as styles particular to each College (including colour-coding). Since 2007 the stylesheets have been copied, tweaked, added to and duplicated without any version control or system of documenting changes (beyond occasional comments in the files themselves).

The system that I’ve inherited has quite a few flaws:

Too many CSS files – I counted nine – meaning unnecessary HTTP requests
Bloated files with unnecessary rules – about 3,000 lines of code in total, including a blog stylesheet
Verbose, inefficient CSS selectors (I’ve learned some new tricks to do with efficiently rendering CSS recently)
No style rules for basic semantic elements like
and

Speed and inefficiency weren’t the only reasons for improving our CSS; the site – with the exception of our WordPress blog – has a static front end anyway, so it’s already pretty fast. Making these changes were also motivated by wanting to put new skills into practice, taking ownership of the CSS, and generally setting the LCF house in order in time for the new CMS implementation.

As anyone skilled in CSS knows, writing good CSS is all about refinement and cleanness. It’s about writing one line instead of two. If you care about CSS, you shouldn’t be able live with shoddy, inaccurate code.

Step 1: HTML5 Reset

It made sense to start with the basics, and to implement a future-proof reset stylesheet that not only addressed gaps in the current CSS but also catered for all the new HTML elements we’re sure to be using sooner or later.

Lots of work has been done in this area but Rich Clark‘s HTML5 Doctor reset stylesheet appeared to be the industry standard.

Resetting base styles in this way meant I could do an initial pass of the existing CSS, removing all those instances of border: 0; and margin: 0; etc.

Step 2: Reduce and refine

The existing CSS had a file called type.css. It had about 60 lines, but incorporated a dozen rules for selectors that were not used at all, anywhere on our website. So anything useful in type.css was rolled into my core stylesheet, html.css.

I found lots of dead wood in the biggest stylesheet, custom.css. This kind of selector mayhem:

#main-content #content-col #inner-right h3.wide span

was everywhere. To focus on this example alone, I discovered that nowhere on our site is there an occurence of #content-col outside of a containing #main-content block – so there was no need for a parent selector. Similarly, there’s no need for this:

#main-content #content-col h1

if there’s only ever one instance of

on the page. Again:

div#breadcrumb-trail

- the div here is an over-qualification, since the ‘breadcrumb-trail’ id is only ever applied to a div, and only makes the rule less efficient (thanks again Chris Coyier).

There were all kinds of elements in the old HTML files that have become part of the furniture over the last 3 years, but which probably should never have been there in the first place. For example, the designers must at some point have decided to add a colour-coded class to the element, but they never made it college-specific. So each of the hundreds of HTML pages on the University website has:

The class ‘blue’ has no style rules, so it’s just useless cruft.

Step 3: styling for Internet Explorer

Following Paul Irish’s guidelines for feeding modified style rules to different versions of IE, I set up a basic conditional statement to detect for everybody’s favourite browser, adding a class to the element:

I didn’t expect there to be too many special rules, but at least this gave me a valid method of specifying rules without fetching a separate file from the server.

Step 4: rediscovering the lost grid

The LCF site is built around a grid. Not one of today’s nice modern 960 grids, but a custom-built one with the following spec:

16 columns
982px wide
51px grid squares
9px gutters on the right-hand side of each column (as opposed to 4.5px on each side like most grids. This means that the far-right column has to have its margin removed so as not to overspill)
a 30px left-hand margin on the main container element, to prevent the content resting flush against the left-hand edge of the viewport

The original grid existed only as a PSD file buried deep in a shared drive. However, using it and the column widths in the existing CSS, I was able to modify Nathan Smith’s 16-column grid stylesheet to fit the UAL grid. It’s not pretty, I realise. I actually had to make the left margin 31px, to remove the 1px wide gap on the right hand edge of the main content block, which was there because 16 x 60 – 9 equals 951, not 952, the original width of the container. Phew.

With my new ualgrid.css, I was able to apply predefined CSS selectors to HTML elements, and ensure consistent widths and spacing site-wide. Using a grid also meant that I could remove dozens of instances of , and from the CSS.

Illustration of the website's original design grid.

LCF: back to black

Alastair — Wed, 01 Dec 2010 10:02:27 +0000

Last night I took the radical step of transforming the London College of Fashion’s web colour scheme from pink to black. I’m awaiting either a storm of protest, or a standing ovation – or probably a bit of both. This is what happened.

Pink

LCF’s online colour was pink since before I arrived in 2006. It had its place in the 6-way University of the Arts London colour spectrum – alongside blue, red, gold, green, orange, and the base colour, a slate blue-grey.

Pink version

Truth be told, I never personally disliked the pink – it worked better than some other College colours in providing contrast against the base colour. However, it seemed that many people here didn’t like the pink. They felt it was dated (since we had long ago abandoned pink in our offline publications), and no longer represented the LCF brand. Occasional grumbles found focus at an afternoon meeting in early November – so I did a quick on-the-spot mock-up in Firebug, and hey presto, people loved it.

More detailed samples followed. We experimented – in fact we’re still experimenting – with which tints to use as highlight and rollover colours. But the ‘key stakeholders’ were on board with party streamers and paper hats, so we went for it.

Black

Black version

So far the response on Twitter is 3:2 against the switch. Clearly we need more data – please @LCFLondon your thoughts.

Update @ 22 Dec 2010

So… as you can see the LCF website is no longer black. Despite a lot of support within the College, the black scheme was thought by certain members of the central University communications team to be too out of keeping with the existing brand identity. Our response was that, if we couldn’t develop our design any further, we were better off reverting to the original.

Hopefully at some point in the future we will be able to assert our own College brand identity independently of the University’s federal structure. However, this will require a culture shift throughout the organisation and probably a reappraisal of the entire website architecture.

The Social Network: responding to network downtime

Alastair — Thu, 28 Oct 2010 14:27:33 +0000

I watched The Social Network last night. It’s an excellent movie – but one scene in particular struck a chord.

Mark Zuckerberg launches campus hot-or-not site facemash.com, and within hours brings down the entire Harvard network. The stated overload traffic – 22,000 pageviews – should not have been an issue, according to some tech observers - but that’s not the funny part.

In the movie, as soon as the network is down, we cut to what is presumably the Harvard data centre. I think I remember seeing banks of flashing control panels, possibly even a semi-transparent campus map with red LEDs in it signifying network traffic spikes – similar to what you might see in Bond movies or The Hunt for Red October.

At 4.30am, a nerd in the data centre responds to the emergency network blackout by calling either his boss or possibly the head honcho of the university (Chancellor or Principal or something). He actually wakes him up; this is a Code 10 (to use a Bourne-ism) – a severe issue demanding immediate attention.

24-hour network monitoring may be a reality for top-tier Ivy League institutions – but it sure ain’t at University of the Arts London. If UAL had a comparable hacker incident late at night, no-one would notice for several hours. Possibly after morning coffee someone might try and check their emails and notice something amiss.

Do UK universities generally have rock-solid networks with sprightly nerds monitoring traffic around the clock? Or is the reality a bit closer to this:

How to fix cd: Too many arguments

Alastair — Wed, 04 Aug 2010 13:00:38 +0000

Probably a really easy one – but, being a command-line newbie, I had to guess this after several fruitless Google searches.

When using Terminal to navigate your folder system, you will occasionally run into a folder with a space in its name, like /Application Support. Trying to access a folder, e.g.:

[Alastair-Mucklows-Computer:~/Library] alastair% cd Application Support

will trigger the error:

cd: Too many arguments.

The solution is to wrap the folder name in quotes, like so:

[Alastair-Mucklows-Computer:~/Library] alastair% cd "Application Support"

Bike blog – anatomy of a logo design

Alastair — Sun, 25 Apr 2010 13:04:55 +0000

About a year ago I decided my cycling blog Legs Feeling No Pressure needed a spruce-up. Since I started writing it I had always planned to design it properly, and was inspired by some nice-looking US-based bike sites, Velodramatic and Half Acre Cycling. Somehow UK-based cycling-related websites tend towards the less visually dynamic end of the spectrum, and I wanted to buck that trend.

The starting point was a visual identity for the blog. Legs Feeling No Pressure isn’t a brand as such – it’s just a slightly cryptic statement about what I get out of cycling – but as a name it needed a design that somehow communicated more than the name itself could do.

David Hardy, who is our LCF graphic designer and similarly a bike-nut (he’s into scooters), agreed to help me out, and we started knocking around some ideas. In a nutshell, here was my brief:

bold, sans-serif typeface (although I do like some serifs used in the bike world’s, notably Rapha’s)
no need to include cycling-related imagery like wheels (old hat)
maybe a colour
I like fancy Italian bikes but I also ride around town on a filthy hack (style vs grittiness?)

David got his head down, and a few thousand furious mouse-clicks later he supplied a suite of 18 draft logos.

Logo design drafts #1 sheet 1

Logo design drafts #1 sheet 2

Logo design drafts #1 sheet 3

I emailed the designs around a few friends to see what they thought. Perhaps predictably, this wasn’t a very useful step in deciding on an initial direction; some preferred N (the C-shaped design on sheet 2), but equally, others liked the tag styles, and quite a few actually liked the distressed font (B on sheet 1, which I instantly dismissed).

At this point we rejected a few, and moved forward with some others, exploring further the tag style as well as adding in a cheeky wrench-head / Pacman design (N, below):

Logo design drafts #2

Personally, I was leaning more towards version I – a rounded, surfy, retro tag with a mixture of bold sans-serif and ‘classic’ serif that I thought echoed the masterful pairing of typefaces in the Rapha Condor logo. However, as so often happens with logo design, hours of close examination had made the words ‘Legs Feeling No Pressure’ themselves practically incomprehensible as a phrase. We needed some distance.

A couple of days later we arrived at a final three:

Draft #3 option 1

Draft #3 option 2

Draft #3 option 3

It was David who swayed me towards option 1: he reasoned that a) I took cycling quite seriously, so I ought to have a solid, bold logo, instead of a tag more at home on a pair of board shorts; and b) that the crisp edges of option 1 would look better in a blog header anyway.

The next question was that of colour. David prepared a fourth suite of options, which introduced a red element, and also offered some variations on the solid serif, just to make absolutely sure we had the right one:

Draft #4 sheet 1

Draft #4 sheet 2

One final touch was the addition of the tagline ‘What I think about when I think about cycling’, which I borrowed from Haruki Murakami’s book What I Talk About When I Talk About Running. Now I could see that our original bold serif was still working really well, and that it was now perfectly finished by the red ‘No’, with the patterned gradient within it suggesting all kinds of training-related things like hills, heart rate, and precision.

We had it – the finished logo:

The finished logo, including tagline.

Curzon Cinemas website redesign

Alastair — Tue, 20 Oct 2009 16:29:08 +0000

A couple of years ago I blogged about the Curzon Cinemas website, which I criticised for its unnecessary use of Flash. Well, I’m not sure how long ago it happened, but Curzon got a redesign, and it looks great.

New look Curzon Cinemas website.

Classy, unfussy typography and black and white core styling
Nice colour-coding for the 5 different cinemas
Nice, logical 3-column layout: listings on the left, description and video in the middle, stuff to catch your eye in the far right
Cufón custom font replacement
Stacks of javascript for Flash-like fade effects, AJAX-loading and showing/hiding elements

I also love the fact that each new release has a trailer embedded in the page. Excellent stuff.

The Politics in the Room

Alastair — Fri, 20 Mar 2009 17:11:02 +0000

This week saw the launch of The Politics in the Room, a video website presenting a collaborative project by members of the Lux Associate Artists’ Programme. A full project write-up will follow, but for now you can read some background info on the credits page, then browse the latest films.

Charlie Campbell Photography

Alastair — Fri, 06 Feb 2009 18:53:29 +0000

I’m very pleased to announce the launch of www.charliecampbell.co.uk, a portfolio website for my photographer friend Charlie Campbell.

Charlie and I started the project back in October, and have worked together to create a minimal website design to showcase her collection of portraits, personal photography and documentary work. The site looks simple, but there’s a fair bit of complexity under the hood.

View full project outline.

Smarter / shorter working

Alastair — Fri, 17 Oct 2008 16:31:04 +0000

I really dig those business / tech / web / software gurus at 37signals. I like their products (I use Backpack and Basecamp daily) and I like their blog (Signal vs Noise is one of my favourite RSS subs).

About three months ago I embarked on one of 37signals’ workplace experiments: the 4-day work week. At London College of Fashion, I’m lucky enough to be able to take advantage of a flexible working scheme, whereby an employee can work his 40 weekly hours around the 5 available working days. I’ve been working 4-day weeks, 10-hour days, from 8.30am to 6.30pm.

It’s awesome, because it means:

Your work becomes something you knuckle down to for a 4-day burst. You can approach it as a block of time and separate it from your 3 days off, and you start to think of your job less as something that basically dominates your life, and more as a temporary activity that you’re going to focus on and get satisfaction from.
Long weekends. Sundays are so much more spacious with a free Monday to follow; alternatively, they can be truly guilt-free if you used your Friday for domestic admin. 4-day weekend trips now don’t require taking annual leave.
More time for freelance web projects – this may seem self-defeating if it means I’m doing more work, but really it’s about the ratio of focussed, proactive working vs wasted, bored time ‘at work’.
More time for biking.

Well, great, but from LCF’s point of view, am I getting as much done? Yes, here’s why:

Longer days mean more hours to really get your teeth into a project. My most productive work arises not from grazing on different bits of tasks but from focussing on a single task exclusively until completion.
I’m on average fresher and more energised (or at least more committed) during 4 days than I am during 5. I can see the carrot of the weekend dangling clearer than the 5-dayers, I’m incentivised.
I get early nights during the work part of my week and save parties for the weekend – hey, I’ve got the time!

Jason Fried makes a useful point though – that by adopting this schedule you’re not necessarily talking about cramming as much work into a shorter time. In fact, you’re looking for better, smarter, but shorter working.