Editor’s Note: Elliot will be doing a talk called “The Perfect Portfolio Site” on the FOWD Tour.

This is the second video in our two-part series focusing on how to design a killer portfolio site (feel free to check out Part One).

In Part Two you’ll learn …

1. How to ‘design in the browser’
2. How to take your design from Photoshop to HTML and CSS
3. How to integrate your design into a CMS like WordPress
4. How to structure your CSS files
5. How to enrich your design with CSS3
6. How to use ‘custom fields’ in WordPress to make powerful templates
7. How to use Webkit Transistions to add extra beauty to your site

30-Minute Screencast

You can also download the hi-res video if you have a Vimeo account.

We’ve compiled six useful tips for all you web designers and developers out there. They cover various topics including: accessibility, SQL, web developer plugins for Firefox, HTML emails, design and jQuery.

Feel free to disagree or add your own in the comments below. If you’d like to submit a tip to be considered for future articles, just head over to Tipster and add your own.

Alt Tags and Screen Readers

By: James Fenton

I can’t claim these tips as my own, though my web accessibility hero Bim Egan (of the RNIB) recently gave me a few simple tips regarding alt tags and screen readers.

1. Keep your alt tags as concise as possible.
2. Don’t just describe exactly what is going on in an image, describe what message it is trying to convey.
3. It is OK to leave the alt attribute blank (alt=”") as it can be more of a hindrance to blind users than a help.
4. When an image is essentially just style, use it as a background-image.

Spending a few hours watching (and listening) to a blind user on the web is a mind blowing experience and will totally change how you approach accessibility

Shorter SQL statements by abbreviating table prefixes

By: Joris Heyndrickx

Instead of writing:

SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21


You can write:

SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21

My Top 6 Firefox Plugins for Web Development

By: Simon Hamp

FireBug with FirePHP FTW!

1. FireBug (getfirebug.com)
2. FirePHP (firephp.org) req. FireBug
3. ColorZilla (colorzilla.com/firefox/)
4. HTML Validator (users.skynet.be/mgueury/mozilla)
5. YSlow (developer.yahoo.com/yslow/) req. FireBug
6. Web Developer (chrispederick.com/work/web-developer)

Image headers in table based HTML Emails

By: Pete Roome

If you have an image as a header on a table based HTML Email it is likely you will find you have a very annoying gap beneath it between your two <tr>’s. Simply add the following styling to your image to close this gap:

{vertical-align:bottom;}

Lighting effects on boxes

By: David Smith

To make a box stand out in your design simply:

1. Choose a colour for your box
2. Create a subtle gradient starting from a slightly darker version of your colour (bottom) to a lighter version of your colour (top)
3. Make sure your gradient is SUBTLE!
4. Draw a horizontal line across the top of your box so that it spans the whole width.
5. Pick a colour from the top of your gradient and lighten it still more. Apply this colour to the line you just created.

You should have an effect which looks like light is hitting the top of your box making it stand out. The blue Tipster banner uses this to good effect.

Manual filmstrips in jQuery

By: Michael Peacock

Here’s how to create a really simple manual photo film-strip in jQuery. It can be used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.

$(document).ready(function(){
imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};

Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

Any tips you can add?

If you have any tips you’d like to add, please do so in the comments below. Thanks!

[Photo Credit: flickr.com/photos/dunechaser]

Like this article?

If you enjoyed, this article, feel free to re-tweet it to let others know. Thanks, we appreciate it! :)

Have you ever wanted to create a simple multi-person blog, but didn’t want to bother setting up an entire WordPress installation? If so then we’ve got just the answer. By combining Twitter Search, Atom feeds, hash-tags and PHP, you can create an RSS-enabled, micro-blog using Twitter and be up and running in less than 10 minutes.

The new Think Vitamin news feed is powered this way, so let me show you how we built it.

Screenshot of the Think Vitamin news feed

Sign up for Twitter

First off, make sure you and the other blog contributors have Twitter accounts. It’s free and only takes two minutes to sign up.

Choose your Hash-Tag

The way you will post to the blog is by including a ‘hash-tag’ in your Twitter post. For example, we chose #thinkvitamin for the news feed. It can be anything, but make sure it’s not too common so you don’t pull in Tweets that are irrelevant (ie #strawberries or #obama). A great way to check is to search for potential hash-tags at search.twitter.com and see how many times they’re used. The fewer the better.

Create Your Atom Feed

Head over to search.twitter.com and type the following into the search bar:

#your-hash-tag from:user01 OR from:user02 OR from:user03

Replace ‘your-hash-tag’ with the hash-tag you’ve chosen, and ‘user01′, ‘user02′ and ‘user03′ with the Twitter usernames of the folks who have permission to contribute to the blog. You can include as many Twitter usernames as you like.

This will return results from user01 or user02 or user03 where the hash-tag ‘#your-hash-tag’ was used. Now copy the ‘Feed for this query’ link to your clipboard (you’ll need it later).

Output the Atom Feed as HTML

You can use PHP (or any language of your choice) to parse the feed and output it to a page as HTML. This is where you’ll need the feed URL you copied in the last step.

The file atom-html.php (download the source) outputs certain nodes of the Atom feed as list items in an unordered list. You can then style this list however you like. Here is an example of how to implement the code:


<ul>
<?php
include('atom-html.php');

# The URL for the Atom feed from search.twitter.com
$url = “http://search.twitter.com/search.atom?q=
%23your-hash-tag+from%3Auser01+OR+from%3Auser02+OR+from%3Auser03″;

# Create object to hold data and display output
$atom_parser = new myAtomParser($url);

# Return string containing HTML. The argument for getOutput() is the
# number of items to display
$output = $atom_parser->getOutput(5);
echo $output;
?>
</ul>

Count the Subscribers with FeedBurner

It’s important to know how many subscribers you have, so make sure to pipe the Atom feed (that you created in the ‘Create Your Atom Feed’ above) through FeedBurner. If you don’t have an account, it’s free and easy to sign up.

Once you have a URL from FeedBurner for your feed, make sure to include it as the ‘Subscribe’ link in the HTML.

What About Comments?

We haven’t enabled any commenting on the Think Vitamin news feed, but this could be added by including a Disqus snippet in the HTML output.

That’s it.

We told you it was easy. Let us know if you’re currently using Twitter on any of your sites in an interesting way.

In a world of social participation, AJAX and rich user experience, the humble hypertext link can seem so web 1.0. However, this often-neglected tag is the fundamental building block of every web application and is in the front line for usability. This article seeks to re-evaluate its role and suggest some best practice for its use.

Let’s be honest, the hypertext link isn’t very sexy. Familiarity breeds contempt the saying goes and this is certainly true for the ‘a’ tag. Every day we code it many times over without giving it a second thought. Unfortunately, as web designers we can often become sloppy when working with links and start to take liberties with the way we implement them. Not only is it incredibly common, it is also very simple: after all, its just a link. And at the other end of the scale you can find all manner of creatively styled solutions.

So in order to redress the balance I will endeavour to lay out some good practice here.

Make it descriptive

The content of a link should always clearly describe where the link goes. Simple stuff I know, however its amazing how often this most basic of principles is ignored. How many times do we see links with labels such as click here and more?

The enlightened will know that links like this create accessibility problems when read out of context by assertive technologies. In fact there is a W3C accessibility guideline that specifically addresses this issue (checkpoint 13.1):

Clearly identify the target of each link

However, instead of addressing the problem properly, some people simply add an additional title attribute to the existing links in the belief that this satisfies the guideline. In fact the W3C recommendations go on to say:

In addition to clear link text, content developers may further clarify the target of a link with an informative link title

In other words, the title attribute is a useful addition to a clearly labelled link, but not a replacement.

The problem isnt merely an accessibility issue. There are also significant usability concerns. We all know that users dont read websites, they scan them. When users are scanning a page they look for things like headings, lists and more often than not, links. Because the reader is scanning the page they often do not read the text surrounding a link and so (once again) the link needs to make sense out of context. The user is not going to hover over each link to see what the title attribute says!

Of course, as with everything, we need to be pragmatic about how we implement this. Sometimes it would be necessary to turn several sentences into a link in order to make it truly descriptive. In such cases I would encourage some common sense and good use of the title attribute instead. However the general principle stands; wherever possible make your links descriptive.

Keep users informed

Not only should a link describe its destination, it should also inform the user about any unusual behaviour. Probably the most obvious example is that it is important to inform the user when spawning a new window. This ensures you conform to checkpoint 10.1:

Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

However, there are other occasions where the user requires additional information. For example, if a link goes to a file that is not a standards HTML page (such as a PDF, MP3 etc) then it is important to inform the user of this. Additional information such as the type of file, its size and what information it contains helps the user make a decision on whether they should follow the link or not.

How this information is displayed needs to be decided on a site-by-site basis. However, a typical approach might consist of adding the information as a title attribute or including it after the main link text within brackets.

Leave the underline alone!

Links can seem so boring. Blue by default, purple when visited, always underlined. Where’s the fun in that? As a result, we can be tempted to look for ways to make them more interesting. I am constantly amazed at the different ways we have found to mess with the underlining of links. Let’s look at a few of them and see why they can be such a bad idea.

Replacing the underline with a border-bottom

I have noticed a growing trend among designers to replace the standard underlining of a link with a bottom border defined in CSS. The argument is that this improves legibility because the default underline clips the descenders of certain characters. Although this is true and a border is often much more attractive, I have concerns about the accessibility of this approach.

The problem is that some user agents have less than perfect CSS support and fail to render the bottom border. This makes it significantly harder to identify links, especially if you have some form of visual impairment.

I have seen the problem occur with Internet Explorer 5 (which one could argue is becoming less of an issue) but also on a number of mobile devices, which is a much more significant problem.

Generally speaking it is unwise to override the browsers default behaviour and so although I wouldnt rule this approach out entirely, I would suggest some degree of caution.

Replacing the underline with a dotted line

An even more worrying trend is the replacement of the traditional solid underline with a dotted border instead. This is most commonly used to distinguish between visited and unvisited links where visited links have the less prominent dotted underline.

Not only does this suffer from the same accessibility problem mentioned above, it also causes confusion among users as it doesnt conform to their expectations of what a link should look like. Because it is unfamiliar, users doubt whether it is still actually a link. This doubt is reinforced by the fact that a dotted underline is the default browser rendering (within some browsers) for acronyms and abbreviations.

Striking through visited links

Another popular approach these days is to put a line through visited links in much the same way you would cross out an item on a to-do list. Of course this is a fundamentally flawed analogy because unlike a to-do list a user could well wish to revisit a page they have previous viewed. By striking through a visited link designers are making it considerably harder to read and therefore more difficult to find, previously visited pages.

The idea of striking through a link is not without its merits however. After all, you could argue that simply indicating visited links by colour does in fact break accessibility checkpoint 2.1:

Ensure that all information conveyed with colour is also available without colour, for example from context or markup.

Although this point is debatable, the principle of providing a non-colour based visual indicator of visited links is a good one. However, striking through the link is not the answer. Instead, consider adding an icon such as a tick immediately before or after the link. This approach does not obscure the text of the link but still communicates the concept that this page has been visited.

Removing the underline entirely

Although the abuses of the underline that I have outlined above are bad, they do at least give an indication to the user that “this is a link”. However, a growing number of sites are choosing to remove the underline entirely so leaving the user to guess as to what text is actually a link. Relying on the user to identify links by colour alone is not an advisable approach. At the very minimum they need some other visual cue that something is a link and the underline is the standard convention for this.

Ensure legibility

We have already discussed the problems associated with ’striking through’ a link. Another common practice is to ‘fade out’ visited links in order to make them less prominent. The problem with this approach is that it assumes users are not going to be seeking ways to return to previously visited pages. Users still need to be able to clearly read visited links and so they need to have sufficient contrast with background colours.

Indeed, all links (both visited and unvisited) need sufficient contrast in order to conform to accessibility checkpoint 2.2:

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.

Use clean semantic markup

The majority of this article has focused on the content of your link or how it is visually displayed. However, it is just as important to ensure that your link is properly marked up.

Although we all know how to create an ‘a’ tag it is still remarkably common to find this simple piece of code being abused. The most common culprits are the addition of style or behaviour elements into our code.

Let me give you an example of what I mean. Setting aside the ‘ethical’ debates about whether this is a good idea, it is not uncommon for links to external sites to open in a new window. I have encountered many sites that include code like this:

<a href="javascript:window.open(http://www.boagworld.com)" style="background: url(external.gif) no-repeat right;" >Boagworld</a>

When in actual fact the HTML could be as simple as this:

<a href="http://www.boagworld.com">Boagworld</a>

The rest could be managed using external style sheets and Javascript includes. A Javascript function could easily scan through all of the links on a page identifying those that link to an external domain. It could then override the default behaviour and open that link in a new window while at the same time applying the visual styling to the link.

This approach is the principle of Unobtrusive Javascript and provides many benefits most of which are beyond the scope of this article. However, it is worth noting that not only is your code cleaner, but this approach also allows you to change the default behaviour of your links without having to edit every link on the site.

Finally, this article would not be complete without briefly mentioning the application of Microformats to link elements. Like Unobtrusive Javascript, Microformats are far too broad a discussion to cover here (but read John Alsopps article for a comprehensive overview).

However, it is worth noting that it is possible to add a vast amount of semantic meanings to links simply by marking them up as Microformats. Through Microformats you can specify whether a link relates to creative common licenses, or whether it contains contact or event information. You can review links, tag links or even explain your relationship with the website owner being linked to. Although Microformats are still in relative infancy, the potential for building applications that leverage all of this hidden meaning is immense. Best of all, this is achievable by simply adding some extra attributes to the humble ‘a’ tag.

A fundamental tool

Hopefully this article has given you a renewed respect for the humble hypertext link and helped you recognised the fundamental role it plays.

I know that throughout much of it, I have sounded like a killjoy, intent on crushing any creativity in your design. But I think it is important to remember that our job is to improve usability not produce a piece of modern art. The majority of people using the web lack confidence. To them every time they go to a different site they are faced with a new and strange user interface. We have no right to undermine one of the few consistencies they have between sites… the humble hypertext link.

Like this article? Digg it!

Gone are the days when a footer merely ended the page. Now it is just as likely to be an all-encompassing launchpad to other areas of the site. Typically a footer will run the full length of the layout, and it is usually used to display information at the bottom of the content hierarchy, such as copyright information, accessibility or validation information, and possibly contact details or company legal information.

For the quirky footer, the aim is to use a large background image that blurs the boundary between column area and footer, by acknowledging the background color of the page and having it influence the footer. In this case, the white background of the page becomes the bubble coming out of my mouth.

Let’s go through this idea step by step, but consider how you could use an equally inventive image to make your footers that bit quirkier. Armed with a correctly-sized image and some well-styled text, the dull footer can be consigned to history.

Prepare the Footer Markup

The first task is to add the information that you want to show in the footer. At this stage, you should not be thinking about the presentation, only the important stuff – the content. Here, it is important to show copyright information and other site acknowledgments, so these go into the markup inside paragraphs.

Copyright Simon Collison 2006

Made with the finest XHTML and CSS.

Content protected with a Creative Commons license. Some rights reserved.

The idea is that whatever madness you use to make the footer seem all wacky and zany, the actual markup is never compromised. Basically, I know I’m going to place the information in a comedy bubble, but at no point should I limit the amount of information because I fear it might not fit the graphic. Content is always more important than presentation – but you already know that.

Apply the Background Image

The aim here is to make it look as if I’m speaking the information, so a speech bubble graphic is created. This graphic is exactly the same width as the layout (760 pixels), and has ended up being 128 pixels in height. As you’ll see in Figure 1, the author needs a shave.

Figure 1: Customized background image for the footer. Simon says…

Now the CSS. The first task is to ensure that there is no internal padding for the footer, or left or right margins. This ensures that the image will sit perfectly, and that any element to be placed within can be positioned using its own CSS rules to avoid confusion.

Next, the background image is declared and set to no-repeat. Sure, it’s the same size as the container, but it is worth ensuring there will be no hint of tiling. Finally, the height of the footer is adjusted to match the height of the image.

            /* Footer */
              #footer {
                clear:both;
                 margin:10px 0 0 0;
                 background:url(/images/bubble_footer.jpg) no-repeat;
                 height:128px;
                 width:760px;
                 }

Figure 2 shows the result in the browser. Note that the juxtaposition of image and text is OK, but not quite right. Longer paragraphs extend beyond the boundary of the speech bubble.

Figure 2: The paragraphs are too long, extending outside of the bubble.

Fine-Tune the Paragraphs

This exact placement of the paragraphs can be controlled by first using 15 pixels of padding at the top of the footer to shunt the first paragraph down further into the bubble, and then by defining properties for all paragraphs that appear inside the footer. The key values are for the paragraph margins, and these can be tweaked until the exact effect is achieved.

Most importantly, the paragraphs are given a width, which is just a bit shorter than the average distance between the left side of the footer and the curve of the bubble. This width declaration will force the text to wrap way before it reaches the curve.

           /* Footer */
             #footer {
               clear:both;
               margin:10px 0 0 0;
               padding-top:15px;
               background:url(/images/bubble_footer.jpg) no-repeat;
               height:128px;
               width:760px;
               }
             #footer p {
               margin:0 0 6px 35px;
               padding:0;
               width:330px;
               font:13px/120% normal Verdana,Arial,sans-serif;
               }

The final result is shown in Figure 3, as it would appear in the base of the browser window. It is possible that if more text were used, the paragraph margins and width might need adjusting as the curve sharpens, but it is fine for this example, and the quirky footer is achieved with minimal effort.

Figure 3: Simon says, “Touch this code, and I’ll find you…”

Like this article? Digg it!

The Book

This feature is an excerpt from ‘Beginning CSS Web Development: From Novice to Professional’ by Simon Collison. This book will quickly see you on your way to building rich CSS layouts, plus it has advice on common tricks and troubles. In the next part of this chapter, you’ll learn how to create advanced footers, such as this one from Derek Powazek. Order the book here.