Category Archives: Web Design

Web Design

Semantic Fieldset Structure for General Use

Recently figured out a great way to build a form with good semantics and just enough hooks to style it just about any way I like. Just jotting it down here for future reference. The ordered list provides structure and order without using tabindex. The nested fieldsets continue the semantics and allow for alternate formatting of the radio and checkbox inputs which are always a pain.

<fieldset>
    <legend></legend>
    <ol>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                        <input type="radio" checked="checked" />
                        <label></label>
                    </li>
                    <li>
                        <input type="radio" />
                        <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>    
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                    <input type="checkbox" checked="checked" />
                    <label></label>
                    </li>
                    <li>
                    <input type="checkbox" />
                    <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>
    </ol>
</fieldset>

Project: My WordPress Site | Part 1

If you’re reading this as of the posting date, you’ve been greeted by the default WordPress theme and possibly a handful of posts. After plenty of procrastination I’ve decided it’s finally time to get this project off the ground. Over the next few weeks I’ll be planning, designing, and coding a new skin for this site. The first thing to do is decide what the site needs to achieve and stick to the plan. Without some discipline, any project can get out of control quickly while slowing progress and sapping motivation. I usually begin every project plan with one sentence that boils the desired result down to as few words as possible. With a clear-cut goal, the rest gets much easier. This isn’t to say a project can’t achieve more than one thing, but there should be one over-arching idea and anything else thrown in should be in support of that one idea.

Q: So what’s the point of this website?

A: This site will assist in growing my business.

That’s it, 8 words. It might seem simple but that’s the point. From here on out anything I add to the plan needs to help “grow my business.”

So what does the website need to do that I think will achieve that goal? I’ll just toss out a few initial ideas.

  • Be attractive and professional looking
  • Clearly describe the work I do and illustrate solutions I provide with examples
  • Give me a forum to jot down important learning for later reference and add credibility
  • Be written in well formed semantic code with graceful degradation across older browsers which should add further credibility for anyone looking “under the hood”

Ok, that’s enough to get started. In the next post on this project I’ll figure out features and content the site needs to meet the criteria laid out here.

Recommended Reading: HTML for Web Designers

So I just finished HTML 5 for Web Designers by Jeremy Keith. It’s the first in the A Book Apart series of books from the web design and standards gurus over at A List Apart. The book is a quick read, and is accessible even for those new to coding HTML.

The gist of it is that in many ways HTML 5 is here now. So why wait to start using it in your projects, right? Well, rolling with HTML 5 is not quite as simple as we’d like yet. Lucky for us the the book is full of practical examples and strategies for keeping your code compatible with various browsers while building sites that are ready for the future. Highly recommended for anyone looking for a quick start on HTML 5. Get it here, $30.00.