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 in tact.

Design

Design in its simplest form is organization or structure. People design buildings, web sites, products, art work, and so on. 2 popular parts of web design is User Interface (UI) and User Experience (UX). User Interface is the way an application or web site is layed out. User Experience is the experience a user has while using an application or web site. UI/UX are often discussed together because of their close relationship.

HTML vs CSS vs Javascript

• HTML (HyperText Markup Language) is mainly for content
• CSS (Cascading Style Sheets) is mainly for styling
• Javascript is mainly for action

Web pages can be designed with multiple tools like PHP or python or a host of other tools, but those tools create web pages. I use PHP to create dynamic and sometimes static pages. A dynamic page is one where the content changes depending on database information or dates and times or other things. A static page is where the HTML (HyperText Markup Language) doesn't change unless someone pulls up "the code" and manually changes it.

Accessibility

I debated whether or not I should create a page specifically for accessibility but decided that it should be included in this design page because ultimately you should design things that are accessible (which means that everyone can use it).

Javascript tends to be a little tricky as far as accessibility with getting the right onload, onkeyup, onclick, and so on, all correct. I'm not a huge fan of javascript for this and many more reasons so I tend to stay away from it. If you're dead set on using it, make sure it works on all browsers and run an accessibility checker (or 2 or 3) on it for sure, then you'll find out why it's not my favorite.

Design Terminology

There are numerous terms in design relating to web sites. Here's a highlight of the most important ones in my opinion.

• Accessibility
  • Think of accessibility in terms of communication and inclusion. Are you communicating clearly with your audience? Sometimes people get caught up in explaining away problems that should be fixed. Instead, fix the problem.
  • Accessibility problems = communication problems
  • Accessibility is not a health issue or a personal condition, and it shouldn't be thought about in quantity (this will only affect a small number of people)
  • Making things accessible means that everyone can be included
  • In design, think about who will use what you're creating, how they might get to it (for a web page, will they use a smartphone, tablet, laptop, etc), and how they'll use it
  • The key to accessibility is to put yourself in your user's place (creating Personas are a way to do this) for many users, many devices, and many scenario's; consider people who have mild or extreme vision variations, people who have mild or extreme auditory variations, mobility variations, device variations, location variations, and on and on
  • Refer to other sections of this site to learn about some accessibility stuff in more detail
  • Also refer to W3.org for an in depth look at accessibility and the web
• Acronyms
  • Spell out acronyms the first time they appear (on every web page, in a video, in a report) in whatever medium you're using
  • Better yet, don't use acronyms; they exclude people
• Signals

  • These are usually icons for web sites. It's an object that represents something and hopefully makes sense. A traffic light is a signal that you're required to know the meaning of before you can get a driver's license. Generally using signals without words is a bad practice in my opinion. Ask someone to draw the "universal" power button symbol that's been around for over 30 years. They probably won't be able to do it because it's pretty nebulous. I generally caution the use of icons without accompanying text. The "hamburger" menu has been around long enough that people recognize it but that doesn't mean using it is good design. Honestly I was against the "hamburger" menu for a very long time but since it's been shoved down people's throats so much, and is mostly recognized now, it's probably ok to use...I guess. Another thought here, I just used the phrase "shoved down people's throats" and everyone might not understand the meaning of that phrase; communication is hard. If you do use signals in your web design I recommend at least adding a title tag.

    It's worth mentioning that I'm not a fan of signals. Signals exclude people when you should be trying to include people. If you don't know what a symbol is supposed to mean, you could feel left out and may even decide to look elsewhere. You can use things in HTML like title tags and Accessible Rich Internet Applications (ARIA) to help identify things that are not obvious to all users (usually a visual issue) but why not just provide the information to everyone? I use title tags quite a bit because I think it enhances the user's experience on web sites but use Accessible Rich Internet Applications (ARIA) sparingly because I generally look for a more inclusive alternative solution.

  • Hover over this to see an example of a title tag
• Consistency
  • Be consistent from page to page and video to video following a theme throughout the project
    • Upper/lower case
    • Lists with or without punctuation
    • The way images are displayed
    • Color choices
    • Content tone
      • Formal or informal; be formal, be informal, be a mixture of the two, but be consistent with whatever you choose
      • Keep track of what is said so that you don't repeat too much but are still consistent
      • Slang can be ok but it can be tricky too, try to use inclusive language (language that everyone understands) as much as possible
    • Be consistent in your behind the scenes work too, like spacing in your code, so that you can make quick edits in the future
  • There is still a balance between being consistent and stale though, so keep some variety in your work also
    • Varying things like colors between pages or section can work as long as you continue to follow your theme
    • Re-using a symbol or object with color changes or keeping the same color and varying the shape can work well in many cases
• Spelling and grammar
  • No matter how smart you are, if you have spelling or grammar mistakes, you don't appear very intelligent so double-check your stuff
  • Use tools to help but don't rely solely on them
• Navigation Menu and other Links
  • The Navigation Menu are the primary links that users use to navigate a website
  • Web sites should have an easy to use, easy to understand, no explanation needed, consistent navigation menu on all pages
  • Links that take you off the web site (and/or away from the site navigation menu) need to open in a new tab or window (tab vs window is a user browser setting) using target = underscore blank in the tag
  • Navigation Menus must use responsive design (i.e. work for all devices)
• Do everything on purpose
  • Plan ahead
  • Test and review as you go
  • Ask yourself these questions as you make decisions
    • Who, what, when, where, why, and how
    • Who is this for?
    • What do you hope to communicate?
    • When will this be used?
    • Where (location and device) will this be used?
    • Why are you doing this?
    • Why are you doing it this way?
    • How will this be used?
  • Iterate (make changes along the way) as needed, but with more planning comes less changing
• Have someone else review your work (sometimes called Peer Review)
  • If the content needs to be explained, re-work the content
  • Check web sites on multiple devices, with multiple browsers, by multiple people