Delve into Design

Whilst searching the Internet I came across this article written by Jason Arber from Pixelsurgeon, which I thought was very useful and a good checklist for web designers to use.

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Wireframes, sketching, mockups etc.

2. Do it by hand

Learn to code by hand.

3. Stylesheets

The importance and flexibility of cascading style sheets (CSS).

4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images.

5. Commenting

Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML.

6. Use simple PHP to build sites

It’s worth learning PHP to build websites.

7. Set fonts using ems

As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution? The answer is to specify type in ems.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts.

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason.

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support.

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page.

13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers.

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

15. Favicons

Favicons are the little 16×16 pixel icons that appear in your favourites lists and the title bars of web sites.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work.

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.

18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s header.

19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. See how others have done things and apply their methods to your own work.