The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Website Critique Pretty Please!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #37426
    Andy Howells

    Hi all,

    Would love some feedback on my company’s website – we finished it off fully over the last couple of days (mainly backend was remaining) – would love to know what you all think!

    Also it’s a responsive design so if you can check on your smartphones/tablets too it would be much appreciated so we know it’s working on all device sizes properly.

    Allen Lawson

    Lookin Good!


    Looks good overall. There is kind of some nit picky stuff.

    The links with the gray box hover, there should be some left padding. The text goes straight to the edge.

    The Sidebar on the About and Contact has a “Navigation” section. The section is a bit confusing since a lot of the links there are already in the main nav and they’re right next to each other.

    The contact form is pretty ugly and the send doesnt have a cursor: pointer or a hover state.

    Blue links on the Hosting section are missing their Alt texts. Plus they’re clickable past their edge on the right and left. They need to be switched to inline-block.

    The 3 blue tiles on the home page show no effect on hover.

    None of your blue box links have a hover.

    The text on the home slider is slightly blurry. Either don’t lower the image quality so much or use a png. Png is better for text.

    Your images need to be compressed. Run them through Yahoo!

    You should enable gzip compression. It lets the server compress files before sending them. Add the following to your .htaccess file:

    # compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    # Or, compress certain file types by extension:

    SetOutputFilter DEFLATE

    Twitter links on home page have no hover effects.

    There’s no copyright on your website.

    The Youtube video on your About page uses flash and not their iframe embed. Not good for ipad and iphone users or anyone without flash installed.

    You use some elements inappropriately. For example, the phone number in your header. You use 2 h1’s to style that. That is a HUGE no-no. Search engines use these to find important information abdout the web page. Your phone number is irrelevant.

    The headers for sections are just plain text that’s underlined. It’s very boring for a web design company

    Change the body background from “url(“../images/bg.jpg”) repeat scroll 0 0 transparent” to “url(“../images/bg.jpg”) repeat scroll 0 0 #333″. Sometimes the background texture doesn’t load right away and the entire screen is a blinding blue due to the border top. Giving is a dark gray closely resembling your background makes the change from no texture to texture much easier on the eyes.

    IE9: The curvy blue boxes on Web Design and Hosting aren’t curvy, just boxes and have way too much top padding.

    IE8: All the text on the site is italic…

    IE8: Contact form text area has a useless scrollbar

    IE7: Has a lot of trouble. As a web design company you have to go as far back as IE7 at least because many of your potential customers are people/companies with older websites who want to upgrade. You need to look nice for it.


    On the Web Design page, the rounded corners on your packages are very distracting the way you have placed them. You can get a cool effect and a nicer presentation without so many curves.

    The font renders kind of weird, especially on “d”s.

    I like the color scheme though!


    For the buttons on the front, I would suggest converting them to actual HTML. This would allow you to resize them without fear of image blur. Same goes for the image slider, however, you would have to sacrifice a little bit of graphics (although, not much).

    Those buttons should nice and dynamic, so that way – if your needs change in the future, you’re not going back to the PSD to slice out the buttons again, you’re just changing the html. Plus, you might get some additional SEO value, because Google will be able to associate your headings (search engines like these) with important parts of your site.

    Anyways, bear in mind that the HTML/CSS below is in no-way complete, and is just there to give you an idea of how I would do it.


    Of course all of this is easier (especially spriting) if you use Compass

    Again, disclaimer - some of the details here don't fit within your site exactly, (h3 when they probably shoud be h4, etc, etc), but I'm just promoting the concept vs the actual implementation.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.