Week 06

Week 06 – Topics

Final Project Assignment
CSS: Inheritance and Cascade
CSS Based Navigation
Web typography
Quiz 4

Week 06 Assignments

Here are your assignments

READ

Please read the following before Tuesday, May 31.

  1. All the class notes for Week 06
  2. AIGA: NPR case study
  3. 21 Factors to Consider Before a Redesign
  4. 15 Excellent Examples of Web Typography
LISTEN

Business Week Podcast: Steven Heller
Design commentator Steven Heller discusses the evolution of digital design and the challenges facing both those building Web-based businesses and those charged with designing them.

WATCH

Please watch the following before Tuesday, May 31.

Creating CSS Navigation – Creating a simple horizontal rollover menu
Creating CSS Navigation – Creating a simple vertical rollover menu

WRITE

15 Excellent Examples of Web Typography
Referring to the reading above, find one site and discuss what makes the typography on this site so successful. Is there anything you think should be changed? Why? Refer to some of the issues discussed in the class notes below. Post this writing to your WordPress blog by Tuesday, May 31.

EXERCISES

1. Create design comps in Photoshop for 3 pages of your final project. I’d like 3 design comps for the final project (1 of the Home page plus 2 other pages). Your midterm project design comps (3 pages) are due Tuesday, May 31 (at the latest). Email the 3 design comps to me as jpg images.

2. Create a horizontal navigation bar with drop down menu using my code. (See the notes below). For your assignment, please use the HTML and CSS I provided to create a dropdown menu. Please go one step further and customize the navigation by changing the HTML and the CSS so that the visual design is different than my example. Use this as an opportunity to experiment with how it works.

Using the information found on the Listamatic site, find examples where they have created an “active” highlighted state for the navigation. (“active” to indicate the page the user is on). Incorporate an “active, highlighted navigational section into your navigational menu. Upload your web files as a zip file to the “Drop box” on smconline.org site by noon on Tuesday, May 31. You will not receive a grade for this but I want to make sure you all know how to do this so I’m asking you to turn it in to the dropbox.

Remember that you have the 2 exercises from Week 5 due also on May 31:

1. Using Photoshop or Illustrator, create a sitemap for your midterm project. Please be sure to indicate not only the main sections (Landing pages/Level 1) but also the sub-navigation (Level 2) and sub-sub navigation if necessary (Level 3). Refer the class notes below for more information on how to create a site map. Please post an image of your site map to your WP blog by noon Tuesday, May 31.

2. Create a CSS Based 3-column layout. Now that you’ve watched my video demonstration on how to create a 2-column structure, build a three column structure that follows the layout of the photoshop document (photo below). Here is the Cupcake Mama website Photoshop file you’ll use as a guide for the layout. (The four videos on the Three Column Fixed Width CSS Based Layouts and the information about Positioning: Floats will be helpful to you for this exercise). Upload your web files as a zip file to the “Drop box” on smconline.org site by noon on Tuesday, May 31.

QUIZ 4

Click here to take Quiz 4
Complete Quiz 4 by noon on Tuesday, May 31.

Final project – Due Thursday, June 9
CJLO Radio Station Web Redesign

From the Huffington Post: “Last year’s co-recipient of CMJ’s station of the year award, CJLO, was born in 1998 — the product of a merger between two previously existing Concordia University radio stations. CJLO is non-profit and entirely volunteer-run, and can be listened to daily online or on 1690 AM in the Montreal area. In addition to publishing album and concert reviews in their magazine, CJLO does an excellent job of updating their weekly charts.”

About CJLO
“Formed in 1998 as a merger between CRSG and CFLI, two former stations, CJLO is Concordia University’s one and only radio station. 100% non-profit, and run almost entirely by volunteers, the station is located in the heart of the Loyola campus in the NDG borough of Montreal. Our on-air personalities are the backbone of the station and there are over eighty DJ’s spinning for your listening pleasure. Whether you are interested in Rock, Alt, Hip-Hop, RPM, Punk, Metal, Jazz, Blues, World, Country or Talk and Sports, CJLO has something for you, and is always looking for more on air talent.

From early 2003, CJLO has been streaming 7 days a week and in 2008 the station began broadcasting on 1690 AM throughout the Montreal area with 1000 watts of power. Our tower and transmitter are located in Lachine and we can be heard as far as Ottawa and Burlington, Vermont.

CJLO offers a wide variety of programming that truly encompasses the styles appreciated by all of Concordia’s 40,000 students and by a wide range of other communities around Montreal. CJLO also hosts events throughout the city to help promote and support the community and musicians.”

CJLO Website: http://www.cjlo.com

The Goals for the Redesign
The focus of this project is to create a portfolio quality web site following the goals for the project. The goals are based on the NPR case study reading from Week 06.

The existing site fails to meet audience needs or deliver an experience consistent with the brand. Goals for this launch are to provide:

  • Develop a brand and define target audiences for the radio station
  • Create a redesigned user experience to improve the existing navigation, functionality and overall usability of the current site.
  • Enhance the visual design to strengthen the brand.

Your final project is due by 12 noon on Thursday, June 9. No late projects accepted. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Your project should consist of:

  • Research and do a competitive analysis of other college radio websites. (Look at 3-5 sites at the very least).
  • Write a Creative/Communication Brief
  • Create a Site map
  • Your midterm project design comp (3 pages) is due Tuesday, May 31. (See details under “Exercises” section above).
  • 8 complete HTML pages and “placeholder” pages for the rest of the pages. (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page).
  • 8 pages that have complete content, including photos and text.
  • A clear navigation system
  • Sub-navigation
  • A strong visual design
  • A theme and visual concept that carries through the site
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
  • You must use a CSS-based layout and the navigation and text should be  HTML text. (No image-based navigation or text).
  • You must post your final project to the class server (sse FTP page for more details) by noon, Thursday, June 9.

Please note: You must make use of royalty free images for your project. You may use your own original artwork and/or photography if you prefer.

Possible sources for images:

Final Project checklist

Make sure you follow “best practices.” Here is a link to a list of  Web Design Best Practices for you to refer to: http://terrymorris.net/bestpractices/

1. Did you research the project and determine a specific look and feel for your target audience(s)?
2. Did you follow the site map you created for the site?
3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution? (Finished size 990 pixels wide)
4. Did you create your site using a CSS-based layout?
5. Did you design effective main navigation and sub-navigation for your site?
6. Did you title your pages, use headings <h1> etc,  and highlight navigation?
7. Did you use HTML text for your navigation and text?
8. Did you create and use only one external CSS file for your site?

The above specifications for the Final Project can be found here: http://www.classes.jamiecavanaugh.com/grdes66online/final-project/

CSS: Inheritance and Cascade
CSS-Based Navigation

Creating CSS Navigation – Creating a simple horizontal rollover menu

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=VRi93QcAilk&p=23720641C70E95E6

Creating CSS Navigation – Creating a simple vertical rollover menu

IFRAME Embed for Youtube

http://www.youtube.com/watch?v=NpGp9caVY5E&p=23720641C70E95E6

CSS Based Navigation with Dropdown Menus

One of the “best practices” for Web Design is to design and build your navigation using text rather than images. Below are some of the advantages of doing so:

  1. The navigation will be easier to update. No need to recreate images when the navigation changes.
  2. The navigation will be easier to restyle when needed since it is controlled with CSS.
  3. Accessibility issues: users with disabilities will have greater access to the information in the navigation if you create it with text and use the list tag.
  4. SEO issues: the navigation will be able to be searched if it is HTML text. This is not the case if the navigation is image-based.

There are many resources that can make creating CSS-based navigation easier. One of my favorite resources is Listamatic. http://css.maxdesign.com.au/listamatic/

Please take a few minutes to browse through the selection of horizontal and vertical navigation lists they have provided. As you’ll see there are many different ways to approach creating CSS-based navigation.

Next week we will take a look at using Spry Widgets in Dreamweaver to create a Spry Dropdown menu, but it is possible to create a dropdown menu “by hand.” Below is one of the ways you could approach creating a dropdown menu with HTML and CSS. Some dropdown menus require Javascript in addition to HTML and CSS. The example below does not require Javascript so it is relatively simple to incorporate into your website.

For your assignment, please use the HTML and CSS below to create a dropdown menu. Please go one step further and customize the navigation by changing the HTML and the CSS so that the colors are different than my example. This is an opportunity to play around with how it works.

Using the information found on the Listamatic site, find examples where they have created an “active” highlighted state for the navigation. (To indicate the page the user is on). Incorporate this into your navigational menu.

<div id="nav">

<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="products.html">PRODUCTS</a>
 <ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a></li>
 </ul> <!-- end of inner ul-->
<li><a href="#">SERVICES</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
</ul> <!-- end of inner ul-->
<li><a href="#">CONTACT US</a></li>
</ul> 

</div>
CSS
#nav{
width:990px;
position: relative;
line-height:30px;
margin: 0;
padding: 0;

}

#nav ul{
background-color: #999;
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
text-align:center
}

#nav li{
float: left;
position: relative;
background-color: #999;
}

#nav li a, #nav li a:visited {
font-family:Arial, Helvetica, sans-serif;
width: 196px;
display: block;
color: #fff;
text-decoration: none;
border:1px solid #fff;
font-size: 13px;
}

#nav ul li a:hover {
width: 196px;
display: block;
text-decoration: none;
background-color: #CC9;
}

#nav ul li:hover ul {
visibility:visible;

}

#nav ul :hover ul ul{
visibility:hidden;

}

#nav ul :hover ul :hover ul{
visibility:visible;

}

#nav ul ul {
width:75px;
visibility:hidden;
position:absolute;
text-align:left;
left: 0;
}

#nav ul ul a, #nav ul ul a:visited {
height:auto;
line-height:1.75em;
font-size:12px;
width:140;
background-color: #CCC;
color: #FFF;
padding:7px;
}
Web typography

Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that we know will be available on the computers of the users that will look at their web sites—it is no use just designing for yourself on the web!

Limitations of web typography include:
  • A reduced selection of fonts
  • No hyphenation, making full justification look ugly when a column of text gets narrow
  • Poor control over kerning (ie, the spacing between the letters)
  • A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

Let’s look at these points in a bit more depth.

Reduced selection of fonts

The reduced selection of fonts is often the first thing you will run up against when styling your text. Although you can specify any font you like in your CSS, visitors to your sites will only see your text displayed in that font if they happen to have it installed on their own computer—if they don’t, their browser will either use an alternative font that you’ve specified in your CSS, or resort to the browser default (usually Times New Roman). So, you may like to see all your body text displayed with special fonts like Trump Medieval or Avant Garde, but unless your target audience is heavily biased towards designers your viewers likely aren’t going to get the benefit. For this reason, most web designers limit themselves to the most commonly-available fonts across all systems, which are usually limited to the following:

Andale Mono
Times New Roman
Georgia
Verdana
Arial/Arial Black
Courier/Courier New
Trebuchet MS
Comic Sans
Impact

These look like Figure 1:

Figure 1: The most commonly available fonts across all systems are limited to the above.

Specifying any of the above fonts means you’re reasonably likely to be picking a font that most of your visitors will also have. Microsoft also introduced six new fonts designed for screen use in Windows Vista and XP, and, oddly, chose to begin all their names with the letter C. If you want to use them, they are Cambria, Calibri, Candara, Consolas, Constantia and Corbel. I’d advise against using these, however, because they are not likely to be available on the Mac or Linux platforms.

So, compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen. But is this a serious limitation? Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

Hyphenation

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, centre-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container, can look more attractive than text with a “ragged” edge, and you’ll see it a lot in magazines and books. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To fully justify the block of text, all the browser can do is adjust the spacing between the words, which can lead to “rivers of white space” running vertically through the block—this usually happens when the line length within the block is too short and there aren’t enough spaces to adjust subtly, as shown in Figure 2.

Figure 2: Rivers of whitespace can spoil justified text blocks.

As you can see in this screenshot, the lack of hyphenation to break words at natural points has caused the spacing between certain words to grow to unacceptable sizes. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning

Kerning is the process of adjusting the spacing between particular pairs of letters when the font in use is a proportional one (such as Times New Roman, where the space between each character varies from character to character) rather than a monospaced one (such as Courier, where the space between each character is the same each time). It’s used in print to tighten up the space between letters that align naturally, such as a W followed by an A, and can give a more professional look and feel to the text. Most professional fonts come with kerning instructions built in, to provide spacing information to the type renderer. See Figure 3 for an illustration of the difference kerning makes.

Figure 3: Kerning can certainly improve the look of text.

In the above screenshot, the first word has not been kerned. The second word, though, has had the spacing between the W and the A reduced, whilst the space between the A and the S has been increased a touch.

On the web, kerning with this level of precision is effectively unavailable. The only thing we have that comes close to it is the ability to use tracking, which in the print world means adjusting the space between characters throughout the copy, no matter what those characters are—so, you could decrease the space between your W and your A, but you’ll also be affecting the space between every other letter. On the web, tracking is better known as letter spacing, and is controlled with CSS—this is illustrated in Figure 4.

Figure 4: Proper kerning is not available on the Web; the closest we have available is more general letter spacing.

In the above screenshot, the spacing between each character has been increased by the same amount. Whilst this has helped separate the A and the S, the space between the W and A is now too much. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

A lack of control

With all this talk of the print world, there’s something very important worth bearing in mind, and that is that the web is not print. So where the print designer doesn’t have to worry about the end viewer resizing the text, or not having the desired set of fonts, or not having aliasing enabled, we do, and there’s often a temptation to try and force a particular design upon the viewer—fixing a rigid text size for instance, or placing text in fixed-width and fixed-height containers, or even replacing whole chunks of text with images.

This lack of control needn’t be a problem however—you just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways. You shouldn’t try to stop them, or make it difficult for them—if they want to read your content then it should be as easy to do so as possible. They may wish to read it on their mobile device during their commute home; they may prefer to print everything out and read it on paper instead of a screen; they may be visually impaired and need to increase the font size somewhat. This is why, when you style your text on the web, what you’re really doing is providing a guide to all the different browsing devices as to how you’d prefer that text be seen. Devices are free to ignore everything you say, of course, but that’s ok—what matters is that you’re not trying to force your design decisions on your entire audience.

How is typography done on the web?

Typography on the web is controlled entirely with CSS, and by using CSS you gain a lot of control: not just over the size, colour and typeface selection but also over the line height, the letter spacing, the level of capitalisation (all caps, initial caps, small-caps or no capitalisation at all) and even control over how the first letter or first line of your text is styled.

By styling the text’s containing block, you also have control over the level of justification of the text and the line length. Not only that, you also only have to create your style rules in one location—your stylesheet—to have those rules apply to all of your text, across your whole website (or you can be specific and target particular paragraphs, or areas on the page). Furthermore, if you ever find yourself needing to increase your website text size, or change the body font, you only have to change the value in your stylesheet.

Quick tips

Here are some quick tips to help you out with typography on the Web.

Select a range of fonts

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia”, you could specify “Georgia, Cambria, “Times New Roman”, Times, serif”. So, first the browser will attempt to use a font named Georgia, but if this font isn’t installed it will try for Cambria, then Times New Roman, followed by Times, followed by whatever the operating system has assigned to the “serif” keyword.

Line length

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line, though this should vary depending on your audience (children prefer shorter line lengths, adults prefer longer). An ideal line length is shown in Figure 5:

Figure 5: 60 characters per line—the ideal line length.

The text in the screenshot is about 60 characters per line. Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

Line height

Line height refers to the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default (which also allows more space for subscript and superscript characters)—see the difference between the two paragraphs in Figure 6:

Figure 6: Line height can make a big difference to the look and feel of text.

The first paragraph in the above screenshot has a default line height, and can feel a little cramped. The second paragraph has had its line height increased, and the text has a bit more room to breathe, making it a bit more readable. Too much line height, though, and you make the text harder to read again, so be careful.

Drop caps

By targeting the first-letter pseudo-element with something like p:first-letter { }, you can style the first letter of a line differently from the rest—such styling is usually known as a drop cap, where the first letter takes up about 3–4 lines of text—see Figure 7.

Figure 7: A typical drop cap.

Small caps

Often, fonts come with a small-caps variation—a set of capitalised letters that are uppercased but approximately the size of the lowercase variant. This is useful for when you want to capitalise something but don’t want to draw too much attention to it, so it can be used for abbreviations, for example. Even if the system doesn’t have a small-cap variant of the specified font, that’s ok—the browser will generate its own version by using full capitalisation and then shrinking the characters to around 70% of their normal size. Figure 8 shows small caps in action.

Figure 8: Small caps in action.

Hanging punctuation

A good typographical effect can be used if your sentence starts with quote marks. Using the text-indent CSS property combined with a negative value—either a value in ems (-10em), points (-10pt), pixels (-10px) or percent (-10%)—allows you to shunt the quote mark out into the left, maintaining the left vertical line of your block of text, as shown in Figure 9:

Figure 9: Hanging punctuation.

Typographically-correct punctuation and other entities

You can make your text look more professional and elegant by using the wide variety of typographic HTML entities that are available such as “smart” or “curly” quotes and en– and em—dashes. A lot of blogging and word processing software will automatically do this for you as you type, turning your regular straight quotes into the typographically-correct curly variety, and turning strings of dashes into en and em dashes. See Figure 10 for examples of typographically-correct punctuation.

Figure 10: Typographically-correct punctuation

Once you start peppering your copy with smart punctuation, your text can look far more elegant and professional—more like something from a magazine or a book than from online. Bear in mind though that this sort of punctuation can look a little pixellated for people with older screens or with aliasing disabled, so use with caution.

Then there’s entities—bits of special HTML that you can insert into your copy to generate special characters not easily available from your keyboard. Figure 11 contains a number of entities:

Figure 11: HTML entities

These can be typed in by hand, but a lot of content management software can convert or insert these for you with ease.

Pull-quotes

A pull-quote is a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. You’ll have seen them in almost every magazine you’ve ever read, and they’re an effective way of breaking up your text and highlighting key quotes or phrases—and they’re also easy to do on the web with some simple markup and styling. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done. There are also some more advanced solutions that involve JavaScript picking out selected text and automatically populating a pull quote from it, which can save you having to write the same text twice in your markup.

Summary

So that’s typography, and typography on the web; hopefully you can see that text online needn’t be limited to Verdana, small, #333333—there is a wide range of typographic tricks and tips that can help make your text stand out from the rest of the crowd. For most websites, the reason people will be visiting is to read what you or your authors have written; it makes sense, then, to make that reading as pleasurable as possible.

This information about Typography on the web is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

CSS Properties from Web Typography reading

font-family value: one or more quotation mark-enclosed font names followed by an optional generic font name
font-style
values: Italic, normal
font-variant
values: normal, small-caps
font-weight
values: bold, normal, lighter, bolder, integer (100-900)
font-size
values: an absolute size, a relative size, a length, a percentage
letter-spacing
value: either normal or a length
line-height
value: either normal, a number, a length, a percentage
text-align
value: one of left, right, center, justify
text-decoration
values:blink, line-through, none, overline, underline
text-indent
values: either a length or percentage
text-transform
values:capitalize, lowercase, uppercase
vertical-align
values: either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length
word-spacing
values: either normal or a length

Regarding font-size

“Ems and Percentages are considered the “best” [units] for sizing fonts and layouts in CSS. They do not have the disadvantages of using pixels and using points. They are resizable in all Web browsers that support resizing, they are specified relative to the user’s font size preferences, and can therefore adapt to the viewer’s screen.”

In the example below, note the use of specifying the font-size for the body as 62.5%. The reason this is commonly done is to make the conversion to em size easier to calculate.

body { font-size: 62.5%;  /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

Normally 1 em is equal to 16px. If you specify your body font-size as 62.5%, 1 em is now equal to 10px. This makes specifying your font size easy:

9px = .9em
10px = 1em
11px = 1.1em
12px = 1.2em

 



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66