Our national web design contest for 2017 is now history (it happened June 20 – 23, 2017). If you would like to see some photos of the event, please visit our Facebook page (photos are linked).
I thought it would be helpful to those planning to participate next year to summarize the comments from our judges. I tried to arrange these in categories (similar to the rubric we use for judging the entries). Each section is listed below with an overview of what went right and what can be improved.
Interview
Three questions were asked as part of the interview process. These would be similar to the sorts of questions you would actually experience if you were being considered for a job as a web professional.
Why should we hire you?
Many who were interviewed began with an overview of experience and unique beliefs in approaching web design. This helps differentiate you from others because of the uniqueness of your beliefs and approach.
In terms of improvement – many indicated they work well as a team. Of course, that is expected. Unless you are finishing each other’s sentences, you should have specific examples where you worked well together (and a few where you did not) and provide an overview of what you learned (and insights gained).
Walk us through your process?
Most thoroughly explained the process used (and the reasons behind the steps taken). Results were also discussed.
We would also have liked to see how the process is completed, what happens with testing, and what the plans are after the site launches. One should make every effort to involve the client through each step of the process (whether that is covered in the work order or not).
How did you start in web design/ development?
Most demonstrated a passion for creativity and a desire to pursue web design outside of school curricula. It is obvious that many plan to pursue this as a career.
A few teams only addressed how they became interested in web design, but they didn’t convey passion. As a client, this would make the interviewers feel they would be dropped if something better came along. Although this was only encountered in a few teams, one should never leave a client with such an impression during an interview.
Graphics and Type
Overall, it appears that teams are getting better each year. They seem to have a clearer understanding of what it takes to develop a site (and meet the challenges outlined in the work order). We recognize that this is a competition and there is a limited amount of time for creativity and polish on a site.
We do encourage everyone to have a solid understanding of how to apply the CSS @font-face declarations. It is important these days to always define a font (actually several fonts) and never let the browser default to the typical serif font (like Times New Roman). Be specific, don’t just apply a generic “sans serif” font rule either.
If a client provides specific color values, use those. One can always discuss later with the client why others may be suitable, but first, develop the site per the work order. Often, clients provide colors because they match existing corporate branding. Even if the responsible party agrees initially to a change, it is important to first deliver exactly what is requested. If time permits, provide an alternate example with the colors you think better.
Consider accessibility throughout your design process. Light text on a light background is had to read. As is dark text on a dark background. Contrast is important. Make certain you understand why.
Don’t use pictures where styled text will work. If you include text in an image, it will not be accessible. It also may not scale properly for mobile devices.
Be careful when working with images. Do not change the proportions when you display them on a web page. They will look distorted. Also, resize the image in a graphics tool (like Photoshop). Do not just resize it in the code. If you do this, it may appear that a postage stamp sized image is taking forever to load (when it is actually a massive image simply resized in the code). If someone is using a mobile device, they may end up paying for the extra bytes which need to be downloaded (downloaded unnecessarily, if the image had simply been resized).
Process
We spent a few hours providing training in user centered design techniques and the associated processes. We expected the majority of teams would have many more questions for the client. At a minimum, we were expecting the “tone” of the site types of questions (serious vs. friendly and so forth).
Programming and Code
This also included accessibility. This was one area we encourage all competitors to review and improve. At a minimum, there should be alternate text for all meaningful images. We observed the majority of sites did not have any alt text (or it was very generic – “photo,” for example.
We also did not see ARIA roles defined in the majority of sites. If you are not aware of ARIA roles, we encourage you to research the topic and incorporate it into your development efforts.
If you or your teachers need help with accessibility, we encourage you to become a member (you get a free class – we would recommend our class on accessibility). No, we are not trying to sell you something, we genuinely want to improve the work done by everyone. Frankly any site which is not accessible in 2017 will rank lower in search engines.
Lastly, when developing navigation, it is important to use at least an area of 7 characters or more for each navigation item. If someone suffers from motion disabilities (perhaps Parkinson’s Disease), they will not be capable of moving the mouse to hit a link of 2 or 3 characters.
Although we only saw one example of this – one should never use tables for layout. This practice disappeared a decade ago. If this is what you are being taught in school, please have your teacher contact us. They will need to update their curriculum. There are so many reasons why this should not be done. Tables for tabular data is great; tables for design is an abomination.
In terms of other aspects of programming and code, it is important to include comments in your code (and to use meaningful class and id names). Remember that each identifier must be unique for that page. You can re-use a class name on a page, not an id.
It is also important to use linked CSS, not embedded. The latter is much more difficult to maintain.
Spaces should not be used in file or folder names. This can cause all sorts of minor irritations – for example, if you email someone a link (and there is a space in the name, part of the link may appear on one line and the remainder on the next – with the link now being broken in the email message).
If you create a list and nest another list within it, you must contain the entire inner list within the opening and closing <li> element of the outer list.
Summary
Overall, we see improvement from year to year. We encourage you to review the above comments from a number of different judges and incorporate these improvements into all your work (and what you submit in your next web design contest).
Updated Dec. 1, 2017
For those who are preparing for 2018, we provide a copy of the 2017 secondary competition work order. Please be aware there may be a number of changes to the competition in 2018. If you are running a state web design contest, please contact us (we are trying to develop a current list of all state competitions to better coordinate what is happening at the state and national levels).
