Web Design Articles

Screencast Series on HTML5 and CSS3

By Louis Lazaris / August 31, 2011 / 0 comments

A few months ago, after helping to co-author HTML5 & CSS3 for the Real World, SitePoint asked me to do a related video screencast series on their new Learnable.com website.

I agreed, and the course has been available online now for a few weeks. It was a fun experience, and it’s motivated me to plan for some screencasts here on this site, too. I won’t go into great detail on the course here — you can review the course contents on Learnable.com at your leisure.

Basically, the course consists of 28 separate video tutorials that make up 9 full lessons. Most of the videos are about 10 to 15 minutes long, with a few under 10 minutes, so they’re pretty easily digestible. Lesson 10 is a “resources” section that I’ll probably continue to add to, and Lesson 11 is a “bonus voucher”.

How to Validate CSS3

By Louis Lazaris / August 30, 2011 / 43 Comments

The other day someone on another post asked a question about validating your stylesheets. This person is concerned with the fact that the validator views vendor prefixes as errors.

Here are my thoughts on this subject, with some tips on using the CSS validator, if you decide that you’re still concerned about validation to some degree.

CSS in Real Life (aka “CSS Puns”)

By Louis Lazaris / August 28, 2011 / 47 Comments

Let’s have some fun with CSS selectors, properties, and values. All the rule sets shown here contain valid CSS that represent things in real life.

A few sensitive subjects represented here, but they’re not meant to cause offence. Just some CSS silliness. Enjoy.

Introducing: Animation Fill Code

By Louis Lazaris / August 24, 2011 / 4 Comments

After messing around with CSS3 keyframe animations for a few months now, I realized (as is the case with most CSS3 stuff) repeating the code can be annoying.

For CSS3 animations, it’s worse. You have to write sometimes dozens of lines of code for a single rendering engine (I always start with WebKit) then copy all the code two more times, then change the prefixes to get it to work in another rendering engine (in this case Gecko/Firefox) and have a standard equivalent.

After a quick search, there didn’t seem to be a tool to do this (other than whatever find-and-replace functionality you have in your text editor), so I wrote one myself. It’s called Animation Fill Code.

Why I Hate MLB.com’s Navigation

By Louis Lazaris / August 19, 2011 / 8 Comments

Being a big baseball fan, I find myself perusing MLB.com pretty much daily. And if you read my site regularly, then you already know that.

Here’s something I hate about the way their navigational structure is architected.

I often go to the home page to scan for the most popular news items, or newsworthy stuff that catches my eye. If I don’t find anything to click on, then I might choose the “Standings” link.

Little-Known CSS3 Typographic Features

By Louis Lazaris / August 18, 2011 / 10 Comments

The CSS3 fonts module has a number of interesting CSS3 properties and features. Browser support for many of these is pretty limited right now, but I thought I’d summarize some of these features here.

The first three properties discussed here are CSS3 properties, while the last section will discuss features that have existed for a while but that you may not know about because of their limited potential for use.

Aside vs. Blockquote in HTML5

By Louis Lazaris / July 12, 2011 / 29 Comments

Choosing the right element for your markup is not a life-and-death situation. Nonetheless, I think HTML becomes easier to maintain and easier to read when content is marked up in a more meaningful manner, in line with the new developments in HTML5.

HTML5 has, as most of us know, introduced a new <aside> element, which I feel can replace the <blockquote> element in specific places where we would normally think a <blockquote> is more appropriate.

Is Your Brand More Important Than Your Website’s Performance?

By Louis Lazaris / June 23, 2011 / 20 Comments

As much as we would like to turn a blind eye to the large number people using Internet Explorer and thus take advantage of CSS3 and HTML5 in all its glory, with certain projects, we really don’t have much of a choice.

If the traffic in a particular niche is IE-heavy, then you have to deal with that accordingly. If you go the Andy Clarke route then you may choose to use those new enhancements to the full, but allow a degraded experience in IE.

If you go the traditional corporate route, then you do everything you can to get IE to look and behave the same as the other browsers. That could mean ignoring a lot of new CSS3 and HTML5 stuff, or else it means filling in the gaps with scripts, hacks, and IE-only filters.

Responsive Web Design: I Hope It’s For Real This Time

By Louis Lazaris / June 9, 2011 / 37 Comments

As many in the dev community are aware, earlier this week A Book Apart released their latest title, Responsive Web Design by Ethan Marcotte.

Due to the fact that I’ve been so busy with other stuff of late, I honestly have not experimented much with responsive design techniques and the related CSS3 media queries.

I intend to read Ethan’s book and will eventually get around to incorporating some of these techniques into future projects, and I’m hoping to eventually have a responsive layout for this site. But there are a few things about this whole responsive design trend that concern me a little bit.

About Obsolete Features in HTML5

By Louis Lazaris / May 24, 2011 / 31 Comments

As many of you may be aware, validating your pages in HTML5 has become a whole new adventure.

Along with changes in what now constitutes “valid” and “invalid” markup, the HTML5 Validator (which, by the way, is the same tool that runs the W3C’s HTML5 validator) will provide some warnings about obsolete features in HTML5.

Feel free to go through that document on the W3C’s site, but here I’ll touch on some things that you may want to be aware of with regards to obsolete elements and attributes.