Rheal Poirier

Graphic, Web, Email and Variable Data Designer

<Div>ide and Conquer


About a week  and a half ago I submitted my design to unmatched style’s CSSoff  design competition. A few days ago I received an email stating that 416 entries were submitted and that judging was a go. That’s a pretty good turnout if you ask me.  Now that the contest is complete I think  it’s a good time to discuss how I tackled this particular project. Up first — HTML.

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">
        <meta charset="utf-8">
        <title>CSSOff 1.1</title>
        <meta name="description" content="">
        <meta name="author" content="">

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.


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.

        <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>

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">
        <h1>Triple Dare</h1>
        <h2>The Web’s Messiest Challenge!</h2>
        <h3>Airing Thursdays on the Knucklelodeon Network™</h3>

Here’s our html file so far


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">
                <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 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 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 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 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 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>
        <img src="img/lg-the-tank.png" alt="Down The Hatch">
        <p>The Tank</p>
        <p>Frosting with sprinkles all over</p>

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">
                <img src="img/trip-to-space-camp.png" alt="Trip To Space Camp">
                <p>A Trip to space camp!</p>
            <li><img src="img/nash-skaetboard.png" alt="Nash Skaetboard">
                <p>A Nash Skateboard!</p>
            <li><img src="img/casio-keyboard.png" alt="Casio Keyboard">
                <p>A Casio Rapman Keyboard!</p>
            <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>

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>
        <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>
        <label for="gender">Gender</label>
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="hermaphrodite">Both</option>
            <option value="intersex">Neither</option>
        <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!">
    <div class="countdown">
        <p id="timer">60</p>
        <p class="clock-slogan">The clock<br/> is ticking!</p>

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 >
        <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>
        <h3>Visit Our Studios</h3>
        <p>11 Slime Time Way<br/>
            Sacrameno, CA 94203</p>
        <p>329 Gunk Road<br/>
            Jacksonville, FL 32099</p>
    <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>

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.

Leave a Reply

Required fields are marked *.