Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design

Harvard Extension School
Spring 2021

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

Presentation contains 100 slides

Housekeeping

Assignment - CSS
Spring Break - Sections (no); Office Hours (yes!)
Final Project

Navigation Systems

Where am I?
Where can I go?
- What is close by?
- What is further away?

Harvard College

Breadcrumb, Clamshell, Tab / Horizontal List, Dropdown

harvard university navigation

Navigation and Lists

Markup as a list; CSS to style.

list-style: none
display: inline
display: none
display: block

display: none

Example 7.1 - display: none; - Example 7.1 (Without Styles)

<nav><nav><ul><li id="al">American League
      <ul><li id="ale">East
          <ul><li>Baltimore Orioles</li><li>Boston Red Sox</li><li>New York Yankees</li><li>Toronto Blue Jays</li><li>Tampa Bay Rays</li></ul></li><li id="alc">Central
          <ul><li>Chicago White Sox</li><li>Cleveland Indians</li><li>Detroit Tigers</li><li>Kansas City Royals</li><li>Minnesota Twins</li></ul></li><li id="alw">West
          <ul><li>Houston Astros</li><li>Los Angeles Angels</li><li>Oakland Athletics</li><li>Seattle Mariners</li><li>Texas Rangers</li></ul></li></ul></li><li id="nl">National League
      <ul><li id="nle">East
          <ul><li>Atlanta Braves</li><li>Miami Marlins</li><li>New York Mets</li><li>Philadelphia Phillies</li><li>Washington Nationals</li></ul></li><li id="nlc">Central
          <ul><li>Chicago Cubs</li><li>Cincinnati Reds</li><li>Milwaukee Brewers</li><li>Pittsburgh Pirates</li><li>St. Louis Cardinals</li></ul></li><li id="nlw">West
          <ul><li>Arizona Diamondbacks</li><li>Colorado Rockies</li><li>Los Angeles Dodgers</li><li>San Diego Padres</li><li>San Francisco Giants</li></ul></li></ul></li></ul></nav></nav>

Markup
Style
Screenshot

 
 <nav>
   <nav>
     <ul>
       <li id="al">American League
         <ul>
           <li id="ale">East
             <ul>
               <li>Baltimore Orioles
               </li>
               <li>Boston Red Sox
               </li>
               <li>New York Yankees
               </li>
               <li>Toronto Blue Jays
               </li>
               <li>Tampa Bay Rays
               </li>             </ul>
           </li>
           <li id="alc">Central
             <ul>
               <li>Chicago White Sox
               </li>
               <li>Cleveland Indians
               </li>
               <li>Detroit Tigers
               </li>
               <li>Kansas City Royals
               </li>
               <li>Minnesota Twins
               </li>             </ul>
           </li>
           <li id="alw">West
             <ul>
               <li>Houston Astros
               </li>
               <li>Los Angeles Angels
               </li>
               <li>Oakland Athletics
               </li>
               <li>Seattle Mariners
               </li>
               <li>Texas Rangers
               </li>             </ul>
           </li>         </ul>
       </li>
       <li id="nl">National League
         <ul>
           <li id="nle">East
             <ul>
               <li>Atlanta Braves
               </li>
               <li>Miami Marlins
               </li>
               <li>New York Mets
               </li>
               <li>Philadelphia Phillies
               </li>
               <li>Washington Nationals
               </li>             </ul>
           </li>
           <li id="nlc">Central
             <ul>
               <li>Chicago Cubs
               </li>
               <li>Cincinnati Reds
               </li>
               <li>Milwaukee Brewers
               </li>
               <li>Pittsburgh Pirates
               </li>
               <li>St. Louis Cardinals
               </li>             </ul>
           </li>
           <li id="nlw">West
             <ul>
               <li>Arizona Diamondbacks
               </li>
               <li>Colorado Rockies
               </li>
               <li>Los Angeles Dodgers
               </li>
               <li>San Diego Padres
               </li>
               <li>San Francisco Giants
               </li>             </ul>
           </li>         </ul>
       </li>     </ul>   </nav> </nav>

In style element (<style>) within head element:


#ale ul,
#alw ul,
#nl ul
 { display: none; }

display

Full list for the American League:

American League
- East
  - Baltimore Orioles
  - Boston Red Sox
  - New York Yankees
  - Toronto Blue Jays
  - Tampa Bay Rays
- Central
  - Chicago White Sox
  - Cleveland Indians
  - Detroit Tigers
  - Kansas City Royals
  - Minnesota Twins
- West
  - Houston Astros
  - Los Angeles Angels
  - Oakland Athletics
  - Seattle Mariners
  - Texas Rangers
National League
- East
  - Atlanta Braves
  - Miami Marlins
  - New York Mets
  - Philadelphia Phillies
  - Washington Nationals
- Central
  - Chicago Cubs
  - Cincinnati Reds
  - Milwaukee Brewers
  - Pittsburgh Pirates
  - St. Louis Cardinals
- West
  - Arizona Diamondbacks
  - Colorado Rockies
  - Los Angeles Dodgers
  - San Diego Padres
  - San Francisco Giants

Lists as Side Navigation

Key points:

remove list styling
make "a" element "block" display

Default styling:
navigation lists

Note: "a" display property is set to "block". This makes the hyperlink active over the whole area, not just with the text.

Example 7.2 - lists as navigation - Example 7.2 (Without Styles)

Markup
Style
Screenshot


 <nav id="navigation1">
   <ul>
     <li>
       <a href="http://www.baylor.edu/">Baylor       </a>
     </li>
     <li>
       <a href="http://www.iastate.edu/">Iowa State       </a>
     </li>
     <li>
       <a href="http://www.ku.edu/">Kansas       </a>
     </li>
     <li>
       <a href="http://www.ksu.edu/">Kansas State       </a>
     </li>
     <li>
       <a href="http://www.ou.edu/">Oklahoma       </a>
     </li>
     <li>
       <a href="http://www.okstate.edu/">Oklahoma State       </a>
     </li>
     <li>
       <a href="http://www.tcu.edu/">Texas Christian       </a>
     </li>
     <li>
       <a href="http://www.utexas.edu/">Texas       </a>
     </li>
     <li>
       <a href="http://www.ttu.edu/">Texas Tech       </a>
     </li>
     <li>
       <a href="http://www.wvu.edu/">West Virginia       </a>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example2.css"/>

In example2.css

#navigation1 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  width: 15em;
  border-right: 1px solid #333;
  margin-bottom: 1em;
  background-color: #ddd;
  color: #900;
}
#navigation1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation1 ul li {
  margin: 0;
  border-top: 1px solid #333;
}
#navigation1 ul li a {
  display: block;
  background-color: #ddd;
  border-top: 1px solid #333;
  border-left: 5px solid #333;
  text-decoration: none;
  padding: 5px 2px 5px 0.5em;
}
#navigation1 ul li a:link,
#navigation1 ul li a:visited
{ color: #900; }
#navigation1 ul li a:hover {
     color: #fff;
     background-color: #900;}

navigation lists

Lists as Navigation

Nested list styled as "clamshell" navigation.

remove list styling
make "a" element "block" display
styles for secondary nested lists (e.g. selector for ul ul a)
display: none for nested lists that you don't want to display

Example 7.3 - Nested lists for 'clamshell' navigation - Example 7.3 (Without Styles)

<nav id="navclam"><ul><li><a href="http://big12sports.collegesports.com/">Big XII</a><ul><li><a href="http://www.baylor.edu/">Baylor</a></li><li><a href="http://www.iastate.edu/">Iowa State</a></li><li><a href="http://www.ku.edu/">Kansas</a></li><li><a href="http://www.ksu.edu/">Kansas State</a></li><li><a href="http://www.ou.edu/">Oklahoma</a></li><li><a href="http://www.okstate.edu/">Oklahoma State</a></li><li><a href="http://www.tcu.edu/">Texas Christian</a></li><li><a href="http://www.utexas.edu/">Texas</a></li><li><a href="http://www.ttu.edu/">Texas Tech</a></li><li><a href="http://www.wvu.edu/">West Virginia</a></li></ul></li><li><a href="http://www.ivyleaguesports.com/">Ivy League</a><ul class="collapse"><li><a href="http://www.brown.edu/">Brown</a></li><li><a href="http://www.columbia.edu/">Columbia</a></li><li><a href="http://www.cornell.edu/">Cornell</a></li><li><a href="http://www.dartmouth.edu/">Dartmouth</a></li><li><a href="http://www.harvard.edu/">Harvard</a></li><li><a href="http://www.upenn.edu/">Penn</a></li><li><a href="http://www.princeton.edu/">Princeton</a></li><li><a href="http://www.yale.edu/">Yale</a></li></ul></li><li><a href="http://www.pac-12.com/">Pac 12</a><ul class="collapse"><li><a href="http://www.arizona.edu/">Arizona</a></li><li><a href="http://www.asu.edu/">Arizona State</a></li><li><a href="http://www.berkeley.edu/">California</a></li><li><a href="http://www.cu.edu/">Colorado</a></li><li><a href="http://www.uoregon.edu/">Oregon</a></li><li><a href="http://www.oregonstate.edu/">Oregon State</a></li><li><a href="http://www.stanford.edu/">Stanford</a></li><li><a href="http://www.ucla.edu/">UCLA</a></li><li><a href="http://www.usc.edu/">USC</a></li><li><a href="http://www.utah.edu/">Utah</a></li><li><a href="http://www.washington.edu/">Washington</a></li><li><a href="http://www.wsu.edu/">Washington State</a></li></ul></li></ul></nav>

#navclam {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  width: 10em;
  border-right: 1px solid #333;
  margin-bottom: 1em;
  background-color: #ddd;
  color: #900;
}
#navclam ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navclam ul li {
  margin: 0;
  border-top: 1px none #333;
}
#navclam ul li a {
  display: block;
  background-color: #ccc;
  border-top: 1px none #333;
  border-right: 1px solid #333;
  border-bottom: thin dotted #333;
  border-left: 5px solid #333;
  text-decoration: none;
  padding: 5px 2px 5px 0.5em;
}
#navclam a:link {
  color: #900;
}
#navclam a:visited {
  color: #900;
}
#navclam a:hover {
  color: #fff;
  background-color: #900;
  border-top: 1px outset #333;
  border-right: 1px outset #333;
  border-bottom: 1px outset #333;
  border-left: 5px outset #333;
}
#navclam a:active {
  color: #fff;
  background-color: #900;
  border-top: 1px inset #333;
  border-right: 1px inset #333;
  border-bottom: 1px inset #333;
  border-left: 5px inset #333;
}
#navclam ul ul {
  list-style: none;
}
#navclam ul ul a {
  padding-left: 1.5em;
  font-size: 90%;
  font-weight: normal;
}
#navclam ul.collapse {
  display: none;
}

Markup
Style
Screenshot


 <nav id="navclam">
   <ul>
     <li>
       <a href="http://big12sports.collegesports.com/">Big XII       </a>
       <ul>
         <li>
           <a href="http://www.baylor.edu/">Baylor           </a>
         </li>
         <li>
           <a href="http://www.iastate.edu/">Iowa State           </a>
         </li>
         <li>
           <a href="http://www.ku.edu/">Kansas           </a>
         </li>
         <li>
           <a href="http://www.ksu.edu/">Kansas State           </a>
         </li>
         <li>
           <a href="http://www.ou.edu/">Oklahoma           </a>
         </li>
         <li>
           <a href="http://www.okstate.edu/">Oklahoma State           </a>
         </li>
         <li>
           <a href="http://www.tcu.edu/">Texas Christian           </a>
         </li>
         <li>
           <a href="http://www.utexas.edu/">Texas           </a>
         </li>
         <li>
           <a href="http://www.ttu.edu/">Texas Tech           </a>
         </li>
         <li>
           <a href="http://www.wvu.edu/">West Virginia           </a>
         </li>       </ul>
     </li>
     <li>
       <a href="http://www.ivyleaguesports.com/">Ivy League       </a>
       <ul class="collapse">
         <li>
           <a href="http://www.brown.edu/">Brown           </a>
         </li>
         <li>
           <a href="http://www.columbia.edu/">Columbia           </a>
         </li>
         <li>
           <a href="http://www.cornell.edu/">Cornell           </a>
         </li>
         <li>
           <a href="http://www.dartmouth.edu/">Dartmouth           </a>
         </li>
         <li>
           <a href="http://www.harvard.edu/">Harvard           </a>
         </li>
         <li>
           <a href="http://www.upenn.edu/">Penn           </a>
         </li>
         <li>
           <a href="http://www.princeton.edu/">Princeton           </a>
         </li>
         <li>
           <a href="http://www.yale.edu/">Yale           </a>
         </li>       </ul>
     </li>
     <li>
       <a href="http://www.pac-12.com/">Pac 12       </a>
       <ul class="collapse">
         <li>
           <a href="http://www.arizona.edu/">Arizona           </a>
         </li>
         <li>
           <a href="http://www.asu.edu/">Arizona State           </a>
         </li>
         <li>
           <a href="http://www.berkeley.edu/">California           </a>
         </li>
         <li>
           <a href="http://www.cu.edu/">Colorado           </a>
         </li>
         <li>
           <a href="http://www.uoregon.edu/">Oregon           </a>
         </li>
         <li>
           <a href="http://www.oregonstate.edu/">Oregon State           </a>
         </li>
         <li>
           <a href="http://www.stanford.edu/">Stanford           </a>
         </li>
         <li>
           <a href="http://www.ucla.edu/">UCLA           </a>
         </li>
         <li>
           <a href="http://www.usc.edu/">USC           </a>
         </li>
         <li>
           <a href="http://www.utah.edu/">Utah           </a>
         </li>
         <li>
           <a href="http://www.washington.edu/">Washington           </a>
         </li>
         <li>
           <a href="http://www.wsu.edu/">Washington State           </a>
         </li>       </ul>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example3.css"/>

In example3.css

#navclam {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  width: 10em;
  border-right: 1px solid #333;
  margin-bottom: 1em;
  background-color: #ddd;
  color: #900;
}
#navclam ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navclam ul li {
  margin: 0;
  border-top: 1px none #333;
}
#navclam ul li a {
  display: block;
  background-color: #ccc;
  border-top: 1px none #333;
  border-right: 1px solid #333;
  border-bottom: thin dotted #333;
  border-left: 5px solid #333;
  text-decoration: none;
  padding: 5px 2px 5px 0.5em;
}
#navclam a:link {
  color: #900;
}
#navclam a:visited {
  color: #900;
}
#navclam a:hover {
  color: #fff;
  background-color: #900;
  border-top: 1px outset #333;
  border-right: 1px outset #333;
  border-bottom: 1px outset #333;
  border-left: 5px outset #333;
}
#navclam a:active {
  color: #fff;
  background-color: #900;
  border-top: 1px inset #333;
  border-right: 1px inset #333;
  border-bottom: 1px inset #333;
  border-left: 5px inset #333;
}
#navclam ul ul {
  list-style: none;
}
#navclam ul ul a {
  padding-left: 1.5em;
  font-size: 90%;
  font-weight: normal;
}
#navclam ul.collapse {
  display: none;
}

lists as navigation

Default styling of nested list:
lists as navigation

Dropdown Menus

Key points:

Make the list 'horizontal'
Hide the secondary lists
Use the CSS ":hover" pseudo-class to change secondary list display property

American League dropdown

Example 7.4 - drop down menu - Example 7.4 (Without Styles)

Markup
Style

 
 <ul id="dropdown1">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore Orioles         </a>
       </li>
       <li>
         <a href="#">Boston Red Sox         </a>
       </li>
       <li>
         <a href="#">New York Yankees         </a>
       </li>
       <li>
         <a href="#">Tampa Bay Rays         </a>
       </li>
       <li>
         <a href="#">Toronto Blue Jays         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago White Sox         </a>
       </li>
       <li>
         <a href="#">Cleveland Indians         </a>
       </li>
       <li>
         <a href="#">Detroit Tigers         </a>
       </li>
       <li>
         <a href="#">Kansas City Royals         </a>
       </li>
       <li>
         <a href="#">Minnesota Twins         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston Astros         </a>
       </li>
       <li>
         <a href="#">Los Angeles Angels         </a>
       </li>
       <li>
         <a href="#">Oakland Athletics         </a>
       </li>
       <li>
         <a href="#">Seattle Mariners         </a>
       </li>
       <li>
         <a href="#">Texas Rangers         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) within head element:

#dropdown1 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
#dropdown1 li {
  flex-basis: 12em;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  display: block;
}
#dropdown1 li ul {
  display: none;
  padding: 0;
  margin:0;
  }
#dropdown1 li:hover ul { display: block; }

Dropdown Menus

Example 7.5 - drop-down menu - Example 7.5 (Without Styles)

Markup
Style
Screenshot

 
 <ul id="dropdown2">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore Orioles         </a>
       </li>
       <li>
         <a href="#">Boston Red Sox         </a>
       </li>
       <li>
         <a href="#">New York Yankees         </a>
       </li>
       <li>
         <a href="#">Tampa Bay Rays         </a>
       </li>
       <li>
         <a href="#">Toronto Blue Jays         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago White Sox         </a>
       </li>
       <li>
         <a href="#">Cleveland Indians         </a>
       </li>
       <li>
         <a href="#">Detroit Tigers         </a>
       </li>
       <li>
         <a href="#">Kansas City Royals         </a>
       </li>
       <li>
         <a href="#">Minnesota Twins         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston Astros         </a>
       </li>
       <li>
         <a href="#">Los Angeles Angels         </a>
       </li>
       <li>
         <a href="#">Oakland Athletics         </a>
       </li>
       <li>
         <a href="#">Seattle Mariners         </a>
       </li>
       <li>
         <a href="#">Texas Rangers         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) within head element:

#dropdown2 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
#dropdown2  li {
  flex-basis: 15em;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0;
  margin: 0;
  display: block;
}
#dropdown2 li ul {
  display: none;
  padding: 0;
  margin:0;
  }
#dropdown2 li:hover ul { display: block; }
#dropdown2  li {
  border: thin solid navy;
  font-family: calibri,verdana,tahoma,helvetica,sans-serif;
  background-color: #ccf;
  }
#dropdown2 ul li { background-color: #eef; }
#dropdown2 a {display:block; padding: 0.25em;}
#dropdown2 a:link,
#dropdown2 a:visited,
#dropdown2 a:hover,
#dropdown2 a:active
  { text-decoration: none; font-weight: bold; }
#dropdown2 a:hover { background-color: navy; color: #ccf; }

dropdown

Dropdown Menus: Vertical

dropdown

Example 7.6 - drop-down/out menu - Example 7.6 (Without Styles)

Markup
Style

 
 <ul id="dropdown3">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore Orioles         </a>
       </li>
       <li>
         <a href="#">Boston Red Sox         </a>
       </li>
       <li>
         <a href="#">New York Yankees         </a>
       </li>
       <li>
         <a href="#">Tampa Bay Rays         </a>
       </li>
       <li>
         <a href="#">Toronto Blue Jays         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago White Sox         </a>
       </li>
       <li>
         <a href="#">Cleveland Indians         </a>
       </li>
       <li>
         <a href="#">Detroit Tigers         </a>
       </li>
       <li>
         <a href="#">Kansas City Royals         </a>
       </li>
       <li>
         <a href="#">Minnesota Twins         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston Astros         </a>
       </li>
       <li>
         <a href="#">Los Angeles Angels         </a>
       </li>
       <li>
         <a href="#">Oakland Athletics         </a>
       </li>
       <li>
         <a href="#">Seattle Mariners         </a>
       </li>
       <li>
         <a href="#">Texas Rangers         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) within head element:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  position: relative;
  width: 15em;
}
li ul {
  display: none;
  position: absolute;
  top: 1.7em;
  left: 0;
}
li > ul {
  top: auto;
  left: auto;
}
li:hover ul { display: block; }

#dropdown3 li ul {
  margin-left: 15em;
  margin-top: -1.8em;
}
#dropdown3  li {
  border: thin solid navy;
  font-family: calibri,verdana,tahoma,helvetica,sans-serif;
  background-color: #ccf;
  }
#dropdown3 ul li { background-color: #eef; }
#dropdown3 a {display:block; padding: 0.25em;}
#dropdown3 a:link,
#dropdown3 a:visited,
#dropdown3 a:hover,
#dropdown3 a:active
  { text-decoration: none; font-weight: bold; }
#dropdown3 a:hover { background-color: navy; color: #ccf; }

Breadcrumb Navigation

screenshot

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.

Example 7.7 - Nested lists for 'breadcrumb' navigation - Example 7.7 (Without Styles)

Markup
Style


 <nav id="breadcrumbf">
   <ul>
     <li>
       <a href="#">Top       </a>
     </li>
     <li>
       <a href="#">Science       </a>
     </li>
     <li>
       <a href="#">Biology       </a>
     </li>
     <li>
       <a href="#">Genetics       </a>
     </li>
     <li>
       <a href="#">Genomics       </a>
     </li>
     <li>
       <span>Pharmacogenetics       </span>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example7.css"/>

In example7.css

/*
  Order of pseudo-"a" elements:
  LoVe HAte (Link, Visited, Hover, Active
*/
 #breadcrumbf a:link, #breadcrumbf a:visited, #breadcrumbf a:hover, #breadcrumbf a:active, #breadcrumbf li span {
    color: navy;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
    padding: 0.5em;
    text-decoration: none;
}
#breadcrumbf a:hover {
    text-decoration: underline;
}
#breadcrumbf li span {
    color: black;
}
#breadcrumbf ul {
    background-color: #ddd;
    padding-left: 0px;
    margin-left: 0px;
}
#breadcrumbf ul li {
    display: inline;
}
#breadcrumbf li:first-child {
    background-image: none;
    padding-left: 0px;
}
#breadcrumbf li {
    background-image: url(images/arrow.gif);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 25px;
}

Breadcrumb Navigation

Example 7.8 - Nested lists for 'breadcrumb' navigation - Example 7.8 (Without Styles)

Markup
Style


 <nav id="breadcrumbf2">
   <ul>
     <li>
       <a href="#">Top       </a>
     </li>
     <li>
       <a href="#">Science       </a>
     </li>
     <li>
       <a href="#">Biology       </a>
     </li>
     <li>
       <a href="#">Genetics       </a>
     </li>
     <li>
       <a href="#">Genomics       </a>
     </li>
     <li>
       <span>Pharmacogenetics       </span>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example8.css"/>

In example8.css

/*
  Order of pseudo-"a" elements:
  LoVe HAte (Link, Visited, Hover, Active
*/
 #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span {
    color: navy;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
    text-decoration: none;
}
#breadcrumbf2 li::after {
  content: "  \279E  ";
}
#breadcrumbf2 li:last-child::after {
  content: "";
}
#breadcrumbf2 a:hover {
    text-decoration: underline;
}
#breadcrumbf2 li span {
    color: black;
}
#breadcrumbf2 ul {
    background-color: #ddd;
    padding-left: 0px;
    margin-left: 0px;
}
#breadcrumbf2 ul li {
    display: inline;
}

Image to Replace Text - for a logo, wordmark, etc.

Replacing an "h1" with an image.

This technique shows how to replace the text in an 'h1' element with an image.
Set height according to image
Use a very large negative text-indent
The advantage is that the image is displayed and the element remains an h1 and remains accessible

CSS Rounded Borders

rounded box

CSS3 border-radius

Example 7.9 - CSS3 border-radius - Example 7.9 (Without Styles)

<div class="box rounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="box tightrounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="box looserounded"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>

Markup
Style
Screenshot

 
 <div class="box rounded">
   <h3>Lorem Ipsum   </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="box tightrounded">
   <h3>Lorem Ipsum   </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="box looserounded">
   <h3>Lorem Ipsum   </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>

In style element (<style>) within head element:

.box {
      width: 260px;
      padding: 0 40px;
      border: 3px solid #009999;
      background-color: #CCFFFF;
      margin: 1em;
  }
  .rounded {
       border-radius: 25px;
  }
  .tightrounded {
       border-radius: 10px;
  }
  .looserounded {
       border-radius: 50px;
  }

border radius

CSS Shadows

shadows
Photo by D Sharon Pruitt

box-shadow

box-shadow (MDN)
box-shadow: x-offset y-offset color

boxshadow

CSS3 box-shadow

Example 7.10 - CSS3 box-shadow - Example 7.10 (Without Styles)

Markup
Style
Screenshot

 
 <div class="box shadow">
   <h3>Lorem Ipsum   </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>

In style element (<style>) within head element:

.box {
      width: 260px;
      padding: 0 40px;
      border: 3px solid #009999;
      background-color: #CCFFFF;
  }
  .shadow {
      box-shadow: 5px 5px #99cccc;
  }

box shadow

Text Shadow

textshadow

text-shadow

Example 7.11 - CSS3 text-shadow - Example 7.11 (Without Styles)

Markup
Style
Display
Screenshot


 <div>
   <h3 class="shadow">Only the Shadow Knows   </h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>

In style element (<style>) within head element:

h3.shadow {
    background-color: #eef;
    font-size: 24pt;
    padding: 0.25em;
    color: #900;
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 3px 4px 4px rgba(150,150,150,0.5)
  }

Only the Shadow Knows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.

text shadow

Text Shadow

Example: Text Shadow with Background Image

Opacity - RGBA - red, green, blue, alpha

A = alpha channel, used for opacity.
Values of 0 to 1, where 0 is fully transparent, 1 is fully opaque

demo of opacity

Example 7.12 - CSS3 text-shadow - Example 7.12 (Without Styles)

Markup
Style
Display
Screenshot


 <div class="opacity-demo">
   <p style="color: rgba(0,0,0,1)">Opacity of 1
   </p>
   <p style="color: rgba(0,0,0,0.75)">Opacity of 0.75
   </p>
   <p style="color: rgba(0,0,0,0.5)">Opacity of 0.5
   </p>
   <p style="color: rgba(0,0,0,0.25)">Opacity of 0.25
   </p>
   <p style="color: rgba(0,0,0,0)">Opacity of 0
   </p>
 </div>

In style element (<style>) within head element:

.opacity-demo {
    background-image: url('images/satin.png');
    background-size: cover;
    color: white;
  }
  .opacity-demo p { font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

Opacity of 1

Opacity of 0.75

Opacity of 0.5

Opacity of 0.25

Opacity of 0

text shadow

Opacity

demo of opacity

Example 7.13 - CSS3 text-shadow - Example 7.13 (Without Styles)

Markup
Style
Display
Screenshot


 <div class="opacity-demo">
   <p style="background-color: rgba(100,100,100,1)">Opacity of 1
   </p>
   <p style="background-color: rgba(100,100,100,0.75)">Opacity of 0.75
   </p>
   <p style="background-color: rgba(100,100,100,0.5)">Opacity of 0.5
   </p>
   <p style="background-color: rgba(100,100,100,0.25)">Opacity of 0.25
   </p>
   <p style="background-color: rgba(100,100,100,0)">Opacity of 0
   </p>
 </div>

In style element (<style>) within head element:

.opacity-demo {
   background-image: url('images/satin.png');
   background-size: cover;
   color: white;
 }
 .opacity-demo p { color: #ffffff; font-size: 200%; font-weight: bold; font-family: helvetica,sans-serif;}

Opacity of 1

Opacity of 0.75

Opacity of 0.5

Opacity of 0.25

Opacity of 0

text shadow

CSS Gradients

See Gradient Generator Tool from learnui.design

linear-gradient
radial-gradient

linear gradient

linear-gradient

linear gradient

linear gradient

Example 7.14 - CSS3 Gradient - Example 7.14 (Without Styles)

<div class="highlight1"><p>linear-gradient(0deg,red,black)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight2"><p>linear-gradient(90deg,red,black)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight3"><p>linear-gradient(45deg,black,yellow)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight4"><p>linear-gradient(90deg,red,purple,blue)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight5"><p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>

Markup
Style
Screenshot

 
 <div class="highlight1">
   <p>linear-gradient(0deg,red,black)
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight2">
   <p>linear-gradient(90deg,red,black)
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight3">
   <p>linear-gradient(45deg,black,yellow)
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight4">
   <p>linear-gradient(90deg,red,purple,blue)
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight5">
   <p>linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>

In style element (<style>) within head element:

.highlight1 {
    background-image: linear-gradient(0deg,red,black);
    color: white;
    line-height: 200%;
  }
  .highlight2 {
    background-image: linear-gradient(90deg,red,black);
    color: white;
    line-height: 200%;
  }
  .highlight3 {
    background-image: linear-gradient(45deg,black,yellow);
    color: white;
    line-height: 200%;
  }
  .highlight4 {
    background-image: linear-gradient(90deg,red,purple,blue);
    color: white;
    line-height: 200%;
  }
  .highlight5 {
    background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet);
    color: white;
    line-height: 200%;
  }

gradient

radial-gradient

radial gradient

radial gradient

Example 7.15 - CSS3 Gradient - Example 7.15 (Without Styles)

<div class="highlight6"><p>circle, red, black<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight7"><p>ellipse red black<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight8"><p>circle,red,orange,yellow,green,blue,indigo,violet<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div><div class="highlight9"><p>ellipse,red,orange,yellow,green,blue,indigo,violet<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet.
  Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam
  eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus
  ullamcorper purus adipiscing porttitor sed ut lectus.</p></div>

Markup
Style
Screenshot

 
 <div class="highlight6">
   <p>circle, red, black
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight7">
   <p>ellipse red black
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight8">
   <p>circle,red,orange,yellow,green,blue,indigo,violet
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>
 <div class="highlight9">
   <p>ellipse,red,orange,yellow,green,blue,indigo,violet
     <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim volutpat diam, ac porttitor orci commodo sit amet. Sed ultrices arcu et lacus sagittis volutpat. Nam ac lectus est. Etiam eget erat lacus. Donec eget auctor tortor. Mauris sit amet lectus ullamcorper purus adipiscing porttitor sed ut lectus.
   </p>
 </div>

In style element (<style>) within head element:

.highlight6 {
    background-image: radial-gradient(circle,red,blue);
    color: white;
    line-height: 200%;
  }
  .highlight7 {
    background-image: radial-gradient(ellipse,red,blue);
    color: white;
    line-height: 200%;
  }
  .highlight8 {
    background-image: radial-gradient(circle,red,yellow,green,blue,indigo,violet);
    color: white;
    line-height: 200%;
  }
  .highlight9 {
    background-image: radial-gradient(ellipse,red,yellow,green,blue,indigo,violet);
    color: white;
    line-height: 200%;
  }

gradient

Images Essentials

Use an appropriate format (JPEG for photographs; PNG for wordmarks, illustrations; SVG sometimes)
If adjusting an image, start with the highest resolution, lowest compression available!
- Set an appropriate image resolution
- Set an appropriate compression

Images and the Web

Content
Design

Images and Markup

Two ways of including images:

Markup: img element

alt attribute
height and width attributes

<img src="images/shield.png"
 alt="Harvard Veritas" height="328" width="281"/>

CSS: background-image property

#header {
  background-image: url(images/shield.png);
  background-repeat: no-repeat;
}

Graphics Formats for the Web

PNG: Portable Network Graphic; .png
JPEG: Joint Photographic Experts Group; .jpeg or .jpg
SVG: Scalable Vector Graphic; .svg and .svgz
WebP: WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.; .webp
GIF: Graphics Interchange Format; .gif

Other formats

Image formats you might encounter, but aren't super-relevant for the web:

TIFF
JPEG 2000 (JP2)
HEIC (Apple Live Photos)
RAW
BMP

image.jpg or image.JPG or image.jpeg — Does it matter?

JPG or jpg

Yes. If your filename is "beach.JPG" then you need to reference it as "beach.JPG" -- having "beach.jpg" in the URL won't work!
No. As long as the case of your filenames match the case in your URL references you'll be fine.

jpeg or jpg

No. Media types can be mapped to multiple file extensions, so generally either picture.jpg or picture.jpeg filenames are fine.
And for JPEG images, the media type (also known as MIME type) is "image/jpeg"

Graphics: Vector and Bitmap

Bitmap	Vector
Original image (PNG):	Original image (SVG):
Magnified (16x)	Magnified (16x)
Bitmap formats: PNG, JPEG, GIF	Vector formats: SVG

Bitmap

Vector

Original image (PNG):
bitmap stars

Original image (SVG):
stars

Magnified (16x)
magnified (16x) bitmap stars

Bitmap formats:
PNG, JPEG, GIF

Vector formats:
SVG

Colors

$prism light refraction$

RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

decimal numbers (0 to 255)
hexadecimal numbers (00 to ff)
percentages (0 to 100%)

Color Depth

RGB color is a 24-bit system (16 million colors)
8 bits (256 colors) for each channel (red, green, blue).
2⁸x2⁸x2⁸ = 2^{(8 + 8 + 8)} = 2²⁴x = 16,777,216

Bits	Colors
1	2¹ = 2
2	2² = 4
3	2³ = 8
4	2⁴ = 16
5	2⁵ = 32
6	2⁶ = 64
7	2⁷ = 128
8	2⁸ = 256
16	2¹⁶ = 65,536
24	2²⁴ = 17 x 10⁶ (millions)
32	2³² = 4.3 x 10⁹

RGB

Three channels specified with decimal values (each channel 0 to 255):
rgb(50, 150, 0)
Three channels specified with hexadecimal values (each channel 00 to ff):
#993333
Three channels specified with percentage values (each channel 0% to 100%):
rgb(50%, 10%, 75%)

Indexed Color Systems

Palette

An 8-bit indexed image has a palette of up to 256 colors that the image can contain. Color information is not stored for each pixel, but rather just a reference to which color in the palette.

Palettes

Exact (if 256 or fewer colors)
Adaptive (weighted based upon colors in document)
Web Palette (216 Web Safe Colors)
System
- Windows
- Macintosh

But what happens to the other colors?

If you take a photo that is saved in an RGB system (millions of colors) and then convert it to an indexed system with 256 colors, what happens?

dither
color-shift

Bitmap images: Size and Quality

Factors that can contribute to image size:

Dimension
Compression
Number of Colors

Graphics Formats for the Web

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics WebP

Color System

8 bit indexed (256 colors)

RGB (24 bit; millions of colors)

Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics	WebP
Color System	8 bit indexed (256 colors)	RGB (24 bit; millions of colors)	8 bit indexed (256 colors) RGB (24 bit; millions of colors)	RGB	RGB
Compression	Lossless Compression (LZW; horizontal repeating units)	"Lossy" Compression (compression optimized for gradual color changes)	Lossless Compression	Lossless Compression	Lossless and Lossy
Other Features	`.gif` file extension Transparency Animation	`.jpg` and `.jpeg` file extensions No Transparency No Animation	`.png` file extension Transparency	`.svg` file extension Vector-based Transparency XML format	25% smaller than equivalent PNGs and JPEGs. Supports transparency
Typical Uses	Illustrations (logos, icons) Animated banners and icons Images with small dimension	Photographs	Any	Illustrations Graphs, Charts, Maps - 'plain' and 'interactive'	Any
Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics	WebP
Photograph 250 × 188 px	29.3 kb	16.8 kb	25.8 kb (indexed, 8-bit)	81.9 kb (RGB, 24-bit)	N/A	9.6 kb
Illustration 148 × 179 px	1.47 kb	6.12 kb	1.02 kb (indexed, 8-bit)	1.89 kb (RGB, 24-bit)	0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit)	0.724 kb

8 bit indexed (256 colors)
RGB (24 bit; millions of colors)

RGB

Compression Lossless Compression (LZW; horizontal repeating units) "Lossy" Compression
(compression optimized for gradual color changes) Lossless Compression Lossless Compression Lossless and Lossy

Other Features

.gif file extension
Transparency
Animation

.jpg and .jpeg file extensions
No Transparency
No Animation

.png file extension
Transparency

.svg file extension
Vector-based
Transparency
XML format

25% smaller than equivalent PNGs and JPEGs.
Supports transparency

Typical Uses

Illustrations (logos, icons)
Animated banners and icons
Images with small dimension

Photographs

Illustrations
Graphs, Charts, Maps - 'plain' and 'interactive'

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics WebP

Photograph
250 × 188 px 29.3 kb 16.8 kb 25.8 kb (indexed, 8-bit) 81.9 kb (RGB, 24-bit) N/A 9.6 kb

Illustration
148 × 179 px 1.47 kb 6.12 kb 1.02 kb (indexed, 8-bit) 1.89 kb (RGB, 24-bit) 0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit) 0.724 kb

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.
Public Domain Dedication

Illustration image from the original works of David Heitmeyer

JPEG

Joint Photographic Experts Group

Property JPEG
Joint Photographic Experts Group

Color System RGB (24 bit; millions of colors)

Compression "Lossy" Compression
(compression optimized for gradual color changes)

Other Features

Property	JPEG Joint Photographic Experts Group
Color System	RGB (24 bit; millions of colors)
Compression	"Lossy" Compression (compression optimized for gradual color changes)
Other Features	`.jpg` and `.jpeg` file extensions No Transparency No Animation
Typical Uses	Photographs
Property	JPEG Joint Photographic Experts Group
Photograph 250 × 188 px	16.8 kb
Illustration 148 × 179 px	6.12 kb

.jpg and .jpeg file extensions
No Transparency
No Animation

Typical Uses

Photographs

Property JPEG
Joint Photographic Experts Group

Photograph
250 × 188 px 16.8 kb

Illustration
148 × 179 px 6.12 kb

JPEG Compression

The amount of compression (quality of image) for a JPEG image can be chosen (from a scale of 0 to 100). The image quality is inversely related to the amount of compression since the compression algorithm is "lossy".

Properties	Image
Quality: 80 34.1 kb
Quality: 70 26.0 kb
Quality: 60 22.4 kb
Quality: 50 17.0 kb
Quality: 40 14.3 kb
Quality: 30 6.97 kb
Quality: 20 4.80 kb
Quality: 10 3.75 kb
Quality: 1 3.21 kb

JPEG Compression Artifacts

Typically first appears at boundaries in images. Portions of image can also become "blocky".

Schlieren at boundaries:
jpeg artifacts

Blockyness
jpeg artifacts

GIF

Property GIF
Graphics Interchange Format

Color System 8 bit indexed (256 colors)

Compression Lossless Compression (LZW; horizontal repeating units)

Other Features

Property	GIF Graphics Interchange Format
Color System	8 bit indexed (256 colors)
Compression	Lossless Compression (LZW; horizontal repeating units)
Other Features	`.gif` file extension Transparency Animation
Typical Uses	Illustrations (logos, icons) Animated banners and icons Images with small dimension
Property	GIF Graphics Interchange Format
Photograph 250 × 188 px	29.3 kb
Illustration 148 × 179 px	1.47 kb

.gif file extension
Transparency
Animation

Typical Uses

Illustrations (logos, icons)
Animated banners and icons
Images with small dimension

Property GIF
Graphics Interchange Format

Photograph
250 × 188 px 29.3 kb

Illustration
148 × 179 px 1.47 kb

Palettes

Palette

An 8-bit indexed image has a palette of up to 256 colors that the image can contain. Color information is not stored for each pixel, but rather just a reference to which color in the palette.

Palettes

Exact (if 256 or fewer colors)
Adaptive (weighted based upon colors in document)
Web Palette (216 Web Safe Colors)
System
- Windows
- Macintosh

Palettes: Exact, Adaptive, Web 216

Exact Palette
Image	Palette

Adaptive Palette
Image	Palette


Web 216 Palette
Image	Palette

Adaptive Palette: Shift and Dither

Color Shift

Image (16 colors; Color Shift)	Zoom

Dither

Image (16 colors; Dither)	Zoom

GIF Images and Bit Depth: Color Shift

Properties	Image	Palette (adaptive)
8 bit 256 colors 46.3 kb
7 bit 128 colors 36.2 kb
6 bit 64 colors 28.9 kb
5 bit 32 colors 21.9 kb
4 bit 16 colors 16.5 kb
3 bit 8 colors 10.9 kb
2 bit 4 colors 7.31 kb
1 bit 2 colors 2.84 kb

GIF Images and Bit Depth: Dither

Properties	Image	Palette (adaptive)
8 bit 256 colors 64.9 kb
7 bit 128 colors 52.3 kb
6 bit 64 colors 43.4 kb
5 bit 32 colors 34.7 kb
4 bit 16 colors 26.7 kb
3 bit 8 colors 18.6 kb
2 bit 4 colors 14.2 kb
1 bit 2 colors 5.86 kb

Compression for Indexed GIF

GIF LZW compression operates on horizontal blocks of the same color. Here are two images that are identical except for a 90 degree rotation. The vertical stripe GIF image is nearly twice as large as the horizontal stripe GIF image. The PNG images are the same size.

Format	Horizontal Stripes	Vertical Stripes
GIF	471 bytes	911 bytes
PNG	232 bytes	221 bytes

Format

Horizontal
Stripes

Vertical
Stripes

GIF

471 bytes

911 bytes

Compression and Dithering

A purple shade was created by alternating red and blue pixels.
32× magnification:
purple closeup

200×200px Image, Dithered and Solid
Image Format	Dithered Grid	Solid
PNG	225 bytes	209 bytes
GIF	601 bytes	303 bytes

Transparency

With PNG images, a color in the palette can be designated as "transparent". This lets any background colors or background images show through the transparent portions.

Star Image

satin
Background Image
(satin.png)

Format

Background Color
(gray)

Background Image
satin.png

GIF
No transparency

GIF
White is transparent

GIF
Blue is transparent

GIF Animation

GIF supports animation
giphy.com

PNG

Property PNG
Portable Network Graphic

Color System

Property	PNG Portable Network Graphic
Color System	8 bit indexed (256 colors) RGB (24 bit; millions of colors)
Compression	Lossless Compression
Other Features	`.png` file extension Transparency Animation through non-standard extension
Typical Uses	Any
Property	PNG Portable Network Graphic
Photograph 250 × 188 px	25.8 kb (indexed, 8-bit)	81.9 kb (RGB, 24-bit)
Illustration 148 × 179 px	1.02 kb (indexed, 8-bit)	1.89 kb (RGB, 24-bit)

8 bit indexed (256 colors)
RGB (24 bit; millions of colors)

Compression Lossless Compression

Other Features

.png file extension
Transparency
Animation through non-standard extension

Typical Uses

Property PNG
Portable Network Graphic

Photograph
250 × 188 px 25.8 kb (indexed, 8-bit) 81.9 kb (RGB, 24-bit)

Illustration
148 × 179 px 1.02 kb (indexed, 8-bit) 1.89 kb (RGB, 24-bit)

Compression for Indexed PNG

PNG images use a different compression algorithm than GIF. Note that for PNG, the vertical and horizontal striped images are the same size.

Format	Horizontal Stripes	Vertical Stripes
PNG	232 bytes	221 bytes
GIF	471 bytes	911 bytes

Format

Horizontal
Stripes

Vertical
Stripes

PNG

232 bytes

221 bytes

GIF

471 bytes

911 bytes

Compression and Dithering

A purple shade was created by alternating red and blue pixels.
32× magnification:
purple closeup

200×200px Image, Dithered and Solid
Image Format	Dithered Grid	Solid
PNG	225 bytes	209 bytes
GIF	601 bytes	303 bytes

Transparency

With PNG images, a color in the palette can be designated as "transparent". This lets any background colors or background images show through the transparent portions.

Star Image

satin
Background Image
(satin.png)

Format

Background Color
(gray)

Background Image
satin.png

PNG
No transparency

PNG
White is transparent

PNG
Blue is transparent

SVG

Property SVG
Scalable Vector Graphics

Type Vector

Color System RGB

Compression Lossless Compression

Other Features

Property	SVG Scalable Vector Graphics
Type	Vector
Color System	RGB
Compression	Lossless Compression
Other Features	`.svg` file extension Transparency XML format Uses CSS properties!
Typical Uses	Illustrations (logos, icons) Vector Art
Illustration 300x300px	575 bytes compressed; 1.7 kb uncompressed

.svg file extension
Transparency
XML format
Uses CSS properties!

Typical Uses

Illustrations (logos, icons)
Vector Art

Illustration
300x300px 575 bytes compressed; 1.7 kb uncompressed

Basic SVG Shapes

Basic Shapes in SVG 1.1

SVG:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="100" y="100" height="30" width="70" rx="10" ry="10"
    style="fill:green; stroke: black;"/>
  <circle cx="50" cy="20" r="15" style="fill:red; stroke: black;"/>
  <ellipse cx="60" cy="75" rx="15" ry="40" fill="yellow" stroke="black"/>
  <line x1="10" y1="3" x2="30" y2="70" stroke-width="5" stroke="magenta"/>
  <polyline fill="none" points="160,15,170,25,180,15,190,25,200,15,210,25,220,15"
    stroke="blue" stroke-width="3"/>
  <polygon points="100,80,150,40,200,60" fill="orange" stroke="black"/>
  <path d="M0 0 C 10 20, 30 20, 40 0" style="stroke: black; stroke-width: 3px; fill: transparent"  transform="translate(-20,-30)"/>
</svg>

United States Flag

Harvard Division of Continuing Education Shield

DCE Shield

Massachusetts Map

Election results by town.

Icons

svg as icons

SVG - Increasing Importance in the Future

Vector (size and resolution advantages)
HTML5 canvas element
CSS control
- CSS stylesheets
- SVG style attributes same/similar to CSS properties

SVG and D3 JS Library

D3.js
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

WebP

WebP

358 kb WebP vs 538 kb JPEG

1920 x 1280 px
hot air balloons

Comparison of Image Formats

Graphics Formats for the Web

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics WebP

Color System

8 bit indexed (256 colors)

RGB (24 bit; millions of colors)

Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics	WebP
Color System	8 bit indexed (256 colors)	RGB (24 bit; millions of colors)	8 bit indexed (256 colors) RGB (24 bit; millions of colors)	RGB	RGB
Compression	Lossless Compression (LZW; horizontal repeating units)	"Lossy" Compression (compression optimized for gradual color changes)	Lossless Compression	Lossless Compression	Lossless and Lossy
Other Features	`.gif` file extension Transparency Animation	`.jpg` and `.jpeg` file extensions No Transparency No Animation	`.png` file extension Transparency	`.svg` file extension Vector-based Transparency XML format	25% smaller than equivalent PNGs and JPEGs. Supports transparency
Typical Uses	Illustrations (logos, icons) Animated banners and icons Images with small dimension	Photographs	Any	Illustrations Graphs, Charts, Maps - 'plain' and 'interactive'	Any
Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics	WebP
Photograph 250 × 188 px	29.3 kb	16.8 kb	25.8 kb (indexed, 8-bit)	81.9 kb (RGB, 24-bit)	N/A	9.6 kb
Illustration 148 × 179 px	1.47 kb	6.12 kb	1.02 kb (indexed, 8-bit)	1.89 kb (RGB, 24-bit)	0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit)	0.724 kb

8 bit indexed (256 colors)
RGB (24 bit; millions of colors)

RGB

Compression Lossless Compression (LZW; horizontal repeating units) "Lossy" Compression
(compression optimized for gradual color changes) Lossless Compression Lossless Compression Lossless and Lossy

Other Features

.gif file extension
Transparency
Animation

.jpg and .jpeg file extensions
No Transparency
No Animation

.png file extension
Transparency

.svg file extension
Vector-based
Transparency
XML format

25% smaller than equivalent PNGs and JPEGs.
Supports transparency

Typical Uses

Illustrations (logos, icons)
Animated banners and icons
Images with small dimension

Photographs

Illustrations
Graphs, Charts, Maps - 'plain' and 'interactive'

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics WebP

Photograph
250 × 188 px 29.3 kb 16.8 kb 25.8 kb (indexed, 8-bit) 81.9 kb (RGB, 24-bit) N/A 9.6 kb

Illustration
148 × 179 px 1.47 kb 6.12 kb 1.02 kb (indexed, 8-bit) 1.89 kb (RGB, 24-bit) 0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit) 0.724 kb

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.
Public Domain Dedication

Illustration image from the original works of David Heitmeyer

Cartoon Art

GIF	PNG	JPEG	SVG	WebP
GIF 1,511 bytes	PNG; 8 bit 1,031 bytes	JPEG (Quality 100) 14,660 bytes	SVG 575 bytes (compresssed)	WebP 725 bytes
	PNG; 24 bit 1,944 bytes	JPEG (Quality 6) 1,530 bytes

GIF

PNG

JPEG

SVG

WebP

GIF
1,511 bytes
[Cartoon GIF]

PNG; 8 bit
1,031 bytes
[Cartoon PNG 8bit]

JPEG (Quality 100)
14,660 bytes
[Cartoon JPEG]

SVG
575 bytes (compresssed)
[Cartoon SVG]

WebP
725 bytes
[cartoon webp]

PNG; 24 bit
1,944 bytes
[Cartoon PNG 24bit]

JPEG (Quality 6)
1,530 bytes
[Cartoon JPEG]

Original image from the works of David P. Heitmeyer

Working with Images

Graphics Tools

Start with Original PSD/AI/etc. or High Resolution 24-bit PNG

If you contract out: get the original/source files!
Keep track of them!
Make sure others know!
Always start with the original file format (e.g. PSD, AI, etc.) or high-resolution 24-bit PNG.
Size images accordingly!
- Don't shrink full-resolution images by using "height" and "width" CSS
- Don't enlarge images from smaller ones -- you can only go one way (larger to smaller)

Elements of User Experience

elements of user experience

5 Planes in More Detail

elements of user experience

Planning and Designing a Site: Resources

Williams, Robin. The Non-designer's Design Book : Design and Typographic Principles for the Visual Novice. Fourth ed. 2015.
Harvard Library: The non-designer's design book by Robin Williams
Krug, Steve. Don't Make Me Think, Revisited : A Common Sense Approach to Web Usability. Third ed. 2014.
Harvard Library - Online Resource

Strategy

strategy plane

Clear and explicit understanding of

What does the company/organization want from the site? What is "success"?
What do the users want from the site?

Who are our Users?

Most sites get a variety of users
Some audiences will be "primary", others "secondary"
What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.

What Audiences can be identified?

University of Colorado

Dell

Audience(s)

Who are they?
What are their goals?
- their information needs
- tasks/actions they are performing

Know Your Audience

Be clear on who you are building for. Understand their needs.
User testing, market research, focus groups.
Feedback from users. Pay attention to what your users do, not just what they say.
Keep in mind that as number of target audiences increase, difficulty of web design increases.

Audiences for an Academic Department

Undergraduate Students
- Concentrators (Majors)
- Potential concentrators
- Non-concentrators
Graduate Students
Potential Graduate Students
Faculty
- Current
- Potential
Researchers
Public

AAAS

Audiences for a Fitness Club

Members
- Variety of members - personal training, injury recovery, recreational, etc.
- Swim Lessons and Swim Team
Potential Members
- For a variety of reasons

Additional Goal:

Promote Training Program and Philosophy

swymfit

Scope

Define content or functionality requirements.

What's "in" and what's "out" -- or at least what's "later".

Start broad, then narrow and refine.

scope

Content

Questions to ask about content:

Does it fit purpose of site?
Does it suit the audience?
Would your users find this useful?

Approaching a Project

What content already exists in web or other media types (brochures, pamphlets, statements, etc.).
- Adapt (or re-adapt) it for the web
What content would be good to develop for the site?
- Create it for the web
Define incremental goals to avoid "scope creep"
- Initial Phase
- Additional Phases

Think About the User

Thing on the front page of a university website

Structure

structure

Structuring Content

From Information Architecture for the World Wide Web (available through Harvard Libraries):

information architecture defined:

The structural design of shared information environments.
The combination of organization, labeling, search, and navigation systems within web sites and intranets.
The art and science of shaping information products and experiences to support usability and findability.
An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

Organize, Label, (Navigate)

Organize and Categorize
Label
Navigate

Organize

Strategy-driven: Top-down
Content-driven: Bottom-up

Plan for Growth

add new content

How to?

Sticky-notes or index cards
whiteboard or wall

Structural Models

Hierarchical
Sequential
Organic

Hierarchical

hierarchical

Library of Congress Classification

"Q" - Science
"QC" - Physics

lc system

Biological

Kingdom
- Phylum
  - Class
    - Order
      - Family
        Genus
        Species

Catalog of Life
taxonomy

Open Directory Project, Yahoo! Categories

dmoz categories

yahoo categories yahoo arts

Too deep or too shallow?

Deep

Shallow
Too deep or too shallow?

Sequential

lecture slide to illustrate sequential mode

Useful when "workflow" is important in web applications.
When order is important or part of presentation.

Organic

Wikipedia.com

webs

wikipedia web

Site Architecture

Topics
Audience
Task-Oriented
Search
Internal Organization

Label

Know your audience
Test your labels (ask your audience)
- Card Sort - physical or online, e.g. Optimal Sort
- Ask questions
  - Where can I get a driver for my HP ENVY 5540?
  - What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?
  - What IT degree programs are available?

Labels - Are there conventions?

Categories and Labels from News Sites

CNN
CNN

Fox News

ABC News

CBS
CBS

New York Times
NYT

NPR
NPR

BBC
BBC

NBC
NBC

Skeleton

Page Components

Header
Navigation
Content
Footer

Harvard Summer School

Wireframes and Sketches - "Low" to "High" Fidelity

Sketches

wireframe

Wireframes

wireframe

Prototypes

prototype

Navigation Systems

Where am I?
Where can I go?
- What is close by?
- What is further away?
Where have I been?

Don't Make Me Think: Navigation

it tells us what's here
it tells us how to use the site
it gives us confidence in the people who built it

Surface

F-Pattern

F-Shaped Pattern for Reading Web Content
F is for Fast

Non-Designer's Design Book

Good Design is as Easy as 1, 2, 3

The non-designer's design book by Robin Williams

Non-Designer's Design Book

Four Basic Principles

The non-designer's design book by Robin Williams

Colors

Non-Designer's Design Book: Chapter 7, Design with Color

Creating Color Palettes:

Home Page -- Don't Make Me Think (Steven Krug)

What is this?
What do they have here?
What can I do here?
Why should I be here and not somewhere else?

Don't make me think

Don't make me think, revisited : a common sense approach to Web usability by Steve Krug

Three Princples of Usability

Don't make me think.
It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.
Get rid of half the words on each page, then get rid of half of what is left.

Session 07 - CSS Wrap-up / Image Essentials / User Experience and Design

Topics

Housekeeping

Navigation Systems

Harvard College

Navigation and Lists

display: none

Lists as Side Navigation

Lists as Navigation

Dropdown Menus

Dropdown Menus

Dropdown Menus: Vertical

Breadcrumb Navigation

Breadcrumb Navigation

Image to Replace Text - for a logo, wordmark, etc.

CSS Rounded Borders

CSS3 border-radius

CSS Shadows

box-shadow

CSS3 box-shadow

Text Shadow

Only the Shadow Knows

Text Shadow

Opacity - RGBA - red, green, blue, alpha

Opacity

CSS Gradients

linear-gradient

radial-gradient

Images Essentials

Images and the Web

Images and Markup

Graphics Formats for the Web

Other formats

image.jpg or image.JPG or image.jpeg — Does it matter?

JPG or jpg

jpeg or jpg

Graphics: Vector and Bitmap

Colors

RGB Color Space

Color Depth

RGB

Indexed Color Systems

But what happens to the other colors?

Bitmap images: Size and Quality

Graphics Formats for the Web

JPEG

JPEG Compression

JPEG Compression Artifacts

GIF

Palettes

Palettes: Exact, Adaptive, Web 216

Exact Palette

Adaptive Palette

Web 216 Palette

Adaptive Palette: Shift and Dither

Color Shift

Dither

GIF Images and Bit Depth: Color Shift

GIF Images and Bit Depth: Dither

Compression for Indexed GIF

Compression and Dithering

Transparency

GIF Animation

PNG

Compression for Indexed PNG

Compression and Dithering

Transparency

SVG

Basic SVG Shapes

United States Flag

Harvard Division of Continuing Education Shield

Massachusetts Map

Icons

SVG - Increasing Importance in the Future

SVG and D3 JS Library

WebP

Comparison of Image Formats

Graphics Formats for the Web

Cartoon Art

Working with Images