Web Do's & Don'ts » Intermediate

Don’t use empty image src

Siniša — Mon, 30 Aug 2010 18:18:20 +0000

An HTML image, either via tag or JavaScript Image object, that has its src set to an empty string can cause traffic spikes or user state corruption.

Ensure quick loading times

Bojan — Wed, 25 Aug 2010 09:28:26 +0000

Even though today’s internet connection speeds are great, ensuring quick loading times is as important as ever. Optimize your pages and don’t make your users wait for the website to load.

Compose to a vertical rhythm

Bojan — Mon, 23 Aug 2010 07:51:47 +0000

Composing to a vertical rhythm using font size, line height and margin or padding and take your web typography to a new level. Vertical rhythm will help your reader down the page and increase readability.

Use the text-transform property to specify the case of letters

Bojan — Thu, 12 Aug 2010 09:58:46 +0000

As we know, writing in all-caps is a no-no. For all-caps text, you should use the text-transform property (unless you are actually SHOUTING), and the same property shod be applied if you want to use lowercase text. This means that in the content layer, you must use proper structure and semantics, and leave the styling for the presentation layer.

Use inline validation in web forms

Bojan — Thu, 12 Aug 2010 09:35:26 +0000

Use inline validation in forms to provide real-time feedback and enhance the usability. Not only will it make the web forms easier to use, but it will decrease the completion times and errors made and increase the success rate.

Don’t put non-ascii characters in URLs

Siniša — Thu, 22 Jul 2010 17:30:11 +0000

One thing that is rather common, especially on websites whose content is not in English, is URLs that contain unencoded characters such as space, å, ä, or ö. While this works most of the time it can cause problems.

Specify unique values for the accesskey attribute

Bojan — Wed, 16 Jun 2010 08:05:01 +0000

If you use accesskeys, make sure the value of the accesskey attribute is unique. If two or more elements share the same accesskey value, browsers will not interpret it consistently.

Use CSS for generating purely presentational content

Siniša — Wed, 09 Jun 2010 11:42:09 +0000

The content property was introduced in CSS 2.1 to add generated content to the :before and :after pseudo-elements. Given that IE 8 also now supports content, we really are getting to the point where can use this CSS feature in our production work. Just be sure to use it only in appropriate circumstances, and be mindful of the accessibility implications that generated content still has.

Remove the outline from links on :active only

Bojan — Mon, 17 May 2010 09:32:52 +0000

Web developers sometimes hide the outline of image replaced links, but then keyboard users have no way of seeing them when they are tabbing through the page. The trick is simple-remove the outline from links on :active only. By doing this, keyboard users still get the default outline when they tab to a link and activate the :focus state.

Specify HTML document’s language

Bojan — Mon, 19 Apr 2010 10:21:22 +0000

Use the language attribute(s) on the html tag to indicate the language of a HTML document, unless the content is aimed at speakers of more than one language.