I Added Keyboard Navigation to my Site

Kind of a fun little exercise. Now I just need to figure out a nice way to hint to people that they can navigate with the keyboard.

Check it out. Start here and hit your right arrow key until you start to see the same things twice.

Based on shortcuts.js
Continue reading “I Added Keyboard Navigation to my Site”

How To Make a Web Site the Modern Way. Part 10: Forms

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:


<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
<fieldset>
<legend>Contact Info:</legend> <p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" tabindex="1" /> </p> <p>
<label for="email">Mail (will not be published)(required)</label>
<input type="email" name="email" id="email" value="" tabindex="2" /> </p> <p>
<label for="url">Website</label>
<input type="url" name="url" id="url" value="" tabindex="3" /> </p>
</fieldset> <p>
<label for="comment">Comments</label>
<textarea name="comment" tabindex="4"></textarea> </p> <div class="button">
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /> </div>
</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Continue reading “How To Make a Web Site the Modern Way. Part 10: Forms”

How To Make a Web Site the Modern Way. Part 9: Tag (and Attribute) Soup

In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.

Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.

Ignore me.

On with the show:

B, Strong, Em, I

From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:

The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.

Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.

Fast forward to 2000. The W3C publishes the Web Content Accessibility Guidelines. In the section on emphasis they state:

Checkpoints in this section:

* 3.3 Use style sheets to control layout and presentation. [Priority 2]

The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)

This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.

And that’s how we got to strong and em.

And now you know.

Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks.
Continue reading “How To Make a Web Site the Modern Way. Part 9: Tag (and Attribute) Soup”

How To Make a Web Site the Modern Way. Part 8: Tables!

Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.

A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.

Yes! We’re winning.

If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.

Anyway, tables.

Tables

Tables are for Tabular Data

Here’s a table full of data.

Continue reading “How To Make a Web Site the Modern Way. Part 8: Tables!”

How To Make a Web Site the Modern Way. Part 6: Best Practices for Common HTML Elements (IMG, A)

We’ll finish up our tour of the body tag with several posts featuring general notes about common content elements. I’ll be taking my time with these as getting this stuff right will go a long way towards getting the most out of your site.

Comfy?

On with it then.

Links <a>

The link is the engine of the web. The concept of Hypertext (the H in HTML) itself is expressed in the power of the link. Google is Google because of the power of links. There is no better place to start.

Basic usage

<a href="http://www.drunkenfist.com/"  
        class="contact" 
        title="my personal site" 
        rel="me">DrunkenFist.com</a>

Write Good Link Text

For body copy you want to write link text that is descriptive of the link destination. generally this means a short phrase (5-10 words, depending on who you ask) that clearly describes the link. For that reason “click here” is generally not the greatest link text. For a live example and more on this topic take a look at link chapter of the the US Government’s Research-Based Web Design & Usability Guidelines. It’s full of really interesting tips on handling links.

For the SEO-minded, the above advice has the added bonus of generally including keywords which flow link juice and context to the targeted page.
Continue reading “How To Make a Web Site the Modern Way. Part 6: Best Practices for Common HTML Elements (IMG, A)”