Week 1: Review: HTML5, CSS3, Design Principles
HTML 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.
What Is New to HTML5?
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.
|<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
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:
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.
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.
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.
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.)
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.
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).
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
- 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.
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.
You can even give the four corners different values.
-webkit-border-radius: 5px 40px 5px 40px;
border-radius: 5px 40px 5px 40px;
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);
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 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 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.
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.
- 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
- 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/
- 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/
- 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
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.
- Don't make your visitors have to think. A web page should be self-evident, obvious, self-explanatory.
- Recognize that visitors don't read pages. They scan them, and they muddle through.
- Create a clear visual hierarchy.
- Use conventional methods of organizing content (predictability is your friend).
- Break up pages into clearly defined areas.
- Make it obvious what's clickable.
- Keep visual noise to a minimum.
- Omit needless words.
- 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?
- 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?
Upload the following by midnight of our next class day:
|1||HTML 5 Site Redesign||redesign.zip|
HTML 5 Site Redesign
Redesign a home page for a poorly-designed site.
- Select one of the following websites, or one that is similarly poorly-designed and using outdated coding practices.
- Take a look at how their site is currently coded.
- 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.
- 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
- Decide how to organize the main navigation.
- Decide what content truly belongs on the home page (and what ought to be shifted onto interior pages.)
- Draw up a few wireframes to determine what page content areas should go where on the home page.
- Build the home page using HTML5 and an external stylesheet.
- 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.
- Use an appropriate amount of CSS3.
- Validate your code. CSS3 rules will not validate, but I will ignore those errors.
- Test your home page in at least three different browsers.
- 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.
- 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.