LearnSix Useful Tips for Web Designers and Developers

Treehouse
writes on June 10, 2009

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! 🙂

44 Responses to “Six Useful Tips for Web Designers and Developers”

  1. Sheamus Warior on August 13, 2013 at 3:52 am said:

    http://www.onextrapixel.com/2011/07/28/web-design-tips-for-absolute-beginners/

    Our mission is to bring
    affordable Technology education to people everywhere, in order to help
    them achieve their dreams and change the world.

  2. what is the benefit of aliasing table name as books b. does it speed up querying process? what exactly are its benefits?

  3. Thanks, i especially took note of the alt tip.

  4. Nice article …. although I have to use some hacks for the application to work on IE ( IE 6 especially) and hence it becomes difficult to validate . I mean its ok if your client is fine if the thing doesnt work in IE 6 but majority of the people who surf the web tend to use IE so I think web developers should take that into account while making web apps .

  5. thansk a lot bro
    very usefull for me.

  6. I think if the image adds something to the content then alt text should be used to interpret that image for those who cannot see it, however if it simply for decoration or the like, then to leave blank alt="" is fine. A screen reader will simply ignore it and continue to read the document without interruption.

    Really you should never need to leave the alt blank, because if the image is purely part of the design it could be added using CSS.

    Hope this make this point a little clearer

  7. YES mate, definitely alt tags should be used for Google bots…they are highly important in SEO point of view as Google and other search engine bots seem to be blind in case of images!

  8. Nice thread and good read! Thanks for sharing!

  9. Image headers in table based HTML Emails:
    I use table img {display:block;} to fix the issue that is often generated on Hotmail or internet explorer. the other solution is to compress the white space in table cell containing only images.
    Normally it does the trick but often one has to resort to a combination of them to satisfy the wide range of email client.

  10. Agree with Keith. It's a useful post, but not of the calibre I would expect of ThinkVitamin.

  11. My apologies for referring to the 'alt' attribute as an 'alt tag' – I hang my head in shame

  12. shouldn't you be using the alt tag for the benefits of google bots?

  13. I can't imagine being blind and using the internet the way I do now. I mean sure it's possible but I'd be missing out on 90% of the content.

  14. Chalk me up for being a fan of YSlow. It definitely takes a lot of guesswork out of speeding up load times.

  15. What a random and painfully basic group if "tips"..

    I expect better from you guys

  16. I agree with Rob, shorter is not better. If I just quickly scan over your second example I dont know what field comes from which table unless I manually cross reference it with the FROM statement. Makes it less readible as far as I'm concerned.

    For me the imporant part of writing readible SQL is making sure field names are lower case and the SQL itself is capitalized. I also make sure each statement gets its own line. Nothing worse than a 500 character long SQL statement that's crammed into one line and is all lower case.

  17. I would suggest that in the case of Email HTML newsletters the best technique is the v-align method.

    This is because display: block is not supported by Outlook 2007 (major headache!).

    Ref: http://www.campaignmonitor.com/css/

  18. @Pete Roome I have found that using display: block on img tags also fixes the v-align issue.

  19. "Image headers in table based HTML Emails"

    Vertical align is one way. I simply use <img style="display: block" src="image.jpg" alt="" /> and it's solved too.

    Email newsletters are a bitch.

  20. "Image headers in table based HTML Emails"

    Vertical align is one way. I simply use <img style="display: block" src="image.jpg" alt="" /> and it's solved too.

    Email newsletters are a bitch.

  21. Care to explain what an “alt tag” is?

  22. I can vouch for "YSlow (developer.yahoo.com/yslow/) req. FireBug"

    I have used this on my website, and it does wonders. It lists 20 details, and shows each of how slow and why, plus how to speed it up (too many images, caching not working properly, too many queries or queries can be slimmed down, etc.).

  23. Greg, but for many people it covers the areas that they will be asked to cover in a single day… thus is the definition of a web designer / developer!

  24. What an odd collection of things!

    Basic SQL syntax, HTML accessibility, a simple Photoshop effect, browser plugins and jQuery? If you've any experience with any of these technologies, 'your' tips should hardly qualify as news.

    At least over on Smashing Magazine, one finds "X Y's of a homogeneous Z", and X >> 6.

    Sorry, weak. Not as good as the usual fare.

  25. I do the same except dropping the begin comment as the id attribute makes it obvious where it begins

  26. One tip that might be of use is multi-purpose stored procedures:

    create procedure procName (
    @param1 int = null,
    @param2 int = null
    )
    AS
    SELECT * FROM Table (NOLOCK)
    WHERE
    (@Param1 IS NULL OR @Param1=Field1)
    AND
    (@Param2 IS NULL OR @Param2=Field2)

    ——-
    BTW thought I would tuck the NOLOCK in there – it's a SQL server helper to avoid locks on table which improves speed.

  27. Nice tips…

    If we use javascript for our web… I think it is better if we are make in one file and then we call him like this <script type="text/javascript" src="jquery.min.js"></script>

  28. Also, it would be great to have a bit more detail (maybe a link to a longer article) on point 3 of the alt attribute issues. It feels a bit dangerous to give that kind of advice since it could easily be misunderstood. In what context would you purposefully choose *not* to use any alt text?

  29. Good tips! Just one thing though: there is no such thing as the "alt tag". alt is an attribute and should therefore be referenced as the "alt attribute".

  30. The SQL might be shorter, but that doesn't make it better.

    I'd go as far as to suggest that the 'better' example is worse. The sql engine doesn't care about the name of variables / tables, so there's no gain in performance, but there is a loss in readability. Optimise for readability first, everything else second.

    Just my 10 pence.

  31. @Adam – very pedantic, but I like the way your mind works! 🙂 Every time someone uses that phrase, I cringe slightly (then again, I cringe when someone says 'tag' instead of 'element' …) I've managed to get some editorial colleagues to use the term 'alt text' instead, which is as good as it's going to get, I think.

  32. A nice simple one I always like to use when developing a website is the following.

    Commenting sections of HTML

    For large sections of a site, such as a main content area – I like to comment them as such.

    <!– Begin Main Body Content –>
    <div id="main-content"></div>
    <!– End Main Body Contents –>

  33. For the billionth time, there is no such thing as an "alt tag"!!

  34. Richard Conyard on June 10, 2009 at 8:49 am said:

    Any reason why the SQL isn't using an inner join? or better still if it is a common linkage use a view.

Leave a Reply

You must be logged in to post a comment.

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more