...

View Full Version : Please review my edited BC STATS website



Grant Palin
04-28-2004, 08:11 PM
I've started work on the BC STATS website. It's currently in plain HTML, but I'm going to be converting it to ASP. I decided it would be best to fix the page layout first (it will be used as a template for the newer site) - it was nowhere near the current XHTML and CSS standards. There were many errors from the HTML validator on W3C, there were numerous tables for layout, as well as many spacer gifs used to set up the page.

I have fixed all the errors from the validator. I have removed a great portion of the layout tables and replaced then with styled divs. I have removed all of the spacer gifs, and used CSS to handle positioning. In the process, I trimmed just over 200 lines off the HTML used in the page (too many tables!). Before I started modifications, page length was over 600 lines of HTML. After modifications, it was about 400 lines!

Note that I left the content in, so the resulting number of lines of code for the layout alone should be a fair bit less. I left the content in to better compare differences between the original and new versions.

And now, the page looks almost the same as it did before. However, I've only checked in Internet Explorer 6 and Mozilla 1.4 - I don't have any other browsers. The page looks all but perfect in IE, but is a little messed up in Mozilla. I'm not sure what to do about that yet.

Please take a look at the result, and let me know how it looks for you, and what browser/OS/resolution you use, if you could.

Here's the original page (http://www.bcstats.gov.bc.ca/data/pop/popstart.htm) (before I started making changes). And here's the resulting page (http://hommworld.ithium.net/BCStats/BC_STATS_Population_Demographics.htm) (after having made all the changes I mentioned).

Any suggestions for possible improvements would be very appreciated!

bradyj
04-28-2004, 09:56 PM
You're getting there!! I've included some screen shots because it's breaking in my browsers:

http://www.dotfive.com/screen.gif

Checking code...

Grant Palin
04-28-2004, 10:51 PM
Those images you have, is the first (top) one in Mozilla? It looks similar to what I get in Mozilla 1.4 on Windows XP. I don't have Firebird, but I can see from the second (bottom) picture that the site appears similarly as in Mozilla.

I'm guessing that the offsetting issues may have something to do with my margins and padding...

Grant Palin
04-29-2004, 01:41 AM
As a side comment, when I opened the page in Dreamweaver, I got a message about numerous elements in the page being incompatible with Opera 1.2 and 2.0. The elements included the spans, and divs, and CSS properties such as border-right, margin-top, etc. Is Opera 1.2 something to worry about?

oracleguy
04-29-2004, 06:40 AM
I wouldn't think so since I believe they are way past that version number now. But I'm not an expert on Opera.

ronaldb66
04-29-2004, 09:51 AM
Your revision is a big improvement over the original; it loads faster and starts rendering almost straight away, while the original shows the typical table-based layout behaviour of a blank page until just about everything is loaded. There are still lots of tables inthere, though, and I didn't see much tabular data... :p

Update: Oh, and use larger text; with the default settings in IE (yeah, I know, corporate installation), most of the test is completely intelligable.

pb&j
04-29-2004, 03:25 PM
using IE6 at 800x600.
i agree with the previous post on increasing the font size. the text on the navigation links on your new page is hard to read.

bradyj
04-29-2004, 06:33 PM
Those images you have, is the first (top) one in Mozilla? It looks similar to what I get in Mozilla 1.4 on Windows XP. I don't have Firebird, but I can see from the second (bottom) picture that the site appears similarly as in Mozilla.

I'm guessing that the offsetting issues may have something to do with my margins and padding...

Top ones Safari and the bottom is Firefox.

...and, I wouldn't worry about opera 1.2/2.0 -- they're up to version 7.5 now:)

Grant Palin
04-29-2004, 06:43 PM
Thanks bradyj, that's good to know that Opera would not be an issue. I found out about that because, just for the heck of it, I switched Dreamweaver to maximum compatibility testing. And Opera 1.2/2.0 was (by far) the one that came up the most.

Oh well, no problem I guess!

Grant Palin
04-29-2004, 07:06 PM
There are still lots of tables inthere, though, and I didn't see much tabular data... :p

Seven, to be exact. Of those seven, two were in the content section, and so I'll just leave them alone (they're not being used for layout...).

I did remove 3 tables in the page header (the very top line on the page - with the BC logo BC STATS, etc). Those tables were used to structure that top section. I replaced the tables with floated divs, although I had to use a number of divs to achieve more or less the same layout.

Here's the code for the header:


<!-- HEADER START -->
<div style="width:760px;">
<!-- BC LOGO START -->
<div style="width:164; float:left; margin-top:8px;">
<a href="http://www.gov.bc.ca/bvprd/bc/home.do"><img src="images/logo_bcgov.gif" width="164" height="46" alt="British Columbia Government Crest" /></a>
</div>
<!-- BC LOGO END -->
<!-- BCSTATS, SEARCH AND WEBSTORE START -->
<div style="width:390px; float:left; text-align:center; border-left:1px solid #999999; border-right:1px solid #999999;">
<div style="width:390px; margin-top:18px; margin-bottom:11px;">
<div style="width:130px; float:left; margin-top:7px;"><a href="http://www.bcstats.gov.bc.ca/index.htm"><img src="images/bcstats_logo.gif" width="108" height="20" alt="BC Stats Home" /></a></div>
<div style="width:130px; float:left;"><a href="http://www.bcstats.gov.bc.ca/search.htm"><img src="images/search.gif" width="100" height="35" alt="Search" /></a></div>
<div style="width:124px; float:right;"><a href="http://www.bcstats.gov.bc.ca/store.htm"><img src="images/webstore.gif" width="100" height="35" alt="BC Stats Web Store" /></a></div>
</div>
</div>
<!-- BCSTATS, SEARCH AND WEBSTORE END -->
<!-- INDEX, CONTACT, HELP START -->
<div style="margin-top:10px;">
<div style="width:185px; padding-top:10px;">
<!-- INDEX AND CONTACT -->
<div style="width:70px; float:left; margin-left:5px; margin-right:20px;">
<a href="http://www.bcstats.gov.bc.ca/data/dd/details.htm"><img src="images/b_main_index.gif" width="70" height="13" alt="A to Z Index" /></a><br />
<a href="http://www.bcstats.gov.bc.ca/phones.htm"><img src="images/b_contact.gif" width="70" height="11" alt="Contact Us" /></a>
</div>
<!-- HELP -->
<div style="width:64px; float:left; margin-top:4px;">
<a href="http://www.gov.bc.ca/bvprd/bc/content.do?brwId=@20uAj|0YQtuW"><img src="images/icon_help.gif" width="64" height="22" alt="Help" /></a>
</div>
</div>
</div>
<!-- INDEX, CONTACT, HELP END -->
</div>
<!-- HEADER END -->


The reason I posted the code is because I'm not sure whether it's the best or most elegant or efficient way to do it. Maybe some of you people could have a look and suggest improvements...

There's still two other tables left; they are the ones used to set up the "tabs" in the left bar - Subjects and Resources. The tables are needed to force the graphics to stay in the right positions. The text is just that - text. Again, I'm not sure if there may be a better way to do it?

Finally, I've increased the size of the text on the left bar just a little bit. Any better?

As a side question, what's the best unit to use for sizing text? Em, px, or pt? I know that one of px and pt are not so good because the text remains a fixed size whenever you change the browser's text size. Which one is it - I can never remember since they're so alike! :o

I've been using em so far, but it's somewhat troublesome - it seems that size size of text in child tags are affected by the size of text in parent tags - when I change the font size in a higher-level tag, the lower level tags resize too. :confused:

pb&j
04-30-2004, 07:21 AM
Finally, I've increased the size of the text on the left bar just a little bit. Any better?

As a side question, what's the best unit to use for sizing text? Em, px, or pt? I know that one of px and pt are not so good because the text remains a fixed size whenever you change the browser's text size. Which one is it - I can never remember since they're so alike! :o

I've been using em so far, but it's somewhat troublesome - it seems that size size of text in child tags are affected by the size of text in parent tags - when I change the font size in a higher-level tag, the lower level tags resize too. :confused:
i think it is the PT that remains the constant one. i kinda forget which one it is too between the two of them.

current text size in left nav is now much better :thumbsup:

ronaldb66
05-03-2004, 09:51 AM
Grant,

text sizing is one of those tricky areas in web development, mainly because of variations across platforms and browsers.
Generally, relative units (em, %) are considered "better" from a standpoint of accessibility, since (almost?) all browsers have a text resizing feature which allows a user with impaired vision (or the wrong browser... *coughIEcough*) to alter text size, and relative sizes won't interfere with IE's text resize tool, which can't resize text sized in px or pt.
Many designers however still choose absolute sizes (mainly px) because it's the only really reliable way to get a predictable result.
There is a way to use ems and percentages and still get a more or less predictable result across platforms and browsers; read about it on "text sizing (http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html)" on Owen Briggs' "TheNoodleIncident (http://www.thenoodleincident.com/)".

Another issue about relative units you've discovered already is the inheritance factor; if not explicitly set, text sizes will compute to surprising values through inheritance. When in doubt, set them explicitly on those elements that seem to inherit unwanted values.

Grant Palin
05-03-2004, 05:52 PM
Thanks ronald, I'll look at that.

Now, any other comments on the the page?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum