OneStat.com today reported that more and more internet users choose for screen resolution 1024×768 which is the most popular screen resolution for exploring the internet. Users with monitors set to the most common resolution 800×600 for web sites have an approximate 31.7 percent global usage share. Seeing these numbers, both web designers and also application and OS developers should take into account that their projects (not counting specialized 3D/CAD/DTP apps etc) should be designed in a way that they totally fit and are usable on 800 pixels wide.
Developer Alert: 800×600 Resolution Still Strong on the Web
About The Author
Eugenia Loli
Ex-programmer, ex-editor in chief at OSNews.com, now a visual artist/filmmaker.
Follow me on Twitter @EugeniaLoli
This is a very good point, as 800×600 is really all that’s bearable on small monitors. Many of us are still looking at 15″ CRTs because we can’t afford/don’t have room for anything better.
Don’t know how one could tolerate 800×600. Even 1920×1440 on my Sony 21″ can’t satisfy me anymore.
I manage to tolerate it, if I used a different setting on this piece of garbage monitor sitting in front of me at work I’d go batty
web designers need to also consider that perhaps people won’t be surfing with a PC at all, at which point screen real estate becomes more *fuzzy*
Sure the figures are lower now, but who’s to say it will always be that way?
My husband bought for my birthday last month a SONY E540 21″ monitor, and I use it on 1600×1200@85 Hz. It is a really nice monitor. But the $520 it costed, are also nice.
Anyways, I believe that 800×600 was more bearable back in the day, when widgets were generally smaller. But even today it can become bearable.
I use my 12″ Powerbook on 1024×768, and I don’t have really a complain about it. I use virtual workspaces of course… 😉
Usually, PDA/phone browsers are using a technique where they try to make everything fit by resizing widgets, images etc. I know that the ad-free OSNews version (created specially for these browsers) renders fine on OpenWave’s mobile phone browser for example, which sometimes runs on 160×120 screens, or even smaller.
More info here: http://osnews.com/story.php?news_id=2799
I’ve always made my sites viewable in (at worst) 640×480.
Smart use of CSS allows this to happen and for your site to scale to the space it is given, rather than having to be narrow (yes, you, osnews).
We didn’t even know about resolution. We counted by character spaces. (Actually true)
When I started working at my current job (early 2001) there were still monochrome 6″ monitors in use at 640×480. Still several 14″ 800×600 machines going.
A lot of users with newer 17″ monitors will fight to keep from setting the resolution to anything higher than 800×600 because the fonts get too small. Maybe I just have a bad cross-section of blind co-workers, but thats irrelevant.
Me? I have a dual 17″ 1024×768 monitors. No one else here understands why though. I couldn’t use dreamweaver with just one without going crazy.
Excuse me Charlie, but I won’t get into this debate again about my site. Read the yesterday’s story about osnews susbscription if you want to get into a debate about web design.
CSS is CPU heavy. CSS is not compatible with older browsers. And this is a no-go for a site like ours. We want accessibility and compatibility rather than modern futuristic features.
And especially when we talk about mobile phones that barely use 10 Mhz to render web sites, you can understand that this CSS solution is just not an option for a site like ours.
CSS is a fine solution for other people and other kinds of web sites, but not for OSNews. We need and want to render everywhere, and render fast. That was our goal since Day 1.
Some people with vision probs require to surf at 800×600 or lower resolution. As for me, my vision is good enough so that I can browse at 1024×768, but no higher than that (unfortunately).
…I like the highest rez my monitor will work at. Back when I used a 14 incher, I ran it at 1152×864 (barely, I could only get Windows to do this 🙂 Now I’m running at 1600×1200 on a 19 inch monitor.
When I do get round to making webpages, I normally design for 800×600, but if it is simple, with no tables or CSS-positioning you should be OK at any rez.
The OSNews web site is the way it is because it was designed to be that way. It was not overlooked, we _want_ it to be that way, in order to be accessible from everywhere.
Sure, someone can complain that “how many such hits do you get everyday?”, but on the other hand, we do report on obscure OSes like skyos or menuetos. How many people are using these OSes? Very few. Still, it is our job to report on them. If we drop support for such OSes and browsers, it is like denying what we actually try to achieve with OSNews.
Again, CSS is fine if your audience is not as diverse as OSNews’ and they only use very specific browsers. On OSNews, we get a lot of weird OSes and weird browser hits. We have to support them.
A reason I like the websites that shoot for 800×600, is that when I’m viewing them at a higher res, I don’t have to have a full blown window to see it. I am personally getting tired of the sites that have advertising on both sides, and unless you have it expanded totally, you only get a sliver of relevant text down the center.
At my office, my co-workers freak if I set the resolution higher than 640×480. They say that everything is too small past that and they can’t read any of the print. It drives me nuts, because I run mine at a much high resolution and when I have to use their computer nothing fits on the screen.
One site that really needs redesigning to fit well on 800×600 is Mandrake-linux’s one. It is very loaded with too many columns and a lot of different things on it… A real mess.
Well, I am using 1280×1024 for a while now, and I hate website designed for 800×600, with a list choice on the left, an ads column on the right, and so the text of the article (or whatever you read) is in a less than ONE inch wide column…and 2/3 of my screen is blank. Its’ absurd.
I know it’s hard to design webpage that scale well… I did a little bit of web design. But I would hope the opposite movement. Design web for at least 1024×768. Smaller screen can still use the scrollbar to see more.
If you’ve designed a site which requires a CSS-aware browser to use, you’ve already missed the boat. CSS is supposed to aid in separating content from presentation. Thus, for a well-designed webpage using CSS, it doesn’t matter that it won’t look nice in non-CSS browsers. The point is that the *content* is still accessible, and content is king.
If you want cellphones running at 10Mhz to view your site properly, the single best thing you can do is to replace all the tables you’re using for display layout and replace it with well-formed CSS. Your pages will download quicker and content will be rendered better.
And I don’t know the details on CSS being CPU heavy, but I do believe it’s faster than browsers trying to render tables within tables within tables.
Getting back to the resolution thing: a well-designed site will scale to any resolution, whether it’s 1024×768 or 800×600 or even 320×240. Designers who set a fixed width for their website are circumventing the original idea that HTML is supposed to be flexible to a wide variety of viewing areas, not fixed by a designer. Look at how sites like Amazon.com utilize the entire screen no matter what your screen size. It’s more work to make it look good that way, but if user experience is your goal, it’s worth it.
Indeed. I have observed that too in my previous job. I seen people not be able to “get used to” higher resolutions, even if their monitors were created to have a higher recommended resolution. They just believe that everything gets too small !! 😮
> And I don’t know the details on CSS being CPU heavy, but I do believe it’s faster than browsers trying to render tables within tables within tables.
This is why OSNews’ mobile version (which uses the same “body” as the normal version — this is why I can’t change it) does NOT have nested tables. And it is still takes 2 minutes to render on slow mobile phones (and still, this is considered fast). We are talking for such delays that CSS will be an absolute killer if used.
> Designers who set a fixed width for their website are circumventing the original idea that HTML is supposed to be flexible to a wide variety of viewing areas, not fixed by a designer.
Speed, speed, speed. Having a fixed width on tables, it is much-much faster to render. Browsers don’t have to calculate anything. We are looking into a 30% speed increase if you hard code the width.
Plus, OSnews specific design does not work well on all browsers if I don’t hardcode the icon cell to be 32 pix. I tried it. Hardcoding it was the only way I could make it work on very weird browsers, like Amiga browsers etc.
Trust me when I say that OSNews is the way it is because it was the only way to make it work — and work well– on all browsers. I tried it.
Hey, Eugenia. I’d just like to congratulate you on making OSNews so accessible. I remember looking at it on my 240×320 Pocket PC screen, and it worked just dandy
Why is it that every time a website design article comes up it turns into “let’s all personally attack Eugenia” come on people, this is a pretty damn nice site, runs on whatever browser people try to use it on. (BTW this is one of the most useable sites on the web for text-based browsers, i love Links!!!) It’s also a very simple and extremely useable site for discussion that doesn’t have all the stupid/annoying/pointless bells whistles and features that a certain other technology news site has *trashdot* *COUGH* *COUGH*
Keep up the good work Eugenia, I think you can safely ignore this vocal minority. If we didn’t like the site we wouldn’t come visit it.
Thanks Rayiner, bytes256.
I have special support for PocketIE, it should work without the need to move horizontal scrollbars and stuff.
AvantGO also works really nicely on Palms. OSNews fits fantastically on a 160×160 Palm screen!
I can’t understand why you are all running 1600 or even higher resolutions??
On my 22″ (which can do 2048 x 1536 @ 85hz) I’m running 1280*1024, higher resolutions all have such tiny icons, fonts,.. and sites look bad in it…)
Eugenia: I also agree with you, this is NOT a site about webdesign or by a design firm or something, but a news site about any OS out there, so it should be accesible for any OS. One has to set his/her priorities and you’ve chosen the correct one. People that say differently don’t know better. And I’m a webdeveloper so I know that ideology (only use css and xhtml strict) doesn’t give the best result in this imperfect (browser) world.
Frankly everything should work great at 320×200 with no graphics. Flat text, no colors, that’s the name of the game. Lynx is the answer!
I’m runnung a Display and Browser Window Survey to study the preferred settings and habits regarding screen and browser windows of Internet users.
http://www.prismo.ch/surveys/
I plan to add a separate survey for PDAs and mobile (smart)phones later.
Normally, people keep the resolution at the default resolution the computer was set to. So, back in 98, the default was switching from 640×480 to 800×600. It switched over the last year or two from 800×600 to 1024×768. In a couple years it will switch from 1024×768 to 1280×1024 (especially due to lcd’s), and someday it will go from 1280×1024 to 1600×1200.
Then, the stats will reflect the change as people buy new computers. I ran a website that got around 5,000 – 10,000 hits per month for a small band, and I watched my stats as browsers changed, resolutions changed, etc.
The browser and color depth changes in a similar fashion.. Big changes when new ones are standard on computers.
> Smaller screen can still use the scrollbar to see more.
This is not a good idea at all, it alienates 30% of the population. We all know what a pain it is to use the horizontal scroll bar, especially for something like a paragraph of text. Why do you think Opera created a special version of thier browser for PDA’s? Useability is the name of the game and if people can’t effectively use your site, they’ll go to a competitors where they can. So in the end your company loses.
I can’t understand why you are all running 1600 or even higher resolutions??
On my 22″ (which can do 2048 x 1536 @ 85hz) I’m running 1280*1024, higher resolutions all have such tiny icons, fonts,.. and sites look bad in it…)
lol. You have such a monitor and use it at 1280×1024? You can always pick a larger font. The granularity of the screen is much lower at high resolutions, that’s why it will always look better. However if you think something looks smaller than you want it to be, you should adjust through the settings (use larger fonts, icons, adjust dpi value in advanced display settings etc…)
I hate website designed for 800×600, with a list choice on the left, an ads column on the right, and so the text of the article (or whatever you read) is in a less than ONE inch wide column…and 2/3 of my screen is blank. Its’ absurd
What is absurd is the fact that you let your browser occupy your entire screen. If you’ve got so much screen estate, why waste it all on a browser?
Here are two screenshots that I just got from my PalmV 160×160 monochrome, using AvantGO:
http://www.osnews.com/img/3877/palm1.gif
http://www.osnews.com/img/3877/palm2.gif
Works well.
And I don’t use two different versions of OSnews! Just a different header.php file to not show the ads! All the rest of the code is the same as the version you see in your desktop browsers! Simplicity for both the reader and the developer.
My own website designs target 544 X 378 (WebTV native) as the minimum resolution without sideways scrolling and resize up to any resolution.
I view the websites daily at VGA resolutions on a SEGA Dreamcast (and must scroll sideways at osnews.com) and four or five days a week at 1280 X 1024 even though the monitor is too low of quality to make that resolution really readable without the eyeglasses I’m going to get some day.
My own website logs show 39% 800 X 600 and 37% 1024 X 768. If you scroll down and follow the PageRipper button link you can see the yourself at http://www.bayerwerke.com .
Off topic – My browser statistics were about 60% IE until I built out the http://www.bayerwerke.com/Windows/Windows.htm section.
I also design for the pages to look GOOD in Lynx. See http://www.mthoodbrewing.com and follow the “Your browser does not support frames…” link in Lynx.
I believe any “professional” designing for any specific resolution is really a sign that one is in the wrong line of employment and should pursue a career in used car sales instead.
Most of the work I do is for a company with about 150 desktops, about half are attached to monitors which do not support resolution above 640 X 480. Why? Because they still work.
“Speed, speed, speed. Having a fixed width on tables, it is much-much faster to render.”
If you improve performance in other ways, this is a very minor matter which can be overlooked.
I run my 17inch monitor at 800×600. It’s more comfortable to read, and I really don’t want to wear glasses to surf.
I don’t have poor vision, yet I also don’t have perfect vision. So 800×600 is my choice… But I guess I’ll change when all the web sites go to higher res.
My mom got really irritated when we installed XP on her system and it didn’t support 640×480 anymore…. on her 19″ monitor.
> What is absurd is the fact that you let your browser
> occupy your entire screen. If you’ve got so much screen
> estate, why waste it all on a browser?
Iggy: So because website cannot scale well, your solution is to reduce the size of my browser, you are really … funny
Some websites are well-designed !! and so use the whole width of my browser, which itself use the whole width of my screen… therefore I can read it without sticking my nose on the monitor. Rule 101 of computer use.
And with laptops soon overtaking desktop sales those 31.7% with 800 X 600 resolution might increase…
I design pages at 800×600 because there is nothing worse than having to scroll side to side if a design is for a resolution higher than what you have. My clients are also in more rural areas where they don’t have as good of equipment.
On another note I must say that I really enjoy the design of osnews.com and thing it is a very good balance between usability, compatibility and speed. I also really enjoy the content which is the most important aspect anyway…
Might as well make your site just text only so it will take even less memory. Maybe we could all just use telnet. The reality is people want multimedia features. I used to not have any graphics on my site, but it is very limiting graphically and people like the pictures. You have to think about what other sites are like, because if you make your site accessible at low resolution and the major sites on the web do not do that, then it isn’t going to help anyone and just limit you. Also as monitors get higher and higher resolution, smaller resolution graphics are going to be so small that people with poor eye site can’t see them. Compatibility matters more for the future than the past because everyone will be forced to upgrade sometime.
My parents also run a 800×600 on 19″ inch monitors at home and work. I use 1280×1024 on a 21″ at home and 1024×768 on a 17″ and 15″ (dual monitors) at work. At home my browser is about the size of a 8.5″x11″ sheet of paper. Even at work I rarely surf full screen. I leave about a start button’s width gap on one side and slightly less on the other.
Many of the users here are still stuck with tiny 15″ monitors (I’d like to change that $) and run at 800×600. I’ve noticed a number of them also run with “large icons” enabled. May be time to do a survey here.
I still web design for 800×600
Really long lines of text are harder to read. It’s harder for your eyes to scan the content or something like that.
Ikshaar, maybe I missed it but how big is your monitor?
I had a 17″ monitor for a long time, and always ran at 800×600 because 1024×768 was simply way to small. But one thing that made a differance was switching to winXP, maybe it was just me. But it seams they did some adjusting on the sizes of things that made 1024 work for me and many others in that the taskbar and other items were no longer to small. I fully understand people running at 800×600, good chunk of the people i know still do with 17″ monitors. on a 15″ which is probably still the most common size out there ats about the only way to go. Even if 15″ is dead on new desktops it’s still the standard on laptops.
Now I have a 21″ monitor and run it at 1600×1200. It makes for a nice size for most things but took me a long time tweaking to find a setup that seamed to make everything happy, what would be nice in one app would make for unreadable in another. Also it is no where as clear as my 17″, probably a function of the monitor.
I really don’t get people who think everyone will have there monitor cranked to the max. People don’t have bad eyesight, they just don’t want to have to work to read their screens. Those who run super high res for years might end up with bad eyesight though. I think many people run them at super high res for no reason. I wouldn’t have mine as high if it wasn’t for having programs that need screen like CAD and Matlab. Also having sights built for 800×600 is great for me since i can then keap a browser as a small window and still have other windows without overlap. OSnews is great for this.
“Smart use of CSS allows this to happen and for your site to scale to the space it is given, rather than having to be narrow (yes, you, osnews).”
You don’t need CSS to design a page that automatically fits the browser window.
I notice when walking around a university lab that very few students maximise the browser window, so they are in practice viewing in 800×600 or less, even on a higher resolution screen. I suspect this is very common.
Many pages have lines of text going right across the page – these can be too long to read easily in a big window.
My previous 15″ screen could only display 800×600 at an acceptable frequency, but KDE in Linux requires at least 1024×768 for some dialogs to fit…
And about OsNews: also on this weird browser I am now typing on, it works fine
> Might as well make your site just text only so it will take even less memory.
Good idea. Despite the fact that you said that in sarcasm-mode.
In fact, I have designed a version of OSNews that was text-only (except the ads that are coming from other servers) back when we had some bandwidth problems. And even that text-only design wasn’t bad at all!!
Here it is (I had converted only the first 4 news items, just to show that it can be done and still look as good):
http://www.osnews.com/text.html
DCMonkey : I have a 21′ at work and a 19′ at home. So true, I’m probably toward the high-end of user scale of equipment. In both case I work with browser at maximum size. As said Benjamin imply, I want multimedia, pictures and text to be big, visible and easy to access.
I don’t say screw people with smaller screen, I know it’s annoying to scroll… but I have also to scroll down a lot because some website have very small columns. Take: http://www.nytimes.com … good newspaper, website very average (to my taste – I don’t try to offend anyone). I have an average of 3 to 5 words per line on the first page. So long lines may be hard to read, but too short is bad too.
7.
1152 x 870
0.2%
that is the maximum screen res on my 667 rev A tiBook, and its predecessors, as you can see we are a formidable market share force
A well designed web page should be viewable at all resolutions IMO.
I use a 21″ monitor at 1600×1200, but I like being able to display multiple browser windows, I often browse with 4 windows tiled in Opera. I hate having to resize windows because a web page doesn’t deal with lower resolutions. More often than not there’s no need for the extra screen space, the page is simply badly designed.
If anything I think the average screen size will go down in the future. More people will be browsing with laptops and PDAs which will always have a limited screen size. Web designers are just going to have to deal with it.
Windows font rendering is retarded period. Why Microsoft doesn’t do true font size rendering is beyond me. Windows people have complained for years that fonts get unreadable at high resolutions. When you raise the resolution the fonts should stay the same size as in gtk2/qt apps in linux. At higher resolutions, the fonts and all images just look better since they are rendered at a higher dpi instead of the pixelated barf you get at low res’s.
Exactly. Screen size for web will go down, not up, not matter how weird that will sound to some. I am glad that we did OSNews the way we did from Day 1.
Laptop usage is not going to decrease the average screen res. You would be hard pressed to find laptops with lcds less than 1024×768 and much higher resolutions are becoming common. Running laptops displays at non-native resolutions always causes fonts to look blurry and most users will probably remain at the native res.
But you were right about PDA and IMO more importantly cell phone usage driving ave screen size down.
I have my work monitor at 1600×1200 and my home studio display at 1280×1024, but on neither do I surf with my browser window all the way wide. I surf about 800-900 px wide and full height. I find sites tend to look better that way and many are designed to do exactly the same (although I like coding variable-width sites). But I’d like to see a study of how wide browsers are set to for people who have the higher-res monitors. That would be more telling to a web designer.
I think all depends of the monitor side. On a 15″ monitor 800*600 looks really good but the fonts get to small on a 1024*768 resolution.On a 17″ monitor 800*600 looks to big, but 1024*768 looks like a 800*600 on a 15″ monitor.
I have a 17″ monitor with a 1024*768 resolution and looks great, I’ve tryed highter resolutions but the fonts get to small, and Im a person who likes to read clear and fast.
Documents are long and it is easier for the eye to not be very wide. So, 800 pixels wide (actually, 765 pixels) is a good page from both compatibility and usability point of view.
When we say support 800×600, you have to take into account that the wide should be around 765 pixels really, because the vertical scrollbar takes space, while on Mozilla 8-10 additional pixels go away because of its Sidebar (when Sidebar is closed)! I have found that to be in safe, the actual page/table should be set to 765 pix.
If CSS is used for it instead of widths, you can easily pad the body tag (using a %, em, or px) and then you won’t have to worry about fixed anything. Sure, it would add a little cpu for calculations, but removing as many tables as possible makes it much faster to render and much easier for accessiblity issues.
>but removing as many tables as possible makes it much faster to render
CSS won’t make it faster.
>and much easier for accessiblity issues
Accessibility for people with accessibility problems. But not accessibility for the rest of the users that don’t use a browser that is CSS-capable.
Again, it all depends who your userbase is. If you are a company making windows software, I guess you can do whatever you want and make sure it runs on IE and you are done. If you are more into broader audience, you need to be more careful.
I’ve read about lots of complaints, that fonts get to small, if you switch from 800×600 to 1280×1024. That’s an effect of broken font rendering systems. If you set your font size to 12 pt, the fonts have to be 1/6 inch with 800×600 and 1280×1024. The only System that handles fonts correctly is XFree86 as far as I know. Broken are at least Windows and Mac OS
The higher your resolutioon the better you can read text online. I’ve read that from 300 DPI on you can read online text as fast as printed text. It’s a shame that people prefer lower resolutions because they use broken systems
> Accessibility for people with accessibility problems. But not accessibility for the rest of the users that don’t use a browser that is CSS-capable.
My main point is that acessibility has issues with tables. Especially nested tables. Most programs for accessibility use tables for data, like they were originally intended. Not for layout. They are getting better, but better design is the real solution.
> Again, it all depends who your userbase is. If you are a company making windows software, I guess you can do whatever you want and make sure it runs on IE and you are done. If you are more into broader audience, you need to be more careful.
I would think that OSnews could have a good percentage of blind users/paralyzed users/etc interested in acessibility developments. The broad range of topics covered here, especially with an emphasis on ui design, input devices, and the obscure (os’s, desktops, programs, etc) would lend itself nicely to people with acessibility issues.
I promote CSS because it helps them and others in general. It is very hard for developers to separate the ideas of presentation and content. Most are too concerned with the presentation being exact, everywhere.
HTML could be limited to html 3 tags, but a link for css could be added. If css isn’t supported, then they would still get all the content.. even if it looks like crap. KISS is a great philosophy for web development.
Note, that I’m not pushing for OSnews to change its design, but for users and people in general to understand the idea behind it and hopefully implement it someday.
Here’s an off the top of my head idea. How about browsers having a built in variable magnifier? The form could either be follow the pointer, or scrollable horizontal bar mag. A bit easier on the eyes, while still retaining the overall feel of the site. Throw in icon zooming and were almost there.
Don’t know about the Mac OS but I agree with you with regards to windows. I have a 19 inch monitor and can comfortably read text at 1600×1200 under XFree86. However the last time I used windows (trying out win2K3 evaluation version), I tried to run it at 1600×1200 and after a few minutes, I had to go back to 1280×1024.
> Css won’t make it faster
well actually it does, by loading the stylesheet once and then applying from cache. Also a lot of browsers only display tables when all the table contents have been loaded (not just for dimension issues), where css would not have this, which is good for large content area’s within tables. Also when used multiple tables, classes of css wouldn’t require loading similar data twice, and finally seperating css would allow html to be more semantic, therefore promoting a workflow that is indeed faster.
So I’m a developer… It would never come to my mind to surf in fullscreen-mode, because I often have 5-20 windows opened at the same time and many of them are clustered all over my screen. So resolution is not only a matter of screensizes!
I think there is no need of surfing fullscrenn and in deed it’s a pain in the a.. to do it, just because I have to because some wannabe webdesigner thinks I have to!
I broke out my Newton 2100 and pointed NetHopper to OSNews. It was readable even without graphics being loaded. My only gripe is that I have to scroll down several pages past adds to get to the news items.
Give me the browser ID of NetHopper browser, and I will add support for it on our special header file. This way, you won’t see ANY ads, but it will get directly to the news items.
Just thought I would clarify some points about webdesign, mainly about the importance to separate content from presentation, and the benefit of a semantic conception.
I’ll first quote Tim Bernes-Lee as it summarizes perfectly why the web has been created and how we should develop websites:
“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”
And that’s what it is all about: a webpage should be accessible through any kind of hardware (handheld device, tv set, desktop computer…) and software (text browser, braille browser, modern desktop browsers…). Not that the site has to be rendered exactly the same pixel for pixel, but that the content and every single page is browseable, comprehensible (as in easy to read), that links work, etc.
To achieve this, you don’t need to create several versions of the site for all these specific devices/uses, but simply separate content from presentation and follow some strict (but simple) semantic rules.
First start writing the (x)html page. First line HAS TO be the Document Type Declaration (DTD); this will tell the browser how to deal with your code. The key is not to define any presentation/layout whatsoever (i.e. no font declaration, no table for layout purpose -tables are made for tabular data, NOT layout!). Use headers to structure your document (H1 to H7, from important to less important), the CITE tag for quotes, a paragraph always starts with P and end with /P, of course no picture to replace text (n.b. CSS will allow you to replace text with pictures if u’re a die-hard picture lover), etc… To define a block of text/content you want to assign a specific presentation to (i.e. table’s replacement, anyone?), just surround it using a DIV block with an ID or CLASS (ID is unique, a same CLASS can be used several times). SPAN is a bit similar to DIV for inline blocks, but i’m not going to explain about all this here (way too long and there’s much better tutorial available anyway).
Once you’re done with your html page (which includes NO layout at all) and if you wrote it well (using headers and with logic in mind), it should be easy to browse and readable on a mere text browser. At this point, you already have a fully functional website, perfect for text-only and mobile-phone navigation (and any other low-power browsing tool).
Time to focus on Cascading Style Sheets (CSS) now and get some nifty presentation/layout for more powerful hardware (faster CPU, wider screen, color screen) and CSS-aware browsers. What’s cool about CSS is that you can define different styles for different purpose. A style sheet for screen presentation, one for printing and another one for handheld devices (what about providing those small but still powerful PDAs with some nice layout?). It’s just a matter of declarating the main and alternative stylesheets for your browser to choose (automatically: print preview? -> print-ready style! PDA? -> handheld style! / or user-defined preferences through style-switching methods -too much to talk about here). CSS-only design doesn’t mean sacrifying features and effects nor will make your site dull. It will actually bring you much more possibilities, and cross-browser ones this time (as long as the browser has minimal W3C CSS support of course). Just a couple of links as examples of CSS powerness: Zen Garden [http://www.mezzoblue.com/zengarden/], Eric Meyer’s CSS Edge [http://www.meyerweb.com/eric/css/edge/], Open Web Group [http://openweb.eu.org].
Keep in mind accessibility and flexibility when you write your stylesheet. Prefer variable width/height/font-size to static sizes. This way your design will automatically adapt itself to your visitor’s screen resolution and font’s size. Using non-static sizes is by far the most delicate approach but once you master it, it opens new doors and you can provide your visitors with a perfect layout, from 640*480 to 1280*1024 screen resolution and beyond.
CSS not only dramatically reduces webpage’s size (no more font family/size/color, background image/color declarations on every single paragraph/table cell) but also allows user’s defined style to overwrite your stylesheet. Some people simply don’t care about your site’s presentation. All they want is to access the site’s content and be able to read it comfortably. Those people are mainly, but not necessarily, sight impaired persons and need some very specific site’s design; either big letters, yellow text on black background, important contrast or, at the opposite, very low contrast. Thanks to CSS you can define your own CSS rules in your browser settings and change any site’s presentation to your needs. This dramatically improves accessibility for disabled people. But if you keep hard-coding presentation within your content, it’s gonna be much harder, nearly impossible.
As you can notice, the benefits you get by embrassing a semantic website conception are numerous:
– Only one version of the site for everyone: automatically adapts design to browser’s and hardware’s capabilities.
– Disabled people are not injured anymore.
– Easier to maintain: simplified code as content is separated from layout.
– Much smaller pages produced and is faster to load.
– Possible to heavily change site’s layout by modifying only one file.
– If the browser doesn’t support CSS, the site is still fully accessible.
– Better search engines ranking: proper structure (H1, H2..) and separated design helps here.
Always good to have a look at the World Wide Web Consortium [http://www.w3.org] to get more information.
(sorry for the length of this post)
P.S. Examples of tags were written without the < (<) and > (>) as i dunno how it would have been interpreted here.
This is a very good point, as 800×600 is really all that’s bearable on small monitors. Many of us are still looking at 15″ CRTs because we can’t afford/don’t have room for anything better.
15″ TFT’s are smaller then a CRT and display 1024×768…
If the website scales I don’t mind a realy hate those sites
which insist on a fixed resolution of 640×480….
I always surf in fullscreen. Only way I’ve ever done it. I run all my apps full screen, except for my text editor, command line boxes, winamp, instant messengers, etc… But everything else I run full screen.
It’s difficult to concentrate if they’re not full screen, especially so while surfing the web.
I guess it’s just a learned behavior. The only way I know how to surf is full screen. Been almost seven years now like that…
I always use a 800×600 browser window on my (bigger) desktop. I don’t want my browser window to cover all the screen, do I?
Unfortunately I think this is true for several reasons (basic ignorance I’ve seen most often), though another accurate statement would be that there is much more variance than before in the resolutions people are running. This makes it harder, because a lot of things we do for the web aren’t good for scaling.. either they’re made not to scale and/or they look stupid on a low or high resolution. Things made mainly for scaling often lose niceties that fixed size layouts can deliver. You always have to just sacrifice one aspect for another to reach your intended audience.
As for my own preferred rez, I’ve always known that monitors of the past and current are small, narrow and blocky windows into computer imaging. I’ll gladly use whatever is on the nicer side of what’s available but I won’t really be happy until the flat kinds of monitors are big as a wall and sharp as a film negative. That would probably tide me over until they come out with holodecks.
but I believe that websites should be non-dependant absolute sizes. You have the option to use percentages, so why not use them. Lines will wrap if you resize the browser window (at least, that /was/ the idea).
I use a variety of different resolutions on different machines, and I get annoyed at sites that assume you use a certain screen resolution, either forcing me to scroll around, or giving me huge empty borders left & right. If I use 1280*1024, I don’t want just 800*1024 sized content. If I wanted that, I’d have resized my window to that size.
I’ve read the article but I can’t see which sites were used to give them these figures. Most people I know still use 800×600, including me. What about OS News? Do you have any figures for your site? Personally, I don’t believe that more people use 1024×768 than 800×600. It’s certainly not true with the people I know.
The css Zen Garden site ( http://www.csszengarden.com/ ) is some pretty damn impressive CSS uses.
>Do you have any figures for your site?
Yes, here they are:
http://bilbo.counted.com/2/42699/19/?date=0 (scroll down)
Don’t forget that no “normal” people are visiting OSNews, but mostly geeks and developers. This is why 800×600 has a mere 6% on OSNews. Again though, 1024×768 is the main res used.
First off, anyone who uses 1280×1024 (except for the LCD screen users – more on that later) is doing themselves a serious disservice – due to the different aspect ratio.
All the “standard” resolutions (640×480, 800×600, 1024×768, etc.) are at the same ratio: 4×3. 1280×1024, however, is the only one at 5×4. Now, on an LCD Panel, this is fine, because the screen is always built to fit the native resolution – therefore your 17″ and 19″ LCDs are actually a little taller proportionally than 15″s/20″+s.
However, on a CRT, the screen is built to be (roughly) at a 4×3 ratio. Therefore, when you change resolutions and then adjust the screen to fill the monitor, it always fits – a square pixel is a square pixel – and a 200px x 200px circle looks like a circle instead of an ellipse. You shift to 1280×1024, and you end up with a smushed screen if you do that.
What’s the answer? Well, some video card manufacturers (I know Nvidia for certain), offer a different resolution (in the same vein as the widscreen resolutions for our lucky powerbook owners – or other widescreen monitors). This resolution is 1280×960 (do the math, it works) – when my eyes get too tired at 1600×1200, this is what I switch to.
If this option isn’t available, what I usually do is switch to the Mac-savvy familiar 1152×870. More vid card makers support this for some reason, and you’re only giving up a little resolution but are still better off than 1024×768 on the larger screens.
OT: In the interest of helping browser compatibility – Eugenia, have you tried osnews in Mozilla Firebird (the browser only project of Mozilla)? I can read things fine but the forms seem to be broken in some way.
It works fine on my Mozilla Firebird nightly build
Users with monitors set to the most common resolution 800×600 for web sites have an approximate 31.7 percent global usage share
Yes, these are the numbers that our statistics report too – we’re being visited usually by “normal” people, often middle-aged.
From personal experience, I have to say that ignoring lower resolutions is disrespecting your users (while taking into account your userbase). I know several (not-so-young) people, for whom using more than 800×600 or even 640×480 is a pain, they simply can’t see nothing. I myself was forced to 800×600 because setting the screen to a higher resolution was making it all dizzy. Nowadays I have 1024×768 at home, and where I work I have a 1280×1024. These are the most comfortable settings for these monitors, so you can’t argue against.
So, I can only admit that designing webpages which look good on 800×600 (meaning, thet’re not becoming cluttered around or/and unreadable) is the right approach. Although it can be a pain sometimes, talking from personal experience…