Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide)
betaversion.org
betaversion.org
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.
If you're working with specific copy, attention-grabbing copy, then the exact wording of that is on every bit the same level of detail as the rest of the design and it's pretty necessary to have a good rough draft of the wording before you start crafting the appearance.
At the end of the day though, I find myself using Lipsum all the time to very good effect.
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.
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.
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.
Maybe. But I would argue that most people's talent is the result of persistent hard work in that discipline. And that is a compliment.
Sometimes people use "I'm not a designer" as an excuse for why they aren't good at design, as if it's something you need to be born with. It could be that they've just never cared enough to try, but to make themselves feel better they dismiss it as an impossibility.
When you're looking far up the ladder it's tempting to call it a gift at birth--when you're only a notch below, it's easier to see it as the result of hard work. What drives those people is another question.
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.
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.
My suggestion for you is to do the following: start
your CSS stylesheet with
html {
font-size: 62.5%;
}
Every other browser handles font sizes specified in pixels just fine.
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.
It would also be very naive to argue that working in units of 10 is not much, much more convenient than working in units of 16.
The 'em' unit is equal to the computed value of the 'font-size'...
Therefore, em is in units of font size, and is not independent of it. It's totally unrelated to 'px' values, except by luck. Not all browsers default to 16px text. (And yes, it's true that px are actually defined as the distance subtended by an angle of 0.0227 degrees at a typical viewing distance of the device, but they're typically used interchangably with screen pixels)
The rest of us want a webpage that is pleasing to look at.
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
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.
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.
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.
Some things are supposed to have margin and padding.
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.
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.
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.
Why not?