2014 National Web Design Contest

I had the great honor of supervising our WebProfessionals.org national web design contest in Kansas City (June 24-27, 2014). We held separate contests for high schools and post-secondary schools. This year, we had representatives from a total of 35 states. Congratulations to the winners and to all who participated. Everyone had to win first place in their state in order to compete nationally. In both contests, teams of two were asked to complete a series of challenges which resulted in 3 web pages. Emphasis was placed on web standards, accessibility, and professionalism. Teams had to use their knowledge of HTML, CSS, and JavaScript to complete these pages. Each team had roughly 8 hours to review the client work order, analyze what was being asked, develop their wireframes, storyboards, style tiles and initial analysis and then build the pages. It seems like a lot of time, but is not once you start the process. Teams were interviewed (by individuals who actually hire web professionals). Each team was also asked to complete an exam. We held debriefings for each contest at the end of the day of that contest. I wanted to use this forum to share additional observations. I will create a separate post dealing with comments from judges.

To address one question which is always asked – no, we can’t share links to the winning sites. Apparently, there were some problems with earlier contests and we have been asked not to share these sites since our initial demonstration competition in 2004. I understand that some may want to question judge decisions. That being said, I firmly believe our competition is one of the fairest I have even encountered. It is a double blind experience (judges do not know who the participants are and participants never meet the judges). After each competition, I upload all submissions to a central secure server which is accessed by the judges. We have practicing professionals (in a number of different time zones) examine the sites for their area of expertise. In a simple “back of the envelope” calculation, I determined that judges collectively made over 13,000 individual decisions when analyzing the sites. There is little chance for subjectivity. Each judge scores based on an established rubric and multiple judges review the same site and same criteria. We have a judge supervisor who then collects the results and assembles the final scores. So, knowing this, I wanted to share some additional thoughts (again, comments from the judges will be part of a separate post).

First, let’s examine the tools used by participants. 47% (nearly half) used tools by Adobe (ranging from the latest version of Creative Cloud [2014] to Creative Suite 3). Creative Suite 6 was the most commonly used suite of tools. Tools like Brackets, Edge Code, and Edge Animate were also used. The next most commonly used tool was Notepad++ (10%).  Remaining tools covered a variety of options (including Text Wrangler, Visual Studio, Expression Studio, NetBeans, Komodo Edit, Gimp, Paint.Net and Paint). I found it interesting that only 7% were using the latest version of Creative Cloud; the majority are still using CS6.

In terms of operating systems, 65% used some version of Windows, 34% used Macs and 1% used Linux (Mint). Curiously, there were more users of Windows XP (yeah, that old, unsupported one) than users of Windows 8.1 (5% vs. 3%). For those reading this who are responsible for Windows XP on computers today, stop reading and upgrade. If you can’t upgrade because of costs, install a version of Linux and train individuals how to use it. PLEASE STOP USING WINDOWS XP. Yes, I was shouting. It is unsupported. As soon as I saw that it was being used, I knew I had to thoroughly virus check each entry. For those who are curious, no viruses were submitted this year.

I also some tablets (mostly Android and iPads and a Wacom Bamboo) being used (but there were few of these). Some came prepared to test on various mobile devices. Most did not. I encourage those who are learning to develop web sites to use at least some version of a mobile device (or an emulator at a  minimum).

Initial briefing for Web Design Contest

In terms of the sites themselves, first, I want to address a pet peeve of mine. I saw 11% of all entries use file extensions of .htm. 89% used an extension of .html. We havent had a need for an extension of .htm since the days of the Dead Operating System (you may remember DOS with its 8.3 naming convention). Please stop using .htm. Please stop teaching individuals to use .htm. The extension really should be .html. It is 2014 and all browsers and operating systems understand the .html extension. JUST STOP USING .htm, please. Sorry, shouting again.

In terms of the version of HTML attempted, HTML5 predominated this year. This was a first. The post-secondary teams used this for the most part (73%). However, only 50% of the high school teams used HTML5. Most of the remainder (33%) used XHTML (strict or transitional). I encourage those reading this to strongly consider using HTML5. The recommendation is being finalized. If you are still teaching XHTML, please update your materials and use HTML5. Modern browsers support it. There were a few cases where no DOCTYPE was used at all. If you are teaching and not stressing DOCTYPE, please update your materials. I suspect the students who did not use this had little or no formal training.

We had some sites properly code for accessibility (labels for form elements, for example and alternate text for images). Kudos to those who did this. The majority did not. We also had very few teams utilize media queries (less than 8 teams attempted this). Roughly twice that number attempted responsive pages (utilizing percentage so the page resizes as the available real estate changes). These numbers are relatively small. I encourage those reading this to consider always developing for a multi-screen environment.

I also observed several sites which relied on tables for page design. Yes, TABLES. This was even after I mentioned in the contest briefing on Tuesday how wrong this was.  Tables are great for tabular data, they should not be used to design your pages. They cause tremendous problems with screen readers (among many other problems). If you are a teacher who is still teaching this antiquated technique, please stop now. If you are unwilling to update your course materials, please RETIRE NOW. You are doing your students (and many others) a tremendous dis-service by continuing to use these antiquated techniques.

As I was verifying all the sites uploaded properly, I noted a number of pages with the name “Untitled Document.” I suspect that lowered some scores by the appropriate judges.

I want to stress that this competition is definitely a team effort (both by the participants and those who run the contest). Many thanks to the numerous judges who devoted their time to reviewing the sites. Yes, many stayed up until 3 in the morning and then had to go to work. Our judge supervisor (Shelly) did a fantastic job again this year in assembling the results as well as fielding numerous questions. Many thanks to Jon and Steve for being there with me throughout both contests. Many thanks to Steve for also  recruiting Clyde and LeRoy to interview the teams. Clyde and LeRoy – many thanks for taking the time from your busy schedules to interview. I think many contestants experienced their first actual interview for a web position as part of this contest. Lastly, many thanks to Bill Cullifer (Executive Director of WebProfessionals). Although he couldn’t be present in Kansas City this year, he did a lot of the ground work prior to the contest and helped finalize many of the materials.

Again, I plan to include a separate post covering judge comments. I did want to post my initial observations. I look forward to your comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial