Adobe Creative Cloud: The Good News and the Bad News

good vs. bad

The good news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. You’re up to date all the time.

The bad news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. Every time you update it’s different and you have to figure things out all over again.

Web Standards Sherpa Closing: UPDATED

It’s the end of an era. The web site that dedicated itself to publishing articles about best practices and web standards at webstandardssherpa.com is shutting down.

Web Standards Sherpa site header

Here’s how Aaron Gustafson, the founder, put it in his announcement on Facebook.

It is with a heavy heart that I announce that we are closing Web Standards Sherpa. As of April 2, we will be archiving the site in order to keep the valuable insights and techniques shared by our authors available in perpetuity.

To make that archive a reality, the Sherpas teamed up with Environments for Humans to create an online conference called Sherpa Summit. The summit features four expert sessions and live Q&A roundtable sessions that will let attendees from all over the world take part.

The online conference is on April 2, and you can save 20% if you register now using the discount code SHERPA.

UPDATE: Because of illness, the Sherpa Summit had to be postponed until April 23. A side effect of the delay is that you get more Sherpas for the Round Table Q+A’s: Steve Fisher and Dan Rubin!

Check it out and sign up here.

The Basics of Choosing and Obtaining a Domain Name

Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.

Choosing a Domain Name

A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.

Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.

If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?

If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.

Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.

Obtaining a Domain Name

Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.

There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.

If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.

A typical domain name search form.

A typical domain name search form.

At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.

I searched for vdebolt.com, my own domain name. Here’s what the tool told me.

The .com is gone, but other top level domains for that name are available.

The .com is gone, but other top level domains for that name are available.

I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)

If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.

If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:

A few of the suggested variations on my domain name.

A few of the suggested variations on my domain name.

Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.

If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.

You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!

You’re all set. Go build something awesome.

[Note: This post was originally published on Blogher.com.]

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.

Feminist Lorem Ipsum

Photo of Gloria Steinem with the words "Feminist Lorem Ipsum" superimposed on her image.

I saw Samuel L. Ipsum thanks to this tweet from Chris Carfi. I checked out the Samuel L. Jackson version of lorem ipsum and thought it was clever. I realized that we need a feminist paragraph or two that can be used as filler by web designers.

I didn’t build it into a fancy lorem ipsum generator, but I did put together some random quotes that can be stuffed into a new layout while you’re in the design stages. It isn’t a widget, it’s old fashioned copy and paste, but here you go:

One Paragraph

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

Two Paragraphs

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

A woman without a man is like a fish without a bicycle. -Gloria Steinem I only know that people call me a feminist whenever I express sentiments that differentiate me from a doormat. -Rebecca West Feminism is the radical notion that women are human beings. -Cheris Kramarae There is no female mind. The brain is not an organ of sex. As well speak of a female liver. -Charlotte Perkins Gilman Men are from Earth, women are from Earth. Deal with it. -George Carlin No woman can call herself free who does not control her own body. -Margaret Sanger I cannot understand anti-abortion arguments that centre on the sanctity of life. As a species we’ve fairly comprehensively demonstrated that we don’t believe in the sanctity of life. The shrugging acceptance of war, famine, epidemic, pain and life-long poverty shows us that, whatever we tell ourselves, we’ve made only the most feeble of efforts to really treat human life as sacred. -Caitlin Moran

If someone wanted to take this idea and put it into a widget or app, that would be lovely.

Using Clearfix to Clear Floats in a Layout

First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.

A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.

Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.

Example code for this type of clearing in a two column layout.

<div class="container">
 <header>
 . . .
 </header>
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 <footer><!--clear:both rule applied to footer-->
 . . .
 </footer>
</div>

Clearfix

The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.

An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.

Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.

<div class="container">
<header>
. . .
</header>
 <div class="wrapper"><!--.clearfix class applied to wrapper-->
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 </div><!--end wrapper div-->
<footer>
. . .
</footer>
</div><!--end of container div-->

The Clearfix Rule

The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

That’s it.

Some Teaching Tips for HTML5 and CSS3 7th Edition

Where I teach, we use HTML5 & CSS3 Visual QuickStart Guide (7th Edition) to teach both the basic HTML and the CSS class. This version of the book came out in 2011.

There’s an 8th Edition released in 2013, but we haven’t switched to it yet. I’m sure we will soon, but for the moment, we are using the 7th edition.

Here are a few teaching tips if you are using the 7th edition, as I currently am.

  • At the time this book was written, there was no <main> element in the spec. I suggest you change the layout suggested in Chapter 3 to use the <main> element for the left column. Use the landmark role role="main" with it.
  • Chapter 3 contains a clear explanation of the purposes and uses of both the <section> and <article> element. If you want, you can include an example of these two elements inside the <main> element.
  • Remember that <hgroup> has disappeared from the spec.
  • The example files all show empty elements such as <img> with a closing forward slash included: <img />. This provides a perfect opportunity to talk about backwards compatibility, XHTML, and some of the personal choices that are acceptable when writing HTML5.