Nik's Technology Blog

Travels through programming, networks, and computers

BDO Bi-directional Override HTML Tag

The <bdo> HTML tag is used to override the default direction of text. This can be handy when a web page contains paragraphs of other languages such as Chinese.

Attributes for this tag include:

dir - Specifies the direction [ltr or rtl]

lang - Specifies Language Code (RFC 1766)

This is the only tag that will reverse the direction of text so far and is only supported by Internet Explorer 5 upwards.

RFC 1766 Language Codes

ACRONYMS and HTML

There are two different ways to define the meaning of an acronym within an HTML document, the ACRONYM tag and the ABBR tag. In practise they are very similar, although their compatibility varies with browsers.

Examples

<acronym title="Hypertext Markup Language">HTML</acronym>

<abbr title="Extensible Markup Language">XML</abbr>

<ABBR> is only compatible with Netscape 6 upwards (Mozilla) whereas <ACRONYM> is supported by Internet Explorer 4 upwards and Netscape 6 upwards. It's probably a better choice to opt with <ACRONYM> in light of this.

Website Spam Avoidance - Javascript Code

Use the following JavaScript if you want to display an email address on your website, but you don't want to receive spam mail. It will avoid getting picked up by Spammer's email collecting scripts.

<script language="JavaScript" type="text/javascript">

<!--

var LinkText = "click here";

var e1 = "mail";

var e2 = "to:";

var EmailPart1 = "yourname";

var EmailPart2 = "yourdomain";

var EmailPart3 = ".com";

document.write("<a h" + "ref=" + e1 + e2 + EmailPart1 + "@" + EmailPart2 + EmailPart3 + ">" + LinkText + "</a>")

//-->

</script>

Web Design Considerations

  • Are the pages printable on A4/US letter paper?
  • Does the site work on all browsers? (Cross-Browser functionality) (Netscape and Opera as well as Internet Explorer etc)
  • Does the site work on Apple Macs, Unix and PCs etc? (Cross-Platform functionality)
  • Can you see the whole of the site in common screen resolutions (800x600, 1024x768) without scrolling?
  • Have you stuck to common fonts such as Arial, Lucida, Verdana and Georgia? (Some fonts won't be installed on visitors' machines)
  • Can the text on the screen be read comfortably? Try to avoid clashing background images and colours as it will be difficult for the visually impaired to read.
  • Is the navigation intuitive? If you are using images as navigation do they have ALT tags? Try adding text navigation at the bottom of the page; this will help if the visitors' connection is slow as they will still be able to navigate the site.
  • Are the images optimised and quick to download? Have you used GIF and JPEG formats for the right type of images?
  • Have you used web safe colours? (Some screens can only display 256 colours) Web safe colours

HTML Forms - Usability

Making HTML forms easier for the user is no easy task.

Make good use of Radio buttons, Check boxes and drop-down menus within the form instead of text boxes where possible to keep the users typing down to a minimum.

Use the "Tabindex" HTML form attribute to set the tabbing order if your HTML forms are large and complex.

Make clear which elements of a form are compulsory with and * or similar, stating what the asterix is for at the top. If you think any of the fields might be filled in wrongly, then think about adding help pages (pop-ups) for the form.

If your form is asking for personal data, then link to your site's privacy policy on the page. Information such as Credit Card details should only be submitted over a secure SSL (Secure Sockets Layer) connection, you will need to set this up if you don't already have one.

If you already have data on the user then pre-populate the fields and ask for confirmation where necessary, this will save the user re-typing them.

Finally you will be able to judge your forms usability by how many badly filled forms you receive.

HTML tabindex

HTML Tabindex

Tabindex is very useful when designing large forms as it dictates what element the tab key jumps to next. Only works in IE. Tabindex of -1 is ignored. Tabindex's of 0 come after the highest tabindex.

NOKIA WAP form GET and POST size restriction

The amount of data that you can send to the server using WML forms and Nokia WAP enabled phones such as Nokia 3330 and Nokia 7110 is limited. The URL and querystring lengths are also affected since they affect the size of the HTTP header. To fix this problem you have to change the CONNECTION TYPE property to CONTINOUS in the settings menu of the mobile.

Maximum size for a WML deck

The maximum size of a WML page varies between different handsets. When coding WML pages Microsoft recommend that they are less than 1200 characters to be compatible with the majority of cellphones.