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! :)

Related posts:

• Add your comment 1 Comments