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.
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.
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.
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.
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.
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.
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.
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)
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
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 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.
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.
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.
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.
(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.
"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.
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.
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.
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.
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.
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.
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.
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.
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.
44 comments
[ 2.9 ms ] story [ 96.8 ms ] threadNevertheless, 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.
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.
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.
http://tinypaste.com/pre.php?id=6bd88
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.
Why not?
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.