Uniform website appearance...

Factual Questions
1

A friend is constructing a website & is wondering how to make sure it looks pretty much the same on different peoples computers. She noticed that a site which may look perfectly within the screen on one computer can require scrolling over when seen on another computer. That’s the main thing she wants to avoid.

Is there an average setting to use in website construction to avoid this problem or what?

(Notice from the clumsy construction of this question that I’m not exactly helpful to her on this & I hope I’m clear enough here. L)

2

The best reckoner is to take an average of monitor resolution. Google Analytics does this quite well.

For example, when I was designing my company’s new site, I checked and found that the most popular monitor resolution was 1024 x 768, which represented 28% of all visitors. There were no resolutions smaller than that, apart from 800 x 600 (640 x 480 appears truly to be dead), which represented only 0.9% of all visitors. I therefore designed the site around the 1024 x 768 resolution - the site’s width is fixed at just under 1000 pixels, to allow for browser margins, meaning at full-screen, 99.1% of users will never have to scroll sideways, and the front page will not require too much vertical scrolling.

The other approach is to make the site “stretchy”, so that it will grow and shrink with the screen resolution. This is a much tougher call and one that my abilities do not yet embrace. Also, it’s much less suitable for corporate sites, where there is a lot of layout and design work to exhibit - it’s more appropriate for informational sites such as Wikipedia, or blogs.

And mobile-enabled sites are a whole other ballgame.

Hope that helps a bit! The above stats are true only for my industry, so she should probably try her own research around resolutions.

The final consideration is to make sure the site is W3C compliant, which will ensure it works on multiple browsers - and then spend hours tweaking it to make it work on &*($&# Internet Explorer.

3

It sounds like your friend is making a fixed-width (in pixels) site; and that fixed width is wider than some people’s monitors. She should try to make the website variable width. Also, she should test how websites look at different resolutions by changing her screen resolution. And I would also recommend checking how the site looks in several different web browsers. Internet Exploder, Firefox, Chrome, and Opera should all be checked.

4

This is the big problem of web design, and why the pros get the big bucks.

Different people use different screen resolutions, different browsers (which all render slightly differently, and sometimes not so slightly), different operating systems, they set different default fonts (and have different fonts available), etc. All can affect how your page will look on their screen. Even after all that, users can do things like change font sizes on a page.

Basically the problem is insoluble, although if you have a really advanced understanding of CSS and a lot of time to work on your page you might be able to get close.

The art of good web design is not to try to have your page looking the same on everyone’s computer, it is to build enough flexibility into your design so that it looks satisfactory, and, in particular, is readable, on a many different setups as possible. Design control freaks should not be doing web design. The aim should not be to get it looking the same on each system (which is impossible), but satisfactory (even if different) on as many as possible. Fortunately, basic HTML is designed to make that easy to do, at least for simple text, but the more complex your layout is and the more aspects of the appearance you try to control, the harder it gets.

5

Well said. See CSS Zen Garden for (impressive) reference.

This is why I’m not a good web designer.

However, njtt, most people aren’t good web designers. And to be honest, unless they have years of experience, they’re usually going to produce something that does require a level of design control. Hence my fixed-width advice above.

6

Agree with the last 2 posters. Expecting your web page to be like a magazine page & look the same to all readers is a fool’s errand.

Also, while I agree that 1024x768 is the currently most common *screen *size, we have no idea what size people are making their browser windows. Some windows are maximized and hence 1024x768, less margins as **jjimm **explained. But other folks aren’t running maximized windows, and there is no way to know at run time, nor are there are good statistics on the topic.

As a practical matter, anything designed for anything much smaller than 1024x768 will look pretty poor on a much larger window. It also will have so little content on it that people will react negatively to it.

So our technique here (ISV for corporate intranet/ & B2B extranet sites) is to aim for acceptable results on 1024x768 maximized, and be more concerned that it looks & works well on larger, not smaller, window sizes.
OTOH, if you know your audience is little old ladies with ancient 15" CRTs set to 640x480 so the type is big enough to read, well that might be a reason to target the small end.

My 84 year old MIL is an internet junky. She has a 19" wide format flatscreen. Set to 640x480 so the type is big enough for her to read the letters. Most websites are very hard to use becasue of all the scrolling. Hell, most Windows dialog boxes barely fit on the screen.

But she can read it, and she’s happy.

7

This is the goal for all IMO.
Well put.
:cool:

8

Presented because it’s tangentially related and a great tool: http://browsershots.org/

It’s a site that lets you see how your page will render in an absurd amount of browsers with various settings.

9

Just to add, a pet hate of mine (and of a lot of people I know) are sites that either force your browser window to maximise, or - even worse - spawn a separate, full-screen window “to optimize your browsing experience”. Tell your friend not to even think about doing that, because a lot of people will immediately close the page and go elsewhere.

Websites shouldn’t impose their design on the user - the user should be able to define how he/she views them, whether that be in a small window, as text only with no images, or with different fonts and colours.

10

Totally agree. Instead, your friend should make sure that the Web page plays both sound and video as soon as it’s loaded, and has a different video/file on every page (also set to autoplay). Oh, and the home page is a great place to show off mad Flash programming skills.

I think one of the greatest skills to have in Web design is client communication. No … no … no you don’t want spinning circles and flashing lights on the homepage.

11

Yeek. I just finished a design for a local client who wanted to know why his site didn’t look that great and wouldn’t SE optimize well. When I took a look, it turned out that the entire site was an interactive shockwave file! And was fixed at 600 pixels wide.

His last designer took off for NYC and didn’t leave a forwarding address. No wonder.

12

Sorry but it’s extremely easy to get your webpages uniform, I used to design for a living. The issues comes up when you have an customer that insists on doing it his way regardless.

First of all you must use strict XHMTL. You must use strict CSS. Few people do this. I make sure all the sites I’ve done comply.

What happens is if you write a webpage in HTML or XHTML, and you use improper coding than instead of displaying nothing or jibberish the browser will display what it “THINKS” is correct.

This leads to variation.

Another issue is IE isn’t always compliant with XHTML standards. To make matters worse different versions of IE comply in different ways. IE also has code that is proprietary and only works with it.

The last IE broswer to work with WIN95 is IE5.5 since some people still have WIN95 you have to make sure your page looks good with that. Then you need to go test your page in every version of IE from 5.5 to the present version.

Then you need to test it in a mozilla based browser like Firefox or K-Meleon.

Then you need to test it in Opera and Google’s Chrome.

This isn’t hard to do, but it’s time consuming so a lot of people won’t do it. They figure OK since around 90% of people us IE, testing it in IE is good enough. But it’s not as I showed you, you have to test in ALL versions of IE.

Then there is screen resolution. This is easily solved by designing a sight that floats instead of static. This way you won’t have to scroll right.

Of course, I’ve had clients that simply don’t care, they WANT a static site and tell me, if someone is using a different resolution “let them scroll.” I’ve had people tell me they just don’t care. I have actually seen sites, that say “This site is designed for Firefox,” and it won’t let you in unless you have Firefox. What’s that about? That is saying “We don’t you.”

People on the Internet do it all the time

Yet another fact it the introduction of long screens and laptops. Young users especially will leave their browsers open and resize them to the shape of a TV screen (4:3) and use the leftover space for other things. Designer make the site for 16:9, yet their audience with long laptop screens are resizing the browsers

The problem lies web designers are not search engine optimization people, usually. So clients want the site designed and up and running, THEN they hire an SEO person to correct the site so it’s designed for Google and others.

This creates conflicts and sloppy code.

Part of this also stems from the fact people don’t direct code XHTML (HTML) but rather use programs like Dreamweaver. These programs do good job at getting your webpage up but create bloated code that isn’t needed.

Flash is another big problem. Leave it off. It’s bloated and takes forever to load on slow connections. It’s only interesting the first time you see it. CONTENT is what drives people to your site, not some FLASH script you think will be cool but is boring after the first time

As for the OP question I strongly recommend the site Dynamic Drive you can check out the pre-written scripts to see how they’re done or use the forums to if you have questions. They are very helpful

The key is a website design that floats.

13

Beautifully relevant commentary.

Not if you’re not in that industry, are doing it for the first time, and are using, say, Microsoft FrontPage. Which, though it makes me shudder, is very common (not saying that’s the issue in the OP, but it is for many small businesses).

14

It neeeeddddssss kiittttenz!

Man that was painfully true.

15

Except that you probably want to do this in reverse order… well… (old) IE last anyway.

Strict XHTML and CSS, test in modern compliant browsers: Chrome, Firefox, IE8, Opera, Safari (alphabetic order, no preference indicated) :slight_smile:

And *then *start heading backwards in IE: IE7, IE6… and if you really have to IE5.5 (Unless you’re expecting a really backward user base IE5 & 5.5 seem to currently make up well under 1% of users).

The reason for doing it this way is that you may well find that some things have to be dropped for earlier IE versions. E.g. pngs with alpha transparency traded out for gifs, rounded corners changed to square, CSS simplified (IE6 and earlier does not correctly parse multiple classes in a declaration), etc.

The one place I disagree with **Markxxx **is in saying that you have to make sure your page “looks good” with IE5.5. Readable yes, looks good… meh… you’ve more important things to blow the budget on.

It may be possible to make everything identical on old browsers but to do this you will probably have to either compromise your design heavily, or use deprecated methods (e.g. tables for positioning) or spend a big chunk of the budget on a very small (and declining) number of users. (I’ve heard designers refer to this as the “Redmond Tax”).

The goal should be to get the site highly usable and looking the way you want for the vast majority of users and then gracefully degrade for users of non-compliant browsers.

16

Markxxx, what you say is, no doubt (and quibbles aside) the right way to get maximum cross-browser and cross-platform compatibility, and thus to get a page looking good in as many circumstances as possible. However, it will not get your page looking “pretty much the same on different peoples computers” or ensure that nobody ever needs to scroll, which seem to be the (unrealistic) goals of FriarTed’s friend.

Also, your way is far from being “extremely easy”. I am sure you put plenty of effort into learning how to get the results you wanted using strict XHTML and CSS, never mind all the browser testing and browser specific tweaking you describe. I expect you got paid well for your work, and deserved it, but for someone trying to knock up a little personal site, or one for a small business or small organization, it is way over the top. For most people like that, Dreamweaver or probably even FrontPage (I know, it makes me cringe too) is quite adequate and a lot easier. Heck, even hand-coding in HTML is a lot easier than strict XHTML and CSS. But, however it is done, it is important to let go of the goal of getting your page to look the same on every system, and, indeed, let go of the goal of getting it to look exactly as you saw it in your mind’s eye, even just on your own system.

17

I miss the good old days of coding with HTML on Notepad; I made some nice looking and perfectly functional websites that way. Sigh.

18

I’m not sure what level of expertise your friend has, but I would suggest using a CSS template that someone has already checked on different browsers, and adapt it to your needs.
For example look here: Open Source Web Design

19

You can still make a nice looking and perfectly functional website in Notepad. You don’t need anything special to write and execute HTML, CSS or Javascript. You can even write PHP and ASP Web sites in Notepad too if you want, you just need to put them somewhere that can execute the files.

You don’t need special tools to make a really great Web site, just special knowledge.

20

I still use Macromedia HomeSite from 1997, which is little more than a fancy text editor! Works great for me.

Of course some of the script that I write makes up templates in a CMS for dynamic delivery, but I still spend some of each day hand coding HTML and CSS.