CSS Naked Day 2008

What happened to the design?

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

Visual design is incredibly important. Typography, colour, and layout (and the myriad details that make up those enormous topics) consciously or unconsciously conveys essential information to the people we’re trying to communicate with. Top-quality, create graphic design is absolutely essential to the web.

However.

A properly-crafted site should still function and make sense, even without any visual design whatsoever (well, mostly). Why? Because with the increasing freedom available in how people access the internet, your visitor could very well be blind. Or using an older PDA or cell phone that doesn’t support all your fancy design. Or in a third-world country using old computers and old phone lines to access your information. They may very well never see your fancy images, rollovers, or DHTML effects.

So creating a website that makes sense without that design isn’t just the Right Thing To Doâ„¢; it’s imminently practical as well.


Annual CSS Naked Day
is intended to highlight this principle. Enjoy!

Finding a Strict Online WYSIWYG HTML Editor

At work, we’re looking at buying a new Content Management System to run our web site. Right now we’re using what I built by hand, but we could really use a system built by more than one or two people.

But one of the scariest issues for me is ensuring that only pure, spotless, valid, accessible XHTML 1.0 Strict content goes into my database. And generally speaking, web-based WYSIWYG HTML editors are… less than exemplary.

I’ve used TinyMCE, FCKEditor, and XStandard. Currently XStandard is by far the most successful at stripping inappropriate code. It is well worth the modest license fee — and the free version is very nearly as good as the paid version.
Continue reading Finding a Strict Online WYSIWYG HTML Editor

How to Make HTML Tables

or: The Art of HTML Tables

HTML Tables are hard to do. So hard, in fact, that visual, WYSIWYG tools do a terrible job of creating them.

But with a little help, you can create tables that look great and are also accessible to everyone.

The Basics

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

It’ll look a little something like this:



Caption!
First Cell!

This is the simplest possible table structure. It’s a table, with one row, containing one cell.

If this is the table you want, don’t use a table! There’s no point to it. Just leave the whole table out of there; it’s useless, empty code. You would only use a table if you have at least two columns of data to add. To add another column, add another cell in the row.

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
<td><!– the second table cell begins –>
</td><!– the second table cell ends –>

</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

This gives us a second column:



Caption!
First Cell! Second Cell!

Headings

Headings are very important. They identify what each column or row signifies. Signify a heading cell by labelling it <th> (table heading). Often (but not always) table headings will appear in bold type.

Often, the headings are at the top of each column. E.g.:

{code type=html}<table summary="Pizzas and their toppings"><!– the table begins –>
<caption>Pizzas and their toppings</caption>
<tr><!– the first table row begins –>
<th>Pizza<!– the first table cell begins –>
</th><!– the first table cell ends –>
<th>Toppings<!– the second table cell begins –>
</th><!– the second table cell ends –>

</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<td>Hawaiian<!– the third table cell begins –>
</td><!– the third table cell ends –>
<td>Ham and Pineapple<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<td>Simple Bliss<!– the fifth table cell begins –>
</td><!– the fifth table cell ends –>
<td>Spinach and Feta<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Pizzas and their toppings
Pizza Toppings
Hawaiian Ham and Pineapple
Simple Bliss Spinach and Feta

Sometimes the headings are down the left column.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first table header begins –>
</th><!– the first table header ends –>

<td>Amazing event<!– the second table cell begins –>
</td><!– the second table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the third table header begins –>
</th><!– the third table header ends –>

<td>Amazing event<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing event<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}

You’ll notice that the headings are the first cell in each row this time.





Events in 2009
May Amazing event
June Amazing event
July Amazing event

Sometimes the headings are along both the top row and the left side.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first top table header begins –>
</th><!– the first top table header ends –>

<th>Amazing event<!– the second top table header begins –>
</th><!– the second top table header ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the second left table header begins –>
</th><!– the second left table header ends –>

<td>Amazing thing!<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing thing!<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Events in 2009
May Amazing event
June Amazing thing!
July Amazing thing!

Important components

The Summary is there to provide information for visually impaired users. It will read out to them exactly what the table is for. So, for example, you might say

{code type=html}<table summary="List of Courses in the Nursing Program">{/code}

or

{code type=html}<table summary="Tuition and Fees by Program">{/code}

Caption is used for a similar purpose, but for everyone. You can repeat the summary or add something different.

{code type=html}<caption>List of Courses in the Nursing Program</caption>{/code}