On the Subject of Web Design

Welcome to web design class. The first rule of web design is: You do not talk about Comic Sans MS. The second rule is: You DO NOT talk about Comic Sans MS. The third rule is: The word "color" is NEVER spelled with a U.

  • The module displays a snippet of a CSS file on a screen.
  • Based on the information given, you have to Accept (✓), Consider (Δ), or Reject (✗) the code.

Step 1: Select the website

Find the website this code was quoted from. Use the Selector part of the code (the part before {) to narrow it down to one site, then note down its Threshold value.

Edison Daily (news site)

Elements: body, a, h3, blockquote

IDs: #header, #comments

Classes: .post, .title, .author

Threshold: #00FF00

Buddymaker (social media)

Elements: div, span, img, a

IDs: #msg, #cover, #content, #sidebar

Classes: .post, .title, .share

Threshold: #8040C0

PNGdrop (image hosting)

Elements: div, img

IDs: #main, #comments, #fullview

Classes: .username, .share, .large

Threshold: #BADA55

BobIRS (chatroom)

Elements: ul, ol, img, b, i

IDs: #sidebar

Classes: .avatar, .username

Threshold: #03E61E

Vidhost (video hosting)

Elements: div, iframe, b, i

IDs: #main, #rating, #comments

Classes: .username, .share, .channel

Threshold: #60061E

Go Team Falcon online (online game)

Elements: body, iframe

IDs: #rating, #comments

Classes: .rating, .fullscreen

Threshold: #501337

Stufflocker (cloud storage)

Elements: div, h3, img, iframe

IDs: #sidebar, #download

Classes: .menu, .author

Threshold: #B020E5

Steel Nexus (forum)

Elements: body, div, img, blockquote

IDs: #header, #content, #sidebar

Classes: .avatar, .reply

Threshold: #BEA61E

Step 2: Find the color target

Find the first color name in the CSS file, then use the following table to determine a hexadecimal value of that color. This value is the Color Target that you will need later. If no color name is displayed, use #7F7F7F.

Color Hex value Color Hex value Color Hex value
Blue #0000FF Yellow #FFFF00 Red #FF0000
Green #00FF00 White #FFFFFF Orange #FFA500
Purple #800080 Magenta #FF00FF Gray #808080

Note: The hexadecimal value of a color is denoted in #RRGGBB format.

Step 3: Calculate site score

Calculate the site score as follows:

  • Start with the number of lines of code inside the {curly braces}. Counting semi-colons is a good idea because it is a line terminator.
  • +3 score each for:
    • R value of the Color Target is less than R value of the threshold.
    • G value of the Color Target is greater than or equal to G value of the threshold.
    • B value of the Color Target is greater than B value of the threshold.
  • +2 score for each margin/padding.
  • +1 score for each border/border-radius unless it's 0px or 50%.
  • -1 score for each z-index without a position.
  • +1 score for each font-family unless it's "Comic Sans MS", which gives a -5 score.
  • +2 score for each box-shadow/text-shadow unless it's none.
  • ×2 score if the buttons on the module are colored, or -3 score if they are gray.
    • If Colorblind Mode is enabled, instead score ×2 for white buttons, and -3 for black buttons.
  • If your score is now negative or 0, keep adding 16 until it's positive.
  • Keep adding up the digits of the number until you are left with a single digit. Then use the following table to determine which button to push.
Accept (✓) Consider (Δ) Reject (✗)
2, 3, 5, 7 6, 8 1, 4, 9