Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide)(betaversion.org)
betaversion.org
Stefano’s Linotype: Why Programmers Suck at CSS Design (CSS Guide)
http://www.betaversion.org/~stefano/linotype/news/169/
44 comments
What's wrong with using dummy text? How else can you ensure that as the content expands the page will not break?
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.
The article recommends using Wikipedia articles if you're not happy with lorem ipsum. That is actually a great idea to me.
In general there are several different textual elements to consider in a design. If you're waiting on someone to type an essay (or 5 full blog entries) before you've even set up your font grids, then you'll be in trouble.
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.
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.
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.
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.
"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.
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.
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.
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.
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.
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.
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.
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.
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.
Talent is drive.
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.
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.
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.
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.
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.
From the article:
My suggestion for you is to do the following: start
your CSS stylesheet with
html {
font-size: 62.5%;
}
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.
The rest of us want a webpage that is pleasing to look at.
> 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.
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.
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
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
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.
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.
Every time I read "!important" it comes out in my head as "not important" :/
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.
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?
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.
Every other browser handles font sizes specified in pixels just fine.
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.
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.
Not quite--what you are doing is setting the font-size, and hence the 'em' to 10px. px and em are both independently relative to the font-size. There is nothing about the size of a pixel mentioned here.
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.
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.
To quote the CSS 2.0 spec:
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 '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)
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.
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.
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.
Some things are supposed to have margin and padding.
(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.
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.
This article is just jam packed with good stuff. Thank you!
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.
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.
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.
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.
Best CSS tutorial I've seen so far.
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.
[deleted]
> DO NOT use a grid.
Why not?
Why not?
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.
Great tips, but ironic that his page is busted as has horizontal overflowing...
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
http://tinypaste.com/pre.php?id=6bd88
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.