Newest version of Web Content Accessibility Guidelines (WCAG)!

WCAG 2.1 is now in Candidate Recommendation Status. WCAG 2.1 extends WCAG 2.0 by adding new success criteria and guidelines. Visit https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1 to read about the new features.

Basics of Web Design 4th Edition Available at VitalSource

The 4th edition of Basics of Web Design: HTML5 & CSS3 is available at VitalSource: https://www.vitalsource.com/products/basics-of-web-design-terry-felke-morris-v9780134444413

Basics of Web Design 4th Edition Available on Chegg!

Announcing that the 4th edition of Basics of Web Design: HTML5 & CSS3 is available for rental on Chegg.com.  

This edition is part of a Pearson Publishing pilot program intended to save students money by providing lower-cost book rentals. 

Adobe Announces End of Flash after 2020

Adobe recently announced that the Flash Player will no longer be developed and distributed after 2020. When Flash was developed in the early days of the Web, the application offered a method to provide interactive, animated, multimedia content that was not possible with HTML and JavaScript. Over the years, technologies including HTML5 Video, HTML5 Audio, HTML Canvas, SVG, and robust JavaScript interfaces have been developed and have elminated the need for Flash. There is a lot of legacy Flash content that could be lost forever when the Flash Player is no longer supported. There is a petition to open source the Flash Player to keep this legacy content available.

Thimble -- A Free Online Code Editor

Thimble is a free online code editor supported by the Mozilla Foundation. After you sign up you can create multi-file projects -- including HTML, CSS, JavaScript, and ming files. There is an instant preview feature. When you are ready, you can publish your work to the Web and Thimble provides you with the URL. Thimble is an extremely useful tool for educators and students.

WCAG 2.1 Working Draft Available

Mobile devices were in their infancy back when the WCAG 2.0 guidelines were developed. The W3C has just released a first draft of a long-awaited update: WCAG 2.1 for public comment. The purpose of WCAG 2.1 is to extend WCAG 2.0 and introduce additional success criteria including mobile device accessibility, low vision accessibility, and cognitive and learning disability accessibility. WCAG 2.1 supports all WCAG 2.0 accessibility success criteria. So, if a web page meets WCAG 2.1 success criteria, the page also meets WCAG 2.0 success criteria. The W3C invites you to read the working draft of WCAG 2.1 and submit feedback.

New 4th Edition of Basics of Web Design: HTML5 & CSS3!

The new 4th edition of Basics of Web Design: HTML5 & CSS3 is now available!

Building on the textbook's successful 3rd edition, the 4th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards.

Updates for the 4th edition include:

• Updated coverage of HTML5 elements and attributes
• Expanded coverage of responsive web design techniques and CSS media queries
• Expanded coverage of responsive image techniques including the new HTML5 picture element
• CSS coding techniques for dynamic menus
• Updated reference sections for HTML5 and CSS
• Additional Hands-On Practice exercises
• A new Case Study
• Updated code samples and web resource
• New Appendix introducing CSS Flexbox Layout

Section 508 Refresh

The US Access Board has released a final rule that updates the Section 508 requirements to harmonize with WCAG 2.0 Level AA Success Criteria. The Information and Communication Technology (ICT) Standards and Guidelines were published on 1/18/2017. The standards apply to “electronic and information technology developed, procured, maintained, or used by Federal agencies covered by section 508 of the Rehabilitation Act of 1973.” The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS3 textbooks follow the WCAG 2.0 Level A & AA Success Criteria so students are prepared to create accessible websites. (post updated 2/1/17)

HTML5.1 is Now in Recommendation Status

The W3C has been busy this fall — HTML 5.1 has reached Recommendation status! https://www.w3.org/blog/2016/11/html-5-1-is-the-gold-standard/

Essential Guide to Digital Accessibility Infographic

When you provide for digital accessibility you design and configure mobile applications, digital documents, and web pages so that everyone, including those with disabilities, can have a similar user experience. Check out Deque's The Essential Guide to Digital Accessibility Infographic.

Video Marketing

Video marketing is an increasingly important tool for promoting a business on the Web. An infographic with more facts and statistics about video marketing is available at https://animoto.com/blog/business/2016-social-video-forecast-infographic/

New Blisk Browser

There is a new browser on the block and its name is Blisk! The Blisk browser was created specifically for developers and can be configured to emulate multiple devices, auto-refresh page rendering as files are edited, and synchronize scrolling between desktop rendering and device emulation. Future featured include screenshots, video captures, analytics, and more. Blisk is available as a free download for Windows at https://blisk.io. Mac and Linux versions are in the works.

Choose Accessible Colors Palettes with Color Safe

Try out the Color Safe web app for help with choosing background and text colors with enough contrast to meet WCAG 2.0 requirements.

8th Edition of Web Development & Design Foundations with HTML5 is Now Available!

It's exciting to announce that my new book, the 8th edition of Web Development & Design Foundations with HTML5, is now available at Amazon!

The popular Web Development & Design Foundations with HTML5 textbook provides a foundation in the skills and concepts that web designers need:

• Internet and Web concepts overview
• Create web pages with HTML5
• Configure color and text with CSS
• Configure page layout with CSS
• Configure images and multimedia
• Explore new CSS3 properties
• Apply Web Design Best Practices
• Design accessible and usable web pages
• Design for search engine optimization
• Choose a domain name
• Publish to the Web
• E-Commerce Introduction
• Javascript Overview
• jQuery Overview

The 8th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards. Updates for the 8th edition include:

• Updated coverage of HTML5 elements and attributes
• Expanded coverage of responsive web design techniques and CSS media queries
• Expanded coverage of responsive image techniques including the new HTML5 picture element
• Introduction of CSS coding techniques for dynamic menus
• Updated reference sections for HTML5 and CSS
• Additional Hands-On Practice exercises
• A new Case Study
• Updated code samples and web resources

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

Create Fullscreen HTML5 Page Background Video

Check out Dudley Storey's informative overview of responsive techniques for configuring a video as a full-page background at "Create Fullscreen HTML5 Page Background Video".

Five Current Web Design Trends

Check out the overview of the five current web design trends at http://www.webteacher.ws/2015/10/01/pros-cons-5-current-web-design-trends/

Configuring Text for Mobile Devices

Check out the useful tips about configuring text for mobile devices at http://www.creativebloq.com/web-design/how-choose-right-fonts-small-screens-91516966

Overview of Image File Types

Check out the informative infographic at http://makeawebsitehub.com/image-formats-mega-cheat-sheets/ about common image file types that describes their origins, characteristics, and best uses.

Using Color Theory to Improve Website Accessibility

Great tips on color selection and use in the article Using Color Theory to Improve Website Accessibility! Topics include: color combinations to avoid, importance of contrast (including warm/cool contrast), selecting complementary colors, using a monochrome color scheme, creating accents with texture and thickness, and an overview of tools and resources.

Nine Principles of Responsive Web Design

Check out the infographic overview of nine principles of responsive web design at http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Flat Web Design

The article, The Future of Flat Design, highlights characteristics of this design trend: bright color palettes, simple typography, minimalism, ghost buttons, and long shadows.

Promo Trailer for 3rd edition of Basics of Web Design: HTML5 & CSS3

Check out the promo trailer for the 3rd edition of my book, Basics of Web Design: HTML5 & CSS3

Tips for Choosing a Domain Name

Check out the tips for choosing a domain name at http://firstsiteguide.com/choose-domain/

An Event Apart Web Design Conferences

Looking for ways to develop your skills after taking a web design/development course? Check out the conferences offered by An Event Apart. ‪

Psychology of Color Infographic

Colors evoke emotions and can help to engage your website visitor. Check out this psychology of color infographic:
Infographic by WebpageFX

New 3rd Edition for Basics of Web Design: HTML5 & CSS3!

New 3rd Edition!

It's exciting to announce that my new book, the 3rd edition of Basics of Web Design: HTML5 & CSS3, will be available at Amazon in late January! 

The popular Basics of Web Design: HTML5 & CSS3 textbook provides a foundation in the skills and concepts that web designers need:

• Internet and Web concepts overview
• Create web pages with HTML5
• Configure color and text with CSS
• Configure page layout with CSS
• Configure images and multimedia
• Explore new CSS3 properties
• Apply Web Design Best Practices
• Design accessible and usable web pages
• Design for search engine optimization
• Choose a domain name
• Publish to the Web

The third edition builds on the textbook's successful earlier editions. With the widespread support of HTML5, this edition introduces HTML5 structural elements early (in Chapter 2). Chapter 5 now provides an overview of color theory and an expanded treatment of the use of color in web pages. 

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

New Microsoft Browser with Windows 10

Computerworld reports that Microsoft will unveil a new browser code-named "Spartan" with the release of Windows 10.

The Book of CSS3 NEW 2nd Edition

Just got a copy of Peter Gasston's new 2nd edition of The Book of CSS3! There is detailed information and examples of CSS3 properties including transformations, flexible box layout, grid layout, and more! It's a great book to have on hand for reference, too!

HTML5 in W3C Proposed Recommendation Status

HTML5 has been moved from W3C Candidate Recommendation Status to W3C Proposed Recommendation Status — effective September 16, 2014!

Everything You Need to Know About the Color Blue

Check out the Coolness of Blue in Web Design infographic to find out what types of websites use the color blue, which brands use blue, how different cultures perceive the color blue, and more!

Free Stock Image Resources

As a web design student builds a portfolio of website projects, it can be quite time-consuming to create images. TNW provides a curated list of the best free offers a list of the best free stock image resources on the Web.

New 7th Edition for Web Development and Design Foundations with HTML5

It's exciting to announce that my new book, the 7th edition of Web Development and Design Foundations with HTML5, is available at Amazon. 

Building on the textbook's successful 6th edition, the 7th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards.

 Updates for the 7th edition include:

• Expanded coverage of new HTML5 elements and attributes 
• Expanded coverage of designing for the mobile web with new sections on responsive web design, mobile web design best practices, viewport meta tag, CSS media queries, flexible images, and testing mobile display 
• Expanded coverage of CSS3 properties, including CSS3 flexible box layout 
• New sections providing an introduction to jQuery 
• Updated code samples, case studies, and web resources

The textbook companion website has a page for each chapter in the text containing the links for URLs listed in the book, information on emerging trends, additional examples, corrections, and review activities.

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

New generic Top Level Domain (gTLD) Names

It often seems like all the best .com domain names are already taken, but that won't be a problem much longer with ICANN's release of new generic Top Level Domain (gTLD) extensions. New gTLDs that were announced late 2013 and early 2014 include a wide variety of options such as .photography, .technology, .voting, .tips, and .guru. A complete list is available at http://newgtlds.icann.org/en/program-status/delegated-strings. Major domain registrars, such as GoDaddy, are offering preregistration for many new gTLDs.

Wondering about UTF-8? Check out this video....

Computerphile presents a video of Tom Scott explaining what you always wanted to know about character encoding in ASCII and UTF-8.

Handy Infographic About Responsive Web Design

This handy infographic by Dot Com Infoway highlights the shift towards mobile devices. Responsive Web Design (RWD) techniques provide web designers a way to develop a single website that displays well and is usable on multiple devices, platforms, and screen sizes.



Source: Dot Com Infoway – Software and Mobile Application Development Company

Four New gTLDs Announced

The Internet Corporation for Assigned Names and Numbers (ICANN)  announced that the first four of potentially 1,400 new generic Top-Level Domains (gTLDs) have been delegated for use.

The new four gTLDs and their registries are listed below.

• شبكة  –  "web/network" in Arabic
  Registry: International Domain Registry Pty. Ltd.
• онлайн  –  "online" in Cyrillic
  Registry: CORE Association
• сайт  –  "site" in Cyrillic
  Registry: CORE Association
• 游戏 –  "game(s)" in Chinese
  Registry: Spring Fields, LLC

Expect additional new gTLDs to be made available for use over the next few years. Visit https://gtldresult.icann.org/application-result/applicationstatus for a list of gTLD applications and their status.

HTML5 Popularity Among Fortune 500 Companies

Interesting infographic — note the increased trend in use of HTML5!


HTML5 Popularity Among Fortune 500 Companies - An infographic by the team at INCORE Web Design

"Ultimate Guide" to Selecting Color Schemes

Check out the handy introduction to the use of color on web pages (including examples) at http://www.motocms.com/blog/project-news/color-combination-ultimate-guide/

Browser Tools for Testing Responsive Web Design

While the best way to test your responsive web designs is to use a variety of browsers and devices (including desktop, tablet, and smartphone), web developers often begin testing RWD by resizing the desktop browser. Browser resizing is handy but can sometimes be a little awkward. Check out the following online tools that will provide instant views of your web page in a variety of screen sizes and devices:

• Am I Responsive 
• DevicePonsive
• Responsive Test
• Screenfly 

It's fun to view your responsive website on these browser tools.  The true test, however, is to view your web pages on a variety of physical mobile devices.

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.

New HTML5 & CSS3 Textbook

Looking ahead to an early March, 2011 publishing date for my new textbook, Basics of Web Design: HTML5 & CSS3! The textbook takes a unique approach to prepare students to design web pages that work today in addition to being ready to take advantage of new HTML5 coding techniques of the future.

Use HTML5 Today!

To meet this challenging goal, Basics of Web Design: HTML5 & CSS3 introduces both XHTML syntax and HTML5 syntax, presents coding web pages in HTML5 with backwards-compatible techniques that work in current browsers, and also provides practice with HTML5's new features that will only work in the latest versions of browsers.

Two-Page Sections

Today's learners are busy multitaskers. Basics of Web Design: HTML5 & CSS3 is organized in two-page sections that quickly introduce the reader to new topics, provide examples, and offer hands-on exercises. This approach will get your students up-and-running quickly. Visit http://webdevbasics.net for more info and a table of contents.

Google SEO Guide

Check out the new Search Engine Optimization Starter Guide from Google. Using a baseball card website as an example, the guide clearly demonstrates techniques that web developers and web designers can build into a site. Seach Engine Optimization (SEO) techniques for mobile sites are also provided.

New Adobe Flash CS5 Tutorial

The tutorial has been updated for Adobe Flash CS5:
Adobe Flash CS5 Banner Tutorial

New Adobe Fireworks CS5 Tutorial

The tutorial has been updated for Adobe Fireworks CS5:
Adobe Fireworks CS5 Banner Tutorial

New Adobe Photoshop CS5 Tutorial

The tutorial for Adobe Photoshop has been updated for CS5:
Adobe Photoshop CS5 Banner Tutorial.

The Growing Importance of Social Media

Twitter, Facebook, MySpace, LinkedIn ... the list can go on and on. Social media seems intertwined with our daily lives. Check out Erik Qualman's slick video that answers the question, "Is Social Media a Fad?"

The statistics to support the statements in the video are available at Socialnomics.net.

HTML5 Online Conference

If you've been looking for a quick way to get up-to-speed on HTML5, check out ThinkVitamin's HTML5 Online Conference on April 12, 2010. It's four hours of online presentations from some leading edge web developers:

• An Introduction to HTML5
  
• HTML5 Canvas, Video & Forms
  
• HTML5 Web Sockets, Web Workers, and Geolocation Unleasehed
  
• HTML5 Storage APIs
  

Purchase HTML5 Conference Ticket Here

CS5 Launch Announced by Adobe

It's here — the new version of Adobe's Creative Suite, CS5. Adobe will launch Creative Suite 5 during a webinar on April 12, 2010.

Google Moving Forward on YouTube Accessibility

Google recently announced that their pilot auto-captioning project will be expanded to include all English language videos on YouTube. Not only is this a huge step in increasing the accessibility of YouTube content, auto-captions are also useful in searching for video content. Although speech-to-text technology is not perfect, the owner of the video has the option to download the auto-generated captions and improve them. The service will expand to include more languages in the future. More information on the announcement. More information on YouTube captioning.

Interview Posted at WebProfessionals.org

Wondering if web development/design may be right for you? For a brief overview of the web development programs at Harper College and a description of the career, check out my interview at WebProfessionals.org.

Universal Design for the Web

The Center for Universal Design defines universal design as "the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design." See http://terrymorris.net/universaldesign for a video overview of universal design for the web.

Awareness of universal design by web developers has been steadily increasing. Web accessibility — often left until the last moment — has garnered increased attention and is now more typically integrated into the design and coding process. Accessible web sites, with alt text for images, heading tags used in an organized manner, text navigation links, and captions or transcriptions for multimedia are more easily used not only by visitors with disabilities but also by visitors using a mobile browser. An accessible web site may also help with search engine optimization.

Here are some resourcs to jumpstart your accessible design skillset:

• Web Accessibility: 6 Reasons Why Its Important


• Accessibility Jargon Overvidew


• Tools for Conducting an Accessibility Review

Apple Announces "iPad"

The long awaited tablet device from Apple was announced today. The iPad, a touchscreen tablet computer that access the Web via WiFi and the AT&T network. More about the iPad.

CSS3 RGBA Color

Looking for ways to use transparency and color? Check out RGBa color, part of the CSS3 working draft, to configure both color and alpha (tranparency) with CSS. All major browsers with the exception of Internet Explorer (are you listening, Microsoft?) support RGBA color. 24ways.com offers a brief overview of RGBA Color.

A List Apart Survey

A List Apart is conducting their annual survey of web professionals. Check out http://alistapart.com/articles/survey2009 to take the survey. You might also be interested in the analysis of the 2008 survey results.

Technology Predictions for 2010

Wondering what's in store technology-wise for the new year? Check out Newsweek's technology predictions for 2010. The most intriguing is the long-awaited Apple tablet netbook, described as a 10-12 inch full color touch screen tablet device that can access the Web, online newspapers, and books (and may possibly run Mac OS X). And if the price really is as low as rumored (possibly as low as $600) — sign me up!

Visible Tweets

Jump into the twitterstream and explore your favorite topic on Twitter in a visual way at http://www.visualtweets.com. This could be an effective attention-getting method when introducing a new topic class or beginning a presentation.

The Social Media Count

Check out the Social Media Count for a visual look at the growth of social media.

CSS Property Review

Announcing a new resource on the Web Development & Design Foundations textbook companion site: CSS Property Review.

Use this Ajax application to review your knowledge of CSS properties:

• Begin typing the name of a CSS property in the text box.
• As you type, a list of suggested CSS property names will be displayed.
• When you type a complete CSS property name, a description of the property is shown.

Web Design Best Practices Checklist (redux)

Another article in Smashing Magazine includes a link to the Web Design Best Practices Checklist. Check out Cameron Chapman's 6/29/09 article, 45 Incredibly Useful Checklists and Questionnaires.

OWEA - Open Web Education Alliance

The new W3C incubator group, The Open Web Education Alliance (OWEA), is expected to have a significant positive impact promoting web standards and best practices to the realm of web education. OWEA's mission of OWEA is to bring together companies, schools, and organizations involved in shaping the education of Web professionals to explore the issues around the topic of Web development education and create solutions for improvement.

Web Design Best Practices Checklist

Smashing Magazine included a link to the Web Design Best Practices Checklist in Cameron Chapman's May 14, 2008 article, Non Profit Website Design: Examples and Best Practices.

WolframAlpha — Beyond Search Engines

Check out WolframAlpha (http://wolframalpha.com) — a computational knowlege engine.

The rather lofty goal of WolframAlpha's developers is to "make all systematic knowledge immediately computable and accessible to everyone"! They're collecting objective data, implementing models, methods, and algorithms, with the final aim to "build on the achievements of science and other systematizations of knowledge to provide a single source that can be relied on by everyone for definitive answers to factual queries."

A video overview is available at
http://www75.wolframalpha.com/screencast/introducingwolframalpha.html

Zeldman Explains "What are web standards and why are they important?

Jeffrey Zeldman, one of the founders of The Web Standards Project, discusses how the movement for web standards began, why it succeeded, his thoughts on design, accessibility, validation, and more...

My fav quote is Zeldman's take on design, "..design, like everything in life is about understanding what the problems are, solving those problems, and there's always trade offs."

WCAG 2.0 Resources

Check out Patrick Lauke's presentation, "What you need to know about WCAG 2.0" for an overview of how WCAG 2.0 differs from WCAG 1.0 and, well, what you need to know about WCAG 2.0. :) The ATRC Web Accessibility Checker is now available — it's an online testing tool that checks for WCAG 2.0 compliance. The tool conducts a number of automated tests and also notes areas that must be checked manually.

Microsoft Expression SuperPreview

Wouldn't you like a convenient way to test your web pages in multiple versions of Internet Explorer on the same machine?  Try Microsoft Expression Web SuperPreview  — beta version available for free download. This stand-alone application provides a way for you to test your pages and easily compare the rendering of the various flavors of IE — a productivity boon for web developers everywhere. Of course, we wouldn't need this tool if Microsoft could have just followed web standards to begin with!  

Web Standards Project InterAct Curriculum Framework

The Web Standards Project (WaSP) recently announced a new web design curriculum framework, InterAct, intended to be a living curriculum to help schools, colleges and universities bridge the gap between educators and industry best practices. There is a wealth of course materials that educators can adapt or adopt as best meets their needs — including assignments, projects, exam questions, resource links, and even learning modules.

It was a great experience to work with my fellow WaSP Education Task Force members during 2008 and 2009 as the curriculum framework took shape. Web Development & Design Foundations is one of the recommended reference books for the Web Design 1 course. Also check out the Accessibility course — I spent many hours developing this course and organizing materials for it. A shout-out of thanks goes to course reviewers Glenda Sims, John F. Croston III, Virgina DeBolt, Mark DuBois, and Jon Gunderson.

WCAG 2.0

A new day has dawned for web accessibility -- the W3C Web Accessibility Initiative (WAI) Web Content Web Content Accessibility Guidelines 2.0 (WCAG 2.0) has finally reached W3C Recommendation status it's now an official web standard. The WCAG 2.0 Guidelines are organized around the following four principles (use the acronym POUR to remember them):

1. Content must be Perceivable
   
2. Interface components in the content must be Operable
   
3. Content and controls must be Understandable
   
4. Content should be Robust enough to work with current and future user agents (including assistive technologies)

Check out the WCAG 2.0 Quick Reference and Understanding WCAG 2.0 to learn more about these guidelines.

Web Teacher Review

Check out Web Teacher's review of Web Development & Design Foundations with XHTML. Here's an excerpt:

"This book is 100% courseware, a complete curriculum with project files, test and discussion questions, careful planning of objectives and learning activities, and resources for students at the Addison Wesley site for the book. ... Very complete. It deals with code, design, ethics, accessibility, best practices and every aspect of design and development. A student who mastered everything in this book would have a good grasp of both past and present web development knowledge."

Google Celebrates 10th Birthday!

Was it only ten years ago that the Web was without Google? If you'd like to know more about Google's origins (including a photo of their start-up garage), have fun exploring Google's Tenth Birthday page and Interactive Timeline.

OneWebDay - 9/22

Press release: On the third annual “Earth Day for the Internet”, communities across the country are holding events to learn about and advocate for that marvel of modern infrastructure, the Internet. It happens in the United States and around the world on OneWebDay, Monday, September 22, 2008.

Which Browser Will Gain the Most Market Share?

See PC World for a an overview of the new browser wars -- between Chrome, IE8, and Firefox 3.1. Find out how they compare in areas of security, speed, reliability, etc. According to PC World, Google's Chrome browser is poised to take more market share away from Firefox than from IE8. Only time will tell.....

Google's new browser -- Chrome

Google is due to release a beta today of its new browser named Google Chrome. See http://www.google.com/googlebooks/chrome/ for a comic book intro to Chrome. Download Google Chrome. View Chrome FAQs.

Target's Lack of Web Accessibility == SIX Million Dollars

Look for more organizations to increase their focus on web accessibility — Target and NFB just reached a $6 million dollar settlement. See http://webaim.org/blog/target-lawsuit-settled/ for an overview.

One Trillion Pages....

Google's Official Blog recently reported, "even our search engineers stopped in awe about just how big the web is these days -- when our systems that process links on the web to find new content hit a milestone: 1 trillion (as in 1,000,000,000,000) unique URLs on the web at once!" The article also has a high-level overview of how Google keeps up with the Web. :-)

Web Standards Project Curriculum Framework

The Web Standards Project (WaSP) just announced the WaSP Curriculum Framework. The framework's goal is to identify the skill sets and competencies that aspiring Web professionals need to acquire to prepare them for their chosen careers. Outlines for a set of foundation courses that can be readily adapted into an existing program at a college, school, or university will be released in March 2009. This curriculum framework is intended to be a "living" curriculum with contributions from web educators and web professionals.

The WC3 Question & Answer blog post on the proposed framework states, "After years of hearing people lament that we would not get a better web until we get better ways of teaching the Web to the professionals (of today and tomorrow), is very exciting to see the recent crop of community driven efforts to provide material and guidance for the teaching of Web technologies."

New Google Knol

Google has launched a beta of Knol — kind of like Wikipedia with a twist. Google defines a knol as "a unit of knowledge" and explains that a knol is an "authoritative article about a specific topic".
Just like Wikipedia, anyone can post an article. See Web Design Best Practices for an example. :-)

Alexa : More than Search Results

Alexa lives up to its tagline: A Web Information Company — providing more than search results. You can use Alexa to find out more about a web site: with displays of an overview (including a screen capture and contact information), traffic statistics (when available), sites linking in, and a direct link to the Web Archive to view how the site looked in the past.

Do You Grok Grokker?

Grokker offers both an outline view and a visual view of search results. This provides a way to easily drill down into topics of interest in an organized manner and search within the results. Grokker searches your choice of Yahoo!, Wikipedia, and Amazon Books for information. An interesting twist is that Grokker can be licensed by businesses as an enterprise search management tool to mine their databases for information.

TouchGraph: Visually Show Connections Between Web Sites

TouchGraph's Java applet will visually display connections between websites related to the search term you enter. There are three flavors of TouchGraph:

• TouchGraph Google offers an intriguing method to explore a topic when brainstorming.
• TouchGraph Amazon visually displays books related to a topic.
• TouchGraph Facebook provides an new way to explore your friends and connections.

KartOO: A Mind Map of the Web

Continuing this week's topic of search engines — you may want to explore your favorite topic using KartOO. This visual search engine builds a mind map of websites related to your search terms. Somehow, exploring a cloud of websites is more fun than looking at page after page of text-based search engine results. :-)

New Search Engine - Searchme!

Searchme is a visual search engine that begins to show you results while you are typing your keyword or phrase. In addition to the expected search engine results page (SERP), Searchme displays the home pages of the web pages in a "deck" across the upper part of the page. A handy tool for those who think visually!