Mark DuBois Weblog

I helped supervise the National WOW Web Design contest in Kansas City, Missouri, last week. The contest started on Tuesday (June 22, 2010) with an overview for those competing. We also had a quiz (serving as a tie breaker in the event it was needed). These are a few of the photos from that session.

Before the national WOW web design contest begins tomorrow, I spent a little time walking around downtown Kansas City, Missouri. These are a few of the sights I encountered. I particularly like the area near the public library (with the large books).

As I think about the national web design contest WOW is sponsoring next week in Kansas City, Missouri and have been reviewing some tutorials on Lynda.com, I decided this might be an appropriate time to post some ideas concerning the structure of CSS files (to make them easier to maintain). When we develop CSS files for use on web sites, it is important they be easy to maintain. At a minimum, it is a good idea to include some structure and consistency within the file. For example, we might want to make certain all the properties are listed on separate lines and that the opening and closing curly braces are on separate lines (as below). We might also want to alphabetize the properties to make them easier to find in any selector (simple example below).

body
{

background-color: #ffc;
font: arial, tahoma, sans serif;
}

However, one can do a lot more in the overall structure of the CSS file. For example, assuming the CSS may contain special characters, one should consider it a best practice to include a character set declaration at the beginning of the CSS file.

@charset “UTF-8″;

This must occur before any comments or other information in the file. More details can be found at the W3C site.

One should then have copyright (possibly creator) and version information to identify the CSS file. There should also be some sort of table of contents (especially as the file grows in size to hundreds of lines). To expedite searching for information, one might preface each entry with a unique character string which will not directly be used anywhere else in the document (for example, a tilde).

So, a template CSS stylesheet should have the  following characteristics;

@charset “UTF-8″;
/*
copyright 2010. Mark DuBois. Some rights reserved.
version 1.0
modified:
date:
changes:

Table of contents (to jump to a specific part of this document, just search for the unique characters at the start of each line).

~1 Color guide
~2 Reset values
~3 Global constants (identifiers)
~4 Global classes
~5 Home page (items unique to the home page)
~6 Other pages throughout site
~7 Sidebar
~8 Footer
*/

Within the CSS, one would then place specific comments so the individual sections can be easily located, for example:

/* ~1 Color guide
#ffc – light yellow – used for background
*/

Obvously, your mileage will vary with a specific site. It is not as important to have a specific section (such as footer) as it is to be consistent throughout the sites you create. This should vastly improve maintenance of the sites. I recall a quote from an individual at Howest University (Belgium) during a webinar I recently attended – “develop your code as if it will be maintained by a violent psychopath who knows where you live.” While most of us will likely never have this specific problem, it is always a good idea to make your code as maintainable as possible. As a minimum, following the above suggestions should make it much easier to locate specific items.

I know tools like Dreamweaver CS5 make it much easier to work with CSS, but even with those tools, well structured and well documented  CSS should be encouraged. Your comments are most appreciated (due to the vast number of spam attempts, I have to moderate all comments – sad, but this is the world we inhabit). If you post a legitimate comment or insight I will approve it (regardless whether you agree with these thoughts above or not)?

Now that the state contest is over and the winners have been announced, I thought it time to post a few final thoughts regarding the  entries submitted. First and foremost, everyone is to be commended for participating. It is to your credit that you want to validate your knowledge and test your skills. This is a fine way to improve. The following comments are intended to help provide potential improvements to your future work. Everyone (including me) can and should improve on  a daily basis.

Not everyone made the same errors in the competition and these comments are intended for a broad audience (including those who teach these technologies). If you did not make any of these mistakes (or very few), that is why you were ranked much higher than others in the judge’s evaluations. Some of these comments are a bit out of order, but you should have a general idea as to ways to improve when you participate in future contests. As you may recall, there were 6 challenges in the state contest. These comments apply to most of those challenges.

• Regarding the end product itself (the web pages created)
  • First and most importantly, strive for a professional look. Make certain there are no “Untitled Document” titles on any page. Check for proper spelling, punctuation and grammar (even on placeholder text).  Have a consistent look across all pages (unless the specific challenge has a different requirement).
  • Equally important is to follow directions. If one is asked to generate a specific folder structure, make that folder structure. One can expand, but make certain the basic structure meets the requirements of the client.
  • Adhere to established web standards. This includes placing comments in your code, knowing when to use alternate text on images (and when not to), using CSS for formatting (forms should be styled with CSS, not tables, for example). Rely on a proper semantic structure for your pages (for example, use headings to indicate the organization of materials on your page; have one and only one <h1> element  and necessary subcategories (such as <h2> where needed). Although you did not have access to the Internet during the contest, it is a good idea to review your pages to see if they will validate (no elements that don’t end, all attributes in quotes, no improperly nested elements are examples).
  • Make your pages as accessible as possible to audio browsers (for those who must rely on assistive technologies to “view” web pages). In addition to alternate text, use a fluid or liquid design (so the page can be enlarged and the content still flows naturally). When creating a form, use labels, tabs,  fieldsets and legends appropriately.
  • Make each page a search engine friendly as possible. Use meta information appropriately. Use appropriate text in links. Place the most important information first on the page. Provide summary information in the first paragraph (which may well appear in some search engine results).
  • It is also helpful to provide links so one can move from one page to another without having to rely on the browser’s back icon.

• Regarding the tools used to create the product (Dreamweaver, Expression, etc.) – in addition to knowing your tool, know the underlying code. Don’t just work in design view (for example). When using a tool (like Dreamweaver), take advantage of the built in capabilities (for example there is a built in validator and one can check whether the page is accessible). Test your pages in multiple browsers (such as Firefox, Opera, Safari, and Internet Explorer). Also take advantage of supporting tools (such as Firebug in Firefox or Dragonfly in Opera).

• Regarding the process (teamwork, etc.) -the adage “divide and conquer” certainly applies here. Make certain you know your individual strengths and weaknesses (and those of your team mate) and divide the work emphasizing your individual strengths. Communicate frequently throughout the contest. Make certain you have the same tools on each machine (so you don’t need to change chairs or convert files when you exchange them).

• Some additional resources which might be of help to you in the future – this is not a complete list at all, just some starting references.
  • Principles of Beautiful Web Design book
  • Some accessibility resources to get you started (courtesy of Jim Thatcher site)
  • Eric Meyer on CSS resources
  • Findability article

Here are a few photos from the Illinois, WOW/ SkillsUSA web design contest. Thanks again to Lynda.com for the prizes. The winners were thrilled. Thanks again to Jonathan Worent and Shari Tripp for their help with this contest.

We just concluded the 10 annual WOW web design contest in Springfield, Illinois (and winners were announced today). Everyone who participated in this contest has demonstrated their willingness to step up to challenges and do more than just attend. You are all to be congratulated for trying. The judges had to make some decisions and arrived at the winners after reviewing all the challenges from a number of different facets (there were literally hundreds of different points which had to be evaluated for each of the challenges). Many thanks to Lynda.com for providing the prizes to the first place winners (months of access to their vast library of training materials).

Congratulations to the first place winners at the WOW Web Design contest held at SkillsUSA in Springfield, Illinois on Apr. 16, 2010.

• Secondary – Christopher and Nicholas (Maine Township High School South)
• Post-Secondary – Matt Scachette and Kevin Burke (Illinois Central College)

As an aside, students from Illinois Central College have now won first place in this contest every year for the past decade.

This contest focuses on completing various challenges related to established web standards and web accessibility. Students had 6 hours to complete various tasks. They had to demonstrate professionalism, team work, and various business skills in addition to having a solid knowledge of HTML and CSS.Everyone who participated indicated they enjoyed the experience and the challenge and had fun.

I plan to post some additional comments to provide feedback to all the participants later this weekend (have to get caught up on a mountain of email now).

The next stop for me in this contest cycle is the national contest in Kansas City in June. I am already looking  forward to it.

I supervised the Illinois WOW/ SkillsUSA web design contest in Springfield on April 16. Many, many thanks to Jonathan Worent for his help with this contest. Jonathan – it would be much more difficult without you. I am most appreciative of you taking time from your day job as owner of Inspired Bytes to judge the contest today.. Also, thanks to Shari Tripp for her help in reviewing the contest materials. Both Shari and Jonathan offered a number of improvements to this contest. Although the contest is still underway, here are a few observations (both what has been observed this year as well as insights from previous years).

First and foremost, everyone should follow instructions. The contest is designed with a very specific set of challenges and those are the challenges which should be addressed. Ask questions. Think of the contest supervisor and judge as the client. They can provide insights into the challenges. Some of the questions posed were excellent. However, I would have expected more. Also make certain you document the scaffolding process. Take notes on the printed version of the contest that was provided. This helps the judges see that you are actively and critically thinking about the contest and deciding how to break it into smaller chunks which can be addressed individually.

From a technical perspective, make certain to save your work. Save often. We called teams for interviews and noted that many did not save their work when they were interviewed. It is also a good idea to make certain to not have any “untitled document” titles and to include necessary meta information to help with search engine spiders. Lastly, don’t forget to include comments in your HTML and CSS.

As everyone saw, we emphasized HTML and CSS knowledge this year. Adherence to web standards and a good understanding of accessibility issues will go a long way to generating successful pages for each of the challenges.

I hope to be able to post a few more comments after the competition has ended. From our perspective, it looks like everyone enjoyed the competition and is rising to the challenges. Congratulations to all who competed. You are a model for your peers. You stepped up and took a risk to improve your knowledge and test your skills. Well done. Although there can only be one first place winner in each contest (secondary and post-secondary), you all should be proud of your accomplishments today.

Lastly, many, many thanks to the sponsors of our contest – Lynda.com and the World Organization of Webmasters. You rock.