Here are the things I found within the first few hours of using the service:

• The website itself is littered with usability problems. For example, after I successfully log in and go to look at a review, I still see a large box in the middle of the page asking me to sign up or log in! When I go to add a comment to a review, it asks me to create a new identity, then drops me somewhere else completely and I have to hunt for the comment thread again in order to write the review I wanted to write in the first place. Basic stuff.
• The website has security issues. I was dismayed to see that the password I entered was promptly emailed to me. Standard best-practice is to never email out passwords, but only to allow the user to reset them if required.
• The content on the website can be a bit patchy in places. When looking at the review for one item I noticed that the photo didn’t match what it said in the ’specs’ section. Got the impression it had been automatically pulled in from some database and no-one had checked it.
• But far more serious than all that is that I don’t really believe they are giving a balanced judgement about what to buy. They highlight a series of scientific-type tests that give measurable results, and these are easy to communicate and look good. But they often seem to completely ignore other important considerations like quality of construction, how long things might last, and aesthetic appeal. So for instance a £700 range cooker might get a score of 66% based on tests like how long the oven takes to heat up, how easy it is to clean, and so on. This implies it is better overall than another, premium cooker costing £3000 that gets a score of 65%. Yes, oven performance and ease of use are important, but they don’t mention that the cheaper cooker might have cheap-looking plastic dials, for example, and be much less rugged in construction.

It probably is useful to look at resources like Which? when researching expensive items, but I wouldn’t take their ratings as definitive, and definitely go and see stuff yourself before you buy. And don’t use a valuable password if you register for their website!

Adobe Illustrator is a great tool, but it seems to have some real problems rendering anti-aliased text when using the ‘Save for web’ function. Text from very thin fonts is a particular problem. In these cases, the text looks fine while you are working on the file – I usually have the anti-aliasing set to ‘Sharp’ and it does look crisp and clear. However, as soon as you go to ’save for web’ the results are awful.

So here is what I see while working on some text (this is set in Museo 100). This image comes directly from a screenshot in Mac OSX:

And here is what Illustrator gives me when I select “Save for web & devices”:

The text is rendered very poorly.

As an experiment I created the same text in Photoshop and did “Save for web & devices” and it has no problems at all:

It’s a really annoying bug, and it’s been around since at least version CS4, as we can see from this post on the Adobe help forums.

I use Illustrator for nearly all my web work – it’s a great tool and very quick to work in, and ‘pixel preview’ mode and ’snap to pixel’ mean you can produce precise graphics for the web. However, it looks I might have to start using Photoshop more. Disappointing.

The general mechanism for resizing text is to have one link to increase the font size and one to reduce it. However, it can get tricky for the user to keep track of what the original size was, so sometimes people include a ‘reset font size’ button.

At this point the UI is starting to get a tiny bit complicated, so I was looking for a way to create a dead-simple widget with just 2 options – small font or big font. Keep it simple.

I’m sure someone has done this before, but I couldn’t find a script on Google that did everything I wanted, including changing the styling of the currently selected font size to make it obvious, as well as a cookie to make the size selection persistent across pages in the site. So I hacked around with a couple of other scripts I found and created a solution using JQuery.

• View the demo ».
• Download the source files

The advantages of this solution are:

• The UI is really clear and simple (you could make buttons instead of links if you like)
• A separate class is toggled for the currently selected size
• The resize links are only displayed if the user has javascript enabled
• The font size selection is persistent across pages
• The resize affects the font-size as set on the HTML body element. So all text that you want to be resized needs to be sized in percentages or ems. If there are some elements you don’t want to be affected by the resizing, you can specify their size separately in pixels.
• Unobtrusive Javascript

A few notes:

• By loading the JQuery library from Google’s servers, it’s likely that the code will already be cached, thus saving download time
• You need to include the JQuery Cookie plugin separately
• Font sizes for LARGE and SMALL need to be set in the JS file
• The links need to be set to display: none within your stylesheet so they are hidden by default. They are then revealed for JS-capable browsers only

I got the basic idea for how to approach this using JQuery from a post on ShopDev.

To give an example, at ILRT we were recently working on a new website for the Worldwide Universities Network, an alliance of 18 universities across the globe that join together to encourage interdisciplinary research. The main audience for the site are academic researchers who may be interested in starting a new collaborative research relationship with another group in another WUN university. In this case it was useful to distill out a key message for that audience – one that summarised the benefits offered by WUN – and marry that to an image that illustrates that message metaphorically:

The benefit of this type of design is that it allows you to communicate your message in a visual way. Images are more instantly accessible than words and require less effort to process. In this case the distant expanse of horizon ties in with the idea of looking at the future and meshes with the tag line. Tag lines can often be used to clarify the metaphor you are making and anchor a non-literal image to the actual subject of the design.

Here’s a homepage for a software company:

In this case we determined that the immediate appeal of the company’s software products was to help it’s clients stand out in the market place. So I set about trying to capture that concept in a non-literal way. In a literal sense, of course, fruit has very little to do with software. But the image implies the concept of ’standing out from the crowd’ or ‘being special’ which is what we wanted to communicate in this case. The fruit also has a secondary connotation – that of being tasty. Images of delicious food work on our senses in a more immediate way than software usually does.

As a web designer, using conceptual or non-literal design solutions can be liberating. You know what it’s like, you’ve just landed a new job to design a website for a firm of accountants. The obvious choice is to use images of people in suits reading documents, perhaps a close-up of a spreadsheet or a calculator. Not the most inspiring stuff to work with. But perhaps we can look at it from another angle – what kind of function does a good accountant really perform in the life of a business? He is a necessary part of helping a company grow and flourish, helps to keep things in order. Something like a gardener perhaps? You could then shoot off to your favourite stock photo site and start looking at images of tended gardens or beautiful trees growing.

1. We’ve going to use the built-in version of the Apache web server. To start/stop the web server, go to System Preferences in OS X and select Sharing > Web Sharing.
2. Move the Apache document root to a more convenient location (my personal ‘Sites’ directory): open /etc/apache2/httpd.conf and change the ‘DocumentRoot’ variable in 2 places (note: the PHP module should be left commented out, as it is by default). Next enable .htaccess by editing /etc/apache2/users/<username>/<username>.conf and specifying Options All and AllowOverride All. Restart Apache.
3. Download and install a more recent version of PHP with more capability than the standard Apple one (GD library, Mcrypt, etc). This installs PHP into the directory /usr/local/php5.
4. Download and install a version of MySQL server that correlates with that version of PHP (so the PHP MySQL library matches). MySQL is installed into /usr/local/mysql-5.0.77-osx10.5-x86 with a symbolic link from /usr/local/mysql.
5. Create or edit ~/.bash_login and add this line to the end: export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:$PATH". This makes it more convenient to interact with MySQL from the command line, as well as pointing our system to our custom software installations in /usr/local.
6. To start MySQL from the command line type sudo mysqld_safe (To stop MySQL type mysqladmin -u root -p shutdown)
7. Set password for MySQL root user: mysqladmin  -u root -p 'mypassword' (Note that the MySQL user is different from the Unix user that the MySQL is running under – usually _mysql).
8. To check current users in MySQL, use: SELECT Host, User, Password FROM mysql.user;. Set passwords for all as necessary. Alternatively, to limit access to your personal machine only, create the file /etc/my.cnf as detailed on this page (‘A Note About Security’).
9. Set passwords for other users/hosts as required – see instructions half way down this page. Create an ‘admin’ user for MySQL so we’re not using root in the various config files etc. Will need to grant privileges.
10. Download and install PHPMyAdmin. Unzip and rename directory, then place in web document root. Make a file called config.inc.php to put in your blowfish password (any random phrase will do). You can copy libraries/config.default.php if you like.
11. Make sure you’ve installed Xcode from the OSX install disk.
12. Add in MySQL C bindings for Ruby, to make Rails faster – instructions near the bottom of this page (you will need to have Xcode Tools installed in OS X to do this – use your OS X installation disk if needed)
13. Follow the instructions on HiveLogic for installing Ruby and Ruby on Rails into /usr/local.

1. There’s a good case for saying that on the hompage (only) the logo or name of the site should be marked up as H1. I don’t think this should be applied as a general rule on other ‘content pages’ because this is a waste of the H1 function both for screen readers and for search engine ranking. But we could make an exception for the homepage. It sort of makes sense. But then you have a slightly fussy situation where the HTML and CSS for your logo is different for the homepage than for all other pages.
2. Another alternative would be to allow multiple H1s on the page and markup all the teaser headings as H1. This feels instinctively wrong to me, because I think an H1 should define the overall, main content for a page. It probably also dilutes the effectiveness of the headings in search engines, and isn’t going to help screen readers if they’re expecting a single H1.
3. Alternatively, we could choose to miss out the H1 tag for the homepage. This makes sense from the perspective of the information architecture for the site. Afterall, those teaser headings are H1s on the content pages they link to, but shouldn’t be H1s on the index page. In terms of screen readers: if an H1 is not found, presumably a decent screen reader will try jumping to H2. It may not be totally ‘correct’ but I doubt this is going to trip someone up in practice? On the other hand, you are wasting the power of that H1 for search engine ranking.
4. I suppose a further option is to put in a ‘phantom H1′ and then hide it with CSS. But that also feels a bit messy.

So anyway, I’m leaning towards options 3 at the moment in cases where an H1 tag doesn’t really ‘make sense’.

Clean UI Design

Ryan has a real ability to simplify and re-structure a UI so that it communicates as clearly and effectively as possible. The basics of his approach are available in a paper on UI Design Patterns he wrote a few years ago. He argues that most of the important work in UI design actually consists of writing copy, rather than creating graphics or layouts. Cleanly written labels and headings are the key to improving ’scanability’ and therefore a clear UI. Sort of reminds me of Oliver Reichenstein’s observation that 95% of web design is typography. And seeing Ryan in action working on a UI was definitely useful for me, even though I already know much of the ‘theory’ and have done it many times myself. It gave me a bit of a fresh perspective.

Designing for Yourself

37 Signals seem to follow a sort ‘expert-led’ design philosophy. They don’t really do user research. And I suspect they can get away with this partly because they are designing for themselves and for people just like them – other web geeks. It’s a pretty liberating way to work and it’s clear that they’re good at what they do, but I wonder if they would be quite so successful if they were designing web apps a completely different demographic. Basecamp is great but I wonder sometimes if non-geeks really ‘get it’. For example, at work when we ask non-techy clients to use it, they often seem to prefer email and telephone calls.

I was also a little bit shocked by Ryan’s admission that he ‘doesn’t really think about accessibility’. Perhaps that also says something about the target audience for their apps. But it wasn’t an entirely helpful stance to take in a workshop teaching a general audience in the UK about web app design.

Workflow

Ryan told us quite a lot about how the team works at 37 Signals. One clear advantage of using an MVC framework like Rails is that, because of the strict separation of markup from program logic, the designer can continue to ‘own’ the front-end CSS and HTML right through the life-cycle of the product. This sounds really ideal and I’m sure it makes a huge difference to the final quality of the interface. It can be really frustrating as a designer to hand over a carefully constructed HTML template, only to see it gradually erroded and degraded as it is integrated into the back-end and new functionality added.

Another key aspect of the 37 Signals workflow is the practice of designing directly in HTML. I think this kind of an interesting idea and has some upsides. Clearly it can work well and it results in designs that work with, rather than fight against, the medium of implementation. But it occurs to me that all of 37 Signals’ applications are very much purely functional ‘tools’. For some web apps imagery and ‘visual design’ are more important and in those cases where you need ‘more graphic design’, working directly in HTML is going to be very inefficient.

Conclusion

Overall it was valuable to see Ryan in action and to get first-hand exposure to the way he thinks about and analyses UI problems. I’ve already found myself thinking in a slightly different way when designing a complex page. It has also led to some useful discussions about how to allow designers to keep ‘ownership’ of HTML markup right through the life-cycle of a web application. I think that is something 37 Signals have got exactly right. I think Ryan could make his workshops even better by doing a bit of extra research about the general environments people have to work in today, and considering some of the issues we face. For example, accessibility is quite an important issue and can’t just be brushed aside, and designing directly in HTML is not going to work for every kind of web application.

Create a specific template for displaying search results – search.php. Then, by placing an extra field in your search forms, you can check for this value within search.php and display or hide certain categories depending on what you detect.

So for example on your homepage you might have a search form with a field like this:

<label>Restrict search to blog: <input name="scope" type="radio" value="blog" /></label>


Then within search.php you would pick up that value like this:

<?php $scope = $_GET['scope']; ?>


And then use that to skip certain categories within the loop:

<?php while (have_posts()) : the_post(); ?>
//Skip this result if it's out of scope:
<?php if($scope == 'blog' && !in_category(1)) continue; ?>
....


Of course you can make this more complex by setting up multiple scopes and including more categories in each.

The first thing we want to do is visit the user’s page on YouTube to grab the feed URL for that person. It might be your own account, of course, but there’s no need to log in, and feeds are publically available from anyone’s account. Once on a user’s page, your browser should display an RSS icon: click on it and copy the URL of the feed. It will look something like this:

http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

In this case I’ve grabbed the feed from a channel.

Next open up the WordPress template file for the page you want to display the content on. It might be ’sidebar.php’, for example. Wherever you want the videos to appear, you need to call the fetch_rss() function as described in the WordPress documentation.

<?php
// Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile');
$maxitems = 3; //set number of items to display
$items = array_slice($rss->items, 0, $maxitems);
?>


In order to embed a YouTube Flash movie we could use the nested objects method, so we have valid HTML, and include some appropriate alternative content (in case the Flash fails to load for some reason). To set this up for each item, all we need from the feed is the ID of the video.

If we examine the RSS feed itself, we find that the video ID is contained in the final part of the ‘link’ element. To extract it, we’ll need to use a tiny bit of PHP to break up the URL string.

Of course we need to repeat this for each item in the feed, so we set up a loop like this:


<ul>
<?php if (empty($items)) echo '<li>No items</li>';
else foreach ( $items as $item ) : ?>
<div>
<?php
$youtubeid = strchr($item['link'],'='); //split off the final bit of the URL beginning with '='
$youtubeid = substr($youtubeid,1); //remove that equals sign to get the video ID
//Now embed the flash:
?>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" width="320" height="265">
<!--<![endif]-->
<p><a href="http://www.youtube.com/v/<?php echo $youtubeid ?>">View movie&raquo;</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</li>
<?php endforeach; ?>
</ul>

This method is pretty easy to adapt for any type of RSS feed you might want to use: Vimeo, Slideshare, Twitter, etc. Of course there are loads of WordPress plugins that can help you embed this stuff, but sometimes a plugin doesn’t give you exactly the output you need, and it’s helpful to be able to parse the feed yourself.

Snap to pixel

In Illustrator CS1 and older, getting objects to ‘snap to pixel’ properly was difficult. Even when you set your units to “pixels”, positions on the canvas are very sensitive and tend to end up as fractions of a pixel. This introduces anti-aliasing artifacts when exporting the image so that your web graphics don’t look very ‘crisp’.

To get a ‘snap to pixel’ effect in these older versions of Illustrator, first set up your grid so that you have a grid line every 128px with 128 subdivisions. That in effect gives you a pixel grid, but with a usable number of lines visible. Then turn on “snap to grid” under the “View” menu. This keeps all your movements and transformations locked in to the nearest pixel, and keeps your graphics nice and crisp. (Thanks to Hennning for first showing me this technique).

As of CS2, Adobe introduced a specific ‘snap to pixel’ option, which you can see under the View menu after you select “Pixel preview”. This will keep all your objects snapped to the nearest pixel.

Clean outlines

By default, a stroke line around an object will follow the centre of the outline. This means that a stroke line of 1 pixel will have 0.5 pixels either side of that line, and we’ll end up with anti-aliasing artifacts. To solve this, always select “Align stroke to outside” or “Align stroke to inside” from the Stroke options window.

Unfortunately, even when you do this, and have “snap to pixel” turned on, Illustrator will randomly introduce an extra 1px anti-alias shade below the top edge of a rectangle. This is one of those annoying Illustrator bugs that (almost) makes you wish you’d just stuck with using Photoshop. This bug seems to occur in both CS3 an CS4 versions. The only way around this that I know of, if it is absolutely critical, is to draw the stroke separately as very thin rectangles – see below. [Update: setting the stroke weight to 0.999px solves this problem. Thanks to Benjamin McDowell for posting this in the comments.]

Drawing lines

In theory, the centre of a line lies between two pixels, and hence we get anti-aliasing problems when drawing lines with “snap to pixel” selected. Rather than nudging the centre measurement of a line by 0.5 pixels (which will give you a clean line), I prefer to draw lines as very thin rectangles. For example, a 1px horizontal line can be made up of a 1px high rectangle. In a similar way, controllable shading can be achieved by creating thin rectangles filled with a black to white gradient, setting the blending mode to “multiply”, and then reducing the opacity as required.

Use layers

Unlike Photoshop, by default Illustrator allows any element on the canvas to be selected and moved/modified with a single click. This makes designing more fluid and quicker – resizing an object requires less clicks. It also makes it important to set up a few different layers, so that you can lock some layers while you work on others. I tend to place some example browser chrome on a top layer (to help get an ‘in-context’ preview of the design), a layout grid on a second layer, main content on a third layer, and structural elements like boxes or columns on a ‘ground’ layer. But depending on the complexity of the design, you may want to set up more layers – don’t forget to name them to help you keep track.

Use character and paragraph styles

Another area where Illustrator scores is its ability to define character and paragraph styles. Say you have a full web page design with a fair amount of content: text may appear in different columns, break-out boxes and sidebars. Now say you want to try tweaking the link colour, or changing the font of the headings. Instead of selecting each instance of link text in turn and making the colour adjustment, you can just make a global change to your “link” character style. It takes a little longer to set up, but you can end up saving time, especially if you’re the kind of perfectionist designer who likes to keep fiddling with things.

Working with bitmaps

For some things, like editing photos, you’re going to have to use Photoshop. It’s often worth ‘placing’ PSD files into Illustrator so that transparency works properly. Placing an image (as opposed to just copying and pasting via the clipboard) also means that Illustrator can automatically update the image when you make changes to the file within Photoshop, which can be handy. Note that you can do some quick ‘cropping’ work in Illustrator by making a ‘Clipping Mask’.

Getting help

There are lots of decent books and online tutorials around, although few of them focus on using Illustrator for web work. I’ve always preferred to teach myself, using the Adobe help files. A good place to go if you get really stuck is the official Adobe support forum. There are some knowledgeable power users there, although don’t expect an answer right away. Illustrator does also have the odd strange bug every now and again, so if you really can’t work out what’s going on, it might not be your fault! 99% of the time though, the answer is there somewhere in the help files.