Design Fundamentals for the Web – Session 4

February 11, 2014

Review

Typestyles

Type is the most basic mode of communication in web design – we use words to communicate first. Good design presents our ideas quickly & simply, making it easy for our audience to understand what we're communicating. Typestyles are specific letter forms that have been developed for presenting text on different media (stone, paper, computer screen, etc). A font is a packaged typestyle that includes additional specifications, including sizes, weights, styles (normal, italic, oblique) & spacing information.

Serif & Sans-Serif Fonts

There are two main font families used on the web:

Serif
Sans-Serif

Using Type with CSS

There are a number of properties you can use to control typestyles using CSS:

font-family, i.e * {font-family: Arial, Helvetica, sans-serif;}
font-size, i.e p {font-size:12px;}
line-height, i.e h1 {line-height: 2em;}
font-style, i.e .italics {font-style: italics;}
font-weight, i.e .bold {font-weight: bold;}
font-variant, i.e .small_caps {font-variant: small-caps;}

You can also set all of them at once using the font property, i.e. h1 {font:30px Times New Roman, serif;}.

You can find more details on CSS font properties at W3Schools.

Exercise

Go to JSFiddle
In the HTML pane, create a few html elements including an <h1>, a <p>, and an anchor tag <a>
In the CSS pane, create a few CSS selectors (one for each of your HTML elements), and try changing the font-family, font-size and font-style for all of them & each individually

HTML Elements for Creating Layouts

<div></div>
<header></header>
<nav></nav>
<aside></aside>
<ul> <li></li> </ul>
<article></article>
<section></section>
<footer></footer>

More Info on HTML5 Elements for Layouts

W3Schools: HTML5 Semantic Elements

Exercise

Log in to Github
Create a new web page using the template page you've been working on (e.g. index.html)
In addition to the <!doctype html>, <html></html>, <head></head>, <title></title> and <body></body> elements, let's create a wrapper <div></div> holding some additional layout elements, including a <header></header> and another <div></div> to hold our content elements: <nav></nav>, an <article></article>, an <aside></aside>, and a <footer></footer>

CSS Properties for Creating Layouts

CSS Centering

text-align: center;
margin: xxxpx auto;

Centering Demo

Let's open up JSFiddle and experiment with the CSS centering porperties:

margin: xxpx auto xxpx auto; /* centers a container element */
text-align: center; /* centers text within an element */

Here's the CSS Centering Fiddle.

More info on CSS Centering

CSS Positioning

position: static | absolute | fixed | relative | initial | inherit;
left: xpx;
right: xpx;
z-index: x;

Positioning Demo

Let's open up JSFiddle and experiment with the CSS positioning porperties:

position: absolute;
top: 50px;
left: 0px;
z-index: -1; /* puts the element behind the others */

Here's the CSS Positioning Fiddle.

More info on CSS Positioning

CSS Floating

float: left | right;
clear: left | right | both;

Float Demo

Let's open up JSFiddle and experiment with the CSS positioning porperties:

float: left;
clear: left;

Here's the CSS Float Fiddle.

More info on CSS Floating

W3Schools: float property

Exercise

Log in to Github
Open up the page you created in earlier with the HTML layout elements included
Create a new stylesheet and link it into your HTML page
Using id and tag name selectors, let's apply some style rules to our layout elements
- Use an id selector to center your wrapper <div>
- Use a tag selector to center the headline in your <header>
- Use tag selectors to float your <nav>, <article> & <aside> elements
- Use a tag selector to style your <footer> and clear your floats

Types of Layouts

static - fixed width elements
liquid - flexible width elements
responsive - flexible grid with media queries

Check out Liquidapsive.com to get a better idea of some of the different types of layouts your can make, depending on your users' needs.

Assignment 4

Reading

Chapters 5 & 7 in Design for Hackers

Design

Create a Static Layout for Your Pages

After you have completed the reading assignment, revisit your HTML pages and create a static layout using CSS Positioning.

Create a wrapper <div> to hold the content of your page and center it horizontally.
Create a <header>, a main content <div> containing a <nav>, an <article> and an <aside>, and finally, a <footer> container at the end of the page.
Re-apply your type treatment appropriately for these new page elements.