SITE REVIEW: Okinawa Market

Here's another website I did last week. http://www.okinawamarket.com. If you click Japanese, you'll see what the previous version of English looked like. I revamped the English side by cleaning code and making the site database driven for easier product additions and whatnot.

Any comments on anything would be appreciated.

As a sidenote, some of you might not like the color red much. The reason I used it is for cultural reasons. It's a color most associated with the Ryukyu Kingdom (what Okinawa used to be) so I thought it a good idea to go with it.

New version: http://www.okinawamarket.com <- go to english

Not bad. Is it just me, or does the English version load faster than the Japanese version? It sure seemed a heck of a lot faster. I guess you optimized the images... Well... it's a nice site, but maybe the text from the left menu should be moved a little over to the left. I'm not sure how it is for everyone else, but on my screen, some of the links take two lines.

Yeah, I need to fix the list items and td to prevent this sort of thing from happening. Haven't thought up a full-proof way of doing this for lower resolutions. What are you on? 800x600? 1024x768 seems to do fine on all the computers I checked from unless the window is resized.

The difference between the japanese site and english site: optimized clean code. The english side is a whole lot faster.

the links could be sorted out, to start with, by setting both the left margin to 0px, and the left padding to whatever you need. IE makes the indent using margins, mozzilla does it with padding. don't know why but to get the exact same effect make sure you set both. I think the only fool-proof way to prevent the links from wrapping is to set the width of the menu section in em's and that way even with default fonts or resized fonts it will fit on a single line.

It's another neat, quick-loading site gsv. I wouldn't say that there is anything wrong with the colours, and if it means something to the audience then thats cool. The only thing I would say is I would change the underline on the links to some other hover effect. I'm also not keen on the faq table. The red and white seems to group all the titles together rather than grouping the titles with the description. Plus you could have done that with some floating and clearing gsv *slaps wrist* lol.

Yeah, I know, I know, but the sole reason behind the table tag is to display tabular data. I could have completely done away with tables in this instance, but vocal readers will have a much easier time with it due to the th and td tags than if I had set two separate entities with different floats.

For instance, what the heck is a vocal reader going to do with this:


In tabular format, it'd read properly. In div format it'd appear correctly visually but would read all out of wack through a vocal reader.

The only table I WOULD like to get rid of is the table controling the actual page layout. It's completely necessary and the only reason I have it there was because this was a project with a one day deadline.

If I could get it up and running in one day, the owner promised me a very expensive bottle of 25 year old kosu awamori (alcohol).

that wasn't the way I was thinking of doing it. Float spans left of each of the descriptions. I wouldn't use a whole bunch of line breaks because that would go totally whack with window resizing and line wrapping. I'll get a example of what I mean done during my lunch.

It's possibly no more efficient with code but would be a hell of a lot more flexible.

I think I see what you mean. Looking forward to seeing your example. One method I have in mind still causes trouble for vocal readers compared to tables, but I'm interested in seeing what you come up with.

ok it doesn't work because you cannot control the heights of the spans properly. I fiddled about for about half an hour and it works ok-ish in firefox, if you have less than seven lines of text - after that the text just dissapears for no good reason.

The only way I can see to make it work is to have each row in a paragraph or other block level element, and inside the paragraph you would have two spans (is this sounding anthing like table markup yet?).

The left hand span would then be floated left. The righthand span would have to have a margin => the width of the left span, incase the right span had more lines of text in it.

You would then lose the block red bit ( in IE at least, you can force mozilla to do it), and you have used far more coding than is neccesary. I therefore retract my previous wrist slapping.

What I was thinking of is a technique to put labels next to form elements so they align either side of a central line:



although the line is invisible. The technique is not transferable to this situation though. Don't I feel oh-so-silly now.....

LOL. It's alright. I'm some instances, tables are ok. This is one of them, obviously.

yup, I just didn't think that was quite tabulated enough to warrant a table. Turns out I was wrong.

I did get bloody close but by the end I was just chucking in random styles to force it to work. Well that was the biggest waste of 30 minutes I've spent since Saturday. oh well...

Thanks for wasting your time trying to improve my code! I owe you one!

Its really basic, and the red is very bright, that's probably what you wanted, but still.

Congrats on cleaning up the code though, now if you can only fix that navigation problem.

Nice site. You gave me a link to the old one quite a while ago, and I like the new one better. I think that the pictures and text are much better, and the layout is good. Overall, a briliant improvment over the old one, and a good site overall. I give it an A!

Thanks smokenjoe!

It is basic, but I like to keep e-commerce sites as basic as possible to make it as easy as possible for internet-noobies to be able to navigate and purchase as easily as possible.

Good man. Easy=good in my book. I like comlicated stuff, but only when its a problem I'm solving or a puzzle I put on myself. When I'm shopping........well, I'm shopping, not problem solving!