Next week we are competing in the SkillsUSA Design Competitions. As I have been using their website for event updates, I have seen what they are using for the Vermont SkillsUSA Site. I first tried to use their site on my cell phone and found that it was not only non-responsive, but the only element I could see was the top left of the logo above. Completely unusable.
Then I checked for W3C errors:
Then I checked for Accessibility Errors:
The entire site needs help. This week we are going to look at improving their presence by doing a Homepage (only) redesign. All content that exists on the Homepage must show up, and link to the actual links. This includes the JS timer, the vides, the Facebook feed, the Twitter feed, etc.
There are going to be 4 main focuses on this project:
- All content must carry over and change format as necessary. Do you see that image in the middle with the SkillsUSA Hotline information? That is a picture of text, something which should not happen in Web Design. It hurts Search Engine Optimization (as Google can’t read the words of the picture), and hurts accessibility as screen readers can’t read the words for blind people. Again, all content must carry over but change the format – in this case, type the information out as standard text.
- Valid htm5 code – this is easy for you. No errors.
- Responsive – again, easy.
- Accessibility. Use the Wave Web Accessibility Evaluation Tool (another online validator) to test your design and ensure there are no errors. Accessibility means designing with the lowest barriers to use of the site, so you have to have high contrast in text and backgrounds, you can’t skip headings, you have to have alt/title tags where appropriate, etc. Creating a site with no accessibility problems ensures the MOST people can use your website effectively. Just as a restaurant has a wheelchair ramp so disabled people can have dinner, we have to design our Websites with accessibility in mind and can be held legally liable through the Americans with Disabilities Act. When I validate your site I want to see No Errors.
We are doing the Homepage only for this, and all links must function.
You can use a front end framework such as Bootstrap for this if you would like.
In the end we are all going to be SkillsUSA members, and we could offer our final project to the State Director if high enough quality. Another way to start populating your Portfolio with professional work experience. The Vermont State Director know who Cawd is, and knows we have been National Champion in Web Design multiple times – it may be an easy sell if you do a great job.
You are going to upload this project to your “webDev” folder to a folder called “week_04″. Upload your website to this folder (using an index.html). Make sure that you upload css / images folders and other assets.
- Assigned Wednesday, April 3rd (at noon)
- Due Wednesday, April 17th (3pm)
Questions ask early. I do not help students the day the assignment is due. If I did this it would:
- Encourage a “last minute” work ethic.
- Take away from working with the other students because YOU are unorganized. We need to weed out the lazy, unmotivated people in our industry.
Check out the myriad of resources available out there. Here are two that I use for 99.9% of my questions.
There is also W3Schools, and it isn’t terrible, but not as robust as the others. You need something quick, don’t shy away from it, but the depth of the explanations and documentation is lacking.
Email me as well! You know I have no life.
Finally – welcome to college.