20 replies [Last post]
n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

This is my first attempt breaking free of tables, so nothing too fancy pants. Just trying to get my feet wet.

Please check my site here.

You might notice that there is no META yet. I am not sure if I need to include META for each page, or for just the index page. Any suggestions?

Thanks people.

This is my big chance . . . yep, I blew it . . .

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 40 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

If worthy of critics?

Hi there

You should have Meta tags on every page - the ones I'd bother with if I were you are:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="Describe your site here" />
<meta name="Keywords" content="stick some keywords in here" />
<meta name="robots" content="index,follow" />

The first tag here amongst other things tells the browser what character encoding you want to use.

The Desciption tag is important because that's what Google etc spits up with a search result so make it catchy! Do different ones for each page.

The keyword tag isn't as important as it used to be but I believe that there are some search engines that still pay it attention. It doesn't do any harm anyway!

OK on to other things.

Your main text title on your pages are <h3>s - I'd change that to <h1> to make search engines happy - you can style the tag in the stylesheet so it's the size you want. Search Engines pay a lot of attention to <h1> tags.

They also like title tags a lot so I'd think about having different titles for each page - hunting, fishing etc plus you need to think what people will be searching for in the search engines. Will it be the name of the ranch or maybe something else like "Hunting in Wisconsin" If you think it's the later then make sure you put that in the title tag something like: "Hunting in Wisconsin | Little Lakes Ranch | Home Page". Then I'd make sure you use the same phrase in your text.

I'd seriously think about encoding your e-mail address if you don't want to be spammed - here's a method you could use: http://www.seowebsitepromotion.com/obfuscate_email.asp

Would all of your audience know what B&C means (cos I don't - but then I'm a bit far away to be your audience!).

Last thing - this is just my personal opinion so feel free to ignore me! The picture on the main page is a bit long range to be really interesting - could you use a photo of the ranch itself (from closer in).

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

If worthy of critics?

You may want to combine the logo and image ranch name into one image, and then lose the Little Lake Ranch text directly under it. With images off, or if read by a text reader, one would see/hear Little Lakes Ranch, Little Lakes Ranch, Little Lakes Ranch...
From a design standpoint, there seem to be no alignment. The image in particular does not align with the menu, or the logo, or the text. It just seems out of place. Overall, pretty good - simplistic (which can be a good thing).

Edit: I just looked at the source order and realized a text reader would not see three little lakes ranch in a row, but two (after the menu).

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

HellsBells,

First off, thank you so much for the useful advice. I fixed most everything that you mentioned.

META, TITLE, H3 --> H1, and email encoding has all been implemented as you suggested. (If you don't believe me, feel free to check the original link).

About B&C, I guess it means Boone & Crockett . . . but that doesn't squat to normal people. I have no clue about hunting, and I do not condone the slaughter of deer. The only time I ever use my pistol is fools are driving below the posted speed limit. Actually, I am just trying to learn something with CSS, which I have.

The banner image will be replaced, and I guess the Logo will too. Basically it is all filler for now . . . maybe forever.

Thanks again!

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

wolfcry911,

Thanks for not only viewing, but replying.

This layout is 2 columns. The left column has the logo on top of the navigation obviously, and the right column's top banner is centered to align with the footer and the H1 tags.

The H1 tags below the banner are really just their so I have the option to put something more interesting in the DIV, like an image of something.

I am not trying to justify my crappy design, I just need to work on it more.

You are right, I need to consider the flow of a text reader for accessibility purposes.

Thanks again!

This is my big chance . . . yep, I blew it . . .

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 40 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

If worthy of critics?

Hello there.

You may want to resize the banner so that it fits in smaller screen resolutions. I viewed the page in 800px x 600px and I got a horizontal scrollbar, which isn't really very appealing. If you want to keep the original width of "666"-- I kind'a like it--, consider making a "mast". Put it on top of everything else, above your two floating divs.

Just a thought. Laughing out loud

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

ABCruz,

You are 100% right . . . I'm not too attached to the 666 width. I think I can make is a little smaller without offending the underworld.

Thanks for pointing that out.

This is my big chance . . . yep, I blew it . . .

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

If worthy of critics?

Hi

Just noticed that you are not leaving a gap at the end of you self closing tags.

<sometags and junk/>

Their should be a gap before />

I can't tell you why at this time but I remember seeing an example that went screwy in certain browsers when the tags didn't have the gaps.

I could be wrong but I think thats how they should be and probably how they are in the spec.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

JS,

Are you sure about the gap jazz? I never read that, but now that you have pointed that out, I remember all the W3C snippets had spaces at the end. . . . I'm going to look and see why. . . .

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

JS,

I found this:

Quote:
"Empty elements need an extra space. Browsers have been programmed to ignore tags that they don't understand. Furthermore, an opening or empty HTML tag has never included the slash character (/). Therefore, when a browser encounters <hr/> , it doesn't read this as an empty element using the XML shorthand for <hr></hr>. Instead, the browser thinks it's a new element <hr/> and won't display the horizontal rule. An easy workaround is available by inserting a space between the end of the element name and the slash, for example <hr />. The browser will correctly read the hr as the element name, ignore the slash as something it doesn't understand, and render the rule as desired."
Here

I'm glad you noticed my folly, none of the validators picked that up.

This is my big chance . . . yep, I blew it . . .

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 35 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

If worthy of critics?

Why is it important to cater to a "text reader for accessibility purposes" for a site that's marketing a service to folks who want to, for the most part, shoot guns in the wild?

Is this presentation really about the ranch? Or is it about the deer and, more importantly, the guy or gal looking at the page?

This is not about css. If I was a viewer, I'd want to see the deer I could bag right up-front - on the home page. First thing. Instead of trees. A rapid-fire slideshow every second of trophy deer on the first page. And happy visitors with their deer. If not a slideshow, then a bunch of deer thumbs instead of trees.

And I'd want to be told something like "YOU, too, can bag a fabulous whitetail trophy deer just like these fellas if YOU call Now and make Your reservation!" Some words to that effect.

Are your clients really interested in the purity of the technology? Or are they interested in people calling them today making reservations? This is not about the ranch.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

If worthy of critics?

n8gz4ez wrote:
JS,

I found this: "Empty elements need an extra space. Browsers have been programmed to ignore tags that they don't understand.

I was spot on then. Smile

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

Tisnew,

Quote:
Why is it important to cater to a "text reader for accessibility purposes" for a site that's marketing a service to folks who want to, for the most part, shoot guns in the wild?


Accessibility is very important for this ranch. Not too many people from Wisconsin will pay for a deer, partly because you can scrape them off the highways any day of the week. LLR caters to people who might not have trophy deer in their back yard, ie., people from the city, handicap people, not just "folk who want to shoot guns in the wild." So yes, Accessibility is very important.

Quote:
Is this presentation really about the ranch? Or is it about the deer and, more importantly, the guy or gal looking at the page?


This presentation is about a hunting ranch.

Quote:
This is not about css. If I was a viewer, I'd want to see the deer I could bag right up-front - on the home page. First thing. Instead of trees. A rapid-fire slideshow every second of trophy deer on the first page. And happy visitors with their deer. If not a slideshow, then a bunch of deer thumbs instead of trees.


This is not about css? What do you mean by that? Where on the website does it advertise CSS? CSS is for anyone who wants to use it, yes even me. This is a CSS forum if you haven't noticed. Anyone who uses CSS should be able to post their site at what is ironically called, "Site Check" on a CSS forum.

The reason why the ranch skyview is important, tisnew, is so that people do not think they are just showing up to someones barn to shoot a captive deer. The trees are staying. However, I might add a picture of a whitetail on the home page since you have mentioned this.

Quote:
And I'd want to be told something like "YOU, too, can bag a fabulous whitetail trophy deer just like these fellas if YOU call Now and make Your reservation!" Some words to that effect.


Tisnew, you too can bag a buck. On the very first page it says: "Little Lakes Ranch offers affordable hunting experiences with varying degrees of difficulty that will match a wide array of hunter skills. Your choice hunt (rifle, bow, or black powder) is available." Then there is a "Contact Link" I hope you did read that.

Quote:
Are your clients really interested in the purity of the technology? Or are they interested in people calling them today making reservations? This is not about the ranch.


My clients want business that is obvious, what does technology have to do with what you are saying? Just because I have my site checked at a forum, does not mean this site promotes technology necessarily. I like to use CSS, therefore I'm here talking to you. Again, nothing on that website claims to be promoting anything about CSS or technology. ALL websites should be checked by several sets of eyes.

So basically I should have a picture of a deer on the home page, roger roger.

Thank you for your post.

This is my big chance . . . yep, I blew it . . .

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 35 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

If worthy of critics?

Sorry, you're absolutely right. I got carried away. Again. :oops:

"This is not about css? What do you mean by that?"

What I meant, n8g, was just a prefatory remark that my comments in this site-check are not intended to be about css how-tos. Not about the technicalities of css. But personal opinions about what I see, instead. Not how it's done. Sorry for the vagueness. And thanks for sharing your personal opinions in response.

Yes, I read all text. I feel site-checking is about learning from others. So, when I site-check, I hit all links, every back, all rollovers, etc. I learn from you this way.

I would like to ask a technical question: with high-speed dsl, using mozilla and ie both, when I went through the photo gallery between each pic there was a flash and an empty "llr gallery" image icon in the upper-left corner (attached example). This only happened the first time through the gallery with both browsers. Subsequent passes showed pics rapidly with no empty icon. Mozilla was much less obvious; it appeared to be faster in rendering the pics - and appeared to deliver pics from top-down. IE, on the other hand, was much slower, the icon was there a long time. I could capture the IE version (attached) but the Mozilla was too fast to capture. It also looks like IE doesn't paint the pics top-down like Mozilla; but uses some other method that leaves the empty icon there longer. My question is whether a small whitespace gif could be used as a background image that gets there first while the big pic is loading? Or some other styling method that would work nicely to hide this behaviour?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

If worthy of critics?

Yes there is a valid way to achieve that effect with standard html.

There is something called a low src. Google it as I haven't used it before. I know it will display a small (in file size) image before the main one has downloaded.

[edit]

Oh yeah it is just the same as a normal src="" but says low at the beginning lowsrc="" make sure the image is very small in file size as it must beat the main image to be even remotely usefull.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 35 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

If worthy of critics?

Thank you, Joseph. Your suggestion worked nicely with a one-pixel white image.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

Tisnew,

So what you are saying is add a small GIF as a background for the images?

I tried changing src to lowsrc, it is not valid for my DTD.

Would another option be to use JS to preload gallery images?

Perhaps the best thing for me to do is optimize the images a little more.

This is my big chance . . . yep, I blew it . . .

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 35 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

If worthy of critics?

I copied your dtd statement. And a pic. And used Joseph's recommendation. It seemed to help on a local site. Spacer.gif is one-pixel.

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test lil gif</title>
</head>
<body>
<form>
<IMG src="llrd1.jpg" lowsrc=spacer.gif />
</form>
</body>
</html>

This is why I'm looking into across-browser technology for updating only a piece of a page. Your gallery and something I'm working-on are examples where pics might be substituted at a targeted spot on the page without redisplaying the whole page. Without javascript pre-loading; 'cause we don't even know whether the guy is going to ask to see the preloaded images beyond the first one.

Thanks

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

If worthy of critics?

<%@ Page Language="VB" AutoEventWireup="false" %> 

I'm adamant that this will throw IE into Quirks Mode.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 35 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

If worthy of critics?

One fun solution to displaying pictures is using an image map where you simply instruct the end-user to move his mouse over the numbers in this case (sample attached). The pictures transition nicely; and all show at the same physical location.

This sample code is from another application:

img {border:0; position:absolute;}

#map {width:250px; height:400px; background: white url(mainbase.jpg); position:relative; }

#map a {color:#00f; font: bold 15px Verdana; text-decoration:none;background:transparent;
display:block; width: 50px; height:0; padding-top:45px; position:absolute; overflow:hidden; }

#map a:hover {overflow:visible;}

a#first {left:0px; top:0px; }
a#second {left:50px; top:0px;}
a#third {left:100px; top:0px; }
a#fourth {left:150px; top:0px;}
a#fifth {left:200px; top:0px;}

</style>
</head>
<body>
/1------2-------3-------4-------5------/
<div id="map">
<a id="first" href="javascript:;"><img src="bl3.jpg" style="left:0px"></a>
<a id="second" href="javascript:;"><img src="bl4.jpg" style="left:-50px"></a>
<a id="third" href="javascript:;"><img src="br2.jpg" style="left:-100px"></a>
<a id="fourth" href="javascript:;"><img src="br4.jpg" style="left:-150px"></a>
<a id="fifth" href="javascript:;"><img src="re3.jpg" style="left:-200px"></a>
</div>
</body>

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 14 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

If worthy of critics?

Tisnew,

Thank you for your suggestions Tisnew; however, in my experience rollovers and large images do not work well without having the images pre-loaded. Onclick would be better than hover. If the image doesn't load fast, the user might not clue into that. Someone else correct me if I'm wrong.

I'm not sure this is an appropriate alternative to what I'm doing, but thank you for the sample code anyways. Perhaps I'll do something similar to this down the road.

So far really good suggestions from everyone, but not too much commented on the CSS I used . . . maybe that is a good thing? Reading from other posts, I probably need to shorthand more, and use classes instead of ids when I can.

This is my big chance . . . yep, I blew it . . .