As I mentioned last week, we held our annual national web design contest in Kansas City in late June. We had competitions for both high school students and post-secondary students. This year, we had representatives from 35 states. All had to win first place in their state competition to participate in the national contest. These are some of the comments from our judges which I thought readers might find helpful. Obviously, I have removed references to specific teams.
Our judges provided some very positive overall comments. I thought these two exemplified what many judges thought.
“Every year the competitors keep getting better!”
“Overall, These are some of the best submissions that we’ve seen in a long time.”
In terms of the submitted work, I wanted to focus on two key areas – coding and design.
Coding first – With respect to the form validation challenge – judges liked that many of the submitted examples actually worked. Nothing could be submitted without required fields being completed. Labels were used properly by a number to makes the forms more accessible. For those who know JavaScript and web accessiblitiy well, this was their opportunity to shine. For those planning on competing next year, I encourage you to learn the fundamentals of JavaScript and web accessibility.
Judges noted that a number of sites lacked polish in the code. For example, many elements were not completed (open <ul>, but no closing </ul>, for example). IDs must be unique on a given page (some had multiple with the same value). Some teams did not understand which elements should go where (for example, including an unordered list within a paragraph). Some teams included meta elements (including keywords), many others did not. We realize that most search engines ignore these vallues, but one should still include them. Images should have alternate text for screen readers (some did not). There should have been CSS for mobile (media queries would be preferred) in all the sites submitted. Given tht a number of teams were ready to submit their code before the deadline, this is a reminder to use every available opportunity to polish your code. It made a difference. Similarly, comments were read in detail by the judges.Although this may be a bit overboard, this is typically how I include comments in my code (adjust the comment symbols for CSS and JavaScript accordingly). I thought it might be helpful for readers to know how I prefer comments to look from my students.
<!-- ----------------------- Overview Comments -------------------- --> <!-- Purpose: Explain the purpose of the given page --> <!-- Author(s): Who developed the page --> <!-- Created: July 9, 2014 --> <!-- Colors: #xxxxxx (description) for text --> <!-- Fonts: xxxxx found in assets/fonts/xxxx --> <!-- ----------------------- End Overview Comments ---------------- -->
Next design – Some teams submitted work based on templates (without giving credit to those who created the templates). Since we specifically asked that no templates be used, those entries received much lower scores. It is also unprofessional to use the work of others without giving proper credit. Choices of colors for specific pages was also an issue with a number of entries. Contrast between the text and the background was an issue on many entries. Similarly, some fonts were selected which had very close letter spacing. When possible, use CSS to stylize the text instead of including an image (easier for screen readers to process). When logos are created, their meaning should be easy to interpret.
Obviously, there were a number of team specific comments that I can’t include. However, I thought it might be helpful to see common comments from the judges with respect to coding and design (both are very important in web design).
Personally, I can’t stress enough the need to polish your work as much as possible in the available time. It is the attention to detail which determines who earns first, second, and third place.
I look forward to your comments (I just need to approve them first as I get a lot of weblog spam).
Loading ...
