accessibility
Feb 14, 2011
When ad words don't add up to much
Pretty slogans and brochure-speak are not your best friends when trying to direct search engine traffic to your website.
No, not the familiar Google product, but the 'ad words' found in brochures, posters, advertisements, and yes, websites: the catchy phrases, slogans and mission statements by which marketeers hope you will remember their brand over all the others.
They have an important role to play in your overall marketing strategy, but often they are mis-used in your website, taking up space in html tags that could be better optimised to drive search engine traffic.
Take these examples:
- "20 years of delivery" (in a hypertext link and header tag)
- "Brings people and information together to reduce decision times" (in the description text that appears on a search engine listing)
- "We are committed to the well being of all our customers, partners, employees and the general public." (the first sentence that appears on the home page)
They exude trustworthiness, permanance, and all manner of good things. In fact, there is nothing wrong with these phrases, except - try to guess what kind of product or service is being offered.
That's right. This might be the kind of thing that you want people to think of when thinking about your business, but they are not words or phrases that people use to search for a product or service that they want. All of the above examples are taking up prime optimisation opportunities, and throwing them away.
So, by all means, use 'ad words', but put them where they won't do any harm. Right up front, make sure you state who you are and what you offer, and state it more than once. Use those header tags, the hyperlink texts, and the description fields to their best advantage.
The websites? An oil and gas services company, a consumer electronics company, and a plumber. All of them are pretty good websites too, but wasted opportunities can creep in anywhere. Take a good look at your own site and see.
If you would like to improve traffic and Return on Investment (ROI) in your website, contact Openia's Usability Team for an initial consultation.
Jun 02, 2009
Basic Resizeable Button
You know how it goes. The client wants a totally slick designer webpage, and as ever that comes with the obligatory microscopic font and graphical everything. Sadly such designs fly right in the face of Accessibility requirements, so how do you marry the two?
The basic answer to this is Resizeability. All browsers from the humble IE6 onwards allow the visitor to resize the font, and recent browsers also (attempt to) resize the graphics as well. IE7 is rubbish at this and Firefox 3 is totally superb, as per usual.
However, HTML has never really been very good at coordinating the positioning of resizeable text and (potentially) unresizeble graphics. One place that this crops up over and over again are form buttons. The design has rounded ends and a nice gradient from top to bottom, so how do you make this button resize itself to fit the text?
![]()
Answer: The following is a simple technique that works well. The trick is to avoid being overly specific about the height of the button, i.e. let the graphics fade away to transparency at the bottom, and align everything by their top edges. The above button gets cut into 3 pieces:
![]()
of which the middle bit will be a repeating background, thereby stretching to any length. Next the HTML:
<span class="roundblackleft" ></span><a class="roundblack" tal:attributes="href string:${here/portal_url}/get-to-know-us" >Get to know us</a><span class="roundblackright" ></span>
Here we have used two empty span elements to hold the left and right ends, and the middle element is just the anchor itself (note that this means that you cannot click on the very ends of the button, but hey).
Now finally the CSS:
a.roundblack,a.roundblack:link,
a.roundblack:visited {
background: 0 0 repeat-x url(roundblack-bg-10.png);
vertical-align: top;
color: white;
text-decoration: none;
}
a.roundblack:hover {
color: green;
}
.roundblackleft {
display: inline-block;
background: 0 0 no-repeat url(roundblack-left-10.png);
width: 10px;
height: 22px;
}
.roundblackright {
display: inline-block;
background: 0 0 no-repeat url(roundblack-right-10.png);
width: 10px;
height: 22px;
}
The important things to note here are:
- display: inline-block. This allows us to specify a width and height for the span tags, but ensures they still appear inline. Not all ancient browsers support inline-block, but IE6 does.
- vertical-align: top. This is the crucial directive which makes everything line up. Because the anchor is being displayed inline, its height is unpredictable and uncontrollable. Therefore we align it by the top edge, and allow it to become any height it likes.
- If you still have problems with vertical alignment, try applying line-height: normal to the anchor tag. A competing directive can be inherited from CSS elsewhere on the site (especially Plone sites).
This technique only works if the graphics don't have a defined bottom. If they do you can re-do everything aligning with the middle, but this only works with bigger buttons.



