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).
Just Get to the HTML Already!
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.
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>
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>
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>
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>
Sign up—Time is Ticking!
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”.
<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>
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>
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.