Do you think the pixel is the only unit of measurement for building graphical displays? Come on, you can measure better than that! This article offers tips for user-friendly HTML layout and interface design, and explains why pixels aren’t always the best unit for the job.
I recently got bitten by this on my site because I was unaware that pixels are not consistent across resolutions. I don’t know why I didn’t know, I just didn’t. The only problem I had was a little clipping of my content div at the top but was still annoying all the same. I had a feeling it was a resolution problem and now I know for sure. So, I can work to fix it.
as it brushes close to one of my BIGGEST pet peeves, the dillwads that design websites with 9 pixel high fonts. A> there’s NO reason to ever go below 12 pixels on a modern display, apart from making the text useless to most users. B> there’s NO reason to ever go below 12 pixels on a modern display, apart from making the text useless to most users… Now I realize that’s only one thing, but I consider it so colossally important it’s worth saying more than once.
The ONLY reason to use px sized fonts is if you are positioning fixed text inside a fixed size container and need it to ‘always fit’ (although gecko screws this up resizing ALL fonts… PX are NOT supposed to resize by browser settings)… Somebody is sitting there with a 19″ monitor at 1600×1200 with large fonts on, that 9 pixel high text is useless… NEVER use px for content, and sparingly for controls.
PT is the way to go on font sizes, as it adapts to the users system metrics. You should NEVER assume the user’s machine is going to render fonts the same size you design at… one simple change like using 100dpi fonts in X or “Large Fonts” under windows can bone the appearance of your whole site.
on that same note, NEVER use EM for fixed positioning of elements on your page, as that same font size change will make your content run over other elements on the page or worse, interrupt the flow pushing other elements down the page to the point the user might think there’s no ‘content’ on the page because they are too lazy to page down. (some of the news sites oft linked to here have that problem!)
It’s also a good subject on the OS side of things… I’ve been thinking it would be kinda neat to have an OS GUIthat works like DirectX or OpenGL, disposing with worrying about the screen resolution and instead working in a arbitrary coordinate system – aka, basically treating the entire screen as a vector unit. You are already seeing this with icons in many operating systems, using a vector graphic instead of a fixed bitmap, extend that system wide. Make it so you tell the computer how wide the screen is (or it detects via DDC info), and no matter what resolution or monitor size you run at the GUI tries to render everything at the same size…
Honestly, I’m amazed we haven’t seen this yet.
OS X 10.5 is supposed to have a resolution independent GUI. However, it seems they’re going to achieve most of this by simply having finer detailed bitmaps that can be scaled to suit these different resolution settings
OS X 10.5 is supposed to have a resolution independent GUI
Like Vista, except Vista won’t use bitmaps. Nice that Mac does things incrementally though.
Really good article as a starting point for these sorts of considerations. As a low vision computer user, working at an organization training disabled people this hits dead center at home. I surf with min 20pt font specified. There are any number of sites that are unusable (or simply too annoying) for me like this. However it is my only choice in the matter.
In this context and IME the most important guiding principle in web development, is to drop the idea that your site will always, and HAS to always look exactly as you design it. If you need your “perfect” design, stick with PDFs (that I generally also cannot use) but leave MY web alone 😉
Thank you for your cooperation!
Yes I admit that I learned the hard way not to use em for positioning elements.
I complained to Eugenia a while back about the fact that all the layout of this site is hardwired in pixels, so it looks horrible when you resize the text. Her response was that she wanted to be compatible with old browsers that only supported HTML3.2. Personally, I don’t see why that (laudable) aim can’t be acheived in some other way that doesn’t make the other 99.9% us suffer (dynamically served pages depending on the User Agent, perhaps?)
Now you mention it, I was just thinking how quiet things have become. No offending remarks from the person who can remove messages at will and such… Anyway, it feels like the new guys are doing a good job too, I was a bit scared at first, because Eugenia brought good contents to the site and also at times let some people write horrible English articles that make me laugh *moehaha*. Well I am no native English speaker myself, but I know better than to commit horrible articles that will haunt you afterwards
.
I completely agree with the article. The web is full of sucky websites. My brother he uses all of the pixel, images for text and so on crap on his websites and he gets 200 euro for building one of those crap sites. I build websites with almost text only, minimal layout (no fonts specified, etc) , so maybe the more right way, but don’t even think anyone wants to give me money for that :p. Somehow people want these fucked up websites full of graphical nonsense, just because it looks complicated and difficult to make I guess
In my opinion, the author has a very narrow view of the internet and communication via this medium. I suppose he does not work as a designer of websites and/or print media.
He is overly concerned about how websites will look on, say, a 1600×1200 screen (which only a minority of people uses) but does not acknowledge that layout is an important aspect of visual communication. Full control on a website’s layout is essential if you want to acommunicate with readers also on a subliminal level and make full use of knowledge gained from psychological studies.
The internet does not just consist of Wikipedia. It is also a platform for commercial entities who must create emotions with the help of sophisticated graphical presentations. Just providing a text feature list and a photo in a corner is just not enough. Full control on a page’s layout and a perfectly dynamic design do not go along very well together in most cases, however. You have to decide for either of the two.
Alienating a few owners of highend monitors is just not that important if it allows yourself to improve your communication with the other 80% of your potential customers by a great deal.
I sometimes wonder whether graphics wouldn’t be better off if graphics designers and developers had stayed with vector-based graphics.
The answer is: No.
Vector graphics do not make a lot of sense for anything that is more detailed than the average BeOS icon. MacOS X shows quite well that you can mix scaleable icons with photorealistic bitmaps quite well.
I don’t get the hype about vector graphics at all. Scaling the very same vector icon from 1600×1200 pixels down to 16×16 so it fits inside a file list, is and will remain a pipe dream unless the icon is barely more than a simple geometric form in the first place.
Some designers use pictures of text as a way to control the layout of words. Don’t do it: it’s a bad idea. First, it introduces bloat. Second, it makes your page less accessible to people who can’t see the pictures. And finally, it makes your page harder to read. Frankly, it’s unlikely that you can do a better job of rendering text clearly for the user than a browser can; don’t waste your time (or mine) trying.
Why would it make the page harder to read? That is totally subjective. If you use a decent graphics application, chances are that antialiased text is likely to look better (on CRTs)!
Adobe Photoshop can produce better-looking antialiased text than WindowsXP. Period.
Hopefully it will discourage you from creating one of those horrible pages that depends on a large collection of disconnected images all lining up together to form, well, an even larger and uglier image.
Sigh. First the author says that “text in images” is bloat, later he complains that people optimize file sizes by cutting one big 180kb image up into several smaller ones which are half the size combined. I find his argumentation to be inconsistent.
—
André Siegel
He is overly concerned about how websites will look on, say, a 1600×1200 screen (which only a minority of people uses) but does not acknowledge that layout is an important aspect of visual communication.
You’re wrong on one front: wide-screen displays are increasingly common among laptop users, and there’s an increasing number of laptops out there. Speaking as someone with a large screen, it is frustrating when you have to read an excessively small column of text when more could be comfortably fit into the page.
As regards layout, it’s perfectly easy to lay out the items in your site in a resizable manner (see http://www.ncri.ie and try changing the font-size). One “subliminal” effect of layout is that if it is unsatisfactory for the user, they may question the professional ability of the organisation the website represents.
Full control on a page’s layout and a perfectly dynamic design do not go along very well together in most cases, however. You have to decide for either of the two.
For websites that are simply brochures, this is true. For websites with content (e.g. e-business sites, radio-station sites with additional content, newspaper sites, etc.) it is more important to have a dynamic design so that users can easily read the content.
As regards brochure sites, it is possible to design them with dynamic layout (though obviously not for photographic images). It’s just quite hard, and requires CSS skills that are not common within industry as it is currently constituted.
don’t get the hype about vector graphics at all. Scaling the very same vector icon from 1600×1200 pixels down to 16×16 so it fits inside a file list, is and will remain a pipe dream unless the icon is barely more than a simple geometric form in the first place.
From 1600×1200 to 16×16 is unrealistic and unfair, no-one would every try such a degree of shrinkage (though expansion would work quite well). Given that most images on sites are not photographic, and most non-photographic images are designed using vector graphics applications like Illustrator, stating that vector graphics are unwieldy makes no sense. The “CrystalSVG” icon-set for the KDE desktop demonstrates conclusively that sophisticated resizable images can be created using vector graphics.
Sigh. First the author says that “text in images” is bloat, later he complains that people optimize file sizes by cutting one big 180kb image up into several smaller ones which are half the size combined. I find his argumentation to be inconsistent.
Using images to show text does increase the total download size of your site. Really images of text should be saved for the title and the title alone. And they do cause readability troubles. Using the “alt” attribute will make life somewhat easier for users of text-mode browsers (such as blind users), however it won’t put the text in context (e.g. a heading). Further, the alt text is rarely read out by screen-readers, and suggested workarounds (e.g. h{n} tags made invisible using display or visibility CSS attributes) have been shown not to work.
The web should have been a great resource for people with visual impediments (not just full blindness, but even poor vision in general), but sites designed solely for graphical appeasment on a limited set of devices have prevented this.
Lastly, can I say, that as someone forced to work at 1280×1024 by my monitor (it’s LCD) the biggest trouble I have with the web is sites that set font-sizes to 12pts as it looks good at 1024×768. It looks tiny to me, all my screen fonts start at 14pts, and as LCD prices drop, I’m won’t be in the minority for much longer.
The web is changing, it’s time to move on and join the next generation of web-designers.
It is also a platform for commercial entities who must create emotions with the help of sophisticated graphical presentations. Just providing a text feature list and a photo in a corner is just not enough.
If your website looks bad in my browser, it will create negative emotions and you can forget your commerce. Simple as that. Ditto, if it does not work in Firefox. Unless I really need to use it, I will not both trying to find out why it does not render correctly. So much for “commercial entities and fixed layouts”.
As for “photo in the corner”, more often than not I see web sites having more “sophisticated graphical presentations” than information. It’s the latter why I browse the web. If I want to see pretty pictures, I’ll go to deviantart. If I want to buy something, find out something, I want content. Black on white provides as much content as dark gray on an image trying to look as a sheet paper.
[rant]
If web site owner really cared for “graphical presentations” and perfect looks, they would make sure the adverisments displayed would be in sync with the rest of the site’s design.
[/rant]
If web site owner really cared for “graphical presentations” and perfect looks, they would make sure the adverisments displayed would be in sync with the rest of the site’s design.
The point of adverts is that you READ them. The only way to make you take notice of them is by looking different from the rest of the website. As studies have shown in the past, the human brain can learn quick how to differentiate between “uninteresting” and “interesting” graphical elements on a website.
The only solution to circumvent the self-learning “advert blocker” in our head is to make banners stand out as much as possible. A minority of people will get frustrated if a banner takes away too much attention. Those people are unlikely to buy from you. (I consider myself part of that group.) For the majority of people, however, annoying banners do work quite well according to marketing studies.
Yeah, I understand how advertisments are supposed to work and still don’t like them. I find myself responding more to Google’s text-only links than to colour-full blinking beasts.
Interesting, that you replied to my rant, but not to the rest of the points in my post
.
Interesting, that you replied to my rant, but not to the rest of the points in my post
.
Well, you were stating your subjective experiences. If a website looks bad in YOUR browser, YOU won’t buy from this company. There is not much to say about that. It does not contradict what I said in any way.
We were not discussing “broken layout vs. dynamic layout” but “fixed layout vs. dynamic layout”. And websites with a fixed layout do not necessarily look bad in your browser. Simple as that.
more often than not I see web sites having more “sophisticated graphical presentations” than information. It’s the latter why I browse the web.
And another comment about your subjective experience. This discussion is not really about why *you* browse the web. Have you ever seen a TV advert for parfums? Are there any hard facts in those ads? Is there anything that *you* would consider “information” in those commercials which basically only consist of pure eyecandy and one or two spoken words? (Models, highly stylized scenes at the beach in black/white, etc.)
No? Well, the thing is that millions of people buy parfums because of those type of commercials. There are no hard facts, just pure emotion. The ads either talk to you on a subliminal level or they don’t. And all of this is achieved just via visuals.
Of course, this is an extreme example. But it gets the point across quite well. The “homo oeconomicus” does not exist in real life. Emotions play a much bigger role in most people’s everyday buying decisions than price information and exact feature comparisons. And this is and must be reflected in web design too.
We were not discussing “broken layout vs. dynamic layout” but “fixed layout vs. dynamic layout”. And websites with a fixed layout do not necessarily look bad in your browser.
The premise of the article was, that fixed layout has a greater chance of becoming broken layout. You defended the commercial merits of fixed layout, I replied how they can get lost, when fixed layout becomes broken layout.
Hope that is clear now.
You are right about “homo oeconomicus”.
You forget one thing: a whole part of the clients are old (and the number of old people knowing how to surf the web is increasing everyday) and they must increase the fonts of the site to be able to access it.
So do you want them to be able to read your site or not?
Plus, usually websites which put emphasis on look forget to put content. Content matters, look less.
This said, I’m not impressed with OSNews which is wasting about half of my screen space and in which font increase doesn’t work well because of the too short lines of fixed size.
You forget one thing: a whole part of the clients are old (and the number of old people knowing how to surf the web is increasing everyday) and they must increase the fonts of the site to be able to access it.
Not every website is at targetted at older customers. In fact, many older customers inform themselves in local shops, not on the internet. It all depends on where your company is located/product is sold and who you plan to sell to.
Many websites are targetted at a rather specific group of people. A website for highend monitors does not have to be designed so it works for blind people.
Apart from that, if your business is targetting older customers there is nothing stopping you from choosing a big font right from the start. It’s not like the website will become unuseable for younger clients just because the font size is higher than 12px.
—
André Siegel
> although gecko screws this up resizing ALL fonts… PX are NOT supposed to resize by browser settings
That is stupid, what if you have poor eyesight?
Needs of the users matter more than to comply to the stupid decision a webmaster may make.
One should note that a line of text that is overly long is hard to read. People with huge displays tend not to maximize their browser windows. It gives them more screen real estate for other stuff as well.
The right balance is to give users some control over the layout, but to still exert some control too.
One should note that a line of text that is overly long is hard to read. People with huge displays tend not to maximize their browser windows. It gives them more screen real estate for other stuff as well.
That is correct. Too long text lines are a real problem and this has been known for decades (-> see layout of newspapers).
A good solution would be if browser makers included a “magnifyer” in their applications which does not simply increase font sizes but scales the whole page (bitmap graphics, etc.) People with large monitors could resize websites without breaking the layout.
Making a grab of a website and resizing it shouldn’t be hard to do. Of course, if someone zooms in too much, he will notice big blocky pixels. But the same person would also note some grain effect while looking at a photo in a magazine with a magnifying glass.
Ironically, I had to increase the font size on that site, the default was too small to read comfortably (on a 96 PPI display).
Also, the author confused points and pixels (like many people do): DPI is for printers etc . Displays have PPI – pixels per inch.
If your monitor has 72 or 96 or 112 DPI, make sure to clean it properly, there’s a lot of dirt on your screen! Probably someome tried to print on it?
> That is stupid, what if you have poor eyesight?
Needs of the users matter more than to comply to the stupid decision a webmaster may make.
No, it’s poor site design. PX is used in places it’s not meant to be used. PX sizing should only be used in places where the underlying container is ALSO of a fixed size, like buttons or controls, and certainly should never be used for anything smaller than 12px… Resizing px in these cases makes the text overrun the buttons and look like crap…
Which is why PT should be used… and where possible fixed sized containers (aka compositing text over an image that contains it’s own borders) should ALSO be avoided.
basically, px should not resize because it IS pixels, a fixed measurement specific to every computer. BECAUSE it’s a fixed measurement fixed to every computer it should not be used for anything important like actual content.
Oh, and for those of you complaining about OSNEWS and font sizes, WHAT are you talking about? The site seems to use the old school <font size=> to handle it, which resizes fine in every browser I have access too. No CSS control for that at all… The only thing that IS a problem with it in my book is the fixed width design, which by the looks of it could be fixed simply by swapping the width=”765″ to “Width=95%” and change the second COL setting to 99%. (one huge percentile and one fixed forces the fixed to it’s minimum width)