Site ready for the good, the bad and the... (Full Version)

All Forums >> [Web Design] >> Site Critiques



Message

1eagle -> Site ready for the good, the bad and the... (1/21/2006 17:05:57)

With the release of the new FF browser my website became a web nightmare. I have spent the last few weeks crash learning CSS and eliminating the tables. Thanks to all the help I was able to find searching this site and without having to ask. I found that the questions had already been asked and answered. All critique positive, negative or otherwise would be greatly appreciated. Thank you.
http://www.providerofchoice.net



womble -> RE: Site ready for the good, the bad and the... (1/21/2006 18:11:57)

Nice site! (if a little on the blue side [;)] - perhaps a dash of other colour here and there?) Looks well planned and easy to navigate. You have a couple of warnings coming up on the FF HTML Tidy extension, though nothing major.

Good work! Your crash course in CSS obviously worked! [:)]

My only query is that looking at the code, my firewall seems to be inserting a pop-up blocker in the generated code, and I always get a little wary of pop-ups (nice to see my firewall's doing it's job though! [:D]). In general pop-ups are best avoided on the grounds that most visitors see them as an annoyance unless there's a good reason (from their perspective) for them to be there.



1eagle -> RE: Site ready for the good, the bad and the... (1/21/2006 18:26:09)

Thank you Womble. I will check into those errors. As far as the pop up issue there are no pop ups installed on the site. I am one of those people as you said, hate pop ups.
Jody

Just checked for the erors.My tidy says 0 errors and 0 warnings. I checked verification at the W3C and also no erors. could you tell me what errors you are receiving?



womble -> RE: Site ready for the good, the bad and the... (1/21/2006 19:18:12)

No errors, but three warnings:
quote:

line 43 column 1 - Warning: content occurs after end of body
line 43 column 1 - Warning: content occurs after end of body
line 128 column 1 - Warning: <iframe> proprietary attribute "onload"

0 errors / 3 warnings


I'm wondering now if my firewall's being over-zealous (it's new and isn't fully house-trained yet [;)]). Another thing Tidy picked up was a frame, which it's saying is just <head><body></body></head> - ???? - though looking at the IP address of the frame now I'm thinking it may be something to do with my firewall setup or the remote admin software I'm using to control the PC from my laptop (the fact it starts with 127.0.0.1's a bit of a giveaway - can't believe I didn't spot that before - duh!)....looks like I need to get onto one of their tech supports...[8|]. It's probably something to do with my setup. Your xhtml validates just fine with the W3C as does the CSS (3 warnings, but that's just 'cos the validator doesn't like the box model hack), so I wouldn't worry about it.

One thing I forgot to mention before, you could possibly do with a little padding on the bullet pointed lists, just to create a little more white space and make it easier to read, but it's still looking good! [:)]



1eagle -> RE: Site ready for the good, the bad and the... (1/21/2006 19:38:39)

Womble
I have been checking more of the pages and what I have found is that the frame you mentioned is from the google adsense I have placed on some pages. I found this in the following page by clicking on my tidy button and then clicking on the errors it had listed www.providerofchoice.net/crime-statistics.htm
Also I have added 5px padding to the bottom of bullet list.
Still thinking about the color you had mentioned earlier, any suggestions?

Edit
Just wanted to clarify the erors mentioned are not on my page but are within the google adsense.



1eagle -> RE: Site ready for the good, the bad and the... (1/22/2006 1:51:38)

Update for changes made to site.
I have played around with the site and in an attempt to stay with the color scheme I have changed the background color as well as the logo.



Tailslide -> RE: Site ready for the good, the bad and the... (1/22/2006 4:14:10)

Hi

Congratulations you've done an excellent job. You're an excellent example to those who feel CSS layouts are just too complicated to take on without years of banging your head against a wall!

Couple of points.

First thing - in IE it's adding the little eagle bullet image before the navigation list items. If I were you I'd be specific about which list you want the eagle bullets added to - i.e. call the list where you want the bullets: 
<ul class="eaglelist">
or whatever you want - then add that specificity into the stylesheet - 
 ul .eaglelist {list-style-image: url(whatever)}


That way any list that's not got the class eaglelist won't get the eagle bullets - that should cure the IE problem.

The form is a bit too far to the right in IE so you might want to fiddle with the padding or margins on the table you've got it in.

I wouldn't normally add this but since you've done so much already I will: I'd also add <label> tags to your form to make it more accessible - like this: 

<td class="td5r"><label for="name">*Name:</label></td>
<td class="td5l"><input name="r_Name" id="name" size="30" /></td>


Other minor stuff - I'd use sans serif fonts rather than serif ones - they're much easier to read.

I'd also add a bit more left/right padding to the main text just to give it more room to breath.

I didn't see the blue version of the site so I don't know what it looked like before... got to say I'm personally not too keen on the pinky coloured background though... sorry!

Excellent job though. [:D]



womble -> RE: Site ready for the good, the bad and the... (1/22/2006 4:34:12)

quote:

I have found is that the frame you mentioned is from the google adsense I have placed on some pages.

Yup, that'll be it. I had a similar problem with <iframes> for affiate ads I put on one of my sites and it messed up my nicely validated page - one of my pet hates, affiliate ads where they don't do a xhtml/standards compliant version. [:@]

It looks much clearer with the padding.

Sans serif font Tail? It's coming up as sans serif for me (though maybe that's cos I've got my default FF font set as sans serif? [8|] )

On colours, I use Color Schemer Studio, which lets you pic a colour scheme for your site from a photo. There's an online version (which doesn't do the cool photo thingy) but may give you some ideas. I seem to remember there was a discussion in the hints and tips forum recently about online colour tools, including if I remember rightly an online one that did do the photo thingy.



Tailslide -> RE: Site ready for the good, the bad and the... (1/22/2006 4:45:41)

quote:

ORIGINAL: womble

Sans serif font Tail? It's coming up as sans serif for me (though maybe that's cos I've got my default FF font set as sans serif? [8|] )


Yeah that might have something to do with it!!

There's no font-family set for the central text bit (there is for the left and right columns) so it's coming up as whatever the browser default is set to - usually serif. Plus you never know - there's probably some disturbed individuals out there who've got Comic Sans set as their default browser font!!



1eagle -> RE: Site ready for the good, the bad and the... (1/22/2006 13:25:58)

Tailside,
I appreciate the suggestions and will get to work on them.
The background is presently set for antique. I will continue to work on the colors and check out the sites reccomended.

Womble,
I am relieved to find out that my site wasn't doing something it wasn't suppose to.

As for the text problem, do I need to include the font family list in the "input" portion of my css or with-in each individual Div.
Thanks,
Jody



Tailslide -> RE: Site ready for the good, the bad and the... (1/22/2006 14:33:30)

If you set an overal font-family for the whole site (in the body element) then you can add changes if you need to further "down".

I'd add this: 

body { font: 70% Verdana, Arial, sans-serif;}


It's better to use %s rather than pxs so that people still using IE can resize their text if they need to. From a bit of fiddling 70% looks the same on your site as 11px which is what was there before.



1eagle -> RE: Site ready for the good, the bad and the... (1/22/2006 16:55:22)

May have missed saying this earlier, Thank you both for the compliments. Helped put my fears to rest. I have to admit the past few weeks going from no knowledge of css to where I am at now has been, [sm=yikes.gif]. I was afraid I was going to have a lot of problems with the site. I can definitely deal with minor tweaks.[sm=boogie.gif]

Tailside
I have been working with your suggestions and I will need to do some tweaking with a few other elements of the site.
Couple of questions, <ul class="eaglelist"> When I add this it does not work unless I add it to all the <li> tags as well. Am I missing something here?
With the %'s use vs px I have 11px in the input and use %'s down through the css. When I use text resize in both FF and IE all seems to work ok, is it a good idea to place the percent in the body tag as well and then redo the %'s down the line?

womble
Thanks for the links regarding the colors. Briefly looked at them. Will check them deeper this evening.



womble -> RE: Site ready for the good, the bad and the... (1/22/2006 17:15:22)

On the <ul>, unordered lists have to have a set of <li> tags for each list item - just realised though, is it the css you're talking about? Yep, the <li>'s need them too.



Tailslide -> RE: Site ready for the good, the bad and the... (1/22/2006 17:26:55)

There's lots of differing opinions about sorting out the font sizes.

For various hocus pocus reasons I personally use 100.01% on the body tag and then change any other elements that need resizing further into the stylesheet - usually I'll make the main container div about 75%ish. There's a reason for the 100.01% thing and it was to do with a bug (in Opera I think) but god knows now - I forget the reason I do half the stuff I do!!

It would be perfectly valid to just put 70% in the body element - which will put everything at about 11px equivalent - and then size up or down any other particular item that needs it such as the navigation or input size etc. Take out any unnecessary font declarations to make your life simpler and cut down the risk of unwanted cascade effect - just stick 'em back in if needed.



1eagle -> RE: Site ready for the good, the bad and the... (1/23/2006 23:17:43)

[8D]I have set all the proper %'s to approximate original size, cleaned up my css and have placed padding for all unordered lists. For now I have elected to not have images with the lists. Having trouble keeping them inside the container. ,,,,more to learn but at a slower pace.

Will check with the CSS forum.

Still working with colors.

Thanks,
Jody

Just a foot note.
Went to bed early last night and the wife says "We have to be quiet, my husband is at the computer." - LOL
Bless her heart. Not a complaint one about the time I've spent with the computer over the last few weeks.



1eagle -> RE: Site ready for the good, the bad and the... (1/25/2006 0:00:21)

Tailside,
OK I now have the bullet list images working properly and have added the suggested changes to the site. I had meant to ask this earlier and hope this doesn't sound to dumb, but what are the <label> tags for?



Tailslide -> RE: Site ready for the good, the bad and the... (1/25/2006 3:21:58)

The <label> tags are primarilly for people using non-visual browsers such as text-readers - it helps them use forms as it ties the label e.g. Name: to the related input box (think about a form being read out loud rather than seen) - it can sometimes be confusing to navigate a form if you don't have the visual clues to tell you where to enter stuff.

I mentioned it because you are obviously going to such a massive effort to get things "right" - adding labels along with your nice neat CSS layouts will go a long way to making your site "accessible" to everyone.

Here's a rather dry but informative article on forms: http://www.webaim.org/techniques/forms/



Rocket Boy -> RE: Site ready for the good, the bad and the... (1/25/2006 9:44:25)

Could maybe do with two columns down that middle (white) section!?



1eagle -> RE: Site ready for the good, the bad and the... (1/25/2006 23:52:27)

Tailslide,

quote:

.... get things "right" .... to making your site "accessible" to everyone.

Great insight - You are correct. As you know I am working on the next step

Rocket Boy,
quote:

Could maybe do with two columns down that middle (white) section!?

Not sure what you are referring to?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125