Alex Hardy

… and in with the new. Behold, my first crack at a WordPress theme .

It took me a little longer than I originally estimated. This is mainly because I’ve found more enjoyable things to do with my spare time this last week than editing PHP and CSS files. An “About Me” section with a colophon will follow soon.

I’ve gone for Simple with this version and haven’t been too ambitious where it came to dissecting the code. Inevitably you have to get your hands a bit mucky to achieve what you want, so here’s a rundown of the main things I’ve done:

• There’s nothing at all to be gained by changing all the ids and classes in the theme to match those that are used in the site’s main CSS file. I cleared out the theme’s CSS file and reassigned the styles I’d created to the existing hooks.
• Inserted my navigation block and the Mint JS include into ‘header.php’.
• Inserted my footer block into ‘footer.php’.
• I’m using Automattic’s sidebar widgets, with the following tweaks:
  • Added span tags (for CSS image replacement) around the ‘Archives’ and ‘Categories’ titles in ‘/wp-content/plugins/widgets/widgets.php’.
  • Linked to my RSS feed around the ‘Recent Posts’ title in the same file.
  • Added my little buddy badges to ’sidebar.php’
• I added the get_sidebar() function to ’single.php’, so it would be viewable on post pages.
• Minor tweaks to ‘comments.php’ and ‘404.php’.

I’ve tested this theme under Internet Explorer 6 and 7, Firefox, Safari and Opera so I’m satisfied that it works well.

I’ve got ideas for my first redesign already though, which I intend to start work on once Refresh is up and running.

I’ve been trying to find an explanation for the colour shifts we experience when exporting from Photoshop. When we preview graphics in ImageReady or open them in our Mac browsers, they appear noticeably washed out. We found the process tremendously frustrating when building the John Smith’s website, and we needed a solution.

To be honest we’d blamed Photoshop, but it turns out the Mac itself is behind it. Ironically the problem does not arise because Photoshop is stupid, but because it is clever.

Now, professional colour management is a black art that I do not claim to know. I’ve been able to gather some information, and I’ll relate my understanding:

The Problem

• Gamma is a colour setting that is most noticeable in the mid-tones.
• The Mac ships to this day with a display gamma of 1.8. This is due to its print heritage which predates the dominance of Windows and widespread use of the Internet.
• Windows displays colours in sRGB (standard Red Green Blue) with a gamma of 2.2. This setting is a de facto standard shared by TV, scanners, digital cameras and the vast majority of computers on the Internet - which are not colour managed. This is why graphics on Windows appear darker and with more contrast than on the Mac.
• Photoshop is clever enough to display an image in 2.2 gamma for editing.
• However, it can’t possibly know how to preview your image when saving for web, because there is no single display profile for the web.
• So it takes its best guess, which is to render the image to your monitor profile (if you are on a Mac, the odds are its gamma setting is 1.8).
• You will observe a colour shift in the Save For Web window, but confusingly not when you reopen the image in Photoshop (see fourth point).
• Open the graphic in a non colour managed application (like a web browser) and the shift is visible.

The Solution

As is often the case with technology, there is no 100% Right Answer, but a series of steps and choices. You have to decide for yourself which you consider to be the lesser of evils.

Firstly, you must ensure that the working RGB space in Photoshop is sRGB IEC61966-2.1 (Edit menu / Colour Settings). The easiest way to do this would be to select an Internet preset. I’m using “Europe Web/Internet.”

Work away! What you see is what Windows users will see (barring monitor variances which can’t be accounted for). You can preview how your work will appear to Mac users by selecting (View menu / Proof Setup / Macintosh RGB) and turning Proof Colours on. There’s our colour shift…

Now we come to export and where we make our choice. There are those, such as Don MacAskill of SmugMug, who recommend setting your monitor profile to sRGB IEC61966-2.1 for an easy life. Your monitor profile will match your working space, so hey presto! No shift!

In practise, I don’t like this method. It produces an undesirable blue cast on my iMac’s screen. Buried away in Aperture’s online support docs, Apple’s recommendation is:

Unless you have a color management expert instructing you otherwise, select a 2.2 gamma and a D65 white point.

I did this – From (System Preferences / Displays / Colour) I walked through the “Display Calibrator Assistant” and created another monitor profile called “iMac calibrated.”

This is a hotly debated step. Print professionals argue that this is not a solution for them. They go on to contend that sacrificing colour quality on your Mac screen to see things in the same way that the masses do is unwise. Better to accept the colour shift.

I agree with MacAskill, that Apple is pleasing an expert minority at the majority’s expense. Print professionals are skilled at tweaking their colour settings, while the public in general are not – they just want things to work. It all seems a bit pointless if you can’t view your own work the way you intended it. I’ve retained the new profile subject to further experiments.

As Apple gets more consumer focused I expect they’ll quietly start to ship with 2.2 gamma by default.

Yugop.com is the online playground of acclaimed designer Yugo Nakamura.

With a combination of a slick style and head-melting mathematics, he’s created a collection of artworks in Flash that have been exhibited internationally in galleries as prestigious as the Design Museum in London and the Kunstlerhaus in Vienna.

He is one of the authors of New Masters of Flash by Friends of Ed.

Cameron Moll has decided to end his spell as a freelancer by taking a full time job. To mark the change, he has posted an article on his website entitled “Farewell to freelancing: Final lessons learned”. He offers advice for freelancers or those considering the leap, elaborating on these key points:

• You’re a business. Act like one.
• Secure office space within 6-12 months.
• You’re not a bank. Remind clients of that.
• Smooth out revenue flow with residual income.
• There’s more to life than business.

A favourite of mine is:

Don’t wait for great ideas to auto-execute. The web economy moves so incredibly fast today. Great ideas won’t turn into profitable action by themselves. If you think you’ve stumbled on that killer idea — one that nobody else is doing, one that others are doing poorly, one that sounds ridiculously simple but deceptively compelling, etc. — the time to act on it was yesterday.

Wise words.

I’d like you to have a look at Orisinal; a collection of some of the most beautifully made Flash games I have seen.

Most of the games have very simple play mechanics, relying on a few key controls and the mouse. The simplest games are usually the most enjoyable though and I’m certain that you’ll find at least one game that threatens your day’s work with the desire to see your name on its high score table.

Charmingly illustrated characters and clever use of blur effects give the graphics texture and depth of field that is uncommon in Flash games.

Some of my favourites: The Bottom of the Sea, Chicken Wings and Friends.

Admired web design studio Happy Cog have updated their website.

Home to author and web standards advocate Jeffrey Zeldman, as well as designers Jason Santa Maria, Greg Storey and Dan Cederholm, Happy Cog publish A List Apart, host events and somehow find the time to design websites for the likes of Amnesty International.

So a redesign of their own website is bound to cause a stir among the web design community, and it doesn’t disappoint.

Zeldman has a post describing the rationale for the design on his personal website. The crux of it is that it connects the diverse activities of the company by expressing them in a sentence and building the navigation upon that statement.

As usual, their design is simple and effective with a warm, friendly palette. I also note with interest that their blog is built on WordPress.

Have a look. While you’re at it, buy Zeldman’s book Designing with Web Standards. I’ve read the first edition, and it proved a solid starting point for learning XHTML/CSS based design.

I thought I’d kick off a new section. As I mentioned in a previous post, I’m going to keep a record of things I find interesting or inspiring. It might be anything - a website, movie, videogame or something further afield like an interesting art or design book, an exhibition, a piece of architecture or something from the natural world (there are some pretty wild designs there!).

It’s a Friday and I’m feeling unwell, so I’ll make my first post a brief one. It’s a website from my home town.

It’s the Manchester City Galleries website by Manchester agency Reading Room.

The graphic design is clean and simple, not really much to write home about (or indeed post about), so why am I drawing attention to this site?

Go to your browser options, and increase the text size. Notice how, instead of the usual effect (the text getting larger and the page layout breaking), the whole layout enlarges - images and all. In some cases you observe some wrapping as elements get too large, but it works well for the most part.

For the web designers among us, they’ve done this by setting body {font-size:62.5%;} in CSS, which makes 1 em = 10 pixels. They then specify the dimensions of everything with ems. So the image of the front entrance is sized as {width:16em; height:15.2em;} - in effect 160px x 152px. So because ems are a measurement that scales when you enlarge the text everything grows proportionately.

This is great for people who have poor eyesight who habitually enlarge text, or perhaps just those on fancy high resolution screens.

Very clever indeed.

I’m in the midst of poking around in code, so I thought I’d open the old browser testing can of worms. Here are the browsers I prioritise in order:

1. Firefox (Mac)
2. Safari (Mac)
3. Firefox (PC)
4. Internet Explorer 6 (PC)
5. Internet Explorer 7 (PC)

[EDIT] To clarify, the list is the order that I test in, not of importance. That order would go: IE6, IE7, Ff (PC), Safari (Mac), Ff (Mac).

The Mac browsers are higher up the list because I work on the Mac. It makes sense to use the tools at hand. I have two reasons for placing a higher priority on testing in IE6 than IE7, its majority market share and simply that IE7 is a marked improvement. If your web page renders acceptably up to the point of testing it in IE7 you’ll probably find no issues at all. Mercifully there are ways to run both IEs without needing two PCs.

Where it comes to minority browsers like Opera I take a more relaxed view. If the latest version of the browser renders the page in an acceptable manner, then it’s fine. Users of such applications are technically savvy enough to have actively chosen their browsers. It’s safe to assume that they maintain up to date software. It isn’t worth the time and effort it takes to hack your way around the quirks of obsolete software. For this reason I’ve (reluctantly) abandoned testing in IE5 for the Mac.

I use the word acceptable rather than identical. When testing a web page you should view it in isolation - the question isn’t “does it look the same?” because pixel-perfect reproduction from one browser to the next is an impossible goal. The subtly different text sizes, line spacing or even anti-aliasing alone will see to that. The question is “does it look right?”

In case you wondered which browser I prefer, let me spell it out

So, you web designers out there: what’s your take on this issue?

Steve Smith of Ordered List (known principally to me as the author of the excellent Tiger Admin and Feedburner plugins for WordPress) has teamed up with Jonathan Snook of Snook.ca (whose blog I regularly read), Dan Rubin of SuperfluousBanter and Bryan Veloso of Revyver (whom I confess to not knowing so well but I’ll be checking them out).

Their venture is called Sidebar Creative and I wish them well.

In many ways, they demonstrate what I always hoped Jon, Si and myself would become under the Design Inc name that we jointly hold. A small group of independent designers and developers, joining forces to fill the gap between one-man-band freelancers and the full-service design agency. Doing better work together than they could tackle individually.

Perhaps even eventually abandoning client work to focus our resources on our own business goals.

So far our accomplishments have been limited to the occasional freelance job and a website that is so neglected I don’t wish to link to it. Part of my reason for starting this site was that I’m in my late twenties and no longer content to wait for that future to happen. To take the first step by finding out if I had anything to say. It seems that I have plenty… Going forward, I’ll build my own platform that I can use to spring new projects from.

Maybe one day Design Inc will be some sort of reality and this blog will join it. In the meantime please excuse me, I have a contact form to program

My portfolio page is live and ready to go

I’ll have the contact form sorted in the next couple of days, then I just need to kick this blog section into shape.

Since its very early days and my monthly visitors number in the hundreds rather than the thousands, I’m just going to pick a quiet afternoon and hack away at the CSS until I’m happy. Naughty? Perhaps… but I reckon I can get away with it. I’ll set up a development subdomain after that.