Impressive Webs

Animated Sprites with CSS3 Transitions

By Louis Lazaris / August 12, 2010 / 21 Comments

I don’t think I’ve seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.

Read Article ➝

Stop Perpetuating the Myth — People Do Read Online

By Louis Lazaris / August 10, 2010 / 36 Comments

This post might sound like an opinionated rant, so I apologize up front for that. But sometimes I write stuff because I get annoyed at how quick people are to jump on bandwagons and follow trends, and it often comes out sounding a little harsh. Even I’ve been guilty of following trends at times, as I’m sure we all have. But sometimes we have to be a little more honest about the realities of our industry.

This myth about the lack of reading online has, from what I can tell, spread to virtually all corners of the internet market, and I think it has gone too far.

First let’s clear up a few things: I’m not denying the research that has been done in this area, and I’m not saying that we should ignore those findings. Instead we should recognize the importance of gaining loyalty in readership, and work towards creating content that users will look forward to reading. Let me explain what I mean.

Read Article ➝

Give Your CSS Some Room to Breathe

By Louis Lazaris / August 5, 2010 / 89 Comments

Just to clarify beforehand, this article does not constitute an argument in favour of using multi-line CSS blocks over single-line CSS blocks.

But once in a while I peek at people’s CSS code, or try to follow along with a tutorial discussing some CSS topics, and notice that the CSS isn’t very easy to scan through, and the main problem is often white space, or you could say “breathing room”.

So, I’m going to explain here how I think CSS should be laid out (mostly using examples that incorporate multi-line blocks) for easier readability and scannability.

Read Article ➝

Things You Might Not Know About Conditional Comments

By Louis Lazaris / August 3, 2010 / 43 Comments

Use of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.

Of course, I’ve argued in a previous article that if your IE-only styles are minimal, then you should just include them in your main stylesheet, a notion that others have echoed.

But conditional comments have some unique possibilities and quirks that maybe you haven’t considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.

Read Article ➝

Making Unobtrusive JavaScript Practical Again

By Louis Lazaris / July 28, 2010 / 20 Comments

Maybe it’s just me. Maybe I’m a JavaScript debugging n00b, or maybe it’s my limited knowledge of Firebug.

While I fully support the use of unobtrusive JavaScript in all projects, I do find it has one weakness: Connecting the HTML element with the code that acts upon it.

If you’ve been coding JavaScript since the dark ages of the web, you’ll know that JavaScript used to be commonly implemented in an obtrusive fashion that mixed markup with behaviour, which made your code messy, and added extra code to every individual page rather than putting it in an external reusable file.

Here is a simple example:

Read Article ➝

Word-Wrap: A CSS Property That Works in Every Browser

By Louis Lazaris / July 21, 2010 / 106 Comments

Admittedly, this is probably not the kind of CSS property that’s going to be used in every design, but it is a very useful one when you need it.

The property I’m talking about is the CSS word-wrap property (also referred to in the modern spec as overflow-wrap) and, believe it or not, it works in every single browser, including all versions of old IE. In fact, it was even supported as far back as IE5.

Read Article ➝

How to Resolve a Fluid Header/Footer Problem When the Window is Resized

By Louis Lazaris / July 19, 2010 / 35 Comments

After redesigning this website, and realizing that I’ve been way too nonchalant about different window sizes, I came across an issue that probably occurs in a lot of different layouts.

The problem happens under the following circumstances: (1) The header and footer of the page have no specified width; (2) The content area has a specified width, and is centered using margin: auto; (3) The window is resized below the content area’s width, or the window starts out below the set width of the content area.

In most cases, this issue will go unnoticed, because generally speaking, sites are designed to fit within the 960px standard width, which will be fine for most users. Because my monitor’s resolution is set to higher than 1024×768 (which is small in the web design community nowadays), the problem was occurring on my own site, which has for a while now been designed for a larger than average width.

Read Article ➝

Nothing to See Here — Just a Redesign

By Louis Lazaris / July 13, 2010 / 16 Comments

Over the past week, I’ve redesigned Impressive Webs, and today it’s launched. The last design got old quick, and I felt it wasn’t as good as it should have been.

This design didn’t take me too long, since the basic structure and layout of the site is still somewhat the same. I think it’s a little cleaner and more professional looking, and it was certainly influenced by some of the great designers I’ve observed over the past year or more while blogging regularly.

I’m hoping that certain features of the design will allow for creativity within individual posts at any time in the future, should I decide to venture into that area of design blogging.

Read Article ➝

IE-only Styles: Where Should They Be Placed?

By Louis Lazaris / July 6, 2010 / 26 Comments

Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Read Article ➝

The Complete Guide to Commenting on Web Design Blogs

By Louis Lazaris / June 29, 2010 / 58 Comments

I think it’s safe to say that the voice of the audience in the web design blogging community has had a tremendous effect on the quality and honesty of web design-related articles.

Since opinions stated in blog comments often have the potential to misrepresent what the author has said, I thought I would put together an exhaustive reference of tips and recommendations that will help all of us become better at commenting on the different web design blogs that we visit each week.

So please consider applying the advice in this article in order to improve the communication level on web design blogs, and to help all of us move forward in a positive direction as we try to become more skilled at coding, designing, developing, and maintaining websites.

Read Article ➝