Use our code for free enrollment in the Udemy “Web Design from the Ground Up” Online Course (50 only)

This is a $98 class at Udemy.

This is a $98 class at Udemy.

The first 50 people to sign up for the Web Design from the Ground Up course at Udemy using the special code webteacher.ws will receive access to the class absolutely free. This is a class for beginners. Here’s what you’ll learn:

  • Over 38 lectures and 9.5 hours of content
  • Introduction to HTML and XHTML including the most commonly used elements like linking
  • Introduction to CSS (Cascading Style Sheets) for working with fonts, colors, and complete layout control
  • Web Graphics and Image manipulation with an introduction to Photoshop
  • Introduction to JavaScript with practical applications including script tags, alert boxes, form validation, and much more
  • Domain name registration – how it works, pointing your domain to your site, best practices and much more
  • How to put your site on the Internet, including choosing a web host, working with FTP, and much more
  • Accessibility – make your site visible to all users
  • Ecommerce with PayPal – setting up a shopping cart, integrating PayPal, making money with your site!

That’s a lot for 10 hours, so I’m guessing it will be basic info, but that’s what a beginner needs, isn’t it?

Many thanks to Udemy for making this special offer available to Web Teacher readers.

When to use the null alt option for images

The standards set in WCAG 2.0 state:

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Among those text alternatives is where alt text (or alternative text) for an image is used.

The HTML5 specification states that all images must have an alt attribute. Here’s the fine print. All images must have an alt attribute, but there are times when the alt attribute can be empty or null. That is, the attribute has to be there, but there might be nothing in it. Like this:

<img src="image.png" alt="">

When is null alt text acceptable?

There are times when the text surrounding an image gives the alt text of the image. It’s part of the content. Therefore, to put the same information in an alt attribute becomes redundant and unnecessary.

Here’s an example from the blog Old Ain’t Dead in the section where the most popular posts are displayed. Alt text is shown using the tools in the Web Developer Toolbar.

An example of redundant alt text.

The alt text and the clickable link are the same

You can see that the alt text for the image is exactly the same as the link text that goes with it. On a screen reader, a user would have to listen to the same text read twice. It would be better if these images had null alt text because the function of the link is explained by the text accompanying it.

Look at how Twitter deals with null alt text.

Jeffrey Zeldman's Twitter image receives no alt text

An example of null alt text

If the alt text for Twitter avatars was not null, but in fact contained the name of the Twitter account, then the name would be spoken twice in a screen reader. In the example above, with null alt text, you would hear “Jeffrey Zeldman” spoken once only because of the null alt text.

Even if you couldn’t see the little profile image, you’d still know it was Jeffrey Zeldman’s twitter account.

What about when images are not loaded or otherwise not displayed by the browser?

If you consider the two examples already mentioned – the list of top posts and the Twitter avatars – in neither situation would null alt text on the image result in the user becoming confused. The information is there in text form and it’s all that is needed.

What if the text surrounding the image does not explain what the image is?

In that case, put a description in the alt attribute that explains the function of the image or provides the content of the image.

Making Images Responsive

Making Images Responsive photo by Virginia DeBolt

Making Images Responsive photo by Virginia DeBolt

I’ve been attempting to sort out in my own mind exactly what I needed to be teaching students about responsive images. For a while, things have been a bit wobbly in this area and there were no definite best practice ideas. Thanks to the Responsive Images Community Group, I think a consensus on best practice has gelled for now.

Srcset and sizes

I’m sure you’ve heard about the new picture element. Before you think about using it, you need to know when you can use the familiar img element.

The majority of the time, the srcset and sizes attributes of the img element will be what front end developers use.

This example shows srcset with img and options for display density.

<img src="image500px.jpg"
  srcset="image750px.jpg 1.5x, image1000px.jpg 2x"
  width="500px" alt="great image">

The src attribute is the fallback image. The “1.5x” means 1.5 device pixels per CSS pixel, and is a larger image. The 2x means 2 device pixels per CSS pixel, and again, refers to a larger image. It means you have prepared 3 versions of the same image and uploaded them.

Here’s an example of code using an img element with srcset and sizes attributes.

<img srcset="large.jpg 1024w,
 medium.jpg 640w,
 small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
 100vw"
src="small.jpg"
alt="A great image">

The srcset attribute lets you give a comma separated list of image file paths. The second example used w to specify width to the browser and vw to specify viewport width. Instead of display density, the second example uses media queries to designate images from the list. Again, you have prepared 3 images in different sizes and have them on the server.

Whether you’ve prepared your code to work with pixel density or using widths, the result is the browser makes a choice as to which image will work best. The browser decides which image of the listed images fits the situation by evaluating resolution, viewport size, even bandwidth, and chooses the best image for the situation.

You can also add add the sizes attribute. The sizes attribute tells the browser how many pixels it needs by describing the final rendered width of the image. To make the image occupy a third of the viewport, the code would be:

sizes="33.3vw"

With sizes, you provide a CSS length that describes the image’s rendered width. CSS lengths can be either absolute (150px or 20em) or relative to the viewport  as in 33.3vw. As with fonts or other relative measures, the relative to the viewport value is what offers the responsive rendering. The 100vw measure is the default length and would be used if no other conditions matched.

Value can be in px, ems, or vw.

In the second example above the sizes attribute uses media query width descriptors with values in ems or vw (viewport width). The first value is a media condition (a media query without the media type) and the second value is a length. Note, the default length is not matched to a media query.

You can use only the srcset or both srcset and sizes attributes with the img element.

When you need to do more than resize an image

So, when do you use the picture element?

Sometimes an image won’t work if it is simply sized differently for different devices. It might need to be cropped or have some other type of what is called art direction work done on it. In this situation, you want to give a list of different images to the browser to use in different situations. Perhaps they’ve been cropped. If the image contain words, perhaps the text has been reworked for different size displays. They are not merely resized versions of a single image, but completely reworked images meant to fit different situations.

Use the picture element with multiple source elements for this situation.

<picture>
 <source media="(min-width: 40em)"
  srcset="big.jpg 1x, big-hd.jpg 2x">
 <source
  srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>

Embedded in the picture element are source elements with images paths, media queries, display density designations – all the things we saw with the img element, but here the source elements link to images that have been altered in some way. The last thing nested in the picture element is a fallback img element.

OMG

That’s a lot of new information for someone who grew up on the old style image tags. New length measures, new elements, new attributes. I’m not sure I really have it clearly understood. Writing this was one way to help me work it all out in my mind. If any of you see where I’m foggy or misunderstand something, please offer suggestions.

Learn More

Twitter Writes a Post about role=presentation

There is an ARIA role called “presentation” in the WAI ARIA spec. With Twitter’s help, Denis Boudreau wrote this post about it.

This is how it started:

Then @jsutt took up the idea with this:

Denis Boudreau to the rescue!

 

 

 

As you see, this ARIA role has specific and limited use. I wasn’t sure where a front end developer who was only working with semantic HTML would even consider using it.

 

Oh, at last the light dawns. This is what developers building apps sometimes need to do. Even at that, go back to point one about only using it when you really know what you’re doing and are absolutely sure you want to strip an element of its semantics.

Denis draws us to a sensible conclusion.

 

 

Review: HTML & CSS: Design and Build Websites


HTML and CSS: Design and Build Websites
by Jon Duckett is from Wiley & Sons (2011). This book is a little old (4 years) but I was so impressed with the JavaScript book by the same author and in the same format that I requested a copy from the publisher for review.

Everything I said about pedagogy and color coding in the review of the JavaScript book applies to this book as well. In fact, this book is where the author first honed the techniques used in presenting information so simply and clearly.

An infographic page from the book

A diagram and infographic page from the book

Simple illustrations with color coding and annotations for every point are used to teach the coding rules.

A reference page shows the HTML (or CSS) and the results of using it.

A reference page shows the HTML (or CSS) and the results of using it.

The reference pages are also color coded, with HTML shown in blue and CSS in pink as well as results examples.

As with the JavaScript book, all the code is downloadable. And, as with the JavaScript book, the language used to explain each concept is exceptionally clear and simple. Here’s a quote from the page introducing CSS.

CSS Associates Style Rules with HTML Elements

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

The book went completely through all the HTML it included (page structure, text, lists, links, images, tables, forms, audio and video and a few other bits of HTML) before getting to any CSS. Normally that would bother me, but it worked in this book. The CSS part of the book included color, text, boxes, lists, tables, forms, layout, images and some info on layout using HTML5.

Where the book is a little out of date is the information about HTML5. It’s no fault of the author, it’s just that the book came out in 2011. A few things are included (like hgroup or codec issues with video elements) that have gone away, and a few things that are more recent (like the main element) didn’t get mentioned. I reduced the star rating on the book because of that, but if I’d seen the book and reviewed it 4 years ago, I would have given it 5 stars. I simply want anyone who buys and uses it now to be aware that small parts of the book in the HTML 5 descriptions are different now. The book is still a perfectly good way to learn HTML and CSS – in fact, the book is an excellent way to learn HTML and CSS.

A review by Virginia DeBolt of HTML & CSS: Design and Build Websites (rating: 4 stars). The rating is based not on the quality of the book but on the fact that some of it is a little out of date.

Summary: Detailed, careful, guide to HTML, CSS and more.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Here is my review policy. Links to Amazon are affiliate links. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Why have a wrapper div?

Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.

The metaphor I’ll use today will be to compare a wrapper div to a fence.

A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]

What does a fence do?

  • It demarks the edges of your property.
  • It contains animals or children within a prescribed area. It keeps them from getting out.
  • It creates a border between one area and another.
  • It can be plain or decorative.

A wrapper div in an HTML document does the same things but to a layout instead of to actual property.

  • The wrapper holds a design within certain boundaries.
  • The various areas of a design cannot escape from the boundaries set by the wrapper.
  • A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
  • The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.

With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.

It’s necessary to create the wrapper with a div and an id:

<div id="wrapper">everything on the page goes in here</div>

One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.

If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.

By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.

Syntax Blindness

Keyboard

An interesting post from Khan Academy about Newbie Syntax Blindness got me thinking about teaching syntax.

First let me point out that Khan Academy is dealing with a different situation than face-to-face teaching. Their problem is about finding ways to alert students who are working online with useful messages about what their syntax errors might be.

In a classroom, face to face with students, I do it very differently. I introduce either HTML or CSS syntax in minute detail. I discuss every bracket, space, comma, semi colon, forward slash, and quotation mark they will be using. I show lots of examples. Then when they begin the actual typing, I walk around and help them spot their errors.

I also teach them that when a page falls apart, look in the HTML for a syntax error right before where the problem appears. It will most likely be a missing quotation mark or bracket someone just ahead of where the problem shows us. I find that students invariably pull their hair out over the part of the page they think is broken, but never think about simple syntax errors or typos that may have occurred just prior to that. That usually where the problem is.

Another problem students have with syntax when they first begin hand coding is taking what they see on a whiteboard or a projection screen or a demonstration monitor and translating into finger strokes on their own computer. The details are minute and exacting. The more time they can spend developing some muscle memory around these strange new keys they are using on their keyboards, the better they will do. People who have been keyboarding for years can be thrown into beginner’s mode hunting for curly braces and brackets and slashes and equals signs.

If you are teaching, either face to face or in online classes, how do you teach syntax?