Class 04

Class 04 – Topics
Web Standards
Visual Design for Web
Layout, grid, visual flow
2-column structure & CSS
In-class demo
: 2-Column Structure & CSS
Assignment: Complete  HTML & CSS exercise: Div tag. Create a basic structure using divs and a 2-column structure web page using TextEdit or the Code view in Dreamweaver. See my notes in at the end of the class notes. Find a website online that uses a two column structure and build a page inspired by this website. Change the CSS so you do not use the exact CSS I show in the example at the end of the class notes below. Bring your html and css file to class next week.

Also, find an online article (see list of possible web design blogs on the resources page of this site) about building a site using column and/or div structure. Post the URL for this article on your process blog and be prepared to discuss.

Reading for next week:
Addressing content, Auditing Existing content, Outlining content, Creating a content delivery plan, Sitemapping, Addressing Existing Site Organization, Determining Site Structure, Setting naming conventions (pages 86-106) from Web ReDesign 2.0

Chapter 5: Basic Page Layout. (pages 134-168) from Stylin’ with CSS

Questions to discuss next week (please come prepared):
What are the “three views” discussed in the book involving the content of the site.  And what are the differences between the three views?
What is a “content audit?”
What is a “sitemap?”
What are the two types of naming conventions that are addressed in the book?


Reading for next week:

Navigation & Interface Design

Reading completed for this week’s discussion:
Understanding Discovery, Determining Overall Goals, Preparing A Communication Brief, Creating a Project Plan (pages 60-67) from Web ReDesign 2.0
Setting the Budget, Creating Schedules, Assigning Your Project Team, Setting Up Staging Areas, Planning for user Testing, Kicking off the Project (pages 67-85) from Web ReDesign 2.0

Questions to discuss:
Download the Communication Brief Worksheet and come prepared to discuss.
Name a few examples of “overall goals” for the web site design or re-design.
What does a Project Plan consist of?
Give examples of good documentation practices for a project.
Download and review the two estimating methods by Task and by Team and come prepared to discuss.
Download and review the budgeting time tracker and come prepared to discuss.
When is an Additional Charge Form used? (oftentimes referred to as Change Order)
What are the two ways to approach the Scheduling task?
What is the difference between a Visual Designer and an Information Designer?
What is a “staging area?”
What is included in the agenda of a “kick off” meeting?


Why Web Standards?

Below are the main reasons adopting web standards in your web design/development work is a good idea. Using web standards confers the following benefits:

  1. Efficiency of code: A lot of best practice web standards usage is all about reusing code—you can separate your HTML content from your stylistic (CSS) and behavioral (JavaScript) information, allowing your file sizes to be kept small, and code to be written only once, and then reused wherever it is needed.
  2. Ease of maintenance: This follows closely on from the last point—if you can write HTML only once, and then apply styles and behavior wherever they are needed using classes and functions, then if you need to change something at a later date, you can just make the change in one place and it propagates throughout the entire web site, rather than having to specify that change everywhere that it is needed!
  3. Accessibility: The next two points are closely related—one of the big issues on the Web is making web sites accessible to everyone, no matter who they are, regardless of circumstance. This includes making web sites usable by people with disabilities such as blindness/visual impairment and motor impairment (ie, people who have restricted movement, and might not be able to use their hands properly, or at all). By using web standards and best practices, you’ll be able to make your web sites usable by this significant group of the web audience with no extra effort.
  4. Device compatibility: by this, I mean ensuring that your web sites will work not only across different platforms—ie Windows, Mac, Linux—but also alternative browsing devices, which these days can include mobile phones, TVs and games consoles. These devices have limitations such as screen size, processing power, control mechanisms available and more, but the good news is that again, using web standards and best practices, you can pretty much guarantee that your web sites will work on most of these devices. There are more mobile phones in the world than PCs, a lot of which are Internet–capable, so can you or your clients afford to miss out on this market? For more on mobile web development, check out some of the dedicated articles on dev.opera.com.
  5. Web crawlers/search engines: By this, we are talking about what is termed search engine optimization—the practice of making your web sites as visible as possible to the so–called web crawlers that trawl the web and index web sites, and therefore giving you better search rankings on sites such as Google. There is a science to this (see SEO articles such as Intelligent site structure for better SEO! and Semantic HTML and Search Engine Optimization) but yet again, just by using web standards you will make your site a lot more visible on Google, Yahoo!, etc., which is good for business.
The Coming of Web Standards

During the browser wars, Microsoft and Netscape focused on implementing new features rather than on fixing problems with the features they already supported, and adding proprietary features and creating features that were in direct competition with existing features in the other browser, but implemented in an incompatible way.

Developers at the time were forced to deal with ever increasing levels of confusion when trying to build web sites, sometimes to the extent of building two different but effectively duplicate sites for the two main browsers, and other times just choosing to support only one browser, and blocking others from using their sites. This was a terrible way of working, and the inevitable backlash from developers was not far away.

The Formation of the W3C

In 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, with support from CERN, DARPA (as ARPA had been renamed to) and the European Commission. The W3C’s vision was to standardize the protocols and technologies used to build the web such that the content would be available to as wide a population of the world as possible.

During the next few years, the W3C published several specifications (called recommendations) including HTML 4.0, the format for PNG images, and Cascading Style Sheets versions 1 and 2.

However, the W3C do not enforce their recommendations. Manufacturers only have to conform to the W3C documents if they wish to label their product as W3C-compliant. In practice, this is not a valuable selling point as almost all users of the web do not know, nor probably care, who the W3C are. Consequently, the browser wars continued unabated.

The Web Standards Project

In 1998, the browser market was dominated by Internet Explorer 4 and Netscape Navigator 4. A beta version of Internet Explorer 5 was released, and it implemented a new and proprietary dynamic HTML. This meant that professional web developers needed to know five different ways of writing JavaScript.

As a result, a group of professional web developers and designers banded together. This group called themselves the Web Standards Project (WaSP). The idea was that by calling the W3C documents standards rather than recommendations, they might be able to convince Microsoft and Netscape to support them.

The early method of spreading the call to action was done using a traditional advertising technique called a roadblock, where a company would take out an advert on all broadcast channels at the same time, so no matter how a viewer would flick between channels, they would get exactly the same message. The WaSP published an article simultaneously on various web development focused sites including builder.com, Wired online, and some popular mailing lists.

Another technique they used was to ridicule the companies that would join the W3C (and other standards bodies) but then focus more on creating new features than on getting the basics that they had signed up for correct to start with.

This all sounds a bit negative, but the WaSP didn’t just sit there criticizing people—they also helped. Seven members formed the CSS Samurai, who identified the top ten problems with the CSS support in Opera and Internet Explorer (Opera fixed their problems, Microsoft did not).

The Rise of Web Standards

In 2000, Microsoft released Internet Explorer 5 Macintosh Edition. This was a very important milestone, it being the default browser installed with the Mac OS at the time, and having a reasonable level of support for the W3C recommendations too. Along with Opera’s decent level of support for CSS and HTML, it contributed to a general positive movement, where web developers and designers felt comfortable designing sites using web standards for the first time.

The WaSP persuaded Netscape to postpone the release of the 5.0 version of Netscape Navigator until it was much more compliant (this work formed the basis of what is now Firefox, a very popular browser). The WaSP also created a Dreamweaver Task Force to encourage Macromedia to change their popular web authoring tool to encourage and support the creation of compliant sites.

The popular web development site A List Apart was redesigned early in 2001 and in an article describing how and why, stated:

In six months, a year, or two years at most, all sites will be designed with these standards. […] We can watch our skills grow obsolete, or start learning standards-based techniques now.

That was a little optimistic—not all sites, even in 2008, are built with web standards. But many people listened. Older browsers decreased in market share, and two more very high profile sites redesigned using web standards: Wired magazine in 2002, and ESPN in 2003 became field leaders in supporting web standards and new techniques.

Also in 2003, Dave Shea launched a site called the CSS Zen Garden. This was to have more impact on web professionals than anything else, by truly illustrating that the entire design can change just by changing the style of the page; the content could remain identical.

Since then in the professional web development community web standards have become de rigeur. And you will want to develop an excellent grounding in these techniques so that you can develop websites just as clean, semantic, accessible and standards-compliant as the big companies’.

Validation, what’s that?

Because HTML and XHTML are set standards (and CSS too, for that matter), the World Wide Web Consortium (W3C) has created a great tool called a validator to automatically check your pages for you, and point out any problems/errors your code might have, such as missing closing tags or missing quotes around attributes. The HTML validator is available online at http://validator.w3.org/. It will automatically detect whether you’re using HTML or XHTML, and which doctype you’re using. If you want to check out your CSS, the validator for that is available at http://jigsaw.w3.org/css-validator/.

Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

big think: Jeffrey Zeldman Talking about Web Standards


http://bigthink.com/topics/architecture-and-design/ideas/jeff-zeldman-drives-home-the-importance-of-web-standards


Visual Design for Web
Dimensions

Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

  • Internet Explorer and Safari have different amounts of space available for pages
  • Macs and PCs have different amounts of space available for pages
  • The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
  • If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

  • In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
  • In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can design to 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

  • Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
  • Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
  • Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)

Browser Display Statistics: http://www.w3schools.com/browsers/browsers_display.asp

Grid systems in Web Design

Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments. – Mark Boulton

Five Simple Steps to designing grid systems
  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid


A whole load of considerations

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size – the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read – well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.

So, that’s media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA’s and Mobile’s to assistive technologies such as screen readers. How do you design a grid for all of this? It’s a really good question and I’m not claiming I have the answer.
. . .

Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We’re taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.

Then some short sighted user comes along and increases the text size… and… and… totally breaks your design.

I think you get the idea. We can’t be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes. – Mark Boulton


Grid systems can be constructed from ratios.

Simple ratios such as 1:3, or 2:1 are called rational ratios.
More complex ratios, such as those based on the Golden Section (1: 1.618) , are called irrational ratios.

Fixed layout

A fixed grid for designing for the web is as close a translation from traditional grid design as there is. The designer is using fixed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a fixed size. See, everything is fixed.

Example of the “Rule of Thirds”

Fluid layout

In order for a grid to be flexible (adaptive), we have to use scalable units of measurement such as 100% or Ems. Just a reminder: An Em (pronounced ‘m’ NOT ‘e, m’) is a typographic measurement equal to the point size of the typeface you are using. We also use percentages.

To give us our column width, convert the ratio’s to percentages, which gives us 61.8% for the main column and 38.2% for the right column.

Example of the “Golden Section”


Web Page Layout Grid

Layout Grid

Layout Grid

Photoshop file: Grid Layout

Good Grid system resource: http://tutorialblog.org/grid-systems-in-web-design


Creating a webpage using TextEdit
  • Using Apple’s simple text editor called TextEdit (found in the Applications folder on your computer), type in the HTML for the “Good HTML” style above. Do not copy and paste the html–you will only learn if you actually type in the code!
  • Very important– when usingTextEdit, be sure to make the following change: under “Format” > “Make Plain Text.”
  • Also, be sure to make the following changes in the Preferences in TextEdit. Open Preferences and
    Under “New Document” > “Format” > select “Plain Text.”
    Under “Open and Save” > Under “When opening a file” > select “Ignore rich text commands in HTML files.”
  • Save the file with the extension .html in order to view it in a Browser application such as Firefox or Safari.
Basic XHTML example with CSS
<html>
<head>
   <title>Basic HTML Example</title>
   <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
   dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
   mollit anim id est laborum</p>
</body>
</html>
CSS example

The code below is a good example of basic CSS properties.

body {
background-color: #000000;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#ffffff;
line-height:30px;
padding-left: 200px;
}
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html

XHTML & CSS exercise: Div tag

Note: Below is one HTML file and code for two different CSS files. Please experiment with both CSS files and note how the second CSS file creates a 2-column structure for your web page.

Basic Div structure:

<div id=”wrapper”>

<div id=”header”></div>

<div id=”navigation”></div>

<div id=”content”></div>

<div id=”footer”></div>

</div>

The code below is a good template to use as the beginning structure for a web page.

(Information about HTML Document Type is here: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>2-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
      <h1>This is the header</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

 <div id="navigation">
      <h1>This is the navigation </h1>
 </div>

 <div id="content">
      <h1>This is the content</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>

<div id="footer">
     <h1>This is the footer</h1>
</div>

</div>

</body>

</html>
1) CSS example for basic div structure

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 */ }

The code below is a good example of basic CSS properties for the <div> tags of a basic web page.

* { margin: 0;
    padding: 0;
}

body { font-size: 62.5%;

}
#wrapper {

width:990px;

margin-left:auto;

margin-right:auto;

}
#header {

height: 150px;

background-color: #666;

}
#navigation {

height: 150px;

background-color: #999;}
#content  {

height: 260px;

background-color: #CCC;

}
#footer {

height: 50px;

background-color: #666;

}
h1 {

font-family:Verdana, Geneva, sans-serif;

font-size:1.6em;

font-weight:bold;

letter-spacing:1px;

padding-left: 20px;

}
p {

font-family:Arial, Helvetica, sans-serif;

font-size:1.2em;

line-height:1.7em;

padding-left: 20px;

}
2) CSS example for 2-column structure

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 */ }

The code below is a good example of basic CSS properties for the <div> tags of a 2-column web page.

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:22%;
 float:left;
 background-color: #999;
}

#content  {
 width:78%;
 float:left;
 top:0px;
 background-color: #CCC;
}

#footer {
 clear:both;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}


Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67