Tag Archives | HTML

Static versus dynamic web sites

I don’t think there are any static sites on the internet. They are either growing and changing, or rotting away. Decay is a dynamic process, too. Sites need to be refreshed. I have a eleven-year-old blog (next month), and have found most of the links in the first couple of years have rotted away, and need attention. I need to update the underlying OS, web server, runtime language and site application. Vendors and the community provide updates and security patches.

If I visit a site and it’s in HTML 4.01 with marquees and animated GIFs of envelopes flying into mailboxes, I make some (pretty severe) judgments about the proprietors. If the owners hard-coded their names, addresses and contact info into all the pages, they will always, always miss one of them when they update.

So, while your content, organization and basic layout may not change THAT OFTEN, they’ll need changing, so why not use a dynamic engine that will make it easy?

0

Visibone, a source of great reference guides and online utilities

Visibone's Everything Book
One of my favorite tools for the past couple of years has been a web developer’s reference guide from Visibone. The book has rarely left my desk, within arm’s reach, to help out when I just can’t remember all the options for an HTML tag or a CSS style. While there are some great online references, having it all in a couple sheets of paper makes it easy to find what I’m looking for (especially if I couldn’t remember if it was text-something or font-mumble) and the reference has also let me browse around the dusty corners and learn something I didn’t know.

Recently, I did some web development using XHTML 1.1 and CSS 2.1 and realized my 2004 version of the guide was getting out of date. I was pleased to see many of the pages had been updated to a 2009 version. After reviewing the many options, I chose to go all in and bought the Everything Book, a step up from my earlier version. This one includes cheatsheets for PHP, MySQL, JavaScript, DOM, HTML, CSS, HTML special characters, web colors and a great index. The reference not only includes broad coverage of each topic but many side notes and compatibility guides (for CSS, the IE-Netscape-Opera-FireFox-Safari compatibility color coding is tremendously useful!)

There are a number of bonus references available on the Visibone site at no cost. Check out the color lab, the color swatches for many of the common graphics programs, the online color codes reference, and excerpts from all of the various reference materials. In addition to reference book, Visibone offers posters, charts and mouse pads. The web site is worth a visit; it’s charmingly quirky, retro, opinionated and clearly individualistic.

0

Semantic markup and styling of data entry forms, IE falls short

Somehow, in my 10 years of working with HTML, I had missed the fieldset and legend tags. I’ve just started in on a web site redesign where they can be used to great effect and nice semantic markup. The fieldset tag is intended to be used as a container for grouping related input items in a form. By default, the fieldset has a transparent background and a thin black outline around the fields. The fieldset can contain a legend tag that appears by default in the upper left corner of the black outline as a title for the grouping. Both elements can be be modified with CSS styles to match and complement the rest of the page design. Here’s the basic HTML snippet:

<form...>
 <fieldset><legend>Ship To Address</legend>
 <br clear="all" />

 <label for="Building_or_Hotel">Name of Building/Hotel:</label>
 <input type="text" id="Building_or_Hotel" size="25" maxlength="50" />
 <br clear="all" />
...
</fieldset>

And the applicable CSS to make the form look pretty includes:

/* Styles for legends, the title atop the fieldset */
.dataform legend {
 background-color:rgb(137,111,43);
 color:white;
 font-weight:bold;
 margin-left: 0.5em;
 padding:0 1em 0 1em;
 }
/* Fieldset groups a set of inputs in a visual container */
.dataform fieldset {
 border-color:rgb(137,111,43);
 border-style:solid;
 border-width:1px ;
 background-color: rgb(93%,89%,78%);
 }

Results in a data entry form that looks like this:

HTML form layout with fieldset and legend tags

Using CSS to add visual effects to the elements can yield some pretty sharp results while still having the speed and minimal bandwith of lightweight HTML and CSS text files. In addition, using the semantic fieldset and legend elements provides additional information about the form fields and their relationships in a machine-readable format, rather than just splattering a bunch of colored div boxes and styled text on the form. This is a great aid to tools used by the vision-impaired to provide more context to their users, and to search engines trying to derive the context of your forms.

Compatibility between different browsers is not too bad, though things could improve a bit. FireFox 3.5x, Chromium 4.0.285.0 (on Fedora, thanks, Spot!) and Safari 4.x appear dead-on the same (the screenshot above is FireFox 3.5.5), but there is an outlier and no one should be surprised to discover it’s Internet Explorer. Even in version 8, perhaps the most compatible browser Microsoft has shipped since the now-legendary IE5.5/Mac, things are just different. For some reason, the IE8 developers decided that the background color of the frameset should extend out over the border, to the edge of the legend, resulting in this less attractive appearance instead:

IE8 fieldset background colors overflow the border at the top.

For IE7, the background color doesn’t appear at all, which might actually be better than to have it appear incorrectly. (Update: no, my bad, it just doesn’t like rgb values expressed as percentages.) So the appearance definitely won’t be as sharp for your IE users as for any other browser user. (Yet another reason to encourage your clients, friends, associates, neighbors and strangers on the street to avoid Internet Explorer. We can eliminate it in our lifetimes.) (UPDATE: there are, of course, work-arounds. Here are a few suggestions that might work for you from Sitepoint and CommunityMX and Matt Heerema.)

So, the next time you’re called upon to draw up an HTML data entry form, keep in mind that you can group your elements with fieldsets and use legends to add more contextual information to your design.

0

LESS, HAML, HTML Structure

A quick follow-up on the weekend posting about the Ruby group: there was mention of another package, LESS, that generates CSS as well. This might be worth checking out as well. I appreciate the feature that the CSS is static on the server and only generated when the plugin notes that the source file (with .less extension, of course) has changed. This speeds up serving the file, and speeds the responsiveness on the client, since nothing needs to be parsed, interpreted and applied.

In “It’s the Headings, Stupid!” Jon Udell points out that pretty visually-structured HTML still shouldn’t lose the structural power built into HTML: seven levels of headings, paragraphs, ordered and unordered list, definition lists, anchor tags, captions, titles and alt attributes. A sober reminder that not all the readers of our web sites are “ooh!” and “aah!” over our choice of colors or silly javascript animations, but are searching for content!

In a follow-up on Twitter, Pat Allen points to a SlideShare presentation with excellent audio of the Melbourne Ruby User Group and a presentation by Ben Schwarz “Why HAML Sucks or Why You Should Think Before Choosing HAML for Your Next Project” The long-winded title, Ben explains, is from an initially controversial title that got the conversation going, but was a bit too extreme. He makes some very good points in the presentation. I like the idea of audio synched with the slideshow; that works well. Obviously, hards-on presentations would have other challenges, but for a slide-heavy presentation, this works well.

0

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.