Week Fourteen, Day 1

December 14th – 18th

Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org

snowflake decorative — courtesy of Huffington Post

9:40 Attendance & Notes

Remote Link for today (if you are not here) – Google Meets
Week 14 Go Make that Folder
Midpoint of the quarter was last Friday. Q2 Ends officially on 1/22.
Cohort B Game Day – Friday after Humanities. To Qualify: Complete with all work through Week 13! You can do it
Share

9:45 Mood Board – Design Inspirations

Presentation of web portfolio inspirations. What do you like? Share.

10:05 Responsive Typography

Last week we looked at the 3 ways to make a webpage responsive: Media Queries, Images that Resize and Fluid Layouts.

Well, Typography can also be responsive too. But first, let’s get an understanding of the basics.

Absolute Length Units

Absolute length units are considered absolute because they are not relative to any other element. These units will not scale to browser size and will always remain the same size. These include the following:

pt – points
px – pixels
in – inches
cm – centimeters
mm – millimeters
pc – picas

Pixels are really the only absolute CSS length unit we should consider using for the web. The others are mostly used for physical (not digital) measurement (like print). A pixel unit refers to the size of one “dot” of your device display (which will vary slightly with each device). Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.

Relative Length Units

Relative Length units are considered relative because they change/scale depending on the length of other elements. One common example is percentage, which is dependant on the length of the parent element.

em – relative to the element’s font-size
rem – relative to the root element’s font-size
vw – relative to 1% of your browser’s viewport width
vh – relative to 1% of your browser’s viewport height

vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width). vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than it’s height, 1vmin is equvialent to 1vw.

vmax – is the opposite. vmax uses the larger of the viewport width or height to set the size.

% – relative to 1/100 of the parent element’s width.

All of these units are used for the web. Want to see an example of all of these in action and understand the difference between em and rem- Fork my CodePen!

Single page website using vh, vw

10:25 Mask Break

10:35 Academics

11:25 Lunch

12:00 Font Awesomeness

Fonts are an important part of web design. The right font can help tell your story, create a connection of your product to your customer and helps define your image. A great and easy place to search and incorporate fonts into your web projects is Google Fonts.

There are two ways to incorporate fonts into your webpage.

You can download a font and host on your server with your website files, applying an @font-face declaration in your CSS file (there are also a bunch of other steps). Advantage is fast loading and a downloaded font provides all font file types: EOT, TTF, WOFF, WOFF2. The disadvantage is the time it take to set up and if your font goes through an update, you then have to update each of your files.
A fast alternative is to put your font html code into the <head> of your document. The final step is to specify in your CSS the rules of the font family. This process is made easy with Google Fonts.

Font Formats

Embedded OpenType Fonts (EOT) Old font type, no longer needed

TrueType (TTF) TTF can be useful for extending support to some older browsers, especially on mobile

Web Open Font Format (WOFF) It compresses the files and is supported by all modern browsers

Web Open Font Format 2 (WOFF2) considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.

CSS Font Descriptors

font-family: the name of your font
font-style: normal italic oblique
font-weight: normal, bold, 100, 200 – 900
font-stretch: normal, condensed, ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded

There is a shorthand of this property

In addition to fonts, vector based font icons help provide useful information to visitors to your webpage. Take a look at this webform below. Simple form control icons help visitors visualize what is expected of them.

To use font icons from Font Awesome, we need a script key – unique to each of you, that you can add to the head of your webpage. Font Awesome is a an open source project that grants access to a large collection (1500+) solid vector icons.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Awesome Quotes with Font Awesome</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>
</head>

<body>

  <blockquote>"Whenever I saw the <i class="fas fa-sun"></i> sun, I reminded myself that I was looking at a <i class="fas fa-star"></i> star.
    One of over a hundred billion in our galaxy.  A <i class="fas fa-satellite"></i> galaxy that was just one of billions of
    other galaxies in the <i class="fas fa-glasses"></i> observable universe. This helped me keep
    things in perspective." <i class="fas fa-user-astronaut"></i>
  </blockquote>
  <p><cite>-Ernest Cline, Ready Player One<cite></p>

  <body>

</html>

“Whenever I saw the sun, I reminded myself that I was looking at a star. One of over a hundred billion in our galaxy. A galaxy that was just one of billions of other galaxies in the observable universe. This helped me keep things in perspective.”

-Ernest Cline, Ready Player One

Activity: Create of folder on your desktop. Call it Awesome. Inside create a folder for css. Also, create a basic html page – call it awesome.html. Consider setting the VH and VW to 100 to fill your screen and then center a section with your quote on your page.

Go to Font Awesome, and use your school email and credentials to create an account and to generate a script key. You’ll need this key to make use of the font icons. The script key will end up in the head tag of your html document.

Find a quote from a favorite book or movie. Like the example above. Select several Font Awesome icons to help illustrate your quote. Use the:

blockquote element
cite element
CSS
Custom Fonts
Attractive layout

When complete, upload to your Week 14 folder: Filename:AwesomeQuote

1:05 Mask Break

1:15 Sticky Navigation

The title of an extensive article on responsive design menus can be found by following this link. This is an exhaustive look at different approaches to menu solutions with real world examples.

A sticky navbar stays in place as the page scrolls. This can be really handy for small screens with lots of content. The feature allows users to be able to access navigation at all times. Let’s tackle one together. Follow along with my codePen.

Besides Sticky, we can also show navigation by placing it to the side of the content and setting the height to 100%. This way the navigation will always be on. Here is another example to follow along with.

Activity: Go back to your Alice in Wonderland Assignment from the weekend. Using some of the techniques (fonts, font-sizes, navigation) we looked at today. Design and improve your Navigation Menu and finish up your assignment. If you are done already, you have some time to work on other work.