TurkReno | Alabama Website Design, Hosting and Optimization

Home » Website Design
It is currently Wednesday, 08 Sep 2010.

Website Design

Use a background image in your CSS? Remember to specify a backup colour.

Whenever you specify a background image in your CSS, consider what happens if the image is missing. If there is text on top of the image, is it still readable? If not, specify a colour for the browser to use instead of the image so the text becomes readable again.

Why would an image be missing? A few possibilities are broken images, network problems, and user settings.

Here’s what the CSS could look like (long-hand used for clarity):

  1. body {
  2. color:#000;
  3. background-color:#fff;
  4. }
  5. #my-element {
  6. color:#fff; /* white */
  7. background-image:url(my-blue-image.png);
  8. background-color:#2f4b8e; /* blue */
  9. }

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.


MP3 (0.4 MB)

HTML 5 Syntax

One advantage XHTML has over HTML is that it has simpler syntax rules. If you want your documents to validate you can’t pick and choose – you need to use lowercase for tag and attribute names, close all elements, quote all attribute values, and give all attributes a value.

Some find those rules restrictive. I find them extremely useful since they give developers less room for coding choices that are mostly aesthetic but make collaboration and maintenance harder and slower.

HTML 5 does not have the same syntax rules as XHTML. It allows you to pick and choose – you can mix tag and attribute case as you wish, quote some attribute values but not others, and leave out closing (and in some cases opening) tags for some (but not all) elements.

So once HTML 5 becomes a viable option, how can we avoid having teams of web developers spending their time discussing which syntax to use instead of working on the project their clients pay for?

Robert Nyman suggests some possible solutions in The HTML5 Syntax Options Problem, coming to the conclusion that the most realistic scenario is having an option for stricter syntax in the validator.

Another situation when having different markup options is confusing is teaching, which Lars Gunther describes well in Pedagogic validation of HTML. Since I do some occasional teaching I can relate to the examples he provides.

I think both of these scenarios – development and teaching – would be improved by having a “strict” or “XHTML-ish” option in the validator. Actually, if it was up to me I’d turn it around and make that the default option.


MP3 (0.6 MB)

XHTML 1.0 helped improve the Web

Jeffrey Zeldman on how the stricter and clearer rules of XHTML 1.0 made many web professionals improve their markup: A Zing Too Far.


MP3 (0.1 MB)

CSSquirrel makes comics out of hot topics

If you haven't added CSSquirrel to your list of regular reads, you should. Among other things, the Squirrel (Kyle Weems) turns topics like the sometimes hotly debated HTML 5 into enjoyable comics.

Anyone who follows or takes the slightest interest in the development of HTML 5 or the web in general should find his comics and their associated blog posts worthwhile. Some of them may also make you laugh – or at the very least smile.

Get over there and start browsing the archives. If you’re into HTML 5, you may want to start with the posts tagged, well, html5.


MP3 (0.3 MB)

Page 5 of 6

TurkReno Incorporated, established in 2008, is a Website Design, Website Hosting and Search Engine Optimization (SEO) Services company operating from Daphne, Alabama. At TurkReno, we Create Solutions That Work™. Choose Professional Website Design, Hosting and Search Engine Optimization in Daphne, Alabama by TurkReno Incorporated!

Experienced in Google Adwords

Google AdWords Marketing

We are experts in Google AdWords. We can help you with your current or next Search Engine Optimization project or Google AdWords Marketing Campaign to improve your return-on-investment.

Eastern Shore Chamber of Commerce Better Business Bureau Accredited Business Now Accepting VISA, MasterCard, American Express and Discover
Verified by Merchant Circle
Valid XHTML 1.0 Transitional