MM2213 Intermediate Web Design/GWDA233 Advanced Web Page Scripting :: Art Institute

Week 1: Review: HTML5, CSS3, Design Principles

HTML5

HTML5 logoHTML has been in continuous evolution since it was introduced to the Internet in 1990.

HTML5 is the latest version of HTML and XHTML. It attempts to solve issues found in previous iterations of HTML, and addresses the needs of Web Applications, an area previously not adequately covered by HTML. HTML5 aims to reduce the need for proprietary plug-in-based rich internet application technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

The HTML standard defines a single language that can be written in HTML and XML. Although we currently call the latest draft of HTML "HTML5", the group that is working on developing the standard consider it a "living document. They recommend that we stop using version numbers.

HTML5 is unevenly supported by the various browsers.

html5readiness

What Is New to HTML5?

HTML5 introduces a bunch of new functionality within the browser window. For example, there is a new drag-and-drop feature using a new HTML attribute called draggable set to "true" and a bit of JavaScript.

There is also a canvas element which allows you to draw within the browser window. Previously, this kind of drawing could only be done in something like Flash.

One very big implementation of HTML5 is the use of the video element on YouTube.com. traditionally, YouTube has used a Flash Shockwave player to stream videos. However, Apple mobile devices such as iPhone and iPad do not recognize Flash. Users visiting the site from those devices are given HTML5 versions of the video players instead.

There are far too many new pieces to cover in a single lesson, so we'll stick to the new elements here.

Elements That Are New in HTML5

HTML5 allows us to skip using a bunch of divs with IDs to define the page content areas in our web pages. Instead, we have a host of new tag names to use.

Element Function
<article> Defines an article. There can be multiple articles on the page.
<aside> Defines content aside from the page content, such as a sidebar. There can be multiple asides on the page.
<footer> Defines a footer for a document or section. There can be multiple footers; for example, one for the page, one for the article, and one for the sidebar.
<header> Specifies an introduction, or a group of navigation elements, for a document. There can be multiple headers; for example, one for the page, one for the article, and one for the sidebar.
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels.
<nav> Defines navigation links. There can be multiple navs on the page.
<section> Defines a section in a document which is not a header, footer, article, or aside. There can be multiple sections on the page.

Do we still use <div>? Sure, use it for bits of content you want to style but which aren't really page content blocks, per se.

XHTML Markup for Page Structure vs. HTML5

Here's a quick comparison of how the markup would differ from XHTML to HTML5. I've left out any content so we can see just the structure.

XHTML Markup Example

XHTML Markup Example

HTML5 Markup Example

HTML5 Markup Example

Notice two other major changes in HTML5:

  • The doctype definition is simply <!DOCTYPE HTML>.
  • No more clutter in the open <html> tag.

How Does This Change Our CSS?

When using HTML5, you are using a lot fewer IDs in your markup. So you'll see fewer # signs in the CSS. Instead, you define what's going on in the new page content area elements. Here's a quick comparison:

CSS for html5 and xhtml comparison

 

Why Bother Using the New Elements?

It all comes back to semantics. Web semantics means that as much as possible we are using markup which describes the kind of content within it.

The makers of HTML are trying to look to the future, when websites can be more responsive to various devices such as mobile tablets and phones, as well as future search technologies. So far, there aren't any technologies truly "hooking in" to the browser's new collection of page content parts, but it will undoubtedly happen.

One user base to consider is blind people who use software called screen readers to browse web pages. The screen readers will be able to provide a kind of "table of contents" using these new elements, allowing the user to jump to the desired page content area more handily.

Similarly, search engines will certainly figure out new algorithms for determining the relevance of content based upon which part of the page it is on.

A lot of blogs and other content providers allow people to read their content via syndiccation such as Google Reader. Providing sematic elements allows for its use within syndication feeds so that the correct content is delivered.

Getting Older Browsers to Play Along

All of the newest browsers supprt HTML5 to some degree. Unfortunately, many older ones do not—in particular, Internet Explorer 8 and older. So we have a work around.

FIRST, in the CSS define all the new elements as block elements. Otherwise, any elements the browser does not recognize are interpreted as inline.

HTML5 css define html5 elements as display block

SECOND, use a bit of JavaScript to implement the new elements fully. Right-click on the file linked below and save it into a folder in your root folder named js (for JavaScript.)

html5.js

THIRD, link to the JavaScript file inside the head of your html file. It will call the JavaScript only if Internet Explorer (version 8 or older) is accessing the page.

link to JavaScript file for HTML5 in Internet Explorer 8 and older

HTML5 Resources

html5Doctor.com

HTML5Rocks.com

CSS3

CSS3 is the latest standard for CSS. It has much broader support among the browsers than does HTML5.

Click on the image below for a more comprensive listing of all the CSS3 properties and selector types, and which browser versions support each.

CSS3 browser support

CSS2 already has some very advanced selectors for pinpointing specific areas in your markup for styling. CSS3 goes even further with these advanced selectors. For example, you can select for a p tag with a title attribute containing specified letter strings.

The 30 CSS Selectors you Must Memorize

However, today I just want to share with you some of the easier and prettier CSS3 properties you can play with. Remember, selectors are what you are styling (such as #wrapper,) and properties are the characteristics you are defining (such as background-color.)

Vendor Prefixes

One thing to keep in mind is that many browsers were coming up with their own properties like border-radius and box-shadow long before those properties become part of the W3C recommendations. This kind of innovation is what drives advances in the W3C specifications, not the other way around.

So what happened is that in earlier versions of Firefox, Chrome, Opera, and Safari, they had their own vendor prefixes at the beginning of the property names, and each browser might have a slightly different implementation of the property.

The latest versions of these browsers now support the W3C names of the properties, but the older ones (such as Firefox 3) may still need the original vendor prefixes.

For example, this is how we get border-radius to work in both older and newer versions of browsers:

-moz-border-radius: 10px; // Firefox
-webkit-border-radius: 10px; // Safari and Chrome
-o-border-radius: 10px; // Opera
-ms-border-radius: 10px; // Microsoft (Internet Explorer)
border-radius: 10px; // all modern browsers, including IE

We put the shorter, W3C-defined property name last in the list so that it will override the earlier implementations in newer browsers.

Progressive Enhancement

In the past, web designers worrying about cross-browser compatability used the term graceful degradation to refer to giving the latest and greatest browsers the full-course meal experience while tossing a few scraps to the sad folk unfortunate enough to be using older browsers.

Nowadays we use the term progressive enhancement to refer to a focus on the content and its accessibility. The content forms the solid base on which you layer your style and interactivity. You already know that you should be separating your content from your markup (HTML structure) and from your presentation (CSS).

In the progressive enhancement approach, you define your content first, then develop an appropriate structure for it. After that, you layer on the CSS presentation, starting with the basics which all browsers support, and enhancing it with CSS3 for browsers that are the latest versions. On top of everything else, you might bring in some JavaScript interactivity.

But if all the CSS and JavaScript fail to work for some reason (or is disabled in the browser), users can still get at the content in a way that is clearly organized because the most semantic markup has been employed. Or looking at it another way, the more modern the browser is, the more the user will get out of the visual and interactive experience. But everyone has access to the content.

It's really just a matter of perspective, but your approach can make a big difference in your code, your search engine optimization, and ultimately in the user's experience. Progressive enhancement does more than just pay lip service to older browsers.

Core Principles of Progressive Enhancement
  • basic content should be accessible to all web browsers
  • basic functionality should be accessible to all web browsers
  • sparse, semantic markup contains all content
  • enhanced layout is provided by externally linked CSS
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • end-user web browser preferences are respected

Cool New CSS3 Properties and Values

The CSS3 properties shown below are pretty well supported across all modern browsers, including Internet Explorer 9.

Want a quick way to just plug in the property and values you want and have someone else write the code for you? Try the CSS3 Generator. You'll find it's great for most of what is covered in this lesson.

CSS3 Generator

Rounded Corners

With CSS3, you can create rounded borders. In the olden days, we had to use images created in Photoshop. Rounded corners on boxes can be obtained by using the border-radius property and assigning it a measurement, typically in pixels. In order to see the rounded corners, you also need to have a visible background-color, a border, or both.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

You can even give the four corners different values.

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 40px;
-webkit-border-radius: 5px 40px 5px 40px;
border-radius: 5px 40px 5px 40px;

Box Shadow

This property gives a drop shadow to a box element such as a div. It can serve as a type of border. The values shown below represent Horizontal Length (positive is right and negative is left), Vertical Length (positive is down and negative is up), Blur Radius, and then the color in RGBa (RGB plus the amount of opacity.)

-webkit-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);
-moz-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);
box-shadow: 3px 3px 3px rgba(50, 50, 50, .5);

You can even apply multiple shadows to the same box.

-webkit-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);
-moz-box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);
box-shadow: 3px 3px 3px rgba(50, 50, 50, .5), -3px -3px 3px rgba(255, 0, 0, .5);

Text Shadow

This property puts a drop shadow right on your text. The values look similar to those of box-shadow. Text-shadow does not work in Internet Explorer at this time, so we use a proprietary filter from Microsoft instead.

text-shadow: 2px 2px 2px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);

RGBa

RGBa is actually a value, not a property. But it is very useful in creating transparency. RGBa can be used in place of any color value, so you can make font colors, borders, or background colors partly transparent. Color in RBGa is expressed in RGB notation rather than hexadecimal. The last number is the value is opacity expressed as a number between 0 and 1.

color: rgba(153, 204, 255, .7)

border: solid 10px rgba(153, 204, 255, .7);

background-color: rgba(153, 204, 255, .7);

Gradients

Gradients can be used to give your background a special effect. Often this techniques is used to mimic lighting on a surface. Gradients are created in CSS3 as a value, usually for the background property.

For gradients, you need to define the direction of the gradient, whether it is linear or rdial, where the color stops are and what color they are. That's a lot of stuff to code correctly. Luckily, there's an online tool just for creating gradients for your stylesheet.

Ultimate CSS Gradient Generator

background: #a1f279;
background: -moz-radial-gradient(center, ellipse cover, #a1f279 0%, #62c1fc 42%, #b9a9fc 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a1f279), color-stop(42%,#62c1fc), color-stop(100%,#b9a9fc));
background: -webkit-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: -o-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: -ms-radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
background: radial-gradient(center, ellipse cover, #a1f279 0%,#62c1fc 42%,#b9a9fc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1f279', endColorstr='#b9a9fc',GradientType=1 );

There are many more besides these. For example, check out how you can specify multiple background images for the same box.

Design Principles

Design principles in depth.

Alignment

  • Everything should align with something else along at least one edge
  • Avoid center alignment
  • Don't mix alignments (use a grid)
  • Margins and padding add white space
  • White space is your friend

GOOD example: http://www.100candles.com/
POOR example: http://www.maximumscented.com

Proximity

  • Things that go with each other should be closer to each other than things that don't go together
  • Spacing has meaning; it implies relationships
  • Reinforce those connections with ALIGNMENT for a double-whammy
  • Provide WHITE SPACE to give the eye some rest

GOOD example: http://www.zappos.com/
POOR example: http://www.eviltattoo.com/

Repetition

  • Repeat some aspect(s) of the design
  • Creates UNITY (the sense that all the parts create a unified whole)
  • Helps identify navigation, heading levels, and overall organization
  • Aids usability (visitors don't need to learn new structure from page to page)
  • Requires design guidelines and discipline

GOOD example: http://www.cars.com
POOR example: http://www.cars-on-line.com/

Contrast

  • If two things are different, make them VERY different
  • Contrast can be created with color, size, scale, texture, value, motion, dimension
  • Creates a focal point – helps define what is most important
  • If you emphasize everything, you emphasize nothing

GOOD example: http://www.netflix.com
POOR example: http://mandmupholstery.com/

Spelling and Grammar

Bad spelling and grammar can destroy all you've achieved with good design.

Tips on Web Site Usability

View Slideshow in PPT

View Slideshow in PDF

The following is a summarized list of tips for making web sites usable. They come from the legendary book about web design usability, "Don't Make Me Think" by Steve Krug.

  1. Don't make your visitors have to think. A web page should be self-evident, obvious, self-explanatory.
  2. Recognize that visitors don't read pages. They scan them, and they muddle through.
  3. Create a clear visual hierarchy.
  4. Use conventional methods of organizing content (predictability is your friend).
  5. Break up pages into clearly defined areas.
  6. Make it obvious what's clickable.
  7. Keep visual noise to a minimum.
  8. Omit needless words.
  9. Create street signs and breadcrumbs in your navigation. On any page, a visitor should be able to answer these questions:
    • What site is this?
    • What page am I on?
    • What are the major sections of the site?
    • What are my options at this level?
    • Where am I in the scheme of things?
    • How can I search?
  10. Your home page must convey "the big picture" for your visitors:
    • What is this?
    • What do they have here?
    • What can I do here?
    • Why should I be here-and not somewhere else?
    • Where do I start?
  11. Nothing beats a good tagline.
  12. Don't design for a mythical "average user." Test your site with real, ordinary people.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
1 HTML 5 Site Redesign redesign.zip

Assignment Details

HTML 5 Site Redesign

Redesign a home page for a poorly-designed site.

  1. Select one of the following websites, or one that is similarly poorly-designed and using outdated coding practices.
  2. Take a look at how their site is currently coded.
  3. Look up the organization on Facebook to see if you can find a better collection of photos/graphics than what is currently available on their own website.
  4. Spend a good deal of time getting familiar with the following about the organization (or surmise to the best of your ability based on their online presence):
    • their audience
    • their goals
    • their branding message, if any
  5. Decide how to organize the main navigation.
  6. Decide what content truly belongs on the home page (and what ought to be shifted onto interior pages.)
  7. Draw up a few wireframes to determine what page content areas should go where on the home page.
  8. Build the home page using HTML5 and an external stylesheet.
  9. It's okay to rebrand the organization along the way, but don't spend the bulk of your time on this. This assignment is primarily about good coding practices.
  10. Use an appropriate amount of CSS3.
  11. Validate your code. CSS3 rules will not validate, but I will ignore those errors.
  12. Test your home page in at least three different browsers.
  13. ZIP up your site folder and turn it in.

For Next Week

In this course, you will be designing a high-content site and then migrating to WordPress, which is a content management system.

You will be working on this website starting with next week and through Week 11. Decide what kind of website you are going to make. Be able to tell us a little about it at the beginning of class next week.

Requirements
  • It must be the kind of site that would have a very large amount of content that is updated very regularly.
  • It's the kind of site that can use essentially the same layout for every page (the home page can have some differences.)
  • It's okay to use the same site you redesigned this week, so long as it meets the two requirements above. HINT: practically any organization can create a lot of content if they dedicate themselves to it.