No, you’re not stupid … CSS for page layout is.

What?! CSS is flawed?

Indeed. CSS for page layout sucks hard because the logic behind CSS page layout is weak at best, and perhaps, even flawed. I can say this with experience in other languages like Java and even VB. Not that I am saying CSS is a programming language.

Anyway …

For web designers used to the craziness of CSS layouts, they would be flabbergasted at how easy creating layouts/views/screens are in VB or even Java when compared to CSS.

What’s the main problem with CSS?

The main problem with CSS (and HTML) is that it was not conceived as a user interface technology. Rather, it was considered and engineered as a document/page technology.

Think about it, we talk about web pages and not web user interfaces.

Despite the original intention of the Web being a bunch of documents, today the Web is largely a bunch of user interfaces. Yes, most web sites these days are much more like a user interface that we see in software than they are simple ‘pages’. So therein lies the core of the problem:

CSS was designed to style pages and not to build user interfaces.

-

So what has happened?

Well, because web designers realized the advantages of CSS for laying out pages, they figured out how to bend, stretch and sometimes break the very limited CSS technology to create modern web pages.

The problem is that you have a bunch of methods and practices that don’t really make much sense … logically speaking. That’s why when you are new to CSS, it is hard as heck to create many common layouts as compared to doing it in tables.

Think about it, a center aligned liquid layout with three columns is a snap to do with HTML tables. With CSS though, it took the community a long time to figure out how to get this to work.

… It shouldn’t take the efforts of a community to get common layouts to work. That is a sure sign of a broken technology.

Even the CSS nerds know it.

Like most human beings, nerds are loath to admit when they’ve screwed up. So it’s pretty telling when you see the invention of CSS tables. Yes, CSS tables are basically tables created with CSS rather than with HTML.

CSS nerds finally realized that for user interfaces, you need a grid structure sometimes … tables are essentially grids. Problem is that CSS tables are not YET widely supported in the major browsers.

So why not use HTML tables if they are so easy?

Because you would be missing out on the two big reasons for using CSS for page layout:

1. CSS based pages are much easier to update and maintain.
2. CSS based pages are much more likely to work any many devices like iPhones, PDA’s, your printer etc…

I want to comment on the touted advantages of CSS. First, most devices today have powerful browsers that can read just about any type of web page (CSS or not) … so you have to question the 2nd argument. You also hear other arguments about why you should use CSS:

• Your pages will be lighter in KB’s.
• Your pages will be forward compatible.

… Both these arguments have proven to be what I said they were years ago: total crap. So forget them.

So if HTML tables should not be used and CSS is crappy for page layout, what is a nerd to do? As always, I try to come to you with real solutions. Check it out …

The Big Two CSS strategies:

1. Use templates
2. Use IE conditional comments

Comments:

Since nerds have already gone through the trouble of figuring out the nuances of CSS, you don’t need to reinvent the wheel! Use a template and just build out from there.

If any issues should pop up where Internet Explorer is not working handling/displaying the CSS like FireFox, then just use IE Conditional Comments to solve the problem.

Thanks for reading,

Stefan Mischook (a.k.a.: The web design heretic)

www.killersites.com

“Stef, what program do you think I should use to create buttons for my websites? One buddy tells me he likes Corel Draw and another guy is big on Adobe Fireworks. What do you use?”

My answer to this question is simple:

Web designers should not be making buttons.

Today a web designer’s job is much different from it was just say 5-6 years ago. Once upon a time, web designers were typically just graphic designers moving into web design because that’s where the money was. It still is by the way. Anyway …

These days web design as a profession and skill set has evolved into it’s own beast. Web designers have many skills that go way beyond ordinary design:

• HTML
• CSS
• Usability
• Site architecture and SEO
• And yes, some design basics

… and lots of other stuff to.

Did you notice that design, was at the bottom of the list? Yes, having good design chops is always a plus, but the fact of the matter is, is that a web designer is more like an architect that puts together the pieces, rather than being the carpenter that builds things.

Web designers (like architects) chooses the materials and puts them together properly …. but they don’t build everything from scratch.

How about the buttons?

You can buy great looking buttons / icons for $10-$15 a set. Why on earth would you want to spend HOURS making buttons that will probably not look half as good anyway? The answer is: you wouldn’t want to and you shouldn’t.

PS: web designers don’t make buttons!

Thanks,

Stefan Mischook.

I just released another episode for the ‘Ask a Web Nerd’ show/podcast. This time around I explain what an organic website is, and how to create one.

Let me know what you think.

Thanks,

Stefan Mischook

www.killersites.com

Not the greatest title, but I hope it tells something about this series; I will be answering common questions put to me by people everyday. Questions about anything regarding web design, web programming, getting into the web design game etc …

In this podcast, I will answer a common question put to me every so often:

Do you need to go to web design school, or college, to become a professional web designer?

Check out the podcast in the killersites.com web design magazine:

web design school?

If you have any comments or any new questions you would like answered, just post a comment here or on the magazine and I will do my best.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

I just released a 10 minute video blog talking about the three critical aspects of a web site.

So what are the three critical aspects of a web site?

1. Content
2. Ease of use
3. Design aesthetics

I go over what each mean and I also give you a few hints and examples that you can use in your own web design work.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

In a nutshell, webslices are an IE8 specific feature that allows the web designer to tag part of a webpage as a ‘webslice’. By tagging sections of a web page, users of IE8 can then subscribe to it, much in the same way that they can subscribe to an RSS feed.

Read the full article about webslices.

Thanks for reading,

Stefan Mischook

www.killersites.com
www.killerphp.com

… The sad truth

Recently, I was challenged with some tech problem, and to be honest about it, I forgot the specific steps to solve it!!

This always bothers me – when you forget how to do something you once knew so well.

I am now resigned to the fact that I’ve probably forgotten more than I now remember. I guess there is only so much room in your brain ..?

You can’t know it all

This brings me to my larger point: as a professional nerd, it is not realistic to think you will learn everything that is out there. There is simply too much and you have to pick your battles.

That said, that doesn’t mean you should learn one or two things and then just rest on your laurels. No, you have to keep learning otherwise you will fall behind and you won’t stay competitive.

Focus on your specialty

It is wise to decide where you want to go in your nerd career, and then focus in that area.

For instance, if you want to be a web designer (I’m talking design centric stuff) you should learn all that you can about the front-end of web design:

• HTML
• CSS
• Basic design principles
• A touch of PHP … just a touch!
• Javascript
• Maybe some Flash

You probably shouldn’t be so concerned about learning how to set up Apache or how to configure a Linux server. These skills may come in handy once in a while, but these really are the skills that system administrators should worry about.

Play to your strengths

Just because you like something, or are attracted to it, it doesn’t mean you will be any good at it!

… Although sometimes, what you like is often what you will be good at.

What works out for me, is to forget about the things I suck at and instead, concentrate on my talents.

I (for example) am at best a moderate designer. Sure, I can build a professional looking website, but it ain’t going to win any awards! Instead, I rely on the skills of the truly talented web designers (using web templates or simply hire them) and then concentrate on those things that I can do pretty well.

Thanks for reading,

Stefan Mischook

www.killersites.com

The web design magazine is slowly taking off.

… We have our first article from John Beatrice who has given us a sneak-peek at the new IE8:

Internet Explorer 8 is Microsoft’s response to the growing interest in interactive web services and rich online experiences. This is Microsoft’s second attempt to build a browser that follows standard compliant HTML and CSS. So, will designers and developers embrace this new Internet Explorer?

You can read more about the Internet Explorer 8 beta in the magazine section of the website.

I hope you’ll find it interesting.

Stefan Mischook

Frontpage is old news:

For those of you who don’t know much about it, Expression Web replaces Frontpage and as such, you won’t be seeing any new versions of Frontpage.

… You can read more about Expression Web 2 in the magazine.

Thanks,

Stefan Mischook

www.killersites.com

… Ah, nerd wisdom prevails in all aspects of life.

Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.

-

Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:

• collapsing html
• collapsing css
• … and consolidating css code into one file, to minimize the number of server hits.

… The idea is to speed up web page load times and to reduce web server loads.

This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.

The fact is, that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content – not the code.

What is HTML and CSS code collapsing?

In a nutshell:

This is simply removing white space in your code. So you can take this:

Web design rocks!



Web design rocks!

And cut it down to this:

Web design rocks!

Web design rocks!

… The idea is that if you cut down 7 lines of code to just 1 line, the file will be a touch smaller. And this is true.

This old-school technique was used back in the 1990’s when everyone was on slow dial-up Internet connections and everyone had much slower computers.

Collapsing code was once useful, but like the transparent spacer gif trick … it is no longer needed. Actually, it’s more trouble than it is worth.

What can web designers learn from programmers?

When it comes to code, the web design community is still (generally) not nearly as experienced as the programming community. There are still lessons to be learned by the average web designer, lessons that have been fundamental in software development for years.

… Programmers have known for years that when it comes to code, it is better make it cleaner than speedier, because clean code is much easier to read, write and maintain.

So in our example above, seven lines of code are better than one.

What is ‘cleaner’ code?

Clean code can be broken down to:

• Lots of white space so the code is easy to read.
• Lots of comments so that you can much more easily understand what is going on 6 months down the road.
• Code that is ‘chunked’ into logical groups so that (again) it is easy to update etc.

The rise of object oriented programming is the best example of this understanding.

Object oriented code will almost always be slower (when running) than old school procedural programming. Nonetheless, object oriented programming now dominates the programming world and all the major languages use it including:

• Java
• PHP
• Ruby
• Actionscript

… and many others.

After decades of experience, programmers have learned through hard experience that cleaner code is much better than faster code.

How does this apply to web design?

Well, write cleaner css and HTML that is easier to understand and easier to work with. To repeat the list from above:

• Use lots of white space so the code is easy to read.
• Use lots of comments (in your html and css) so that you will be more able to understand what is going on 6 months down the road. This becomes more important when you are dealing with tricky CSS layouts that require seemingly strange markup.
• Organize your css into logical groups (and pages) so that it is easy to update etc.

Won’t cleaner code slow down my pages?

The fact of the matter is, for the vast majority of websites (%99.99999999999999999) you will not see ANY difference in terms of speed or cost in bandwidth.

… The ‘optimize code to save money’ is a wurban (Web + urban) myth.

Stefan Mischook

www.killersites.com