Web Design - Resolution question

tigermatt

Hi,

I'm currently designing two websites using very similar layouts for some local organisations.

I've optimised the sites for Internet Explorer and similar browsers using an IE "core", because that's what I found from some research is the most common browser used.

However, my site seems to appear slightly weird (but still perfectly usable) at 800 x 600 resolution. I wouldn't have thought that many people are still using an 800 x 600 resolution since new monitors with higher resolutions are so cheap these days.

I'm just wondering whether I should be spending time to sort out my wonky size problem or whether more people are using higher resolutions and I shouldn't worry too much about it.

Many thanks

headcovers

Following the Disability Discrimination Act websites providing a service have to be "accessibie". I am sure that you are up to date on the requirements, but one is to allow the website to be useable at lower resolutions (some users deliberately reduce the resolution for eyesight reasons)

In all the seminars I have been to they have recommended designing websites at 800 x 600.

However it your website is not really legible at this resolution for some reason, its a tricky one.

tigermatt

headcovers wrote:

Following the Disability Discrimination Act websites providing a service have to be "accessibie". I am sure that you are up to date on the requirements, but one is to allow the website to be useable at lower resolutions (some users deliberately reduce the resolution for eyesight reasons)

In all the seminars I have been to they have recommended designing websites at 800 x 600.

However it your website is not really legible at this resolution for some reason, its a tricky one.

Thanks for this. I'm going to have a tinker around with my stylesheet file tomorrow when I'm back designing so hopefully I'll be able to make the problem a bit better.

The site is still accessible, the only problem is that the links navigation bar at the top doesn't line up exactly with the top header.

So this in 1024 x 768:

turns to this in 800 x 600 (you can see the link bar ends before the green above)



Thanks for the advice

electron_3

If you put cells with in a table and set the overall table size to 95% resolution
no matter what resolution you will come up against it will always be 95% of that
persons resolution who is viewing the site.

As cells are within a table all components in the cells should be in a fixed position.

The Disability Discrimination act is flawed and not worth the paper its written
on when it comes to resolution as it falls down when people change their native
resolution, and when the site was first built it conformed.

The only way you will ever get over that is to force a window size upon usrers
and disallow users to change there browser settings, but that will never happen.

Best of luck its a nightmare.

phill79

tigermatt wrote:

I wouldn't have thought that many people are still using an 800 x 600 resolution since new monitors with higher resolutions are so cheap these days.

So are new computers, but people don't buy new things if the old ones still work perfectly good. Think of an IT suite in a school, 15 pc's, all 15" monitors, or a suite of machines at a library.
Even though the price has come down doesn't mean you should expect people to buy upgraded equipment and therefore you need to design your site to the lowest comon denominator generally. It may be a pain in the b*tt, but thats just the way it is unfortunately.

amosworks

:eek: :eek:

You should never design a site to a specific resolution or use tables for anything other than table data these days matey. CSS2 makes all your dreams come true. A handy way of achieving navigation is using the <li> tag. Set it to display inline and customise it with something like this:

For some reason it's displaying !! instead of a close curly brace. Sucky forum code.

[HTML]
Your CSS:

.main_menu !!
float: center;
font-size: 70%;
font-weight: bold;
}

.main_menu ul !!
list-style-type: none;
white-space: nowrap;
text-transform: lowercase;
margin: 0px;
padding: 0px;
}

.main_menu ul li !!
float: left;
line-height: 22px;
height: 22px;
}

.main_menu ul li a !!
padding-left: 18px;
padding-right: 18px;
display: block;
background-color: #b02731;
background: url('/images/main_menu_divider.gif');
background-repeat: no-repeat;
color: #ffffff;
text-decoration: none;
line-height: 22px;
}

.main_menu ul li a:visited !!
color: #ffffff;
background-color: #b02731;
text-decoration: none;
}

.main_menu ul li a:hover !!
color: #ffffff;
background-color: #990000;
text-decoration: none;
}
[/HTML]

And in your HTML, you can implement a menu like this:

[HTML]
<span class="main_menu" summary="Main Menu">
<ul>
<li><a href="/index.html" title="Home" accesskey="h">Home</a></li>
<li><a href="/sitemap.html" title="Sitemap" accesskey="s">Sitemap</a></li>
<li><a href="/members.html" title="Members Area" accesskey="m">Members Area</a></li>
</ul>
</span>
[/HTML]

With a CSS compliant browser (nearly all browsers out there now) it will display beautifully simple navigation that works and feels exactly like custom made buttons regardless of the screen resolution and size. To non-CSS browsers (text only and very old) they will get a standards compliant unordered list of menu items (extremely user friendly on those platforms) and it also makes the navigation compatible with screen readers and braille terminals etc. The example above would probably approve to XHTML 1.0/Transitional, CSS2 strict and AA rated accessibility standards. That would more than satisfy your DDA requirements and you get all the compliance out of the same code. :cool:

A CSS compliant browser - the middle one is the mouse over state (Konqueror):


A text-only browser also capable of colour (lynx):


Good luck anyhoo!

wolfman

Yep, go for css, do away with tables if possible.

800x600 would be a good resolution to work to. Although I think this site (the forums) needs a minimum of 1024x786 resolution if that's anything to go by.

With regards to it being a fixed or liquid (stretches) layout, that'll always be an ongoing argument as to which is better. Both have their purposes. Liquid layout works very well on a site such as Amazon for example. But for articles, it's generally bad design for the text to span the whole screen, so a fixed layout is often preferred.

Darksun

tigermatt wrote:

I've optimised the sites for Internet Explorer and similar browsers using an IE "core", because that's what I found from some research is the most common browser used.

Yeah, but there are plenty of people out their who either don't want to or are unable to use IE. If you stick to W3C guidelines your website will (in theory) work with any browser. Use the Validator at http://validator.w3.org/ to ensure compliance.

However, my site seems to appear slightly weird (but still perfectly usable) at 800 x 600 resolution. I wouldn't have thought that many people are still using an 800 x 600 resolution since new monitors with higher resolutions are so cheap these days.

A well designed site should look good in any browser at any resolution. Consider text only users, mobile users on a PDA or Smartphone with a very small resolution, etc.

As people have pointed out, there's ways to do this with modern web design techniques. You may also want to take a look at http://www.w3.org/TR/WAI-WEBCONTENT/ for accessability guidelines.

tigermatt

I've just solved the problem by changing the width of my main DIV container from a percentage to a fixed value and it is working a treat! No more misaligned links bars now. :j

Thanks for all the help. It is much appreciated.