Archive for the 'Front-end code' Category

WYSIWYG editors spec – Importing CSS

Interface example of a WYSIWYG editor. The second building block of a modern WYSIWYG editor is how the styles are defined and added. Styles should be applied by class to standard HTML, but what kind of import methods would be best, and how would they surface in the interface?

WYSIWYG editor spec – allowed HTML

Interface example of a WYSIWYG editor. Starting from the building blocks, what should an editor allow? Most of the browser based editors allow people to edit the source HTML. To make sure the code stays valid, the editor will have to filter what gets saved, so what HTML should it allow?

WYSIWYG editor spec – Overview

Interface example of a WYSIWYG editor. This is the overview that outlines the accessibility guidelines that affect a “What You See Is What You Get” editor (WYSIWYG) editor, and do a top-line evaluation of an editor so that you know what to look for. Setting the scene for a set of posts specifying accessible WYSIWYG editors.

Accessible WYSIWYG editors part 1 – The problem

Interface example of a JavaScript based editor. There is an elephant in the corner type of problem in the accessibilty world, that of WYSIWYG editors. In the first of a three part series, I outline this problem. The later posts will define what a solution would be, and see if it exists yet.

Good use of “Web 2.0″ technologies

Things on the web move so fast these days that there is a backlash against what people perceive as “Web 2.0″ sites before most of the internet population even know what they are. (Even taking the narrow view of AJAX and tagging).

So it’s good to see a use that…

Why CSS is important for accessibility

Eric Meyer presenting the keynote at @media 2006. One of the highlights of @media for me was Eric Meyer’s keynote on the past ten years of CSS. I think there was one thing that contributed to CSS’s development that Eric didn’t cover, which isn’t so much an omission in terms of the keynote, but really helps explain why it took off in the UK.

CSS tables verses layout tables

Screen shot of 4 boxes, almost symmetrical but with a gap due to a few extra words in one box. It’s been something that designers have wanted better control of ever since CSS started to be considered the best way to layout HTML pages: table style grids. A quick review of the options shows there could be a few drawbacks of the method.

Invalid HTML interfering with accessibility

Every now and then you come across an example of code that slaps you around the face and demonstrates that you really do have to make sure you use valid code.

Accessible layouts

Screen shot at 800 wide and 1600 wide, both filling the screen width, effectively zooming in. The type of layout you choose for a web site is often considered a tricky decision, it seems you can never make a popular layout decision. However, there is a process to go through to make sure it’s as accessible as possible.

Conditional comments in CSS

With the advent of Internet Explorer 7, there is now little choice but to create separate style sheets for different browsers, at least for a moderately complex visual design or layout. This post explores the need for change, and where this approach could go.