Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide)

http://www.betaversion.org/~stefano/linotype/news/169/

by alexandros • 18 years ago

172 42 18 years ago

kwamenum862• 18 years ago

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.

LogicHoleFlaw2• 18 years ago

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.

tjpick2• 18 years ago

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.

kwamenum862• 18 years ago

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

tjpick2• 18 years ago

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.

snprbob86• 18 years ago

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

redorb• 18 years ago

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

netcan• 18 years ago

comment first, then decide if you should read (;

orib4• 18 years ago

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.

cschneid• 18 years ago

But, since it then allows the developer to use em measurements everywhere, doesn't that allow your override font size to look better on the page?

run4yourlives6• 18 years ago

The only reason he uses em and not px is because IE won't let the user resize the text if the size is specified in pixels.

Every other browser handles font sizes specified in pixels just fine.

orib4• 18 years ago

They could simply use em measurements everywhere before.

Actually, the size of an 'em' isn't even defined relative to the size of a pixel by the CSS spec, so the claim in the article is dead wrong about it helping you use em when you mean 10 pixels. 62.5% of an unknown value isn't 10 pixels.

run4yourlives6• 18 years ago

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.

orib4• 18 years ago

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

gnaritas• 18 years ago

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

The default font size is pleasing to look at, that's why it's the default size. You kids need to get over the idea that everyone loves squinting at tiny fonts, they don't.

Hexstream• 18 years ago

Every time I read "!important" it comes out in my head as "not important" :/

BrandonM• 18 years ago

I don't really know what you're talking about here. I can press CTRL-+ on both the linked article and on his sample site (linked at the bottom), and the font size increases as I would expect it to.

run4yourlives6• 18 years ago

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• 18 years ago

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.

run4yourlives6• 18 years ago

(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.

tlrobinson• 18 years ago

"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• 18 years ago

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.

run4yourlives6• 18 years ago

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.

elai• 18 years ago

Talent is drive.

thomasfl• 18 years ago

Best CSS tutorial I've seen so far.

dmose• 18 years ago

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

misterbwong• 18 years ago

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

greyhat2• 18 years ago

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• 18 years ago

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.

greyhat2• 18 years ago

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.

ojbyrne2• 18 years ago

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• 18 years ago

> DO NOT use a grid.

Why not?

ojbyrne2• 18 years ago

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.

ComputerGuru• 18 years ago

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• 17 years ago

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.

Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide)

Related Stories