In our third style guide, we will look at some HTML formatting issues that commonly arise, and how to deal with them in a consistent and user-friendly fashion.
Links
Try to be consistent about using "open in a new window" - for example, only use it on links that leave your site. Inconsistency with this feature creates a confusing navigational experience for your visitors.
Links can be made to look like buttons, but the extra padding and spacing around buttons means they don't work well embedded in paragraphs or other blocks of text. Only use this effect on short links that are on their own line, like this:
Link anchors (the text that you actually click on) should be descriptive of the link destination. Do this:
not this:
click here to download the brochure
It is a good idea to avoid "click here" language in general.
Images
Avoid using high-resolution images, which are very slow to download. Upload images to your photo albums, and choose the recommended resizing options.
Pay attention to the aspect ratio and orientation of the image and its intended placement. For example, portrait (vertically-oriented) images don't work well in horizontal carousels, and elongated images don't work well as thumbnails, especially if the latter are usually square on your site.
Tables and Floats
Use tables for presenting tabular data, not for laying things out side-by-side. Use caution with tables, because the more columns you add, the less well the table will work on small screens like mobile devices.
"Floats" are things like images and sidebars that are moved to the left or right so that they are displayed side-by-side with other content. When inserting images, you have an option to align the image left or right, which accomplishes this effect. But beware of over-using this layout effect. It only works well on larger screens like desktop computers that have lots of horizontal display room. On smaller mobile screens, there is no room to move things to one side, and the results could be unpredictable or sloppy. Getting floats to work well on all types of display can be a complicated problem that may require a graphic designer.
Importing Text
When pasting formatted text into your website, you might end up copying a bunch of styles that are not compatible with your own design. Use the "clear formatting" tool to wipe these foreign styles clean so that your own design can assert itself.
Email Addresses
Do not insert email addresses directly into a public page, as it makes it easy for spammers to get new addresses to send to. If you want to make a MailTo hyperlink (that opens a compose email window when you click it), use the MailTo applet, which will disguise the email address.
If you just want to post an email address somewhere and don't want it to be clickable, a simple trick is to write it out without the @ character, for example: your-name AT gmail.com. The reader must replace the "AT" with a @ character, which is a mild inconvenience. If you don't want to burden your readers with that inconvenience, use the MailTo applet instead.
If you are putting MailTo links onto private (eg. member-only) pages, it is safer to just make a regular MailTo link, because spambots cannot read those pages.