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.

The basic idea behind composing to a vertical rhythm is to keep text lined up on an imaginary grid of evenly spaced horizontal lines all the way down the page. The effect is unconscious to the average reader but helps to make the layout of the page feel harmonious and restful.

Handily, the CSS property line-height can be set globally on the BODY element and inherited down through every other element to form the basis of our invisible grid (which I’ve made visible on my example). We also set a default font size in a similar way:

body {
font-family: Verdana, sans-serif;
font-size: 0.875em; /* set default font size to 14px */
line-height: 1.42857em; /* set global line height to 20px */
}

In order to maintain our grid, it is important that the margins relate to the line height rather than the font size. So we set margins on individual element types like this:

p { margin: 1.42857em 0; /* Set margins on paragraphs to 1 x line-height */ }

Of course, not all text on a page will be the same size, so we can vary this on individual element types (note that this doesn’t affect the line height, which retains its value as inherited from the body element). The important thing is to adjust the margins accordingly:

#sidebar p {
font-size: 0.85714em; /* reduce font-size to 12px for #sidebar */
margin: 1.6667em 0; /* adjust margins accordingly */
}

You’ll see there’s a bit of maths going on here. To work out a new font size in ems, simply divide the target pixel size by the default pixel size. So if the default font size is 14px and we want a pixel size of 12px, we set it to 12/14 = 0.8571. Then, remembering that margins relate to the font size, we scale them so they match the global line height. In this case we want a margin of 20px (to match our line height) so the calculation is 20/12 = 1.6667.

So far so good. The only other tricky bit comes if we want to set the margins on our headings so that they are closer to the text below them, and have a bigger margin above. This helps re-inforce the relationship between a section of text and its heading, and helps create more appropriate spacing between sections.

One way to achive this is to double the top margin for headings, but that can make the spacing pretty large. So often I prefer to move the headings down by a fraction of the global line height. The important thing here is to keep the overall rhythm going, even though the rhythm is broken for a particular heading (maybe we should call this ’syncopated headings’). To do this, just make sure that when you take something off the bottom margin, you add the same amount onto the top margin. That way the overall grid is maintained. We can use negative bottom margins to help with the interaction with the top margin on a following P element:

h2 {
font-size: 1.2857em; /* 18px */
margin: 1.6666em 0 -0.5556em; /* top margin: 30px, bottom margin: 10px */
}

And that’s basically it. You can see a live demo of this technique here. I’ve added the horizontal grid lines on with a background image, to help see how the spacing works.

To check who may be on your machine, open the Terminal and type ‘who’ (or to see who was on recently, type ‘last’).

To send everyone a message type:

echo ‘Stop sneaking around on my machine’ | wall