Assignment 8 Supplemental: Graduate Credit

Steps for Assignment 8, DGMD E-20 Section 1 (26270)
  1. Based on last week's accessibility evaluation of your website, make as many changes as possible to make your website accessible. ✓
  2. Find a nice color scheme from Adobe or Canva ✓
  3. Apply the 60-30-10 color rule to your website. ✓
  4. Use 1 CSS Preprocessor on any page ✓
  5. Graduate Credit:
    1. Use at least 1 more CSS Preprocess on any page ✓

For this assignment, I created an SCSS file where I could nest a number of the classes; Visual Studio Code then generated a CSS file automatically. I used the generated file, as well as a second CSS file that contained a lot of the non-nested styles, to style the pages. The SCSS is in its own folder on the site (scss/style.scss).

I tackled some of the accessibility issues I found last week, including greater color contrast for the .required class, adding a language attribute to the html tag (❮html lang="en"❯), deleting the extra role attribute from the ❮nav❯, and getting rid of all the italics, which were not serving any functional purpose. I also added a legend to the fieldset so the screenreader can access it without it needing to appear on the page.

I updated the look and feel overall, using a color palette I generated from an cool poster by using the Adobe tool, giving me some nice related purple colors (for the 60-30), as well as a complementary orange accent color (for the 10%). The final palette is on the site in the images folder if you want to take a look at it (images/palette1.jpg).

I kept some of the transitions and grid features on the site from previous weeks, but simplified the design with color blocks, as I think the idea of long-scrolling, single-column pages for a car (or any other retail) site works well in the real world: it keeps them on the site with hints of "something more!" as each section starts to appear when scrolling. The navigation adjusts using @media queries for different devices. I liked the techniques in the book about grouping the @media queries together at the top of the stylesheet, but I didn't have very many so I just did one at the bottom. I will be using the other technique at work though, it looked very useful.

Finally, I summarized my changes here on this standalone HTML page, and linked it from the home page using target="_blank" so it would open in a new browser tab, and not interfere with site navigation.