New site - Curiosity Store - Opinions Appreciated

[learning_brain]

Hi all

It's good to be back as it's been a while since my last website launch.

This new one is at www.skinnerandhyde.co.uk and was done for a client for a ludicrously small fee.

It is designed to have an old, slightly grungy, dark, macabre feeling - almost like something you'd find in a back alley of London in the 1800's.

The store is fully operational, using PayPal as the payment service provider.

It also has a full back-end CMS system.

Any immediate thoughts??

Rich

 

[Darkmere]

Looks good. No Mystery meat, Contrast is good, kinda clunky but it could be the time of day. I also notice that every one seems to love the center formated pages. I like them as well.

 

[learning_brain]

Thanks Darkmere.

Yes the design is a bit clunky, but this was discussed at design stage and the clients wanted it to have that old newspaper feel.

At this stage, it was important to get navigation right and make it as robust as possible.

I'm not overly happy with the item listing css though - looks out of place somehow.

Rich

---- BTW - don't judge me based on the items for sale. Some of them are pretty weird and a required taste!!

 

[Darkmere]

Have you thought of using a different image format like maybe PNG or compressing the images a little. I am not sure on what the size of your images are but if they are compressed a little you may be able to squeze out a little on bandwidth

 

[learning_brain]

Yah -

The background is a simple repeating jpg, but to get the effect of the paper, I'm using 3 png's with alpha channel

One for top header, one for footer and on y-repeating main content strip.

I've tried interlacing as well but with little difference to the browser.

Top and bottom logos are also .pngs, so I suppose I could merge them..... *scratches head*.

Bandwidth fortunately isn't a problem (yet), but load-up speed is a pain.

Not really sure what I can do about this without a complete re-design.

 

[descalzo]

Page total is 2.4M. Most is your background. Way too much.

 

[J.P.Lore]

Well as already mentioned convert any jpgs to png and also it might be a good idea with it being CMS back-ended to enable cache or install a cache plugin, I know Joomla has cache by default.
This will help with the loading on the server side and essentially the load up speed on the client, visitor or potential customer side.
J.P.Lore

 

[essellar]

Man, it's too bad that overflow:ellipsis isn't supported everywhere -- the only real scuff mark I can see is the scroll thumbs in the item description boxes, and "hidden" would look like a mistake. If the long descriptions ended with "..." at the nearest word break, it would keep the nice size relationship and encourage user to click through. Oh, well -- maybe IE 10.

I might be tempted to make the product box background a lighter shade of the paper's body color rather than a stark white, but I know that it's hard to find a light shade of that colour that doesn't look insipid. And you can get the header background down from 661KB to under 30K if you palletize it and use a single-colour transparency. Try the RGB value 55,55,54 (or hex #373736) -- it looks like hell when the image stands alone, but it ain't half bad against the body background pattern, and it's still a good match for the repeating paper image.

 

[luvecraft24]

Sir from my limited knowledge of the back end stuff, Up front look very nice.Layout is linear too, easy to move around.

 

[learning_brain]

If the long descriptions ended with "..." at the nearest word break, it would keep the nice size relationship and encourage user to click through. Oh, well -- maybe IE 10.

Can do...even in IE6. You're absolutely right. I previously had it auto enlarge, but as you point out, the size relationship stunk. The cropped description with follow-through link is a nice idea.

I might be tempted to make the product box background a lighter shade of the paper's body color rather than a stark white, but I know that it's hard to find a light shade of that colour that doesn't look insipid.

I'll experiment now - maybe even a slight transparency and bring through some of the background...

And you can get the header background down from 661KB to under 30K if you palletize it and use a single-colour transparency. Try the RGB value 55,55,54 (or hex #373736) -- it looks like hell when the image stands alone, but it ain't half bad against the body background pattern, and it's still a good match for the repeating paper image.

OK - I'm excited about this idea.... but don't understand it! Referring to palletizing - I've never heard of this. Do you mean change it to hex values? I'm guessing that the use of #373736 fills in until the main image lads, but I'm also guessing I'm probably wrong. I'd love more instruction on this.

Sir from my limited knowledge of the back end stuff, Up front look very nice.Layout is linear too, easy to move around.

Thank you kind sir!


Back to work again!

Rich

 

[cybrax]

Designing a website is not just about pretty pictures and layout or getting the backend code to work, often there there is a whole heap of legal requirements.

Every UK company should list on its website:

its name;

its company registration number;

its place of registration; and

its registered office address.

Sole traders and partnerships who carry on a business in the UK under a business name (very roughly, not the names of the trader/partners) must also make certain website disclosures:

in the case of a sole trader, the individual’s name;

in the case of a partnership, the name of each member of the partnership;

in either case, in relation to each person named, an address in the UK at which service of any document relating in any way to the business will be effective.

see Companies Act 2006 and Business Names Act 1985

Put simply if you are asking people for money then one cannot hide behind a PO box and a cell-phone. PayPal will of course have the traders bank account details but for a customer to get these from them is no simple task and of course the address on record may be incorrect.

Thus the client /owners should expect customer confidence in the ability to deliver the items to be low and the site perform accordingly. This is where testamonials from satisfied recipients (with contact details if posibble) as is the case with ebay may offset this problem.

The Consumer Protection (Distance Selling) Regulations 2000 also apply to your business.

Key features of the regulations:

the consumer must be given clear information about the goods or services offered
after making a purchase the consumer must be sent confirmation
consumer has a cooling-off period of 7 working days
the right to cancel the order

The right to cancel is fundamental and return goods that do not meet expectations for a refund, however this is balanced in the Regulations by the consumer's responsibility to take care of the goods before returning them. Some customers even go so far as to viedo the unboxing process to ensure a full refund.

If you think all that's a headache, I've not mentioned the Data Protection Act, Disability Discrimination Act or the EU Anti Spam legislation yet, thankfully the new cookie regs are on hold till next year.

 

[essellar]

The neat thing about overflow: ellipsis is that it's completely automatic -- you don't have to engage in string trimming based on a guess about how much room the text is going to take up. The problem with doing it server-side is that (unless you're using a monospaced font -- ughh) you have to use the worst-case average font metrics (assume that there isn't a disproportionate number of skinny letters like i and l in the text) and the worst-case font (verdana, say, versus arial/helvetica) that your CSS allows, so you won't get a consistent neat trimming across browsers and browser settings. It still works[/w], but that meta-feedback indicator that the text was cut of because it didn't fit might not always be there. As long as there's a good "hook", it'll still work, but the sales copy needs to be better-written than with the CSS3 solution.

As for the graphics, what I'm talking about is reducing the colour depth to 256 colours with one transparent colour. There was a time when that would mark the death of the image, but most image editors (since around 2001) now include a pallette optimizer somewhere in their convoluted menu/dialog jungle. The colours in the antique paper texture all lie in a relatively small cluster of values, and because it is highly textures (rather than a set of smooth transitions), a very slight colour "miss" in the odd pixel here and there won't be visible to the user. If you put a layer below the existing image and fill it with the background value* I suggested, then merge the layers (flatten the image) before reducing the colour set, the image file sizes will drop precipitously. The result will have a slight outline, but it looks like an edge shadow rather than like shoddy work (or a mistake).

*That value is taken from the background image; it's one of the darker middle values.

 

[learning_brain]

@cybrax - thank you for this.

As a marketeer, I understand data protection and anti-spam, but the other were relatively new to me - not having set up my own business before online.

I have informed the client and await their instruction.

@essellar I've used substr() to truncate the string by character count - a little crude but effective. I'm trying to find a script that truncates to the least nearest word, but as you say, it really depends on the character count in each word!!

I also suggested (and showed) the client a faded-out background for the item list background (currently white) but they disagree and say they prefer it white - in stark contrast which stands out. The customer is always right .

As for the header/content/footer background, I've significantly reduced the file size and load time is much better. Logos have been merged with background. Currently using 256 dithered gifs with transparency. As gifs don't have good anti-aliasing, the edges look a little clunky - but can I get away with it????

Finally managed to get the stupid Paypal IPN listener sorted as well (which was a nightmare), although this probably means nothing to most people here lol.

Rich

 

[Darkmere]

I see you are still using GIF .... GIF is nasty. I took your header Image and shaved it to below 200K by just saving it as a PNG you may also get it smaller with compression

 

[learning_brain]

I must be being stupid here.

I thought png's were uncompressed??

I can shave a ton off if I saved as jpg, but then lose the transparency. Am I missing something?

Apart from a few tweaks, the client is happy so... I guess I am!!

SEO is going to prove tricky but I've done what I can for the moment. Give it a few months yet

Rich

 

[Darkmere]

PNG does have a form of compression you just cannot adjust it and a lot better than GIF. Like I said taking your gif and saving it as PNG made it smaller.

 

[essellar]

PNG actually describes two different file formats. One (the one you were thinking of) is a 24-bit-plus-alpha losslessly-compressed full-colour image. The other is a palletted (8 bits per pixel or fewer) image with one transparent colour option, similar to GIF but without the animation option. Both were created as open file formats to get around the Unisys patent on LZW compression, which was used for GIF and very frequently for TIFF, the two file types that PNG effectively replaces.

 

[learning_brain]

Thanks to both of you for clearing that up.

Regrettably, I don't have this option in my version of PS, so I'll have a look at GIMP options.

As for the text shortening, I've re-written the code so it truncates to the nearest word within a given number of characters... much slicker.

My last challenge has been writing a dynamic sitemap (http://www.skinnerandhyde.co.uk/sitemap.php) which works a treat for each item listing coming from the CMS - hopefully better for the google engine.

Shame I don't have time left in the budget for URL re-writing....

Thanks for all the help and opinions.

Rich

 

[Darkmere]

Regrettably, I don't have this option in my version of PS, so I'll have a look at GIMP options.

Can I ask what version of PS are you using? ... I use PS all the time for all my projects and I have those Options.

 

[krunalp4199391]

Good website....................

But graphic are average........................

bye the way site is coooooooooooooooooooooooool..............


):)0;0;0;00):