New main element in HTML5.1

The HTML5 structural elements (header, nav, footer, section, article, and aside) have a long-awaited new friend: the main element. Use the main element to contain the main content of a web page. For more details about the main element, check out the following resources:

• Main element added to HTML 5.1
• W3C HTML5.1 Spec

Responsive Design Beyond the Pixel

With so many mobile devices displaying such a variety of screen resolutions the days of choosing breakpoints for responsive display based solely on pixel value are behind us.

 Ben Callahan at Sparkbox draws an analogy between the Matrix's concept of "there is no spoon" to "there is no breakpoint" — it all depends the content. Callahan also suggests using ems instead of pixels in media queries.

In a recent Smashing Magazine article, "Logical Breakpoints for Your Responsive Design", Vasilis van Gemert emphasizes that "common" screen sizes no longer exist and suggests configuring breakpoints using readabilty theory.

Here are two heuristics cited by van Gemert that can be helpful as we move from pixel-perfect breakpoints to content-influenced breakpoints:

•  “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” — Robert Bringhurst  The Elements of Typographic Style
• “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” — Josef Müller-Brockmann  Grid System in Graphic Design

Author van Gemert suggests that web designers start with a small screen layout and configure a break each time the "width of the main content grows wider than either 75 characters or 10 words".

Responsive design has moved beyond the pixel — it's all about the content!

New 2nd Edition for Basics of Web Design: HTML5 & CSS3

It's exciting to announce that my new book, the 2nd edition of Basics of Web Design: HTML5 & CSS3, is available at Amazon. 

Building on the textbook's successful first edition, we kept what you like — topics introduced in two pages, color illustrations and screen captures, lots of hands-on practice exercises, and a case study website that students build as they work through the book. We heard your suggestions to remove XHTML topics and to add another case study.  There are now two running case study websites for students to practice with. 

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

HTML5 is One Step Closer to a Standard

The W3C announced recently that HTML5 has progressed to Candidate Recommendation status. This means HTML5 is relatively stable and that web designers should feel confident using HTML5 syntax on web pages. The W3C indicated that new work and future changes will be part of the HTML5.1 specification. See http://news.cnet.com/8301-17939_109-57559512-2/w3c-buttons-down-html5-opens-up-html5.1/ for more information.

Graphic Designers: Making the Transition from Print to Web

Many experienced graphic designers are retooling and studying web design to enhance their skillsets to meet the changing expectations of potential employers in the ever-evolving field of graphic design. As I've taught web design courses for over a decade, I've noticed that students who have a background in graphic design often need to shift their expectations when designing for the Web.

I came across an interesting description of this paradigm shift while reading an article about the Evolution of CSS. Here is a summary of the article's description of the difference between print design and web design:

Designing for Print

When designing for print, the designer is in control of:

• page size
• content amount
• fonts and font size
• pixel-perfect layout
  
  

Designing for the Web

When designing for the Web, the designer must configure pages that display on many different types of devices, such as typical desktop monitors, large monitors, small netbook monitors, tablets, smartphones, etc. Also, the designer must allow for varied display conditions, including:

• screen resolutions
• aspect ratios
• font support
• viewport reszing
  
  

Expect the Unexpected

A key point in the article: "Web layout has to be flexible, adaptable, automatic, and robust. It can't fail because it's loaded in an environment that wasn't quite what the designer had in mind... because that happens all the time."

Responsive Web Design to the Rescue

Responsive web design techniques including CSS media queries, flexible images, and relative font sizing (ems and percentages) are essential tools to designing websites that display well on the multitude of varied devices that people use to access web pages. It's a complex, but exciting, time to be a web designer.

Split in Groups Developing the HTML5 Standard

The W3C is  planning to create a single, definitive standard (the snapshot) while the WHATWG’s living standard will continue to add new features and receive refinements. See more at HTML5 Splits – Snapshot or Living Standard? - 'Net Features - Website Magazine

First Impressions Matter

Your mom always told you that first impressions are important and she was right! Check out the Five Second Test (http://fivesecondtest.com) to find out more about how visitors form instant perceptions of your website design. This could also be a useful tool to help decide between multiple potential layouts or redesigns.

Summer Reading List from A List Apart

Here's the annual Summer Reading List from A List Apart:

Wondering about the IPV4 to IPV6 switchover?

For a brief introduction to the switch from IPV4 to IPV6, read Virginia DeBolt's post In Case You Didn’t Notice – the Internet is All New

The HTML5 Edition Is Here!

The new HTML5 edition of my popular textbook, Web Development and Design Foundations with HTML5 (6th edition), is available at Amazon.com. This edition focuses on how to use HTML5 and CSS3 today and while introducing new elements and techniques that will be utilized in the future.

The release of the 6th edition also marks the 10 year anniversary of the textbook — the 1st edition was published back in 2002 — with new editions about every 18 months to keep current with industry trends.

Visit the textbook's companion website at http://webdevfoundations.net for more information about the book.

Non-Breaking Space Show

Check out the new Non-Breaking Space Show — it's a podcast by web professionals and authors Christopher Schmitt and Dave McFarland. They chat with the "best and brightest on the web about what and why they do what they do."

SOPA

SOPA, the Stop Online Piracy Act, will do much more than stop pirated media on the Web — SOPA gives the government the power to block and censor websites. See http://fightforthefuture.org/pipa/ for more information on related issues.

W3C Conference Presentations Streamed Live

W3Conf: Practical Standards for Web Professionals will be held on November 15-16, 2011. There is a well-rounded line up of presentations including web standards, HTML5, CSS, and universal access. See the conference presentation schedule. What's really cool is that the presentations will be streamed live and archived at http://www.w3.org/conf/live.html.

Silk: Amazon's New Browser

Amazon recently released their new Kindle Fire, which is an Android-based 7 inch tablet WiFi device. In addition to the Kindle e-reader app, the Fire includes access to the Amazon AppStore (but not the Android Marketplace), typical utilities (like e-mail access), and a spanking new browser called Silk.

Watch the video below to find out how Amazon leverages cloud processing to speed the performance of Silk and cache pages that you are likely to request (before you even knew you wanted to read them).

Get Started with HTML5 Today!

There is a lot of buzz about HTML5 these days, which will be the successor to HTML 4 and replace XHTML. If you already use HTML 4 or XHTML to design web pages, you're probably wondering how to begin using HTML5.

Currently in draft statusMoved to Candidate Recommendation status by the W3C in late 2012, HTML5 is a superset of HTML 4, provides for the use of XHTML-like syntax (such as enclosing attributes within quotation marks, and always coding both opening and closing tags), and is intended to be backward compatible. The working draft of HTML5 is available at http://www.w3.org/TR/html5. An explanation of the differences between HTML 4 and HTML5 is located at http://www.w3.org/TR/html5-diff.

It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.

Document Type Definition

Because multiple versions and types of HTML and XHTML exist, the W3C recommends identifying the type of markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in your document. Browsers and HTML code validators can use the information in the DTD when processing the web page. The DTD statement, commonly called a doctype statement, is placed at the top of a web page document. The DTD for HTML5 is
<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!

Your First HTML5 Web Page

The syntax of HTML5 is streamlined and easier to use than HTML 4.0 and XHTML. You are free to code with upper and lowercase letters as well as optionally close container tags. However, that could lead to web pages with display problems and processing problems when you begin to add technologies such as CSS and JavaScript to the mix. So, I follow the coding conventions for HTML5:

• use lowercase letters
• place quotes around attribute values
• always code closing tags for container elements.

This rigorous coding style will help to prevent many CSS layout and JavaScript processing issues that you might otherwise encounter.

Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
The figure below shows the web page source code displayed in the Notepad text editor.

The figure below depicts the browser display of the web page.

More About HTML5

Now that you’ve seen an example of the syntax; now let’s delve deeper into HTML5.

Structural Elements

Take a moment and think about how you typically structure a web page layout with div elements. You may find that it’s common to use ids or classes with names such as header, nav, or footer. HTML5 has several new structural elements that render as block display specifically intended for organizing web pages:

• <header> contains the heading information for a page area section. The header element is block display and will typically contain one or more heading level elements (h1 through h6) and, optionally, the hgroup element
• <hgroup>The hgroup element groups heading level tags and is useful if the logo header area of a web page contains both the website name and a tagline
• <nav> contains a section of navigation links
• <aside> contains sidebar, note or other tangential content
• <footer> contains the footer of a section.
• <article> contains an independent entry, such as a blog posting, comment, or e-zine article
• <section> contains a “section” of a document, such as a chapter or topic. A section might contain <header>, <footer>, and other elements needed to display the content
• <figure> and <figcaption> associates a caption with an image or video

The wireframe below shows a page layout using the new header, nav, section, figure, and footer elements.

Phrase Elements

HTML5 revisits the former physical style and logical style elements – now called phrase elements. Semantic uses of common phrase elements follow:

• <b> Bold text with no particular importance
• <strong> Bold text with strong importance
• <i> Italic text with no particular emphasis
• <em> Italic text that is emphasized
• <small> Small-size text that semantically indicates small or fine print – like a legal notice

HTML5 adds new inline display elements that are intended to provide more options for semantic markup of web page content. For example, the new <mark> element configures text as “marked” or highlighted.

New Multimedia Elements

HTML 5 contains several new elements that are intended to simplify displaying multimedia in web pages.

• <video> configures embedded video.
• <audio> configures embedded audio.
• <embed> configures plug-in content
• <canvas> provides for dynamically drawing graphics and interactive games with scripting (JavaScript)
   

More New Elements

HTML 5 contains new elements for a variety of purposes, such as progress, meter, dialog, menu, and more. New HTML5 form controls are configures using new attribute values for the input element. And there's even more! See http://www.w3.org/TR/html-markup/ and explore the list of elements.

Elements Eliminated

A number of elements were listed as deprecated in HTML 4 and XHTML. Some of these deprecated elements were eliminated from HTML5, such as <big>, <center>, <frame> , <frameset>, and <noframes>.

HTML5 & Today’s Browsers

Internet Explorer 9 and current versions of Safari, Chrome, Firefox, and Opera offer good support of HTML5 structural elements. The issue is that many people still use earlier versions of browsers. There are two different approaches you can follow if you’d like to begin using HTML5 today: a conservative, straightforward approach and a progressive approach that is more involved and requires JavaScript.

Conservative Approach to Using HTML5 Today

For the best chance at compatibility, code using either HTML5 or XHTML syntax and avoid using the new HTML5 elements. Instead, use <div> tags to structure page areas and configure the new element names as class names or id names. For example, the opening div tag that contains the page footer area could be coded as
<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!

Progressive Approach to Using HTML5 Today

Code using new HTML5 elements and include CSS that configures older non-supporting browsers to render the HTML5 header, hgroup, figure, figcaption, footer, nav, section, article, and aside elements as block display (use display: block;). This will work well in all browsers except for Internet Explorer 8 and below. The CSS code follows:

header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }

So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim,  to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.

Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!

Explore the following resources to learn more about HTML5:

• W3C’s Web Developer’s Guide to HTML5
  http://dev.w3.org/html5/html-author
• W3C’s Interactive Chart of HTML 4 and HTML5 Elements
  http://dev.w3.org/html5/html-author/#comparison-of-html-4.01-and-html-5-elements
• HTML5 Doctor
  http://html5doctor.com
• HTML5 Demos
  http://html5demos.com
• HTML5 Cheat Sheet
  http://media1.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

Adobe's Expressive Web

Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.

Expansion of TLDs

Need a change from the the old .com, .net, .biz domains? We'll look for more variety in the future. ICANN has approved the expansion of generic TLDs and will accept new TLD applications from companies/organizations to create TLDs for their brand or company names. Sound too good to be true? Well, there's a catch. With an $185,000 application fee and an annual $25,000 fee, you need deep pockets. Applications will be accepted in early 2012. Visit http://icann.org for more information.

Mobile Apps: Basics of Web Design Review

Need to review concepts from the Basics of Web Design: HTML5 & CSS3 textbook? There's an app for that!

• Android Market: Basics of Web Design Review
• iTunes App Store: Basics of Web Design Review

The app provides a mobile way for students to check their knowledge of the concepts and topics in the book; featuring a review quiz for each chapter with 10 randomly chosen questions. Students can practice and review anywhere with this handy app.

Trial Version of Dreamweaver CS5

With Adobe's announcement about CS5.5 it's become temporarily difficult to find the free trial Dreamweaver download on their site. Here's a direct link to the download:
https://www.adobe.com/cfusion/tdrc/index.cfm?ref=sup&product=dreamweaver

New HTML5 Logo from the W3C

The W3C's new HTML5 logo is here! Visit http://www.w3.org/html/logo for free downloads of image files, free stickers, and other fun stuff.

Although some may question the need for a "logo", it's one way to spread the word about this emerging technology.

The key is the concept of progressive enhancement — use HTML5 new elements, attributes, and features to enhance web pages rather than for mission critical requirements. My new book, Web Design Basics: HTML5 & CSS3, takes this approach.