Grow your CSS skills. Land your dream job.

Website Critique Pretty Please!

  • # March 30, 2012 at 4:49 pm

    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!

    http://www.unleash-it.co.uk/

    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.

    # March 30, 2012 at 5:33 pm

    Lookin Good!

    # March 30, 2012 at 6:05 pm

    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! Shush.it

    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.

    # March 30, 2012 at 8:31 pm

    Hi guys thanks for your feedback, especially you @noahgelman

    I’ve taken much of your feedback on board and made a bunch of the changes already.

    That being said, I do want to clear up a few bits – H tags don’t actually have a big effect on SEO these days, also my number is very very relevant and important as it’s our main objective for the site (get people to call us to buy!).

    I’m not sure why IE9 won’t curve the top boxes. The coding is exactly the same as the other boxes but has a gradient – I’m not sure if that’s what might be causing it. I took your advice here and cleared up the margin/padding problem in IE8/9.

    With regards to IE8 – I realised my @font-face was messed up, apparently IE8 likes you to declare the regular font first, and then follow with the bolds/italics of the same name.

    IE7 – I’ve purposefully not supported it for our new site. There’s so much I wanted to do with it for newer browsers and using some newer techniques. Plus in the last year we’ve had only a handful of visits from the UK on IE7, less than 1% according to Google Analytics so I’m not about to put in hours of work to help out a few people who should have upgraded by now!

    I’ve updated the blueboxes on the homepage with a transition for moz, webkit and ie9 + up and added a simple opacity for ie8 to give it a hover effect – you were right, it just needed a little umph.

    I reuploaded the slider images and compressed, saved about 15% in smush but I guess it was worth it!

    I also sorted out the Gzip as well though I haven’t seen a noticeable difference, also the pages are .php by extension so I don’t think they will be compressed anyway.

    You’re right about the contact form, I’ve updated it a bit, but along with the headers you noted as boring (which I agree with) I’m going to sort out an update soon.

    I took on board a few of your other comments too and made the adjustments, but many many thanks for your honest feedback, it will help us have an awesomer site!

    # March 30, 2012 at 8:32 pm

    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!

    # March 31, 2012 at 2:38 am

    As far as the site goes i like it, but the slider images to me are not crisp enough, I see they blur on HOVER a bit, but their initial state is a little blurry…The overall design is nice though, i absolutely love the color scheme…I am a big fan of cool grays and what i like to call spicy blues…I also agree about the rounded corners on the packages, i feel like the should alternate instead of follow the same pattern, I think it might balance out a little better…Great work though!

    and about the Heading tags…as far as local SEO goes, Heading tags are not a HUGE part, but they definitely make a difference, if you had 2 exact same sites, both optimized locally, except only one had proper heading tags, that site would rank higher…Keyword meta tag is absolutely useless though i still include it to make clients happy…just my two cents, again, love the site…great great stuff.

    side note: Instead of using image compression which i think is causing the quality issue, instead, you can maintain the crispy original quality and chop the filesize in half (literally) by exporting for web and devices in photoshop and using 8-bit png @ 256 colors instead of 24-bit…I used one of your images to see it in practice and it took the large slider image from 47.12k down to 29.07k…

    # March 31, 2012 at 8:33 am

    Hi guys, many thanks again for the feedback.

    I’ve just updated all of the buttons on the website to be CSS instead of image buttons, yay, now have a hover effect too.

    The blur for the front page images seems to be coming from the css transition which is scaling on hover. I don’t know a way to retain image quality when doing this yet? Any ideas?

    @kgscott284 I will be re-uploading the images too as you’re right there’s still a bit of random blur in there, I may even try to find a way to do them in CSS, but it would probably be a bit of a mission!

    @theacefes can you take a snapshot of the d for me? It renders fine in webkit, moz & ie on my machines, but if there’s a problem I’d like to sort it out.

    # March 31, 2012 at 1:01 pm

    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.

    Example:




    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.

    # March 31, 2012 at 7:54 pm

    http://i.imgur.com/AaG0W.png

    Firefox 11

    # March 31, 2012 at 8:10 pm

    @jacquers – thanks for the feedback, will see what I can do to turn those into CSS/HTML, easy for the buttons but the slides, not sure where to start!

    @theacefes – that’s so strange, I’ve tried replicating but can’t and really not sure where the issue is coming from. Anyone else experienced problems with random letters in Firefox?

    # March 31, 2012 at 8:20 pm

    I’ve just tried fiddling with the font and checking it on Browserstack and you’re right. However it only appears when using 1.4ems and disappears when I go do to 1.3em or up to 1.5em.

    How random.

    EDIT –> SO I’ve changed it to 1.3em’s to avoid the issue, it actually looks better with the text a bit small so that’s ace!

    I’ve also updated the front page blocks & slideshow to have a different hover effect, instead of scale I’m simply dropping in a box-shadow and easing with transitions.

    Fun fun fun with CSS :D

    # April 1, 2012 at 1:10 am

    You could still use a hover effect like the zoom, in fact, @cameronduthie came up with an excellent jquery version of that same effect that won’t diminish quality whatsoever! just fyi: http://css-tricks.com/forums/discussion/16821/solved-image-zoom#Item_6

    Now the new slideshow hover effect is fine but IMHO it is slow, i think the transition should stay between .2-.4s that is the butter zone, honestly .4 may be to high but .5s is too laggy to me, it doesn’t match the sharp, clean cut quality of the rest of the site….but i see the rest of the changes are making it look real nice!

    # April 1, 2012 at 9:28 am

    Love your colors… only thing is that using all reverse text makes it really hard to read your body copy in the content area.

    Using a lighter background for that part may help with legibility.

    # April 1, 2012 at 11:03 pm

    @kgscott284 – cheers for the feedback, I’ve increase the speed of the transitions on the 4 blocks and updated the slideshow transition too based on your feedback. I’m quite happy with those rather than the scale on hover so will keep as is.

    @janet4now When you say reverse text you mean the white on black right? I’ve tried adding a colour behind via firebug to mess around, from creamy colours through to #333 just to see what it would be like but can’t find one to suit the overall theme. Have you got any particular colours in mind that might be worth trying cause I definitely appreciate your point and want to make it super easy to read.

    # April 1, 2012 at 11:04 pm

    No problem! That is real nice! That is what i am talking about, looks real crispy!

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".