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
Loading ...
These are tips that apply not just to a contest, but to design in general. I see many “professional” sites that do not meet half of the guidelines you mention.
I’d like to further emphasize the need to know the underlying code not simply relying on the tools. Tools can be a great asset. I wouldn’t want to live without my IDEs. But you need to understand and know how to write the code yourself.
There are countless times when I am out and about without my laptop that has all my wonderful tools. A client will call about something urgent than needs changed and I’ll have to log in to my sever through my cpanel and manually edit the code there.
The point is that the tool like Dreamweaver or Expression are an aid not a crutch.
I believe in this same principal with javascript frameworks like jQuery or YUI. They are fantastic to level the browser differences and speed development. But before developing something in jQuery you should understand the concepts of javascript from scratch. I.E. Write Javascript not jQuery.
Thank you, Mark.
I cringed a bit when reading this, but with guidance, practice and passion, I’ll be able to check off the items mentioned here on a consistant basis.
(I’d write more, but inspiration is knocking again)