Jun 11

Here’s some CSS buttons.

These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Continue reading »

May 12

Here’s some tags. They stretch to fit the text and change state on hover:

Here’s the code and image:

Continue reading »

Jan 28

swfobject is a great tool for serving flash in a standards-based, accessible way.

Version 2.1 is available at google code – here’s the link: code.google.com/p/swfobject/

Main Advantages:

  • It’s more optimized and flexible than any other Flash Player embed method around.
  • It uses unobtrusive JavaScript.
  • It offers a standards-based, accessible way to serve flash.
  • It allows you to avoid click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

There are two publishing methods: static publishing method & dynamic publishing method.
Continue reading »

Jan 23

spam I’ve created a presentation about HTML emails.

Contents:

  • Design tips
  • Photoshop/Image software tips
  • Coding tips
  • coding examples
  • Structure
  • Styling for a variety of email clients
  • Rendering bug fixing
  • Email delivery software
  • Testing
  • Examples of newsletters: Evans, Miss Selfridge, BHS, House of Fraiser, ASOS, M&S

Here’s a download link: HTML Email development

Mar 26

HTML Markup:

  • XHTML Strict 1.0 W3C valid markup.
  • Semantically correct markup – e.g. use <ul> unordered lists for any list of items.
  • Common identifiers should be used based on potential HTML classes and hCard microformat.

Cross Browser Valid:

  • Identical (and fully functional) user experience across browsers. (note: browser differences for font anti-aliasing are expected) – Internet Explorer 6, 7 & 8 + Safari 2 & 3 + Firefox 2 & 3 + Google Chrome + Opera 9 for Windows XP | Firefox 2 & 3 + Safari 2 & 3 for Mac OSX.

CSS Styling:

  • CSS styles must be completely unobtrusive with no inline styles.
  • Elements should not be positioned absolutely unless necessary – All main element blocks should normally be positioned relatively so if new content is added the existing elements would automatically reposition in the flow. Also wherever font-size is increased the layout integrity remains.

Continue reading »

Mar 26

Image Toolbar

If you add the following meta tag:
<meta http-equiv="imagetoolbar" content="no">
Then you won't see the following for IE image hover:
IE image toolbar effect

Skype Toolbar

If you add the following meta tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Then ONLY phone numbers within the following tags will be highlighted:
<!-- sphoneid telnr="+15551234456" fileas="John Smith" -->(555) 1234 456<!-- sphoneid -->
IE image toolbar effect

Useful meta tag link: More information on meta tags

Feb 15

International Symbol of Access according to Wikipedia

Wikipedia will tell you that the international symbol for accessibility is the wheelchair symbol. The International Commission on Technology and Accessibility have designated (and copyrighted) this as the International Symbol of Access (ISA).

The symbol is clear, and it denotes wheelchair access. An alternative to stairs or other obstacles which obstruct the access to wheelchairs will not be found where you see this symbol.

Here are a few symbols that could be used as an alternative to a wheelchair:

Accessibility Icons - Embossed Vetruvian Man on Internet Navigator globe; Vetruvian man vector in blue and white; Internet navigator globe with keyhole, Apple Universal access icon with Vetruvian Man style twin limbs.

Accessibility Icons - Keyboard access icon and symbol in blue and white - keyhole on keyboard key; Audio Description for flash icon; Closed caption for movies.

Continue reading »

Jan 15
wordpress
Jan 15

Mobile Browsers

Here’s a few tips to bear in mind now we have a new range of browsers.

Accessibility needs are becoming more important as a solution to giving cross-browser accessibility to everyone. It’s not just people who have accessibility needs, now it’s devices, or ‘thin clients’ which are having accessibility issues.

There’s some new rules for ensuring your web site works with browser zoom or in the new mobile browsers.

Phone browsers

There’s two new browsers in town: Apple IPhone and Opera Mini (testing on version 3.1.2). They shrink full websites down to a small screen size.

1. Css media=”handheld” is ignored by the iPhone and Opera mini browsers. They think they’re real browsers. Any style-sheet with media=”screen” will be rendered by these phone browsers.

2. Zoom isn’t a raster zoom. The text font size is reduced independently to the spacial elements. It should be reduced by exactly the same amount but it doesn’t always work perfectly.

Continue reading »

Dec 15

Good web dev reference books: