Clark Mulholland out and about 2020

In this 10 minute QandA interview, Bill Cullifer the founder of the WebProfessionals.org reached out to Clark Mulholland a practicing Web professional and past participant in the National Web Design Contest regarding why Best Practices and Web Standards matter.

Bill: Clark, it’s been a while since you competed in the National Web design contest. How are you and what have you been up to?

Clark: Thanks for asking Bill, I have been doing great. Over the years I have been able to spend time working for myself, working for others, and even was able to take a little break from work and do some traveling. Currently I am working at one of the big tech companies on a team that focuses on streaming video to the browser and internet enabled devices. I love it, this part of the industry is very exciting right now and allows for a little further reach beyond the standard web stack.

Bill: Awesome, congrats Clark and good for you! Say, question for you. We continue to conduct our annual Web design contest, our 16th year in fact. For the benefit of those that haven’t participated, I have a question for you ok?

Clark: Ok, shoot.

Bill: How did the contest help you in the world of work?

Clark: There are very few opportunities in life that allow for this level of peer to peer skill comparison on a transparent playing field. A lot of value can be drawn out of finding your shortcomings and strengths when compared against a cross section of web designers and developers from across the nation.

When it comes to the world work; one of the things this competition allowed for was creating a great talking point in interviews. This is invaluable when you first start getting into the workforce with little real world experience. Having something to draw on that reflects your strengths and weaknesses can provide a huge impact on your interviewer(s) when you tell the story in an engaging way.

Beyond the interview process this competition helps you find and hone skills like teamwork in stressful, deadline driven environments where it is important to put your best foot forward. I find this is very comparable to real world situations in business and employment.

Clark: Now Bill, I have some questions for you! As the founder of the sponsoring organization of the Web Design and Development contest and Webprofessionals.org, what was the vision behind this effort and why did you establish the .org and the Web Design Contest?

Bill: The mission of Webprofessionals.org is to support Web workers and those that teach. In every industry sector, a professional association or trade group forms up to represent those that work in that field of study. A “professional association” is how we are best described and members consist of Web designers and developers, Web administrators and Web business people too. Trade groups are typically industry groups as well, but they most often represent the corporations that make the products we buy. Other industries such as healthcare, building industry trade groups for example, have their own respective organizations including hospital associations. They too would be considered “trade groups” that typically represent their business interest. Front line professionals such as physicians, nurses, contractors, electricians, plumbers and likewise now Web professionals, participate similarly in professional organizations of their own. It’s worth noting that both professional organizations and trade groups have been around for years. In fact, many for hundreds of years which believe it or not, is about the time it takes to gain real traction, organizationally speaking. More like 50 years actually, but you get the idea. It’s a natural evolution of things and success factors depend on leadership and management and the buy in from the rank and file. Those that hire and companies that make products that Web workers want and use matters here too. The beautiful thing about Web work is that we can get but with the minimal tools. and we can work anywhere at anytime.

So in a nutshell, education and training and quite often, certifications or credentialing are the cornerstone of most professional organizations and we share that in common. By publishing and raising awareness of best practices, which by the way are typically written by practicing professionals in their respective specialties, it’s the basis for Webprofessionals.org and the Web design contest as well.

Bill: Clark, can you share with the next generation of Web design and developers how exactly the contest best practices and Web standards have helped you now?

Clark: Standards are what makes the world go round. Without standards we wouldn’t have interoperability between web browsers, networks, operating systems; the list goes on forever. Standards make sure that the work we put into our websites is able to be enjoyed by all, across all of the different browsers, devices, screen sizes, new and old alike. It also allows us to easily and consistently design products and pages that include accessible features for people with a wide range of disabilities. Right now that might not seem like that big of a deal but when you build a website for your customer/employer, it can only truly create value if many people are able to make use of what you have created. Using standards allows for you to stand on the shoulders of giants. Many very intelligent people worked very hard to come up with these standards these allow for people like us to focus on our end goal while having easy access to tools and processes that we can harness to create great things.

Without organizing bodies like the W3C and community organizations like Web Professionals promoting web standards, education, and adoption, we wouldn’t have the ever growing list of technologies readily available to us.

Clark: Bill, Why are standards important to you personally?

Bill: Well, first of all, very well said Clark! The world would be chaos without standards. Can you imagine a world without stop signs or stop lights? Whether we know what the standards are or how they work exactly we all benefit from them. As you may recall, I have a background in telecommunications. Just like the rapid expansion of the Web today, the telecom industry transformed our lives and continues to do so today. It too is built on standards and for good reason.

Did I ever tell you that AT&T was provided the opportunity to develop wireless technology in the early years and declined? Funny thing, the consensus from the “experts” within AT&T corporate ranging from Engineering, Operations, Legal and Management thought that “consumers would not adopt the new technology.” In fact, in their report and yes, I’ve seen it, they concluded that consumers, “liked being tethered to the wall by a cord.” Lol. Can you imagine?

So as it stands, telecommunications also has evolved over time too. Similar to the Web today actually. In fact, in the earlier years of telephones, it was total chaos. Kind of like the evolution of Web browsers we’ve experienced over time today. Imagine back in the day when the dozen or so companies competing for your telephone business strung a gazillion wires in every direction to reach your house or office. Each company had their own idea regarding how and where and the wires were connected to get there. As a result, it was madness in the streets and looked like spaghetti. I’ll post the images that I was granted rights to publish sometime. It’s hilarious. You can draw parallels to the evolution of the web and that’s one illustrative example of the past and the needs for standards. Best practices and industry standards are kind of my kind of thing, I guess and they really do matter.

Clark: Bill, what have been the challenges for supporting the Web design contest and Web standards?

Bill: Things have evolved quite rapidly and it’s very difficult for those that practice and teach to keep pace. From an education perspective, formalized and vetted curriculum is really lacking. Career Technical Education or CTE offerings in schools are limited here in the U.S. and schools lack the time in the day to teach electives too and that’s a problem. Also, many educational institutions lack the funds for additional teacher training and salaries that have resulted in limited support for UX design and Computer Science education. Many students figure it on their own, but sadly sometimes and way too often and out of frustration, many do not. It’s a jungle out there really and difficult to navigate at times for aspiring Web professionals when you don’t know what you need to know and at what depth.

The contest and the .org key interest are to promote the baseline of what every Web professional needs to know. For example, most agree that mastering the fundamentals of Web design, development and business concepts, best practices and Web standards would be ideal for every Web professional. Clark, you’re an example of the benefit of that. Truth is, some schools do better than others mapping to this principle for this competition and it’s a real challenge for the context Technical Committee here at the .org for the reasons I stated. The contest is great, I too learn something new every day and it’s great to follow your success over the years Clark.

Bottom line is, all Web professionals need to incorporate best practices and the fundamentals of Web standards into their working lives. Too often, teachers will teach what they know or what they’re comfortable with. This creates an educational bias and this needs to improve too. Students will have to establish a work around and many do. Sad but true.

Anyway, as a community group we need to promote that best practices and Web standards including where to find these resources and that is the message. The entire profession owes a lot of respect to the trailblazers that have and continue to develop and advocate for. To acknowledge their efforts including dedicated individuals that spent countless hours establishing these best practices and Web standards is a good thing and the right thing to do.

By the way, you said it best Clark. “We’re standing on the shoulders of giants.” And that “many very intelligent people worked very hard to come up with these standards.” This allows for people like us to focus on our end goal, while having easy access to tools and processes that we can harness to create great things. “We owe it to those like the w3c and the Web standards project for their efforts to support those of us that benefit from working on the Web.” Clark, that’s so spot on and thanks for sharing that!

Bill: Clark, ditto for you? What are your thoughts?

Clark: You are correct in that the web industry whether it be Backend, Frontend, UX, Accessibility, QA Testing, SEO, etc; everything moves at a pace that is faster than Technical Education can create new Curriculum for. We are in a time where today’s hot technology might be tomorrow’s bad idea before an instructor has even been able to finish the lesson plans. With that, I think it is important for everyone to understand that being successful in any tech sector position will always require a constant force of curiosity on your part. Instructors can and should be teaching the basic building blocks, HTML/CSS/JS/etc. However, it will be up to the individual to seek out and play with the latest techno-fad. Your tasks in the industry will range from bleeding edge technology to things that were built with technology designed and adopted 20 years ago. You will be expected to adapt to the situation and overcome the problems in front of you, no matter the tool-chain. But that is also what makes this industry so much fun and exciting.

Bill, thanks Clark. Agreed, and also well said. I think the fundamentals can provide the baseline for understanding and students can build on that over time. By doing so, this might also help individuals determine their area of interest and which specific Web professional specialty to focus on for their career as well. UX to the full Web stack to Web business provides ample opportunity and it’s totally wide open. Think about it this way, in the early days of medicine, like let’s say our grandfather’s time, the typical doctor did it all. It was one stop shop for patients. Today, we have medical and Web specialists in hundreds of sub specialties from the top of the head to the bottom of your feet to designing the front end, managing servers and infrastructures and this is a good thing. All physicians study the same baseline of topics regardless of their specialty. Web students today like those that study medicine also find their path many years into the education cycle. it’s an exciting time to be working on the Web for sure.

Bill: Clark, Any closing thoughts?

Clark: I am excited to see that 16 years later SkillsUSA is still working with WebProfessionals.org and promoting Web Design and Development in high schools, community college and vocational schools. I honestly have to say my life would be a totally different place if it wasn’t for having the opportunity to compete in SkillsUSA and make the connections through WebProfessionals.org that I have. At the time I didn’t realize it, but hindsight is 20-20 and I now see the value it provided in my life and I would like to thank SkillsUSA and WebProfessionals.org for keeping this up and making positive impacts on so many young people’s lives.

Bill Cullifer and Clark Mulholland Web Design Contest 2007

Bill: Thanks Clark. So great to talk with you again! Congrats on the new corporate gig. I hope that they give you a fat 401k plan lol.

Clark: Ha, likewise, Bill and best to you and future competitors and keep up the good fight!

The post Why Best Practices and Web Standards Matter appeared first on WebDesignContest.org.

Our on-site team

Many thanks to the team who was onsite and provided assistance to competitors in using our “web contest in a box” solution in addition to the training. They also conducted interviews and reviewed the process competitors used to complete the work order. This team was present the entire week (they took time from their “day jobs” in order to be present for this event). We can not thank them enough!

Our 2019 Web Contest Team (from left to right) Grant, Steve, Mark, Jonathan, Jeff, James, David

Separate competitions were held for high school students (Wednesday, June 26) and post-secondary students (Thursday, June 27). Judges reviewed materials provided by competitors. The materials were placed on a secure web server after each competition so judges (from other states) could review the efforts online. Judges had to meet tight deadlines as all entries needed to be reviewed and submitted before 8 a.m. Friday so that awards could be handed out on Friday evening. We are one of 103 separate competitions at SkillsUSA Nationals.

Comments from Judges

We asked judges to summarize their comments and are sharing them here. We also provided a synopsis of these comments at our contest debriefing on Thursday afternoon (after the post-secondary competition was finished – those comments were for the secondary school entries the previous day).

Overall, judges were glad to see that the antiquated practice of designing with tables is finally not being utilized by any of the teams. This was the first year we observed this (yes, some schools still seemed to have been teaching this ancient approach as late as last year). We organized these comments into major areas. These are summaries of what was observed. As standard practice, we never call out specific tams (either positive or negative). We have also been asked to never publicly share the web sites developed by each team (this is why there are no screen captures of the winning work).

We also saw that no viruses were provided on the materials submitted. Having selected files uploaded to our local server and allowing most of the code to be written directly on the server using Theia likely helped with this.

Accessibility

The first header on the page should be h1. Headings should be correctly stacked and should represent the logical structure of the page.

Meaningful images should have alternate text associated with them. This text must be meaningful. The alt text “photo” is not meaningful.

Link text should be provided (and should be longer than just a few characters – remember some have muscle movement disabilities). Look in terms of the overall user experience as well and do not provide conflicting or confusing links.

Decorative images should be marked up appropriately so there is no confusion.

There should be sufficient color and contrast between background images and text visible on the page. Yellow text on a yellow background image is nearly impossible to read.

Form control inputs should be labeled. Remember that assistive devices rely on this information to properly present the form to the viewer who needs visual assistance.

Graphics and Type

One should use colors which compliment what the customer desires. If they are selling grilled cheese, use colors which support their efforts.

Some teams did a nice job on the overall design. These sites flowed well and made proper use of white space.

Contrast was also mentioned by these judges. If you overlay text on a background image, make certain to use a color which allows the text to be read easily.

It was also mentioned that fonts should not overwhelm visitors. It is also wise to limit the number of fonts used on a site to a few (perhaps 3 or so).

Programming and Code

Don’t use outdated approaches. Judges saw an instance of the <center> tag this year. How long has that been deprecated? Use CSS for any styling; HTML is for the content and structure of the page only.

Judges also reported that some tags were not valid. For example, there was a <t> tag and a couple of other tags which are not supported in any browsers. We suspect these were typos; this is why it is so important to check your work before you submit it.

Meta tags should be used properly. Make certain o also specify the doctype and the language of the page (preferably EN-US).

Indent your code for clarity of reading. If you have a lot of indenting, use spaces, not tabs. The latter will force the code off the screen (or to wrap) when viewed by the judge).

Judges were glad to see use of modern CSS features (such as flex) including transitions and text effects.

A number of teams did not seem to have a solid understanding of how to read an API using the modern approach (fetch). We encourage everyone to review this practice. This is also why we provided working examples on the local server that all could see when they accessed the API via their browser. Most modern web sites rely on reading APIs for many things. We wonder if this is being taught in most schools these days?

Interview

Companies look for passion these days. The person asking “why should we hire you” is looking for detailed examples of your passion. Perhaps you like to write great code; provide specifics. Perhaps you like to help others; again, provide examples that demonstrate your passion.

I you are asked how the site will help the company achieve their goals (and you don’t seem to know what the company goals are), ask. Remember interviews are a two way street. If you don’t know something or understand, ask clarifying questions to help you better understand. Then, provide details as to how the site will help the company.

Remember this is a team competition. Interviewers are looking for examples where individuals work as part of a team. Although you don’t need to finish each other’s sentences, it is important to identify which specific skills each member has (and discuss how they compliment).

Process [updated Nov. 25, 2019]

We evaluate the initial intuitiveness of the wireframes, sitemap, and other planning documentation from a client’s perspective who isn’t an expert in our domain. We understand that this is a short contest and we are only asking for low-fidelity deliverables and account for this generously. It is important to understand that these deliverables are an important communication tool with a client so we should be able to look at planning & process deliverables and, to a limited degree, find the ‘signposts’ that anchor UX. We should be able to, at a glance, and even in low-fidelity, be able to understand content areas from images.

We ask the teams to explain their plan. The thought process behind the choices is very important. Why did they choose that content to be first, and thus the highest priority? Does that choice align with the client’s spoken briefing? Does it tie back to any marketing efforts or UX principles? If they choose to have a blurb of text somewhere, have they given thought to the real content they intend? Is this a paragraph or a few sentences? If they say they want an image somewhere, did they think about what type of images they wanted? An illustration, a photo, why?

This is 2019 and the tipping point has long come for mobile. Most websites will see higher traffic from mobile than desktop. Did they have deliverables for mobile? Unfortunately, few teams have given this any thought either during explanations or in specific deliverables and are missing out on a lot of potential points. If they have deliverables that show a plan for mobile we evaluate reflow and content flexibility? If they plan for a paragraph on desktop, have they accounted for the extra space it will take on mobile? For planned images, do they understand responsive images and file size for faster download or that different images can be used for aesthetic purposes to keep focus on what the image is meant to convey.

We state during the briefing that sitemaps are an opportunity to plan the breadth of the entire site while we only ask them to detail wireframes for a few specific pages. We are looking for appropriateness for the client in additional pages and content the client’s website will need. We evaluate the explanation and justification for those specific pages. What was their thought process? Did it align to any client’s stated goals? Do they understand SEO and searcher intent in even limited capacity? Do their explanations indicate they have given any thought to the client’s goals?

In all of their explanations or in follow up questions we look for an understanding of how to measure success. The bar is appropriately low here; they are not expected to know what a KPI is, but there should be some evidence to thoughts given to testing and measuring success through usability testing and/or analytics.

While they are working and well before the deliverables are evaluated, we are looking to see the teams interact with the client. We make a bit of a to do that the planning phase is an opportunity to communicate with the client. Few teams attempt to interact with the client in any way and elicit feedback. All too often, after the initial client briefing, no one talks to the client until we evaluate the deliverables. Which unfortunately aligns all too often with the real world of frustrated clients we have encountered who say they haven’t heard from the freelancer they paid for weeks and then the developer gets frustrated when the client wants changes so late in the process. Needless to say, there are points left on the table when teams don’t interact with the client at all.

Conclusion

Overall, we saw significant improvement in the efforts by competitors this year. We also saw that advisors/ teachers were asking more specific questions so they could better prepare students for the work force (and for the competition next year). We hope readers find these comments useful. If you have questions, please ask in the comments below.

Best always,
Mark DuBois
Executive Director and Chief Evangelist
World Organization of Webmasters (aka WebProfessionals.org)

The post 2019 National Web Design Contest Judges Comments appeared first on WebDesignContest.org.

Consider these best practices

For those competing in our national web design and development contest, it is important to remember that our judges are looking for evidence that the work you submit follows industry “best practices.” As such, you will lose significant points (which will definitely take you out of consideration for a medal) if you do not follow these suggestions. They are presented in no particular order as all are very important practices.

Remember, HTML is about the structure/ content of your web page(s); CSS is about the appearance/ style of your web page(s); JavaScript is about the behavior of your web page(s). Use these tools accordingly.

Under no circumstances use tables to create a web page design. Tables should be used to display tabular data (such as measurements) only. It has been over a decade since any practicing professional recommended using tables for design of a web page. They do not allow for proper searching of your page by bots (which means your search engine rank will be much lower). They are also mostly inaccessible to assistive devices (such as screen readers). Do you really want to exclude visitors because they are disabled?

Use semantic markup in your HTML. In other words, use markup/ tags as they were intended. For example, <h1> means this is the most important heading of a given section on the web page (or on the entire page itself). Do not use <h1> because you want the text to display larger (that is what CSS is for). Separation of appearance from content is important. Using semantic markup also enhances interoperability (consider tags such as <section>, <article>, and <mark> as examples), searchability (search engine bots know what the tags mean), accessibility (assistive devices work best when semantic markup is used), and internationalization (in the event you page needs to be translated into other languages). At a minimum, consider using markup (such as <header>, <footer>, <main>, <nav>) instead of relying exclusively on <div>.

Make certain your CSS class and ID names convey meaning. Also, CSS specificity should be employed to make your CSS more understandable/ maintainable. Remember in terms of increasing specificity, one has:

• type selectors (such as h1 and pseudo elements),
• class selectors (such as .tagLine and pseudo classes),
• ID selectors (such as #backToTop),
• Inline styles always win in terms of specificity (however, they should not be used in most cases as they make your pages less maintainable – use external .css files when possible).

When writing JavaScript, take advantage of ES6 where possible. However, make certain you give variables meaningful names and include comments if there are questions what you code is accomplishing.

When you are ready to “turn in” your work (to the judges/ client), consider the following. Know how to use sFTP (FTP) and other means to provide working copies of your work on the server. Test what you submit to make certain it functions as you intended. Test it by pointing your browser to the proper spot on the server. This is what the judges will use when they review your work. Make certain all links/ images/ CSS/ JS is working as you intended. There is no need to provide copies of the original files/ font sets/ images which were not used. Only provide the materials you actually used. Hint – you will lose points if you blindly upload all the font sets just because you can. A professional only provides what the client needs. That being said, if you create a logo/ graphic and used tools like Illustrator or Photoshop, provide the supporting file in an appropriate location (judges do like to review your original work).

These are some of the industry “best practices” that our judges will be looking for. Make certain your code meets these minimal criteria.

The post Advice to competitors appeared first on WebDesignContest.org.

In addition to our interview with the US competitor at WorldSkills Asia in Abu Dhabi, we also interviewed a number of web design and development experts who participated in the event. We previously posted these videos on our Facebook page and thought they might be of interest to those reading this weblog as well.

We participated in WorldSkills Asia as part of the training of our US competitor, Matthew Vreman, as he prepares for WorldSkills Kazan (Russia) which will happen in August, 2019. In order to be considered as a competitor for WorldSkills in Web Design and Development, you muse be one of our national champions in our Web Design and Development competition.

Here are a few expert’s comments about the importance of WorldSkills Asia in the overall process. This was the first web design and development competition held as part of WorldSkills Asia in Abu Dhabi.

We also asked experts to tell us a bit about their competitors. Hopefully, you will have a clearer understanding of other competitors from various countries. This was a great event to meet and discuss what is happening in web design and development in many different countries.

We also asked the same experts how they got started in web design and development. We thought it might be interesting to learn their stories. Here is what they had to say.

We hope you enjoyed these videos and found them interesting and helpful. Please let us know if you would like to see more of these sorts of videos. We look forward to learning your insights via the comments.

The post WorldSkills Abu Dhabi videos appeared first on WebDesignContest.org.

Interview with Matthew Vreman from Mark DuBois on Vimeo.

Here is the transcript of the above interview. Interviewer [Mark DuBois], interviewee [Matt Vreman].

[Mark] Today I have the honor and privilege of interviewing Matt Vreman. Matt competed as the U.S. competitor in WorldSkills Asia in Abu Dhabi. This was their first web design and development competition that happened at the end of November, 2018.

Matt, I’m wondering if you could take a little time and describe your experience to our listeners about this competition.

[Matt] Yeah, sure, so it was it was a great experience first of all. It was the first time I’ve ever traveled outside the U.S. So it was quite an experience specifically for that reason, to begin with.
It was an amazing week and I had a great time. The competition was a couple days; it was a three day competition. I had a great time and learned a lot I was extremely challenged. The competition was both client side and server side.

[Mark] Could you touch a little on on both aspects because there were different days with different emphasis.

[Matt] Sure. The first day of the competition was about CMS. It was a CMS based module it was using WordPress and there were several different challenges included in that module; including setting up WordPress, developing a child theme, developing a couple plugins and a couple other things as well. That was the CMS module of day one.
Day two was a client side module that was basically the goal was to build a JavaScript based game. So there’s different parts of the game, it was a side scrolling shooter kind of spaceship flying game. That was a pretty interesting challenge as well.
The third day was server side; I had to use some different server languages as well as a client side languages to create a routing system for a local map of Abu Dhabi using bus routes and train routes to calculate the best route between point a and point b basically.

[Mark] And then you had to display the results using Canvas didn’t you?

[Matt] Absolutely.

[Mark] Overall, you said you learned quite a bit. Touch a little bit on that if you would. What did you learn?

[Mark] I suspect being the first time out of the country this is a bit of a culture shock for you as well.

[Matt] Absolutely, yeah. Before this my travel experience was just the USA. But Abu Dhabi and the United Arab Emirates is quite a bit different from the US. To understate it slightly, so it was it was pretty interesting. The biggest not really issue but the biggest shock was just the simple language barrier. I speak English and that’s it. Whereas most of the other/ staff at the expo center spoke Arabic and not very much English.

And then course, all the other competitors from different Asian countries spoke their native languages and not all of them spoke much English as to be expected so it was it was interesting to a kind of experience that and try and figure out. It is interesting how easy it turned out to be to communicate with just simple hand gestures and pointing at things.

[Mark] Definitely. It’s always good to experience different cultures and I think this is one of the neat aspects of being a part of the our national web design competition is you can go on to WorldSkills and compete internationally which I think is pretty impressive in and of itself. Obviously congratulations on your achievementsand being a part of this. I’m curious what advice you would give to of those that are thinking about entering web design competitions particularly the ones that’ll be starting soon in March and April 2019.
What advice would you give to those that are are thinking about it?

[Matt] Do it. I mean there isn’t much. There isn’t really any downsides to doing a competition. You get to challenge yourself by competing against other brilliant people in your field and a it’s a great experience, just the competition itself. Trying to challenge yourself to do a lot of work in a short amount of time; that’s that’s the job.

[Mark] That’s a very good insight and I think the idea to just do it is something that we often overlook these days.

[Matt] It is a great way to test your mettle; it’s a great way to test which are really know and it’s a great opportunity to meet others and perhaps establish some lifelong friendships, network that sort of thing.

[Mark] Congratulations on that Matt. I appreciate your insights on all of this and best of luck to you in Kazan. That’s going to be happening sooner than we think.

[Matt] Yeah!

The post WorldSkills Asia (Abu Dhabi) Interview with US competitor appeared first on WebDesignContest.org.

Interview comments

It is great to say “we work as a team” when asked why someone should consider hiring you. However, very few teams actually displayed this behavior. If you work well as a team, you should be finishing each other’s sentences. Our judges did not see much of that behavior. It would be great for teams to provide more beliefs and examples (instead of the pat “we work well together” answer).

Our judges observed many teams explained their process in detail, but mention how they would learn about the business in question. How does the business work? What is the history of the business? Those sorts of questions can differentiate you from the competition. Our judges also observed limited strategies for testing or for after site launch. These are critical in today’s work environment.

When a team is being interviewed, it is great to share your passion. However, have specific stories as to how working in the industry has directly affected your life. Don’t just have a solid understanding of industry statistics and job growth opportunities.

When asked about favorite websites, there was a clear split between user experience and user interface elements. Competitors should provide specific examples and relate these to how they can help with a client’s website.

Coding and development comments

CSS – understand the @font-face rules. Always define fonts for your sites; do not default to the browser or a generic sans-serif.

Set image width and height in CSS.

HTML – well done on those who created HTML code which validated. It is always a good idea to include comments in your HTML and CSS.

Always add a language attribute to the html tag.

Make certain you properly code the action= attribute on a form tag.

Make certain your tags are properly nested. For example, if you start a list, make sure all tags (such as <li> </li>) are nested properly. Make certain you close open tags properly. For example, don’t attempt to close a <h1> tag with </h2>.

Understand which tags can be nested within others. For example, don’t nest a <h1> tag within a <span> tag.

JS – always put your JavaScript in a separate file; don’t embed it in the single HTML page.

Be careful if you change the proportions of images when resizing. It is easy to make the images appear stretched or squashed, if you are not careful.

Work Order comments

If a client provides you with specific hex or rgb colors, use them.

There is no need for the team to put their name in the files. Judges prefer only team numbers.

There was no need to use any templates to build the pages requested on the work order.

Several teams also stated music playing as soon as their page loaded. This is never a good idea. People may open a page in a work environment and not realize their speakers are on. Always give visitors a choice to listen to audio.

Accessibility comments

It is very difficult to read light text on a light background (or a very busy background).

Information architecture comments

Never use spaces in your folder or file names. If you must use multiple words, separate them with a hyphen, not a space.

When defining ARIA attributes, properly code them (for example role=”region”). Judges observed a number of mistakes in the coding of ARIA roles.

Overall comments

As mentioned above, most teams did well adjusting to the new format. It is important to read and verify you understand the supplied work order. Many teams missed points because they did not focus on the details provided in the work order. If there are questions, it is important to ask them during the competition. One should never make assumptions when the client is readily available.

We encourage everyone to review their entries in light of the above comments. Some will apply; some will not.We provide these to help individuals improve. We look forward to seeing many return to our 2019 competition. We will begin planning that in another couple of months.

The post 2018 National Web Contest Judges Comments appeared first on WebDesignContest.org.

Server environment

We procured a server to contain all the necessary services to host the contest. Being that this is a shared environment it was decided that we would use a Linux based operating system and would then subsequently sandbox each team into a Docker container as their shell. Doing this creates an environment where each team feels like they are on their own system and have complete control over it but yet are locked in with cpu, memory, and io quotas and cannot affect their neighbors around them nor access other’s data. The beauty of Linux Containers is that by default they are completely ephemeral and everything gets reset when you stop and restart the container. Following best practice, each container fulfills a single goal and has its command running as process id 1 allowing for debugging and an overall more secure implementation as unexpected services can’t be started up. The way we manage to preserve the state of the user shells as well as configurations for each service is by the ability to mount volumes from the server’s filesystem to the filesystem inside of the containers. Exposing TCP or UDP network ports is done in a similar fashion as the volumes; you can designate the port inside the container that you want to expose and then give it a public port number that does not necessarily have to be the same as the one on the inside,  allowing for thousands of copies of the same application to live on the same server.

The design contest environment, in order to be provide the full intranet feel, comes complete with a DNS server, web server, and ftp server as well as the server hosting the API to be consumed as part of the contest requirements. Each of these services will also be containerized to securely lock them into a cpu/memory/io sandbox as well as provide the ability to quickly and effortlessly zip up the contest data and reset the server back to a pristine state to be ready for the next contest.

Logical view

Below is a diagram of how the user will see the design contest network:

More changes in 2019 anticipated

Using this new configuration, we will be able to provide some new features with the competition and have room for growth in the future. We believe in small, successful changes. It is very important competitors provide feedback as to how this solution worked in our 2018 competition. We look forward to your feedback on these changes as well (comments are open below).

We are excited about these improvements. We hope you are as well.

The post Designing the Server Environment for the Web Design Contest appeared first on WebDesignContest.org.

Your feedback helped us

As prior competitors know, we always listen to feedback and try to incorporate it where appropriate. We believe that 2018 will mark a milestone as we move from development on individual laptops to a networked server environment. We anticipate our investment in this technology should allow us to focus more on the development aspects of our competition. Competitors – we have heard you and this is the first of many changes we anticipate in the coming years. Here is how we are configuring the network for our 2018 competition.

Network Goals

We established some interesting goals for the network to support competitors this year. These enhancements include:

• A server displaying an API to be accessed by competitors.
• Both wired and wireless access to the server (we know some competitors have laptops with limited wifi capabilities).
• No internet access (as usual).
• Possible wireless signal strength issues (especially with the dimensions of the competition space).
• Network segmentation.
• Restricted access between teams.
• Obviously, it needs to be portable (since we are only in Louisville for a week).
• Inexpensive (cost effective) but a solid solution.
• Centrally managed and easy to use (we all are wearing multiple hats while running this competition).

With all of these requirements in mind we started to look at several different vendors and options.

Network Topology

We ended up standardizing on Ubiquiti Unifi hardware and software. Ubiquiti was able to achieve all the goals and is very inexpensive for what it is providing.  Below is the topology of the network with the equipment with some sample teams.

Each of the components provides a specific role in the overall network design:

• USG – This acts as the Layer 3 Router, Firewall, DHCP, and Radius Server.
• Cloud Key – This is the manager for the Ubiquity hardware and all network configuration changes.
• Switch – This is the Layer 2 Switch that everything connects to.
• Wireless – These are the wireless Access Points that wireless devices will connect to.
• Server – This runs a number of services, including the API server that the teams will access. Details around this will be presented in a later blog post.

Each team is assigned a unique network and vlan via the port configuration on the switch or via Radius when connecting to the Wireless. Each vlan is only able to communicate to the server and is not able to reach the other teams. Each team will be provided unique login credentials at the start of the competition. They are encouraged to keep a copy of their work locally (as well as on the server).

More changes to come in 2019

This year we will be able to provide some new features with the competition and have room for growth in the future. We believe in small, successful changes. It is very important competitors provide feedback as to how this solution worked in our 2018 competition. We look forward to your feedback on these changes as well (comments are open below).

We are excited about these improvements. We hope you are as well.

The post Designing the Network for Web Design Contest appeared first on WebDesignContest.org.

State Competition

I joined SkillsUSA my sophomore year of high school, and when I joined, I didn’t really know what it was or what to expect. I had been coding and developing websites since middle school, so I thought it would be a good idea for me to select Web Design as my competition. The state competition was really the first web design competition that I had done, so I wasn’t sure what to expect. I remember being super excited when I placed first, but in retrospect, I should have seen it coming.

 

National Competition

The national competition was totally different than the state competition in a bunch of ways. For one thing, the competition was administered by Web Professionals, and they made sure to include all different parts of web design in the competition. For instance, one thing that they included that the state competition had not had was an interview. My partner and I had to sit down for a mock interview and explain why we were the best candidates for the job. This was exciting for me because it allowed me to use every skill I had learned from working it web development – not just the coding parts. Another major difference between this and the state conference was the quality of the opponents that I was facing. At the state competition, some of the people we were against didn’t know even basic coding skills, and some were using tools like Adobe Dreamweaver or Adobe Muse. Here, everybody was coding by hand, and knew exactly what they were doing. I saw some of my competitions’ work, and it looked extremely professional.

 

I remember very vividly the moment that my team’s name was called for the gold medal. I expected that I had lost, so when I heard our names, I was shocked. I jumped out of my seat and frantically hugged the people around me. The thing to know about the SkillsUSA closing ceremony is that it is held in a massive stadium with the seating being well above the stage. Because of this, to get to the stage, you must walk down a lot of steps. As I was walking down, I was extremely shaky and excited, and I almost ended up falling down the steps. Fortunately, I got to the bottom and was able to receive my medal.

 

International Competition

Months later, SkillsUSA and Web Professionals reached out to me and asked me to try out for the United States WorldSkills team. I sent in some samples of my work, and three weeks later, I got a call saying that I had been selected for the team. The thing to know about being on the WorldSkills Team is that you have to travel a lot. The team first met in Louisville at the 2017 SkillsUSA National Conference; We didn’t do much in Louisville except get to know each and talk about the competition. Even though we weren’t super productive, I still had a lot of fun. We got to go on stage during the opening ceremony, and we got a box at a Louisville Bats baseball game. The next trip the team took was to Washington, DC. There, we became oriented with the rules of the competition and had lots of time to train. We toured DC, and we got to meet several high-ranking officials at the Department of Education.

 

My trip to Abu Dhabi started off on a bad note: I wasn’t able to check any of my luggage at RDU [Raleigh-Durham International Airport]. Because of this, I had barely any clothes to wear around Abu Dhabi. In fact, besides for my competition clothing, I had basically nothing else. Despite this set back, I was still able to go and compete. There’s a lot of advice that I would give to someone competing in Web Design at WorldSkills, but if I had to pick one thing, it would be that it’s very nerve wracking. Normally when I develop, I’m sitting in a quiet office or cubical, and I’m not disturbed by anyone. This was not the case for the competition; people are constantly walking by, and I got a large amount of attention because I was from the United States. People would come up to where I was working and point at me and say “American.” This was exciting for me, but it also produced a lot of stress.

 

Riley Johnson competing at WorldSkills Abu Dhabi (October, 2017) [Photo taken by R. Scott Norman – used with permission]

The competition was pretty difficult, but I had trained for 6 months, so I was ready. I had been working with several members of Web Professionals, and they made sure I learned everything I needed to know for the competition. Web Professionals provides classes [via their School of Web] in a variety of topics, and I was able to use those classes to brush up on my skills. For instance, Web Professionals provides a WordPress class, and I was able to use it as a refresher. I didn’t know everything that I needed for the competition, but I thought I was prepared pretty well. 

Ultimately, I did not end up winning, but I had a lot of fun and met some great people. Many of the competitors were tremendously talented, and it was an honor to even have the opportunity to compete against them. I think this is a fantastic opportunity for people interested in pursuing a career in web development. You will meet great people and have a unique and wonderful experience. There is not a single event that has had a bigger impact on my professional career than competing in WorldSkills.

As we begin web design competitions (local and state) in 2018, we encourage those reading this to step up and compete. It is a unique opportunity (as Riley will attest).

Best always,
Mark DuBois
Community Evangelist and Executive Director, Web Professionals

The post Competitor’s view of web design contests appeared first on WebDesignContest.org.

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).

The post 2017 National Web Contest Judges Comments appeared first on WebDesignContest.org.