Hey, having completed a client's website recently, I wanted to get some opinions of it, I wanted to see if it is giving the right impression and whether, if you were looking for services, that would convince you, plus the good, the bad and the erm... whatever lol thanks

 

www.elitechandelier.com

Anyone?

For some reason the homepage makes my Mac go insane. I haven't been able to find the issue, but you've got a lot of Javascript errors on the site that you can see inside Chrome Dev Tools.

 

If you can get the logo SVG and background image down in filesize, the site will feel much snappier. Don't forget SVG's can scale so they aren't required to be loaded in large. As for the background, anywhere over 200kb is the absolute top of where I would want to be if possible.

 

Lastly, I really don't like the loading indicator. On the index page, it seems to be really slow, and on other pages, it just gives the impression the site is slower than it is. Again, if optimised properly you won't need it.

not sure how your svg logo is 1mb ... was going to take a look in illustrator but it crashed even the excellent https://jakearchibald.github.io/svgomg/ only saved 2%... hmm have you got any raster images or effects in there?

 

background image is > 8000 px wide - er paerhaps doesnt need to be quite that large maybe 2000px even for retina should be fine. small amount of noise added in photoshop for example will help compression

 

text contrast needs some help on http://www.elitechandelier.com/client.php black background on the text label at around 20-30% opacity

 

the left aligned menu is a bit old school - but i have an old school monitor (1280 x 1024) so maybe it looks better on a widescreen

 

otherwise overall i like it - if i had a chandelier i would contact them

Thanks guys,

 

One of the issues we had was image size, the main homepage image for example was so small to start with that I had to stretch it out in photoshop, use photo manipulation to clean up the serious noise and blur, then overlay it with a colour, resulting in an image that I am afraid to reduce in size due to the quality factor.

 

The svg, I will definitely look into, you are right, I should have made a much smaller image, don't know why I didn't

 

As for the loader, the real reason for it was that it looked terrible when loading, all the images were taking so long and as it was loading you could see the 'reverse side' of the contact form, as in the mobile site, it spins from menu to contact form.

 

We did notice those javascript errors, but did not know how to fix them as the errors were coming from the jquery file, obviously we know there is not a problem in the jquery file, so did not know where to start, although we do know a slider we used is causing an error too.

 

Yes there is a raster image in the svg, we had to include a shield and I could not reproduce it in vector.

I'm sorry, I want to be tactful, but the first thing I noticed when I looked a few days ago was the poor quality of the old photo on the homepage. Which confused me as it was so large.

 

What you've said above explains that. How do I tactfully say "Noooo.....! You can't do that to a photo and expect it to look good?"

 

You have other photos elsewhere in the site that are being displayed at a larger size than they've been saved at, and I think you could rectify that pretty easily.

I'm sorry, I want to be tactful, but the first thing I noticed when I looked a few days ago was the poor quality of the old photo on the homepage. Which confused me as it was so large.

 

What you've said above explains that. How do I tactfully say "Noooo.....! You can't do that to a photo and expect it to look good?"

 

You have other photos elsewhere in the site that are being displayed at a larger size than they've been saved at, and I think you could rectify that pretty easily.

 

The reason is one of branding (it's not just a random image) so changing it is not really a good idea, we considered all this when we made it, obviously I did not 'expect' it to degrade well at a much larger size, but the client wanted the suggestion in his words 'because it will make the image look authentically old' - to be honest, I disagreed (as these is a big difference between authentic and a mess) but by that time he had screwed us around so much with the branding and we had wasted so much time, we took it.

 

I wanted to go down this sort of route https://thumb1.shutterstock.com/display_pic_with_logo/1998197/407607274/stock-photo-writing-down-new-coffee-recipes-young-bearded-man-in-apron-writing-in-notebook-while-leaning-to-407607274.jpg but he was insistent he would never get the time to pose for one (even though we knew differently - speaking to his secretary ) but we still needed to give a personal touch and this is the closest we could come to that as the displayed image really is his business in around the 1920's.

 

but thanks for the comment.

 

 

something weird happening with the svg file size - i think it's the crest image you have in the middle - obviously better to have it as vector - without that it comes in at around 49kb - bit better than the almost 1mb it currently is.

 

re: the vintage picture - one option might be to use sepia rather than dark blue

something weird happening with the svg file size - i think it's the crest image you have in the middle - obviously better to have it as vector - without that it comes in at around 49kb - bit better than the almost 1mb it currently is.

 

re: the vintage picture - one option might be to use sepia rather than dark blue

I will most definitely have a look at that svg but can't guarantee the colour of the image, it would have to be approved by the client but I will try, thanks

I will most definitely have a look at that svg but can't guarantee the colour of the image, it would have to be approved by the client but I will try, thanks

 

I would extract the raster section of the SVG and save it into it's own file (transparent PNG I assume) and load them both into the DOM and use CSS to position it. I imagine that will save you a substantial amount of data.

 

Generally though any clients we had we would ensure that their logos are fully done in vector, we partnered with an agency who specialised in company logos. Clients with existing logos were advised to return to whomever created their logo to get it properly re-built. Any agency that does company logos should be using vector throughout these days.

I would try to avoid the scroll of the left part of the site. Also would change the "x" next to Services - usually we use it for close, delete etc (and you use it to close the contact us form too). Also I would try to improve Contact us. For me, it's better if the Submit button and form to be visible without scrolling.

 

I would extract the raster section of the SVG and save it into it's own file (transparent PNG I assume) and load them both into the DOM and use CSS to position it. I imagine that will save you a substantial amount of data.

 

Generally though any clients we had we would ensure that their logos are fully done in vector, we partnered with an agency who specialised in company logos. Clients with existing logos were advised to return to whomever created their logo to get it properly re-built. Any agency that does company logos should be using vector throughout these days.

 

Great idea, I will do that, it is unfortunate though that the client said he copied the coat-of-arms himself and did it in a bitmap programme, I would have to vectorise it myself, it is real trouble too, the detail is so much I cannot be sure of reproduction.

 

 

I would try to avoid the scroll of the left part of the site. Also would change the "x" next to Services - usually we use it for close, delete etc (and you use it to close the contact us form too). Also I would try to improve Contact us. For me, it's better if the Submit button and form to be visible without scrolling.

 

All great advice, I will have a word with my business partner and the client to see if they would be happy making these changes, thank you.

I drew the coat of arms bit as vector and replaced the bitmap (http://gekkoweb.com/stuff/chandelier/elite-logo2.svg) - weighs in now at around 82kb

illustrator file of the coat of arms thing is http://gekkoweb.com/stuff/chandelier/coat-of-arms.ai - wouldn't stand up to larger sizes than the logo on the web - no good for the side of a van probably - but pretty ok considering it's so small on the net anyway.

 

I think that trying to position a png on top of an svg might be troublesome, maybe not

 

hmm can't post linked svgs...

I drew the coat of arms bit as vector and replaced the bitmap (http://gekkoweb.com/stuff/chandelier/elite-logo2.svg) - weighs in now at around 82kb

illustrator file of the coat of arms thing is http://gekkoweb.com/stuff/chandelier/coat-of-arms.ai - wouldn't stand up to larger sizes than the logo on the web - no good for the side of a van probably - but pretty ok considering it's so small on the net anyway.

 

I think that trying to position a png on top of an svg might be troublesome, maybe not

 

hmm can't post linked svgs...

 

wow, thanks very much, saved me a whole lot of hassle, I hate SVG's to be honest, they are so temperamental lol, looks like a great job, hope it does the trick ;-)

i'm kind of getting into them recently - i had a torch beam that was a gradient with an opacity mask and it just won't work as svg. so used a tiny png instead. everything else though i try to use svg.

Sweet, thanks again

Am I missing something?

 

On this page: http://www.elitechandelier.com/services.php

 

All I see is a picture of a lowered chandalier in a hotel lobby and the words 'Our Expert Services'. I had to scroll down to see anything useful and this was all squished over on the right leaving a big white area in the middle

 

 

 

And you can see the important info on the left is off screen and the number is spread over two lines.

 

I also took a look on a tablet (as many people now use these things) and you are using the dreaded hamburger. And I had to touch and hold for a long time before it actioned. and then it stopped working altogether.

 

You really need a header. If you land on any of the inner pages on a tablet there is nothing on screen except the main content. Not even the company name.

 

And I'd put their contact details and repeat the main nav links in the footer.

 

I tried to use the contact form and the page reloaded to tell me me something was awry. You can easily validate without page reloads. On a touch screen the it is very tardy. It takes a while for the form to responds to the inputs. And it doesn't check the email format, try this: http://php.net/manual/en/filter.examples.validation.php

All in all good work but there is some serious lacks in the UI design.

 

When I use the tab key to navigate I have to tab 20 times or more to get to some of the main menu items. Also there is no skip-to-content link. Assuming the target audience is not among the youngest you should really weight accessibility higher.

 

​Not a fan of the scrollbar on the menu that appears on laptop resolutions

 

​The phone number breaks into two lines and on IE/Edge there is a weird symbol after the phone number.

 

​In the "dont make me think" department the X in the navigation symbolizes the exact opposite of what it does, X means close not expand.

 

​There is no highlights in the menu of the current page, breadcrumbs or anything which indicates where I am on the page.

Edited March 14, 20179 yr by Nillervision

I've just been looking at the clients page.

 

I landed on the heathrow page and all I see is a huge image. Beneath the image are navigation arrows which normally means previous and next images. You have hijacked the expected behaviours - it took me a while to realise the arrows load a new client page. This sort of thing will annoy potential clients.

 

Another thing to consider is the modal. Because people are used to scrolling (especially on touch screens) the UX can be improved by putting full sized images on the screen with a caption to tell the visitor what they are looking at. This will means fewer clicks for people

 

There are no calls to action anywhere on the site.

 

 

 

The maito link is badly formatted (you have mailto twice)

 

The T&C link in the footer doesn't do anything.

 

The company registration (and VAT) need to be on the site to comply with regulations. and you don't appear to have a cookie consent thing.

 

The address on the privacy policy (from 2014!) is different to the one in the sidebar.

 

The logo is pixellated and I can't read the last line. And it should be linked to the homepage (standard functionality)

 

I've shown the homepage to 5 people and they all thought the main image was some stock photo of an old London scene. And they all wondered why there was a split off to one side. Two connected the image to the company but thought it meant they are an old fashioned company rather that one that has been around for a long time.

A mate has just pointed out that the logo on their facebook and G+ pages are different and there is no logo on the linkedin page.

 

However, he thought the 'about up page was interesting but would be better if the timeline was more compact - he said the big empty white blocks looked odd. The single column version looks a lot better.

 

However, if the client is happy then leave it alone.

 

PS: you need to sort out the page titles and other onsite features if you want to rank the site for lead generating keywords. Having 2 H1s on the page isn't helping either - especially as one of them is 'Get in Touch'.