IA decisions in net magazine: why not match up the browser icons?

Since the net magazine rebrand a few months ago the projects section of the magazine, which is printed on a rougher paper to distinguish itself more easily from the glossier feature articles, often includes a handy guide to which browsers a particular technology supports.

The infographic shows desktop browser support on the left, mobile/tablet support on the right. But in the spirit of Steve Krug’s book Don’t me me think, the way it is currently laid out has me thinking too much. I want to know what their design reasoning is.

Here is an example from the current issue (May 2014), from an article on page 84 called “Slash design/build time with proportional RWD”:

List of desktop browser icons, in two columns: desktop on left, mobile on right

Why don’t the icons match up? This just makes me think too hard.

But whenever I see this it always makes me wonder why they have not matched up the icons. What is the order being shown here? It’s really not obvious to me. It’s not alphabetical, it’s not by version number, or popularity.

Why not simply show a comparison between desktop version and its comparable mobile version, and then any left over can be arranged at the bottom?

I often find myself thinking, “Okay, so this feature is supported from Chrome version 6 onwards, but from which version of mobile Chrome is this supported?” And then I have to go hunting for the Chrome icon on the right-hand list.

Why not match the icons up, like this?

...and relax! The top four icons are matched, leaving the unique browsers to fight it out at the bottom

…and relax! The top four icons are matched, leaving the unique browsers to fight it out at the bottom

That makes it much easier for me to read. My five year old Joshua thinks this makes more sense. What do you think?

Not in Comic Sans MS you can’t!

20110502-comicsansms

This afternoon yet another pre-Scottish Election leaflet dropped through my letterbox. It was this one (above) from the Scottish National Party entitled Fife Independent with the strap-line “Together we can make Scotland better.”

As I tweeted at the time:

SNP newsletter through the door just now. Strapline says “Together we can make Scotland better”. Not in Comic Sans you can’t! #election

I’m a firm believer that the typeface that you select for a publication helps set the tone of what you have to say.

As Alex W. White says in The Elements of Graphic Design “choosing a typeface that matches the content is important. Words are symbols of emotions and ideas that manipulate the reader” (Ibid. p. 105). He encourages the reader to “listen to type”.

The Ban Comic Sans website says much the same thing:

Like the tone of a spoken voice, the characteristics of a typeface convey meaning. The design of the typeface is, in itself, its voice. Often this voice speaks louder than the text itself. Thus when designing a “Do Not Enter” sign the use of a heavy-stroked, attention-commanding font such as Impact or Arial Black is appropriate. Typesetting such a message in Comic Sans would be ludicrous.

The history of Comic Sans MS is fascinating (if you like that sort of thing) and in many ways it is a very well-designed font, modelled on the typography used in American comic books. But that is the context in which it makes most sense to use Comic Sans MS: comic books not party political newsletters.

Because no matter how good your arguments may be, Scottish National Party, I simply cannot take you seriously if you print it in Comic Sans. That is just down-right lazy.

Reinstalling Windows XP Professional SP3: Operation PC Forgiveness 2008

Screenshot of Windows XP

This week I’ve been enjoying a holiday at home with Jane: a chance to enjoy peace and quiet together for the last time before the children arrive, and to reinstall Windows XP on my main desktop PC. That’s been the main reason for my lack of recent blogging, and not laziness — oh no! Not that. No way!

Slowdown to upgrade

It’s a common problem with Windows: it gradually slows down over time. I install and uninstall all sorts of software on it, I use it every day for everything from checking emails to coding, photo editing to video creation. I’m not surprised it slows down over time.

But this time it was getting really bad. At times it wouldn’t boot properly (hardware driver conflicts I think). There was a serious issue with my sound card: if I played a Flash movie (e.g. YouTube) while listening to an MP3, for example, it would send my audio player crazy when I closed the browser window, playing any non-Flash audio two or three times too fast. It made everything sound like the Chipmunks had formed a metal band!

I also wanted to upgrade a couple of major pieces of software:

as well as various hardware drivers:

It was clearly time for Operation PC Forgiveness 2008.

Backup

On Monday and Tuesday I backed up everything. I used Second Copy 7.1 to copy the contents of each partition one-by-one to my external harddrive (Freecom 500GB).

I’ve tried various other applications over the years that take either images of the partition, or backup to a proprietary format, or first compress the files before storing them in a zip file, but in the end I’ve returned to a simple 1:1 copy on an external drive. That way I can access these files at any time from any PC without having to first install any 3rd party applications.

Second Copy

Second Copy allows you to create backup profiles that can be run either individually or within groups. So I have groups for:

  • Applications (e.g. Microsoft Money files, Microsoft OneNote data, WeBuilder settings, Windows Boot.ini file, Second Copy profiles, etc.
  • Outlook PST files, backups and stuff
  • WeBuilder reinstallation
  • Ultimate Backup to external hard drive

There are a few backups that I do manually, for example Firefox bookmarks and anything else that needs to be exported.

Screenshot of Second Copy

This way I can make sure that all my personalized settings have been backed-up before I run the “Ultimate” backup group profiles and copy it all to my external drive.

A couple of things that I always do when doing a reinstallation are:

  • Install and take a print out of all my installed applications using Installed Program Printer.
  • Take a screenshot of desktop (for location of icons).
  • Take a screenshot of Start Menu (for labels and icons).
  • Take a screenshot of the Firefox add-ons that I have installed.
  • Backup Programs folders within Start menu (both All Users and my username profiles). This way I can see how I organized my Start menu.

Reinstall Windows XP

With the backup complete it was time to bite the bullet and reformat my C drive. I have 12 partitions on my hard drives so wiping C simply takes out Windows and programs, all my data, images, videos, music, etc. are safely stored on the other partitions (and now also backed-up).

One thing that I forgot to do before I set the Windows XP installation CD loose on C: was to deauthorize iTunes. D’oh!

Essentials for a Windows XP reinstall:

  • Windows XP with SP3 and IE7 slipstreamed into it.
  • Latest hardware drivers, already downloaded and saved to another partition, external drive or CD-ROM.
  • TweakGuides Tweaking Companion for XP to follow advice on best order to install drivers, and various system tweaks to improve performance.
  • Notebook and pen (to write down everything you do, error messages, settings, passwords, etc.).
  • Laptop (or other PC) for looking up advice, error messages, etc. on the Web.

Reinstalling XP and hardware drivers took a couple of hours. Reinstalling the rest of my software took the best part of a day and a half. I have almost all my applications stored on another partition (I:\) and categorized which makes it very efficient to reinstall:

Screenshot of Install partition

Reorganize All Programs within the Start menu

Once I’ve installed the bulk of my applications, run Windows (or Microsoft) Update a couple of times to make sure that Windows and Office are up-to-date, and done a cursory defrag I always reorganize the Start menu.

This is how the All Programs part of my Start menu looked after I’d installed most of the applications that I use regularly:

Start menu with three columns of programs

That’s three columns with around 85 entries. Even though I’ve done a “sort by name” on the list it’s still a mess! What it needs is some categorization to group similar applications together.

All users

I generally start with the “All Users” folder (right-click START and select “Explore All Users”). I then create a number of new top-level folders to act as my main categories. These are generally the folders that I begin with:

  • Accessories
  • Bible
  • CDRW
  • Fonts
  • Games
  • Graphics
  • Internet
  • Labels
  • Mindmaps
  • Money
  • Multimedia
  • Office
  • PDF
  • Printers
  • Programming
  • Scanner
  • Startup
  • System
  • Windows Mobile
  • WinZip

All Users Start Menu Programs

As it happens, these are also the main category labels that I use on my Install partition (I:\). Keeping a one-to-one relationship between the start menu and the install partition makes it really easy to find installers should I need to perform an upgrade or reinstall.

Having a limited taxonomy makes it really easy to find any application that I have installed: all my graphics applications can be found under Graphics, office applications under Office, etc. It sounds obvious but I’ve seen too many users wasting precious time hunting through an unordered list of 60+ applications.

Sort the rest

Having created these new folders, I then move the remaining installation folders and icons into them before performing the rest of the clean-up on the Start menu itself, creating any sub-folders as necessary. For example, within Internet I always create:

  • Browsers
  • Email
  • Firewall
  • FTP
  • Instant Messenger
  • RSS
  • Server
  • Twitter
  • VoIP
  • Web Building

I prefer to use generic terms such as “Instant Messenger” and “Firewall” than “Windows Live Messenger” and “ZoneLabs ZoneAlarm Pro” as I find it easier to find them this way, it also doesn’t lock me into a particular application as I can use the same folder structure regardless of the applications that I have installed.

I also use this arrangement on my PC at work and on my laptop so it allows me to have different applications installed but use the same organizational structure.

Start menu lite

While it usually takes me about 30-45 minutes to sort out my Start menu at the start it must save me hours each month when looking for applications.

My new, slimmed down start menu then looks a bit like this:

Start menu

Now I have a clean installation of XP, with (almost) all my software installed and I can find things on my Start menu. Now I can get on and do something productive!

Smarter web design article in .net magazine

Smarter and faster web design

The current edition of .net magazine (October 2008, issue 181) has an interesting feature article entitled “Smarter and faster web design”.

Magazine writer Craig Grannell promises “you don’t need to work harder, or for longer hours, to get better results. You just need to work smarter!” A sucker for productivity tips here’s my take on what he has to say:

1. Get away from the computer

This is one my favourites, and one that I use all the time. Well, not all the time, otherwise you’d never find me at my desk!

Lateral‘s Simon Crab offers this thought:

“… today’s web designers have a subconscious belief that the computer will provide an answer as long as they sit in front of it for long enough”

Instead of sitting staring at your design software of choice (Photoshop, Paint Shop Pro Photo, Publisher, Illustrator, Visio, etc.) he suggests going out and get a different perspective on the world. Go to exhibitions, browse magazines at the newsagent, walk around and look around you.

I can’t remember where I first learned this, but it’s been really helpful advice. Get inspiration from other non-Web environments. I’m forever ripping out pages from magazines, scanning them or simply gluing them into a scrapbook. I’ve found inspiration in books, magazines, TV, architecture, fashion, nature … step away from the computer!

2. Explain the idea to a non-techie

I don’t know how many times Jane has patiently sat and listened to me wittering on about some design idea, and then pondered carefully as I finish with the killer question “Does that make sense?”

Crab notes:

“A foolproof test is verbally explaining an idea to a non-designer. If you can’t succinctly explain a concept and get across how it will look and feel, it’s probably not a great idea.”

3. Paper and a pen

This was a tip that struck a chord with me: use simpler tools. Don’t rely on massive, expensive software applications. Get back to basics.

I have a home-made pad of A5 paper next to me on my desks, both at work and at home. Any scrap A4 paper that would otherwise go into the recycling box gets ripped in two and bound together with a foldback clip.

The next bit of advice is from usability guru Jakob Nielsen:

The most important tools for a smart designer are a pen and plenty of paper. This is all you need to do user testing — no fancy lab required. Just sit next to a customer as they attempt to use your website.

Mock things up on paper first. Show it around. Get the big things right first, before you waste time writing code that might never be used.

And for those who say “I can’t draw” advice from GapingVoid:

They’re only crayons. You didn’t fear them in kindergarten, why fear them now?

4. Simpler software

37signals founder Jason Fried:

[Our software products] do a few things really well and get out of people’s way. And when products do a few things really well, they’re more pleasant to work with, and easier to learn and understand.

Find software that does this for you. A few of my favourites:

I use these applications again and again for specific tasks because they’re quick, simple to use and reliable. I’ve got other, bigger applications that will do these tasks but these do it for me quickly.

5. Getting Things Done

Interesting advice from Khoi Vinh from NYTimes.com about GTD:

Unless you really feel GTD is perfect for you, don’t bother. It’s over-rated and just about the (admittedly satisfying) pleasure of organising a system for getting things done, rather than actually getting things done.

I can see that, but I would also say: don’t reject it simply because it doesn’t work for other people. Give it a go, and adopt the things that do work for you, such as a zero-inbox policy.

I was impressed with Andy Budd’s approach to email. He answers emails that take under five minutes, deletes the junk and then files the rest in folders with titles such as:

  • Action
  • Hold
  • Respond
  • Waiting

I’ve been inspired to try something similar.

6. Reuse code

Re-use tried and tested modules of code, for example:

  • Frameworks for CSS, PHP, JavaScript
  • Base it on the default WordPress code (clean, valid and well-structured code)
  • Create your own library of code (many code editors allow you to store these as snippets)

I loved Edward Barrow’s reason for using prebuilt libraries:

He likens using a prebuilt library to “getting an expert programmer to work on your project for free”.

Whenever I do something new I now ask myself whether this is something that I’m likely to need again. If it is I’ll store it as a snippet in WeBuilder 2008, my main code editor.

I categorize everything and have folders and subfolders in my code library arranged like this (I’ve expanded the HTML folder):

  • Apache
  • CSS
  • htaccess
  • HTML
    • !DOCTYPE
    • Basic Tags
    • Elements
    • Forms
    • IE Conditionals
    • Meta
  • JavaScript
  • jQuery
  • Lorum Ipsum
  • Microformats
  • PHP

I’ve got all sorts of goodies in here, that I don’t have to go searching for because I know they are there at my fingertips.

7. Source control

Before I discovered Subversion I used to create my own version control system. But I ended up with umpteen files and folders along the lines of:

[backup-070620]
[backup-070621]
index2.html
index3-test.html

It got ugly, and if I made a mistake or needed to roll back to a previous version I couldn’t very easily do it. I then discovered FileHamster but I couldn’t quite get the hang of it. I found it a little too intrusive.

I was then introduced to Subversion, and discovering that you don’t need to incorporate it into Apache server I installed the Subversion server onto my PC at home and it’s been great! I use the TortoiseSVN client.

Quoting once again from the article in .net:

“In fact, the simplest and smartest investment you can make for any project is to use some sort of version control system,” says Aral Balkan, web developer and conference organiser.

What are your tips?

What are the tools, tips that you find most useful, that make you most productive?

New website for St Mary’s College

School of Divinity website

When I was a student at St Mary’s College (1989-1992), the Faculty of Divinity at the University of St Andrews, there was no such thing as the World Wide Web. So it feels a little surreal that I helped design, build and launch the website for my alma mater.

So it was that this evening, shortly after 5:00 pm, I published the new website for the University of St Andrews’ St Mary’s College, The School of Divinity.

Anticlimax

I always feel a certain anticlimax when a site goes live. You work on the site for months (this project began in July 2007), looking at it, checking it and tweaking it day in, day out for weeks, or over a couple of months in some cases, and then all of a sudden it’s live: open for public viewing, and comment.

It’s not like a book launch. There’s no launch party. No celebratory crowd. Just me alone in my office once everyone else has gone home, deleting a symbolic link here, and pressing a button to start the publish there. Then checking it all, making a few changes and republishing … and that’s it.

Next

There are still a few bits and pieces needing done (a few 360° photos, and some Camtasia video screencasts introducing prospective distance learning students to our VLE: Virtual Learning Environment, an OpenSearch description document, and some general tidying up and optimizations of the code).

Then it’s on to the next project, which for me is to create some Camtasia screencasts of my own to explain the website layout to new students.

A very creative year so far …

Right Twin - week 19
Right twin at 19 weeks

In many ways 2008 has been a very odd year for me, for many reasons. Of course it opened with the IVF procedures that led to Jane discovering that she was pregnant, that led to us discovering that she was pregnant with twins.

During the last six months we’ve been filled with delight, trepidation, excitement, nervousness, wonder, a whole spectrum of emotions. And here we are now at week 27.

For those who don’t know, a full-term pregnancy is generally regarded to be 40 weeks. Twins, we’re told, generally make an appearance early, round about weeks 35-37. So we could have another 10 weeks; we could have more, we could have less. We’ll continue to trust God, and wait in quiet expectation.

I was born to reflect and not shine

It’s been a funny year where I’ve blogged a whole lot less, but gone out and done a whole lot more — but then didn’t come back here and share it with you all … sorry about that, but I guess I’ve needed that time to reflect. I’ve felt myself go deeper within myself — go into my ‘cave’, Jane might say — and reflect on where I am, who I am, and what it means to be expecting children: two, at once!

I’m not entirely sure where I am, or what to expect, it’s all a very new experience for me. But one thing I can say with certainty is that I’m really looking forward to meeting the boys now, and I’ll certainly give it my best shot.

I learned a lot of good things from my own dad, hopefully I can pass some of that love and laughter on to my own boys, and make up some weird nonsense of my own to hand on to them!

I just really wish that Dad was still here to meet them too when they arrive. (Again, for those who don’t know: my Dad had a triple brain haemorrhage in 1983, was really quite ill for about 15 years and died shortly after New Year in 1998. Ten years ago: another contribution to the oddness of 2008.)

New design

But 2008 also opened with another creative process: the redesign of the University of St Andrews website, which was launched to the public (having been in what I guess we could call ‘closed beta’ if we wanted to go all Web 2.0 with y’all) last night.

Here’s a screenshot of the external homepage:

Screenshot of University of St Andrews website
Screenshot of the new design for the University of St Andrews website.

“But… didn’t you just launch a new design last year?! Why do you need another new design?” Quite a few folk have asked us that over the course of the last few months, and it’s a good question to ask.

When we did the first relaunch of the University site it was more than just a new visual design, it was a completely new website: new design, new architecture, new way to update and manage the content, new … everything.

We designed and built the site according to the excellent wireframes that had been developed in collaboration with us by Dynamic Diagrams, an information architecture company from the States. They were great, we learned a lot from them, and for me that was one of the most exciting parts of the project.

Listening

But like any design, the then-new design was a “best bet”, it was the closest that we got to what we perceived we would need from the site. So we built it, launched it and let it settle in for six months while all the time listening for where the design wasn’t working properly, where we needed more flexibility, and crucially: what the users were asking for.

We got a little more explicit by inviting both staff and students to feedback sessions over lunch, where we bribed them with food to tell us what they really thought of the site, what they liked about the site, what they felt could be done better, and what was missing.

I went into those sessions expecting to feel very defensive, but came out of all three sessions feeling quite buoyed and encouraged. It felt good to listen to our ‘customers’, and from the feedback from those sessions mixed in with our own collation of ideas from helpdesk calls, as well as our own thoughts and observations we set about redesigning the site. And this time we didn’t touch the structure (much), we looked instead solely at the visual design and its functionality.

New design

We wanted something that was:

  • Clean, fresh and contemporary
  • Not too far from what we already had
  • Easy to maintain, and extend
  • Compatible with the most number of browsers (old and new)

The site itself is built on the Blueprint CSS framework, with a number of tweaks, which helped us address most of these requirements.

What was particularly impressive about Blueprint was how it allowed us to ‘sketch’ designs in code faster than we were able to do it with a graphic design package. And nothing looks more like a web page than a web page!

So for the last seven months or so I’ve been diligently working on the code, often times taking it home to work on in the evenings and at the weekend. I’ve working on it some nights past 01:00, and some mornings before 05:00.

It really has been a labour of love, but then … I believe in the University of St Andrews, and I love my job. St Andrews is where I did my undergraduate degree, I feel an incredible loyalty to the place and sincerely want to do the best for the University.

Launch

So at five pm last night we scheduled the new site to launch … and ran away!

At home we waited with baited breath while the new design for the University of St Andrews website was published to the public web server, and then breathed a sigh of relief that we’d got most of the planning right.

There were a couple of sections (sport, music, UTREC) that we’d overlooked and had published out with the wrong design, but on the whole it went without a hitch.

… until there was a serious power outage in St Andrews during the afternoon today and all our systems (including the web server) went down! You can’t have everything … like a new design and the ability to look at it!

And relax!