SITE REVIEW: Okinawa Market

  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Liquescence
  • Proficient
  • Proficient
  • User avatar
  • Posts: 353
  • Loc: Queens, NY

Post 3+ Months Ago

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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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:

Code: [ Select ]
div#tableheaders{float:left; width:100px;}
div#tabledata{float:right; width:500px;}
<div id="tableheaders">Phone<br />Email<br />FAX</div>
<div id="tabledata>098-938-1111<br />info@okinawamarket.com<br />098-938-1112</div>
  1. div#tableheaders{float:left; width:100px;}
  2. div#tabledata{float:right; width:500px;}
  3. <div id="tableheaders">Phone<br />Email<br />FAX</div>
  4. <div id="tabledata>098-938-1111<br />info@okinawamarket.com<br />098-938-1112</div>

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). :)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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:

Code: [ Select ]
  ---- | #####
  ----- | ######
   --- | ####
  1.   ---- | #####
  2.   ----- | ######
  3.    --- | ####


although the line is invisible. The technique is not transferable to this situation though. Don't I feel oh-so-silly now.....
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

LOL. It's alright. I'm some instances, tables are ok. This is one of them, obviously. :)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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...
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Thanks for wasting your time trying to improve my code! :) I owe you one!
  • BinaryTox1n
  • Beginner
  • Beginner
  • BinaryTox1n
  • Posts: 55
  • Loc: Deer Park, Texas

Post 3+ Months Ago

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.
  • Smokenjoe
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1573
  • Loc: Anchorage, AK

Post 3+ Months Ago

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!
:)
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

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.
  • Smokenjoe
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1573
  • Loc: Anchorage, AK

Post 3+ Months Ago

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!
:lol:
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

It's funny and ironic that it was actually easier to make the website database driven and get it up and running than it was to build the original english version from the japanese edition. Bad code = longer working hours. Databases make life beautiful. :)
  • sirussblack
  • Newbie
  • Newbie
  • sirussblack
  • Posts: 6

Post 3+ Months Ago

It's really nice and I like all the effects scattered around it. I'm not actually gonna buy anything (:P Fast food for me) but I would suggest one thing that would make it look better. A scroll bar. I just think it looks a bit plain without a colored scroll bar which is always a nice touch to just about any site. Other than that, you did a great job!
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Yeah, I agree, a red and white scrollbar would give it more of a uniform look. I'll see what I can do. I hadn't even thought about that as I usually never mess with scrollbars since only IE6 actually knows what to do with the css behind it. Do any other browsers support colored scrollbars?
  • madmonk
  • Mastermind
  • Mastermind
  • madmonk
  • Posts: 2115
  • Loc: australia

Post 3+ Months Ago

I like the site name and colors. Just nice and appropriate.
maybe a few touch up here n there. :-)
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

rtm223 wrote:
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:

Code: [ Select ]
  ---- | #####
  ----- | ######
   --- | ####
  1.   ---- | #####
  2.   ----- | ######
  3.    --- | ####


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


Hey rtm, I was just reading up on definition lists and that might be the way to go for this sort of thing. Check out: http://www.maxdesign.com.au/presentation/definition/
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

ooooooh, I've heard of them before but never really knew what they were :D

plus it still gives you the accessibility, because there is a definate differentiation in the html.....

Fantastico :)

Although I doubt they would be able to get the colours to extend the full length, on both columns, regardles of contents. It's worth a try tho.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Actually, it works quite well. You just have to float the dt to the right and give them all a width wider than the largest text in any dt. Looks just like a table.

You've got to mess with margins and whatnot to get things to line up correctly, but looks like a table to me and works better than tables in my cellphone!

My japanese cellphone has limited css support, but it really screws up anytime a table is thrown into the equation, so this might come into great use down the line!
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Check this out: http://www.gsv2.com/test

This has excellent applicable use in a photo gallery or products page. No matter the size of the monitor, dl's will fit to the width without screwing up layouts the way tables do. Pretty groovy.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

gsv2com wrote:
Check this out: http://www.gsv2.com/test

This has excellent applicable use in a photo gallery or products page. No matter the size of the monitor, dl's will fit to the width without screwing up layouts the way tables do. Pretty groovy.


Verry groovy. So groovy it gets two r's apparently :?

How do they come out on a cellphone, or text/aural browser? Does it just come up as the DT and DD things? To handily split them up into title and desciption when unstyled.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

It shows up BEAUTIFULLY in cellphone. Since mine has limited css support, it shows up the same way it'd look in an internet browser if you resized it to the width of one box. AWESOME!

verrry grrroovy! (triple r's)
  • jerryhamrick
  • Born
  • Born
  • jerryhamrick
  • Posts: 1

Post 3+ Months Ago

i cant get it to come up so that i can see it it takes me to some dating site or something

Post Information

  • Total Posts in this topic: 26 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 15 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.