CSS site style testing

Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content intact.

The Perfect Website

The goal

The goal of this page/site is to have the perfect web site. Realizing that there is no perfect design, I hope to achieve a site that:

• uses Responsive Design so it is accessible by people using any sized device
• is semantically sound so that it is accessible by people &/or robots using screen readers
• meets WCAG (Web Content Accessibility Guidelines) 2.1 Level AAA standards
• demonstrates and discusses well thought out design and shows HTML and CSS examples for you to be able to learn from
• focuses on design; while this site is focused on web design, most concepts could be applied to design in general
• design is more of an art than it is a science
• provides examples for those of us who have a hard time remembering things like how to properly build a web form, display an images, and so on
• provides an example of bad web design

For my students

This site was initially created for my own use. I modified it so that my students could use it in the web design courses that I taught. You will probably notice that it's a little bit on the education side of things.

Web Design and Devices

Original web design was written for desktop and laptop computers. Smartphones weren't a thing and desktop computers were far more common than laptops. So web pages were styled using HTML (no CSS) and were designed to "look good" on a desktop machine. If you've ever seen early web pages (from the early 90's), you probably wouldn't say that they look good, though.

As smartphones came around and browsers on smartphones become more common, tech folks came to the realization that web sites at the time looked terrible on a smartphone. The text was teeny tiny and or extended off the screen. The solution was adding a mobile friendly site which was a dumbed down version of the "real" site. This could be seen as adaptive design. CSS became a thing and styling moved from HTML to CSS; HTML became used primarily for content (not styling). Web pages could be designed on multiple sizes. With adaptive design, if you adjust the browser, the content does NOT re-size/adjust.

It's hard to maintain one site though, and people definitely couldn't manage 2. That's when responsive design became a thing. Unlike adaptive design, if you adjust the browser, the content DOES re-size/adjust. A site gets designed once and can be used for all devices. This, in my opinion, is the only way to go.

This site will provide examples general HTML and CSS as examples that can be used in web design. For example, this is a paragraph.

I may add other popular HTML tags along with their CSS counterpart to this site in the future. You can right-click and View Source or View Page Source to see how something was put together. You can also right-click and Inspect to temporarily manipulate HTML content or CSS styling. Web developers tend to gravitate toward the Inspect option on large projects to find things that they want to change.

Accessibility and the web

Web accessibility is about making something that can be used by everyone including people with different devices, people of different cultural backgrounds, people of different languages, and people of different abilities. We need to make our websites easy to use for everyone; the hearing impaired, those with limited mobility, those with reading difficulties, and anyone using handheld devices. We need to communicate effectively.

Below are some terms used in web accessibility along with my favorite web accessibility evaluation tools.

• WCAG - Web Content Accessibility Guidelines (see W3.org 2.1)
• ARIA - Accessible Rich Internet Applications
• IAAP - International Association of Accessibility Professionals
• WAVE (web accessibility evaluation tool)
• WAVE (evaluation tool) - Chrome extension