WAI-ARIA roles are intended to help create usable, accessible and logical layouts for people with visual or leaning difficulties. So how do we add this to our website? Let’s dive right in.

In order to help assistive technologies recognize the different sections in our web page (navigation, header, footer, etc.) it is imperative to label various sections of the site with navigation landmarks. These landmarks are created by adding the role attribute in our HTML tags. For example, defining the role of navigation in our nav tag (<nav role=”navigation”>). Different roles allow assistive technologies to navigate through various sections. Some screen readers seem to be able to read the new HTML5 attributes while others cannot. Unfortunately the use of these technologies to read and navigate through websites is pretty crude as compared to the experience of  a sighted user. With a bit of searching, I managed to find a website that shows the landmark capabilities of several screen readers.

There are quite a few different WAI-ARIA roles but, according to my research, there are a few standard regional landmarks. Focus will be on a few of the more popular roles (navigation, banner, main, contentinfo,  region, form, button ). Fortunately adding roles in general is pretty intuitive. For example, the navigation role is used in our nav tag.

<nav role="navigation">
    <ul>
        <li><a href="#obstacles">Obstacles</a></li>
        <li><a href="#prizes">Prizes</a></li>
        <li><a href="#contestant">Be A Contestant</a></li>
        <li><a href="#top">Back To Top</a></li>
    </ul>
</nav>

The banner role is used for a region that contains the prime heading or internal title of a page. In the Triple Dare website the banner role will be added to the header HTML tag.

<header name="top" id="top" role="banner">
    <hgroup>
        <h1>Triple Dare</h1>
        <h2>The Web’s Messiest Challenge!</h2>
        <h3>Airing Thursdays on the Knucklelodeon Network™</h3>
    </hgroup>
</header>

The next area to tackle is the main content of the website (Obstacles, Prizes and Be a Contestant). The main role is used to encapsulate our main content. The main role should only used once on your page. In the case of the Triple Dare site a <div> container will encapsulate the Obstacles, Prizes and Be a Contestant sections with the role of main.

The region role is added to each of the three sections (Obstacles, Prizes and Be a Contestant). The region role is used with our sections  to represent a generic section of a document (similar to the section html5 tag). From my readings and research, I’ve come to the understanding that when a region is defined the attribute aria-labelledby is added to allow screen readers to identify the section heading. The aria-labelledby value looks for the id attribute (the h1 tag on the Triple Dare website) to label the region with a header. Some assistive devices use the title attribute to identify the heading so we’ll add that in there as well. The aria-labelled attribute searches inside it’s container for an id to create a header.  The name and id attributes (which were previously in the section tag, have been moved to the h1 tag to allow screen readers to identify it as the section header.

<div role="main">
    <section role="region" title="obstacles" aria-labelledby="obstacles">
        <h1 name="obstacles" id="obstacles">Obstacles</h1>
            <ul>
                <li>
                    <a href="img/lg-the-tank.png">
                        <img src="img/th-the-tank.png" alt="Illustration of a pink rectangular pool with white icing and sprinkles">
                        <p>The Tank</p>
                        <p>Frosting with sprinkles all over</p>
                    </a>
                </li>
                ...

Another small alteration to the web page involves images. After using VoiceOver on my Mac to read the Triple Dare web page I noticed that my alternative text wasn’t very descriptive (more on using VoiceOver later in this article). My alt text now describes the image in more detail so non sighted uses can get a better idea of the images.

Roles were also added to the form in the Be a Contestant section.

<pre><section role="region" title="contestant" aria-labelledby="contestant">
    <h1 name="contestant" id="contestant">Be A Contestant</h1>
    <form role="form">
        <label for="name">Your Name</label>
        <input name="name" placeholder="Your Name"/>
        <label for="emailaddress">Email address</label>
        <input type="email" name="emailaddress" placeholder="Email Address"/>
        <label for="team">Team Name</label>
        <input name="team" placeholder="Team Name"/>
        <label for="team-color">Team Color</label>
        <select title"Team Color">
            <option value="">Team Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="ultra-violet">Ultra-violet</option>
        </select>
        <label for="gender">Gender</label>
        <select>
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="hermaphrodite">Both</option>
            <option value="intersex">Neither</option>
        </select>
        <label for="photo">Profile Photo URL</label>
        <input type="url" name="photo" placeholder="Profile Photo URL"/>
        <input type="submit" value="Submit entry!">
    </form>

And finally the contentinfo role is applied to the footer of the page. Contentinfo is used to define a large perceivable region that contains information about the parent document, things like copyright and other typical footer information.

And here’s the obligatory “what we have so far”

Testing your roles on the Mac

On a Mac computer or any other Apple, device VoiceOver makes it easier for the blind and those with low-vision to use a computer.  It also allows us to preview what people using such technoloties will hear when navigating the Triple Dare webpage. The software isn’t perfect by any means but it’s included in the OS, doesn’t cost anything, and gives us a great indicator as to what people with visual difficulties face when navigating a website.

Setting up VoiceOver

In the Finder, access the System Preferences. In the System Preferences, choose Universal Access. Ensure that the Seeing tab is selected and click “Open VoiceOver Utility”. When that window opens, select Web from the side menu. Under “When navigating web content use:” choose Group navigation. Ensure that “Navigate Images” and “Only navigate images with a descripoint” are checked. You can now close the VoiceOver utility window and the Universal Access info.

Using VoiceOver in Safari

On your Mac, launch Safari and load what we have so far in the browser. Enable VoiceOver by hitting Command + F5. The computer should start speaking “VoiceOver On. Safari. Window” It will then read the title of the site and  then say “HTML Content has Focus”. You should also see a thin black border around the window portion of the browser.

We can now navigate through our website. Press and hold Control – Option – Shift and the Down Arrow (not Command). This will drill down to the navigation section of the website and VoiceOver will say “Start Interacting with HTML content”. To navigate through the sections use  Control – Option + either side arrow (left or Right). You can then dive deeper into the HTML with Control – Option – Shift and the Down Arrow. Sadly, VoiceOver doesn’t let us properly navigate our 3 regions (Obstacles, Prizes and Be a Contestant) but you can navigate through every HTML tag in those sections one at a time. Moving up a level in the HTML is as easy as hitting Control – Option – Shift and the Up Arrow.

Once you’re done listening to the site, turn off VoiceOver by hitting Command – F5.

Here’s a quick cheat sheet.

Command – F5 = Turn VoiceOver on and off
Control – Option – Shift + Down Arrow = Start interacting (dig down into selected section)
Control – Option – Shift + Up Arrow = Start interacting (dig up out of selected section)
Control – Option + Left or Right Arrow = Navigate between sections or words (depending on what you are interacting with)
Control – Option + A = Read highlighted text

Microformats are simple ways to add information to a web page using mostly the class attribute (although sometimes the id, title, rel or rev attributes too). The class names are semantically rich and describe the data they encapsulate.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Microformats are a bunch of class names that, when put in the right combination, let machines and people better understand  information like contact information, events, reviews and relationships. It’s much easier to identify, use, search,  and categorize the information on websites that have microformats. Almost every blog, discussion board and many online stores use microformats. Google uses them  in their search algorithms and for many of their applications, and not too long ago facebook added microformats to their site.

There are different types of information that microformats help to handle.  hCard allows the identification of address and contact information. hCalendar allows you to identify dates and times. hReview allows ratings, summaries, descriptions and just about anything related to reviewing any product or service. XFN allows people to define relationships and friendships to all your linked friends (think of facebook here).

For the purposes of the CSSOff contest, hCard will be used to mark up the addresses.

In the CSSOff example the organization name and their two addresses are located in the footer of the design.  Microformats  (more specifically hCard) will be used to represent the The Knucklelodeon Network’s two locations: Sacrameno and Jacksonville. hCard follows the vCard format which is used in most address book applications and web based email clients like gmail.

Adding a class of  vcard  to the footer of the CSSOff site informs the browser  and machines  of contact information <footer class=”vcard”>.  The next set of classes are added to the “The Knucklelodeon Network” header tag. <h3 class=”fn org”>The Knucklelodeon Network</h3>. The class name fn stands for Formatted Name. This is a required class in the hcard format. It can contain the name of an individual or, in our case, the name of an organization.  The class name org  in our h3 tag identifies “The Knucklelodeon Network” as our organization’s name.

With the formatted name identified it’s time to add the address. Below are our completed addresses.

<section>
    <h3>Visit Our Studios</h3>
    <p class="adr work"><span class="street-address">11 Slime Time Way</span><br/>
        <span class="locality">Sacrameno</span>, <span class="region">CA</span> <span class="postal-code">94203</span><abbr class="country-name" title="United States of America"></abbr></p>
    <p class="adr work"><span class="street-address">329 Gunk Road</span><br/>
        <span class="locality">Jacksonville</span>, <span class="region">FL</span> <span class="postal-code">32099</span><abbr class="country-name" title="United States of America"></abbr></p>
</section>

Under the “Visit Our Studios” section the classes adr and work identify the paragraph of text as a work address <p class=”adr work”>. The span tags are mostly used in this example as there is no semantically specific HTML tag for address information. A tag with the class name of street-address is used to identify “11 Slime Time Way” as the street address. The class locality is used for the city (Sacrameno). region is used for the state or province (CA) and the class name postal-code is, well, the postal code or zip code for the address.

No address would be complete without the country. Humans can quickly deduce that the country for this particular address is the USA. Machines, on the other hand, need a bit more information. This is where the HTML abbreviation tag is very helpful. The abbr tag gives the ability to make human readable text machine readable by adding that text to the title attribute in the abbr tag.  In the CSSOff site the abbr tag contains the country-name class with a title of  United States of America. The Abbreviation tag can be used for missing information as well as properly formatting text for machines. If  the Knuckleodeon Network’s Sacrameno address was “11 Slime Time Way Sacrameno, CA 94203 USA” the word USA could be enclosed in an abbreviation tag with the country’s proper name in the title attribute <abbr title=”United States of America”>USA</abbr>.The contents of the title attribute (United States of America) will be added to the vCard and not the text USA. This is extremely helpful when dealing with dates, times, information needed for machines and any word that’s abbreviated. Humans get to read the human formatted text and the machines get to read the machine formatted text. Everyone now has the ability to read the Knuckleodeon Network’s addresses.

Since the Jacksonville address contains the same type of information and is also a work address it will follow the exact same formatting as the Sacrameno address.

How do I know I’ve done it right?

If you read the blog post entitled Let’s get this party started! at one point I discussed adding the Operator Firefox extension to the browser to view microformat data. With the address information properly formatted it’s time to view what we have so far.

If  the Operator extension is installed  the Contacts menu should display a contact.

Clicking Contact’s name allows the ability to export the CSSOff formatted text to your address book, view your address on a map or export it to Yahoo! Contacts.

Here’s an example of the contact information is Apple’s Address Book application (if you chose Export Contact from the menu)

There are many other  microformat properties  available in hCard so please read the documentation and  view examples on the Microformats website.

Two posts ago I discussed my basic setup for workflow in web design. In my previous post, Get your CSSOff on, I discussed the Photoshop design and  how I was going to tackle the CSSOff contest design. I was going to blog about my work on this project as I progressed but decided against it. My main reason for not posting these past few weeks hinged on being unsure if writing out my code would  disqualify me. In theory other contestants could presumably  do a search, find my site and just copy and paste the code (as unlikely as that seems).

The CSSOff photoshop template contained many different aspects of web design that were a challenge to code. To tackle this particular site I decided on this approach: Content is set up in HTML, styling is done in CSS, all the extra goodies (and some older browser compatibility) are handled with JavaScript, and  if JavaScript or CSS is turned off things should still function (they just may not look as pretty).

Just Get to the HTML Already!

This post will focus mostly on the basic HTML  used to create the web page. Once our content is organized we can give it style with CSS and add some whiz bang with JavaScript. I have decided to create my version of the site using HTML5 standards, microformats and wai-aria roles to hopefully make this site as accessible as possible. I’ll also try my best to  keep the markup as slim as possible.

The Basic HTML 5 Page

Below is the basic HTML file I used to begin the project. It’s not much but we’ll build on this HTML template to create all the necessary content. We’ll start by creating the ideal, perfect world, hack-free website and work to make the site work in the real world.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSSOff 1.1</title>
        <meta name="description" content="">
        <meta name="author" content="">
    </head>
    <body>
    </body>
</html>

This is of course an extremely simple beginning. We declare the doctype, the language of the web page (in this case English), our charset in the meta tag  is UTF-8 so accented characters can be used with the text and properly entered in the form elements,  I’ve also added the title tags for our site, a couple of meta tags for content and author, and our body tag where we’ll be adding all of our content. I won’t be adding any text in the author and description tags till later.

Navigation

Since the navigation block on the CSSOff website will remain fixed to the top of the browser window it doesn’t matter where we put our markup. There’s currently a lot of discussion on “the interwebs” that menus for hand-held devices should be on the bottom. If we were to create a responsive design  the menu would probably be added to the bottom portion of the markup and positioned on top of the browser window with CSS. For now I’ll leave it as our first section.

<nav>
    <ul>
        <li><a href="#obstacles">Obstacles</a></li>
        <li><a href="#prizes">Prizes</a></li>
        <li><a href="#contestant">Be A contestant</a></li>
        <li><a href="#top">Back To Top</a></li>
    </ul>
</nav>

There’s nothing fancy here. Since it’s a one-page site the menu’s an unordered list of links. Each link navigates to different sections on the page. I’ve also added the HTML5 nav element to make the code more “machine” readable. The nav tag will not work properly on Internet Explorer as it’s not a recognized HTML4 tag but we will fix this later with JavaScript.

Here’s what we have so far

Logo and Header

With the markup for the navigation complete it’s time to set up the header. This section contains the header of the page (the triple dare logo), a sub head (The Web’s Messiest Challenge!) and another subhead of text (Airing Thursdays on the Knucklelodeon Network™). This set-up is perfect for putting all text in header tags (h1 to h3) and grouping them with the new HTML5 hgroup tag.  I added the name and ID of “top” to allow easy navigation back to the top of the screen.

<header name="top" id="top">
    <hgroup>
        <h1>Triple Dare</h1>
        <h2>The Web’s Messiest Challenge!</h2>
        <h3>Airing Thursdays on the Knucklelodeon Network™</h3>
    </hgroup>
</header>

Here’s our html file so far

Obstacles

The obstacles section contains a list of six obstacles that, when clicked, will display a larger image to the right. The section begins with a HTML 5 section tag with our section name and ID followed by a h1 tag with that name. The name and ID attributes are added in the section tag to identify the section, to give the menu an anchor to link to, and a hook for the CSS. I’ve set up an unordered list of all the obstacles and a div tag as a container for  the large images. Each list item has a thumbnail with alt text, the name of the obstacle, a description of each obstacle and a link to the larger image. In the Photoshop file the only description that was given to us was for “Down the Hatch” so I wrote the descriptions for the other obstacles. I added the description in each list item to allow anyone with a screen reader to be able to read, or  listen to, the description of each obstacle. That way even if they can’t interact with this particular section of the site they’ll be able to access all of the content.

<section name="obstacles" id="obstacles">
    <h1>Obstacles</h1>
        <ul>
            <li>
                <a href="img/lg-the-tank.png">
                    <img src="img/th-the-tank.png" alt="The Tank">
                    <p>The Tank</p>
                    <p>Frosting with sprinkles all over</p>
                </a>
            </li>
            <li>
                <a href="img/lg-sundae-slide.png">
                    <img src="img/th-sunday-slide.png" alt="Sunday Slide">
                    <p>Sunday Slide</p>
                    <p>A swirl with a cherry on top!</p>
                </a>
            </li>
            <li>
                <a href="img/lg-human-hamster-wheel.png">
                    <img src="img/th-human-hamster-wheel.png" alt="Human Hamster Wheel">
                    <p>Human Hamster Wheel</p>
                    <p>The latest fitness craze!</p>
                </a>
            </li>
            <li>
                <a href="img/lg-down-the-hatch.png">
                    <img src="img/th-down-the-hatch.png" alt="Down The Hatch">
                    <p>Down the Hatch</p>
                    <p>6ft slide covered in gunk</p>
                </a>
            </li>
            <li>
                <a href="img/lg-pick-it.png">
                    <img src="img/th-pick-it.png" alt="Pick It">
                    <p>Pick It!</p>
                    <p>Not your nose, silly!</p>
                </a>
            </li>
            <li>
                <a href="img/lg-the-wringer.png">
                    <img src="img/th-the-wringer.png" alt="The Wringer">
                    <p>The Wringer</p>
                    <p>Squeeze your way through</p>
                </a>
            </li>
        </ul>
    <div>
        <img src="img/lg-the-tank.png" alt="Down The Hatch">
        <p>The Tank</p>
        <p>Frosting with sprinkles all over</p>
    </div>
</section>

With the list complete, I created a placeholder for the larger images. For the time being I’ve created a div tag with the first large image, the obstacles name and it’s description. Later on we’ll switch this image and its text based on the clicked  thumbnail using JavaScript.

Here’s the markup we have so far

Prizes Galore!

The next section contains the prizes. This list is comprised of  four prize items. For this section I created one unordered list. Each list will contain two prizes (image and description).  The two lists were created  to make it easy  to line up all the items. If, when adding the CSS,  we were to float the items in a single unordered list left, there would more than likely be unwanted gaps between menu items. Two unordered list (two columns in this design) of prizes will allow us to adjust the spacing above and below each item. Updated: Let’s just use one unordered list with the image and description and modify the placement with css.

<section name="prizes" id="prizes">
    <h1>Prizes</h1>
        <ul>
            <li>
                <img src="img/trip-to-space-camp.png" alt="Trip To Space Camp">
                <p>A Trip to space camp!</p>
            </li>
            <li><img src="img/nash-skaetboard.png" alt="Nash Skaetboard">
                <p>A Nash Skateboard!</p>
            </li>
            <li><img src="img/casio-keyboard.png" alt="Casio Keyboard">
                <p>A Casio Rapman Keyboard!</p>
            </li>
            <li><img src="img/13-inch-tv-vcr-combo.png" alt="Illustration of a 13 inch TV/VCR combo">
                <p>A 13 inch TV/VCR Combo!</p>
            </li>
        </ul>
</section>

Here’s our sample with the added prizes

Sign up—Time is Ticking!

It’s time to create the contest sign-up form. If you’ve written HTML before this form should be fairly familiar. I’ve created a label and an input for each form element. If you return to the Photoshop file you’ll notice that there are no labels in the form but placeholder text in its place.  In each input tag the placeholder attribute is filled with the text we want to insert into the project. Most modern browsers have the ability to display this placeholder text but some browsers (Internet Explorer) cannot. Older browsers will need to use JavaScript to fix the problem. Labels will be hidden from browsers by default. The labels will only be shown to browsers that don’t have the ability to show placeholder text and that have JavaScript turned off. If JavaScript is available the labels will be hidden and JavaScript will add the placeholder text.

In the code below you’ll notice a few HTML5 input attributes; namely type=”email” and type=”url”. These new tags help the browser to know the type of information the user needs to add to the field and can help in the form validation process. If an old browser is being used to view the site, have no fear—these input types will have the same behavior as type=”text”.

Forms are a bit of a pain to work with. With a few properly placed divs, some CSS and JavaScript, we’ll do our best to have a well-formed form.

<section name="contestant" id="contestant">
    <h1>Be A Contestant</h1>
    <form>
        <label for="name">Your Name</label>
        <input name="name" placeholder="Your Name"/>
        <label for="emailaddress">Email address</label>
        <input type="email" name="emailaddress" placeholder="Email Address"/>
        <label for="team">Team Name</label>
        <input name="team" placeholder="Team Name"/>
        <label for="team-color">Team Color</label>
        <select title"Team Color">
            <option value="">Team Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="ultra-violet">Ultra-violet</option>
        </select>
        <label for="gender">Gender</label>
        <select>
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="hermaphrodite">Both</option>
            <option value="intersex">Neither</option>
        </select>
        <label for="photo">Profile Photo URL</label>
        <input type="url" name="photo" placeholder="Profile Photo URL"/>
        <input type="image" src="img/submit.png" border="0" alt="Submit Entry!">
    </form>
    <div class="countdown">
        <p id="timer">60</p>
        <p class="clock-slogan">The clock<br/> is ticking!</p>
    </div>
</section>

The code above also contains a section for the timer. For the time being I’ve simply typed out “60” and the “time is running out”. JavaScript will manipulate this text for a countdown and CSS will be used to add the clock face.

Here’s our sample with the contestant section

A Footer Finish

All footer information is added inside the HTML5 footer tag. This contains the footer text, the address information and the copyright information. The creative commons text was generated from the creative commons website.  This section is kept really simple but more tags will be added when adding microformats and styling the content.

<footer >
    <section>
        <h3>The Knucklelodeon Network</h3>
        <p>The Knucklelodeon Network is not affiliated with Nickelodeon, nor is it an actual television network.</p>
        <p>Triple Dare contestents consent to potential physical bodily harm, like being burried alive by a giant waffle.</p>
    </section>
    <section>
        <h3>Visit Our Studios</h3>
        <p>11 Slime Time Way<br/>
            Sacrameno, CA 94203</p>
        <p>329 Gunk Road<br/>
            Jacksonville, FL 32099</p>
    </section>
    <p>This design is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License</p>
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"/></a>
</footer>

And here’s our example with all our content

The Basics Completed

In a perfect  and standards compliant world this would be all the markup necessary for our website. Unfortunately we have discrepancies and variances in browsers types, versions, and in the people experiencing the site. In the next post I’ll be adding tags to improve machine readability with microformats and wai-aria roles.

When unzipping what Unmatched Style called the “PSD”, I was hoping to find a creative brief describing the fictional client, the target audience or what the goals of the site were. Knowing these things can make a huge difference on coding decisions. Is my target audience children to teen (same as Nickelodeon) or do I target more the Adult Swim demographic of the 20 to 30 somethings? This will make a huge difference on the type of humour used for all the interaction on the page.

Analyzing the design

It may seem kind of  weird to go through a photoshop design to ask who, what, where, why and how but I find this exercise greatly helps me understand the project so I may know how to properly code this site. I think of it as studying the blueprints before building your home. You want to make sure you’re doing it right and always thinking of the big picture when you’re working on the detail stuff.

At first glance the website design is really beautiful. I definitely approve of the colour palette. The design uses very saturated colours and has a style well suited for children. It reminds me of the old school Nickelodeon site. Ah nostalgia. Ain’t it great? Digging a bit deeper into the design I’m finding that the structure and purpose of the site is seriously lacking. This doesn’t affect how I code the site but it does make it difficult to design with a purpose. In the next few paragraphs I’ll be going through the purpose of each section (or lack of it) as I see it. Open the design in a new window and follow along if you like.

The navigation seems pretty straightforward. Each link will go to a specific id. The Back to Top button suggest that the menu will have a fixed position. When you scroll through the site the menu will always be visible on the top of the window. From what I remember this is a bit of a pain for ie6 but we’ll cross that bridge when we have to.

I’m a bit confused as to what the Obstacles section is supposed to be. Should the different obstacles highlight on hover? on click? And what’s the point of showing a photo of a 6ft slide covered in gunk? This seems like a real waste of real estate to me. But I’m only coding the site. So for this section I think I’m going to code it so when you click on one of the six images on the left it will change the larger image on the right.

It seems to me that the prizes section has no interactive aspect whatsoever. Seems odd to have 4 prizes and nothing describing how to win them. I guess they wanted to keep the text at a minimum. It also seems like the designer wants to have the descriptive text of both the keyboard and the TV/VCR to line up. This may mean using specified heights in the css. If I were to make this site responsive this would maybe make things difficult.  I might try to spruce this section up if I have the time by having cheesy animated gifs on roll over of each prize  but we’ll see how much time I have.

The Be a Contestant section puzzles me. I’m guessing that if you complete the obstacles you win a prize but before you can compete you have to complete. And you have 60 seconds to do so. That’s not a lot of time if you’ve been gawking at the prizes section for 40 of those 60 seconds. I’m still not sure what the heck the timer is for and how you can stop or restart. For that matter why would you want a timer? Regardless, for coding purposes I’ll just find a jquery count down timer to make the clock count down. The form has a few options to fill out. I haven’t figured out why you would want to have  the gender pulldown tab after the team name and team color. I would think that name and gender is information that would be better sectioned together but I guess putting the pulldown tabs together makes for a cleaner design. I’m not sure what the profile photo url is all about. Should I just type in a url? This seems counter intuitive. How would “the kids” know to find a photo from a website copy the url and paste it in here? Especially since there’s a time limit. Should this be a “upload your photo” field? I know the contest didn’t want any type of fancy back-end so I’m guessing it’s a compromise. If it was up to me I would remove the field completely, but I digress.

The last section of our page is the footer. This has pretty standard content (address, copyright, disclaimer text). How the content is structured is a bit odd but still pretty straightforward to code. I’m not sure why there are 2 columns for the disclaimer but that is their design choices and we just have to code them.

Ok, I’ve ranted quite enough about the structure of this site. The graphics are gorgeous I just wish a bit more attention was paid to the structure. I swear that in the next post I’ll actually be talking about the code (or where I’m at in the code by the time I post).

No babies were harmed in the making of this photo.

That’s it! I’ve gone crazy, deleted my old site and started all over again with this blog. What prompted this? Well for one I hadn’t updated my site since 2006 (you know, when website design wasn’t about mobile design, responsive design and HTML5 goodness). Another motivator just so happens to be a little contest I’ve entered.

I’m sure you’re asking yourself “how would entering a contest make someone want to brave the blogasphere waters again?” Well it’s quite simple. I’ve entered into a competition at unmatched style CSSOff  to code a website. The Photoshop template is provided and it’s the competitors job to code the page. The template is designed by  Paravel which, from my little bit of research, are behind the Do Lectures (I subscribe to their newsletter). They have a pretty nice site and, when I have the time, I’ll be sure to look through more in depth.

The timeframe to create the 1 page site from CSSOff is a bit short to code and blog with my given free time (I think it’s a 14 day competition) but I will try. If I don’t submit my code on time I’ll still finish the site and continue to blog about it. I figure it’s a great way to push my skills, hopefully learn a few things, and share my knowledge with other web people.

Setting up the Work Space

I guess the first thing I need to explain are the tools I’ll be using for this project. For coding I’ll be using TextMate. It’s a great tool for coding as it colour codes everything, has text snippets and is pretty popular amongst designers. I’ve been using this for quite some time and I like it very much.

My next set of  tools are actually extensions for Firefox. I use these extensions to check my work as I go along. These extensions are also great for knowing where you went wrong or how a particular set of css rules are working to create a specific effect. They keep me sane while coding (and that’s not an easy task).

On to the extensions:

Firebug: This is a great web development tool that allows you to inspect html, css and javascript. Once installed understanding how a particular piece of css is effecting your code is as easy as right-clicking on the desired section in your web page and choosing ”Inspect Element” from the contextual menu.

Web Developer: This tool is absolutely fantastic to temporarily disable or enable different portions of your code. With a few clicks you can see what your site looks like with no css, no javascript and/or no images. It can do many other things so be sure to go through all the options.

Operator: Operator allows me to view all of my microformat data so I know that machines, screen readers and search engines can properly understand the content on the site. Microformats are how many aggregators can pull information from all over the web.

Page Speed and ySlow: I’ll be using these tools closer to the end of my project to see how fast my page loads and to see if I can tweak any inefficiencies.

This setup is what I use for pretty much every website I work on and it’s worked great for me so far. Hopefully someone out in interwebland will find this helpful. In my next blog I’ll actually start talking about the project and how I’ll be tackling it.