Lunarpages Web Hosting Forum

Author Topic: critique my new site - for seamless gutters  (Read 1511 times)

Offline thepixellator

  • Galactic Royalty
  • *****
  • Posts: 340
  • Be here now.
    • RM Barry Publications
critique my new site - for seamless gutters
« on: May 02, 2006, 02:34:05 PM »
Hi all. I am at home now, not at work! (general disclaimer)

At home, I have created a new site to establish an online presence for a seamless gutter contractor. Please let me know what you think. It is a work in progress but I have it completed to the point where I have submitted it to G and Y. No spider crawls yet, tho.

<site no longer exists, but some interesting discussion>

Looking for feedback on color choices, copy for web, general appeal, and site structure. I have validated the html and css. I have installed a contact form, so go ahead and fill it out with ipsum lorem.

Thanks in advance!
« Last Edit: September 06, 2013, 04:55:18 PM by MrPhil »
::Jessica::
Have I reached the party to whom I am speaking?

Offline philvis

  • Master Jedi
  • *****
  • Posts: 1005
Re: critique my new site - for seamless gutters
« Reply #1 on: May 02, 2006, 04:17:43 PM »
I really like the colors except for the navigation in the footer. Needs to be a darker shade in my opinion. The site has a small company feel. Probably fine in this case.

As for the web copy, I think it could use a few changes.

1.We "can" work in residential and new construction - leave "can" out. It's repeated many many times in the copy.

2. Read more about "what" choices you have for materials - Change "what" to "the" or change the sentence to "Read more about your choice of materials..."

3. Read "about" why gutters are important to your house. - Omit the word "about".

4. We offer a warranty, we are insured and can provide referrals upon request. - Change to "We offer a warranty, are insured, and provide referrals upon request."

5. In the below example, water ... - Change to "In the example pictured below..."

6. The estimate is free, and all you have to do is leave us a message! - Change to "The estimate is free. Please leave us a message."

7. F.A. Seamless Gutters is a rain gutter specialist company started by Fredy Alvarez. - Change to "F.A. Seamless Gutters is a rain gutter specialty company owned and operated by Fredy Alvarez."

8. We are located in Aurora, Colorado and can work in the entire Denver metropolitan area. For instance, we can work in Fort Collins, Longmont, Boulder, Greely, Broomfield, Silverthorne, Vail, Arvada, Castle Rock, and Aurora. - Change to "We are located in Aurora, Colorado and work in the entire Denver metropolitan area, including Fort Collins, Longmont, Boulder, Greely, Broomfield, Silverthorne, Vail, Arvada, and Castle Rock.

Not many people ask about the copy. It's very important for a commercial site as you know.

Just my 2 cents worth.

Offline thepixellator

  • Galactic Royalty
  • *****
  • Posts: 340
  • Be here now.
    • RM Barry Publications
Re: critique my new site - for seamless gutters
« Reply #2 on: May 02, 2006, 06:17:12 PM »
Thanks for your review, I really appreciate it. You're the second person to comment about the footer nav. I just found out you can assign a different a:link color to different divs. I'll work on how to do it.

I wrote the copy fairly quickly, and with search engines in mind. Your suggestions are well received.
::Jessica::
Have I reached the party to whom I am speaking?

Offline thepixellator

  • Galactic Royalty
  • *****
  • Posts: 340
  • Be here now.
    • RM Barry Publications
Re: critique my new site - for seamless gutters
« Reply #3 on: May 02, 2006, 07:40:57 PM »
I have now changed the text you indicated, and I must say I like the way it reads. I also removed one of the "bad downspout" images that seemed extraneous to me. I changed the visited link color to a lighter yellow and I changed the footer background color to a darker grey. Now I like the color scheme better.
::Jessica::
Have I reached the party to whom I am speaking?

Offline philvis

  • Master Jedi
  • *****
  • Posts: 1005
Re: critique my new site - for seamless gutters
« Reply #4 on: May 03, 2006, 01:59:41 AM »
Great. Glad I could help.

Offline 4thDDev

  • Spacescooter Operator
  • *****
  • Posts: 33
    • 4th Dimension Development
Re: critique my new site - for seamless gutters
« Reply #5 on: May 03, 2006, 05:31:15 AM »
Looks nice,

My couple bits...

Your footer is missing a bottom border.  I assume "missing" because you have borders around every other box element.

Using the <ul> element for the nav is great but I would insert a simple custom bullet image to make the nav a little more unique.  In case you don't know, put this in your stylesheet (can be any image):

Code: [Select]
ul
{
  list-style-image: url(../images/bullet.png);
}

A note about header elements (h1-h6).  Customize their size using CSS and then use them in order of importance.  You're using h3 on your content title, this should be at least h2 if not h1.  The reason this is important is that search engines LOVE the header tags.  Use h1 on your most important headers and so on.  In keeping with this, you should add header tags to your nav items.

As much as I like using CSS background images, you need to reconsider using one for your header.  Right now you're missing another opportunity for the search engine to find your brand name.  There are two things you can do to fix this. 1) Use the usual <img> tag and put your brand name in the "alt" element; 2) Keep the image in the CSS and add this to your CSS:
Code: [Select]
#hdr h1{ display: none; } and then in your HTML add

<div id="hdr"><h1>FA Seamless Gutter</h1></div>

The second is best for now but may not work in the next generation of SE's.

My only other suggestion is to add a background image to your body tag to add some texture behind your outer div.  Something subtle and light (like what is on this forum page) works great.

Overall I like your use of color and layout, good job.  Your code is clean and well formatted which is very nice  for maintainability, bug prevention, and bandwidth.  I see too many "web developers" with horrendous looking code underneath their site.

Have a good day!
4th Dimension Development
time@4thdimensiondev.com
4thdimensiondev.com

Offline thepixellator

  • Galactic Royalty
  • *****
  • Posts: 340
  • Be here now.
    • RM Barry Publications
Re: critique my new site - for seamless gutters
« Reply #6 on: May 03, 2006, 06:12:08 PM »
4thDDev:

Thanks for your detailed review!  :yey: I'll go through it in order:

1. I never saw a missing footer border on IE or FF or Opera. I figure this is a browser issue. I have switched the border from the "outer" div to the "footer" div in an attempt to fix the issue. Do you see a difference?

2. UL image: I originally had an image of the top of a sheet metal screw but it looked weird and I never made another. However, in Opera only, the bullets hang out over the left border, whether I use an image or a plain bullet. I tried different list positions and they didn't change anything. Do you know how to fix that?

3. headers. done. Very good point and I don't know why I didn't think of it before (re: search engines)

4. css background image: I have an issue with the banner on one computer only. It is running Norton firewall with medium security and even if I turn security settings  to low, the banner still does not show up. I wonder about your second suggestion, to set h1 to no display and then in effect, have hidden text on the page. Does that trick count as hidden text? I've heard you could get penalized by G for that.

5. page background image: Nice idea. I'll try a repeating gradient, perhaps.

6. Thanks for the compliment! :thumb:
::Jessica::
Have I reached the party to whom I am speaking?

Offline 4thDDev

  • Spacescooter Operator
  • *****
  • Posts: 33
    • 4th Dimension Development
Re: critique my new site - for seamless gutters
« Reply #7 on: May 05, 2006, 10:46:53 AM »
Hello,

I'm glad my comments are helping.

1. I'm sorry, I see the border and should have seen it fine before.  I'm not sure why I didn't

2. For the list bullets do this:

Code: [Select]
ul{padding: 0; margin: 0;}

li {
margin-left: 15px;
        text-align: left;
.
        .

}

Padding will determine space between the bullet and the li text. Margins determin the space around the entire li element, including bullets. 

Each browser has unique default padding and margin styles for block elements.  What I do is create a whitespace.css that sets most elements to 0 margins and 0 padding, then I redefine them how I want.  This prevents some of the  fun "gotchas" between browsers.

4.  I'm not sure what would cause the security block with an image tag.  Have you tried using a non-IE browser to see if its an IE problem? 
I'm not sure what the SEs think about display:none on text.  This is the standard method to create a 100% CSS layout with flexible XHTML elements.  Check out csszengarden.com.  Used sparingly and properly (to replace existing image text) is valid.  For more on this and other methods: http://www.stopdesign.com/articles/replace_text/

5. I like the gradient image, it looks really nice and softens the look.
4th Dimension Development
time@4thdimensiondev.com
4thdimensiondev.com

Offline thepixellator

  • Galactic Royalty
  • *****
  • Posts: 340
  • Be here now.
    • RM Barry Publications
Re: critique my new site - for seamless gutters
« Reply #8 on: May 08, 2006, 07:43:17 PM »
The margin on LI worked perfectly in Opera.
I decided just to insert the banner in the html page within the #hdr div.
Viewing the site in different browsers makes no difference when I'm at work. Also, I tested the image by inserting it at the bottom of the page on a development page. I still could not see it even though I could see the other image on the page.
::Jessica::
Have I reached the party to whom I am speaking?