

Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide) - alexandros
http://www.betaversion.org/~stefano/linotype/news/169/

======
tjpick
The title is pretty bad. Nothing earth shattering there and nothing that is
specific to programmers. It's just that often times the programmer gets stuck
implementing it because they have the technical smarts. I've seen similarly
bad designs come from most corners of the company and from completely
tasteless visual designers. It's not just programmers who commit design
crimes.

Nevertheless, generally good advice, except the bits about filling your page
with "lorem ipsum", and about not using black for the main text. The off-
black/off-white stuff looks good when you take an image of the page and stand
back 10 feet, but for people like me (ie without perfect eyes) is a complete
pain when actually reading it.

~~~
kwamenum86
What's wrong with using dummy text? How else can you ensure that as the
content expands the page will not break?

~~~
tjpick
It's ok, but I find it too "sunny day" to really be meaningful. You end up
thinking your site looks awesome, and then when you get real, quirky, half
filled in, random content in there the site looks broken anyway. You're better
off to get some real content in there first and then design around that.

~~~
LogicHoleFlaw
The article recommends using Wikipedia articles if you're not happy with lorem
ipsum. That is actually a great idea to me.

------
kwamenum86
When I read the title I was prepared to disagree but after reading the article
I am convinced there is a lot I don't know about design. Good stuff.

~~~
LogicHoleFlaw
Wow. I've always had an appreciation for good design, and a good "feel" for
what _would_ look good, but never knew how to approach the creation of a good
one. This is exactly what I needed. Fantastic.

------
tlrobinson
_"There is a general tendency to believe that programmers can’t style things
because they have no style themselves. Yet, all of them will be able to tell
you very quickly which one of two designs they like the best, even if they
generally can’t verbalize why."_

There's a huge difference between being able to tell if something looks good
and being able to design something that looks good.

I think for most programmers that difference isn't a technical one. The basic
idea behind CSS is pretty trivial compared to even a moderate programming
task.

Personally, even if I knew CSS inside and out I doubt I would be a very good
designer.

~~~
aristus
Any halfway intelligent human being can teach themselves a very wide variety
of trades. Are you saying you are not intelligent? Or just lazy?

If you practice a bit and learn some simple rules of composition, typesetting,
and color, you can be a competent designer. Beyond that level you need native
talent and drive but there is no excuse to be ignorant about related fields.

~~~
run4yourlives
_Any halfway intelligent human being can teach themselves a very wide variety
of trades._

Sure they can, but are you saying there is no difference between the guy
playing guitar at the local subway stop and Eddie Van Halen?

Design is a skill just like programming is a skill. To suggest that everyone
can be equally talented in a particular element is to demean the trade and the
people in it.

~~~
wheels
I'd say Eddie Van Halen is a perfect example of how you can work on something
for years, master it technically, and still not have taste.

------
greyhat
Hmm, what is 'CSS Design' exactly?

This guy seems to be conflating design, which has principles that apply to
newspapers, magazines, billboards, interactive kiosks, and web sites, with
CSS, one specific technology for implementing your website's style.

No one should be worried about specific technical flaws in IE6's
implementation of CSS at the same time they are worrying about how much white
space they want to use in their design, whether to use a 2 or 3 column layout.

This article might have some good information here or there, but I'm not sure
it is conceptually laid out well. This leads it to read more like "10 steps to
a sweet web page!!!" than an introduction to design for the web.

My somewhat unoriginal advice: Read about design, decide how you want your
page to look based on its contents, sketch it out, pick some colors, and THEN
worry about translating it to XHTML/CSS.

~~~
astine
Any artist in any medium will tell you that trying to abstract design from the
materials you will work with is a bad idea. It's been recognized since the
time of the Greeks that your materials will dictate largely what comes out and
if you don't take an organic approach, your design will feel forced. The is
true for HTML/CSS as for stone and paint. Knowing what your tags are capable
of is as important as knowing what you wan them to do.

~~~
greyhat
I agree with you partly, but if everyone did this, where would the innovation
in CSS be? A lot of people that have done new things and pushed the envelope
in CSS seem to have brought skills from the print design world...

With judicious use of images and some other techniques, almost anything can be
done in CSS. It just shouldn't be the starting point for your visual design,
imho.

------
orib
From the article:

    
    
         My suggestion for you is to do the following: start
         your CSS stylesheet with
    
         html {
           font-size: 62.5%;
         }
    

NO, NO, AND NO! I set my font size to what it is for a reason. Web designers
need to learn to deal with it. If you're manually tweaking font sizes, you're
doing it wrong. Please, leave them at the default values; they're that way for
a reason. I want a website that doesn't cause eye strain. Make sure your site
scales, and things work without absolute pixel sizes.

~~~
run4yourlives
You know, if you use a user style sheet with !important you can keep your
precious font sizes just the way you want them.

The rest of us want a webpage that is pleasing to look at.

~~~
orib
What part of respecting a user's settings makes a website ugly?

If a website is properly designed, it should scale just fine no matter what
the font size is. If you need a fixed pixel size for a font to make your
design work, you're doing it wrong. And to top it off, a fixed pixel size
requirement means it'll break anyways on different systems with different
fonts, kerning and hinting options, and other settings.b

~~~
run4yourlives
The part when user become users.

When you get right down to it, by the time you've accounted for every little
preference you're asking websites to be text files, which kinda defeats the
whole purpose of design.

------
run4yourlives
I think the first bit is overly complicated. For example, the first @import
statement loads a good chunk of code from a third party site for no good
reason, really. A simple * {border:0; padding:0; margin:0;} will suffice for
most sites.

The rest of the article is excellent, and the way he handles IE is by far the
best way to do things, avoiding corrupting your css with mishmash and hacks.

A great resource.

~~~
hassing
If the site contains any sort of CMS or code generated html then don't remove
padding and margin with a wildcard (unless you plan to specifying it manually
for every tag).

Some things are supposed to have margin and padding.

~~~
run4yourlives
_(unless you plan to specifying it manually for every tag)_

That's exactly what you would do. Knowing that everything has no padding and
margin can sometimes make life a lot easier than trying to hunt down phantom
default padding and how each browser displays it.

------
snprbob86
This article is just jam packed with good stuff. Thank you!

------
ComputerGuru
As a programmer who has troubled himself with designing sites and CSS from
scratch for the past 6 years and hating every minute of it... I found this
approach highly refreshing.

I've fought my charset battles, stayed up endless nights arguing with the W3C
validator whilst comparing the pros and cons of each stylesheet, manually
converted paper designs to both CSS and table-based layouts, and done a hell
of a lot of toil I could most certainly do without.

At the end of the day? My months of deliberation and constant change of
doctypes, my incessant searches for a good <table>-free layout that both
scales the way I want and is flexible to new content.... all were really not
worth the effort I put into them.

Now, if I want to design a new site from scratch (God forbid!), I will do as
the OP suggests and just go with the flow. Let someone else worry about the
hacks and incompatibilities, I just want to get my content out there in a way
that doesn't look like I plucked it out of my rear end and get back to my
server-side programming.

------
Spyckie
If you look at any site which you consider has a good quality design, there's
one big difference that it has to your own site: it uses images.

Lots of images.

That's the key to good design that most engineers don't understand.

Yes, there is elegance in Google, reddit, news.yc, etc, and yes, you can go
way overboard with really bad image picks. But if you want to go for something
other than 'minimalist', you should find a good personal collection of (non
cheesy) stock photos, subtle patterns, gradients, edges, icons, and corners.
Get some simple photoshop retouching skills too.

Seriously, learning how to use images effectively will take your design skills
up to the next level.

------
thomasfl
Best CSS tutorial I've seen so far.

------
ojbyrne
Wow, as a programmer, who likes CSS a lot, I totally disagree. Learn about
CSS. Don't link to a reset - put it in your css, and understand what it does.
DO NOT use a grid. Disagree with the doctype.... and so on. Feels like I'm
being talked down to.

~~~
superjohan
> DO NOT use a grid.

Why not?

~~~
ojbyrne
To quote a friend, because it defeats the whole purpose of CSS, loads up your
html with extra cruft, and chops up your page into table-like sections. It's a
backward step.

------
dmose
Great tips, but ironic that his page is busted as has horizontal
overflowing...

------
misterbwong
Server was giving me trouble for a bit. Go here if you can't get to it either:

<http://tinypaste.com/pre.php?id=6bd88>

------
redorb
without reading the article I would guess it's becuase Css coding isn't really
programming

~~~
netcan
comment first, then decide if you should read (;

