new site design feedback request...

[Darcy]

I've gotten sick of my black-and-white so am updating my site design.

 

I fooled around for the last couple days and have some design elements I am testing out. If you would care to look and give me a thumbs up / thumbs down, and if there is anything you particularly like or don't like, please let me know. If you really don't like, don't be afraid to say so, I need to know if people will be happy looking at this in order to know if I should make the effort to go down this road further.

 

I don't think I will change any of the sword pages, since they are very clear and straight forward and the layout there is good for that. I am just looking for a way to brighten things up a bit while stretching my programming muscles a bit and to try to group together subjects on the front page a bit better.

 

http://www.nihonto.ca/test/

 

It is known to work on Firefox 2.0 and 3.0 betas, as well as IE 6 and IE 7 (though I have not banged out every little detail on those browsers, just did a quick check and looks 90% ok).

 

If you're running something else and want to let me know if it passes or fails, please do. No idea if this will work on Safari either.

[John A Stuart]

Hi Darcy, The layering over the really colourful background really jumps out at you. Very vibrant. The boxes with text being shaded mutes the background and makes it easier to read. Some site's background overwhelms the text and makes it hard to read. I love that suaka tsuba. John

[Brian]

I like it. Should point out there there is a fraction of a scroll being forced. I think it is caused by the Original Content Copyright at the bottom right. Easy to fix, just needs to move to the left a few pixels.

It is very attractive and professional looking.

I am a fan of understated and subdued (present site excluded :D ) and it takes me a while to get used to the colors. But the muting is nicely done. The brighter areas to the right and just above the headings do glare a bit for me when you go over a bright background image section. Takes a short while to examine them and see what effect is used. But you get used to it fast.

Since you did say be brutally honest, I would also like to see the whole page without those open areas (ie, the whole background muted/faded without the open areas) just to compare.

But this is just a personal thing, and I think you have the professional and serious look to it, and it certainly stands out from other websites.

Good to see you are still maintaining the website and the excellent info on it. Any further plans for it?

 

Regards,

Brian

[Darcy]

The heading sections just gradually get lighter when moving to the right. I put the second box with an alternate effect, just a dark bar for the heading. I'm not sure which one I prefer, I like the contrast from dark to light but am a bit worried about it being too noisy.

 

I'm not sure what the forced scroll comment means... is the horizontal scrollbar popping up? I have to do a few tricks to make the fixed elements work under IE, and from time to time some CSS related issues cause the horizontal dimensions of the page to be miscalculated. It's not from the copyright tag but is related to the other nonsense I am doing if this is what you're getting at. Which browser version Brian?

 

I'm going to be completing the series of books of course, and am considering letting people list swords on my site providing their own pictures. I am still getting a lot of traffic and people asking me about swords so might be a good thing for everyone. I just don't want to do paperwork import/export etc. anymore :-).

[Darcy]

I threw in some various combination of transparency effects now for evaluation...

[Brian]

I really like the "light titlebar effect"

Still transparent, but muted. Also like the gradient effect, but I would fade to a darker shade on the right to take away the brightness.

There is an open rectangle on the right hand side of the titles though? All except the gradient effect bar.

Yes, I get a horizontal scroll bar, but only a few mm of scroll. Not serious. I am using Netscape, but it does it for me in IE too. I am on 1024x768.

Plans for the site sound good to me..wish you luck.

 

Brian

[Carlo Giuseppe Tacchini]

Thumb up for me, Darcy.

 

What about the release date of your second book ?

[DSweet]

I like the over all look and effect of the shaded/transparent windows over the more colorful background. I also like your choice of picture for the background. A lot of your photography seems to be embedded in my brain.

Something still seems a bit off though. It might be the split window look. It is hard to say without seeing different styles for comparison. Also, the scrolling seems a bit rough. Not sure what can be done about that.

 

Just like Carlo, i too cannot wait for your next book.

 

-Donovan

 

*edit* using Firefox 2.0.0.12

[Darcy]

Every browser version number does things differently from its predecessor... so anything that looks funky, please let me know the version numbers. I've only tried it on IE7. 6 and earlier may do bizarre spacing stuff, they are notoriously bad for following standards.

 

About the books, I am still shooting for Soshu until August. After August I start editing in earnest, and can maybe put out the book around October/November. The process is sped up because I get to leverage a lot of the learning and design work that went into the first book. It takes a long, long, long time to hammer out the simple issue of color management in order to produce good results .

 

About the gradients, it always has to fade to full transparency because if it does not, when someone drags the window very wide, the only other option you have is to repeat the existing gradient, or else mirror it. Either is disconcerting. I'm going to I think use the approach I have there now, just the gradient on the introductory frame and matching frames from there on in. I could probably resolve space issues going forward by joining the two frames (header/body) instead of relying on the browser to align them. Uglier programming but maybe faster rendering too and won't have any potential alignment issues.

 

So Brian, if you can just take a screen shot of whatever renders funky and email to me or post it'll help me figure out... pls. include browser versions.

[Brian]

The scrolling isn't a big deal..it is just a very little. But I am sure you will want to determine what causes it. I thought I added the version, sorry. Netscape 7.2 and IE 7.

A bigger issue is the formatting difference between the 2 browsers when it comes to the gap between only the book and articles section. IE seems to misplace the book image and add a larger gap between sections allowing the pic to overlap.

Doncha hate cross browser compatibility?

 

Here is a pic of what I mean. I wonder if anyone else is seeing it this way?

 

Brian

 

[John A Stuart]

I get it the same, but is it not intentional because of the Bizen book image drops down. I get no overlapping images. John

[Darcy]

Any weird problems, if you could list the browser version like Brian did, this will help me try to support things. Netscape 7 gah 2003! I'm surprised it worked as well as it did.

 

That scrollbar thing is indeed the spacing issue I was mentioning before. Guess it is a bit wonky still on older stuff. I'll have to fiddle more, I'm trying to have things be less hackish to get the same features as I have on the other pages.

 

The book getting out of its frame bug, for some reason IE is not obeying a
, will look into that... thanks for the screenshots, it helps.

[Brian]

Yep....I hate IE, and when I installed the latest NS, my brand new core 2 duo P4 machine went back to acting like a P1 with no memory

So I went back to NS 7.2 and all is well. Has better emailing too. I'll do anything to avoid microsoft where possible

..But I digress. Well leave you to battle on with the issues, and I'm sure it will be great. Hurry up and find us some swords we can buy :D

 

Regards,

Brian

[John A Stuart]

Oh, I see now. Firefox 2.0.0.12 shows no gap, IE 7 does, exactly like Brian noted. John

[Guest reinhard]

Looks good (no overlapping) and works fine with Safari (powerpc, 1440/900 resolution). I still prefer the austere black and white look, but that's just me, I guess. What I don't really like are the flash-cookies, though it is not a big deal to remove them manually after every session. That's what I do anyway.

 

reinhard

[Darcy]

.... flash cookies, this would be the IM flash application I have on the page (not displayed) so people can send me instant messages...

 

.... I fixed the gaps in IE (stupid IE)

 

.... I fixed the horizontal scrolling in IE and FF (both browsers are trying to be 'helpful' in adding the scrollbar)

 

Fixed some other wonky stuff.

 

http://www.nihonto.ca/test/

 

If anything new comes up please post or email.

 

I am keeing the austere black for all of the "sword library" kinds of things and for articles, etc. This is just kind of a title page.

[Brian]

All works great for me now. No issues at all.

Brian

[b.hennick]

Hi Darcy:

I am using explorer version 6 and do have problems. The pictures show with no text over them. The a white space and then the text that is supposed to overlay the photos. On Mozilla it works fine.

[Gabriel L]

Hi Darcy,

 

To be honest I always thought your old B&W site had a lot of class by going for such an absolute design aesthetic. The site was very unified and the focus always ended up where it belonged: on the content (text and photos). Which isn't to say the layout and typography weren't handsome in an extremely understated way; I found the old site distinctive enough.

 

Of course, if you're bored you're bored, so it's up to you.

 

Anyway, on a technical level, I'm a little leery of the kind of transparency effects you have at the moment. Despite my notebook's fairly powerful specs there's a significantly slower feel to scrolling. As someone with a professional comp sci background and obvious web experience, you might already know of this, but have you ever seen the Complexspiral faux-transparency effect before? It's a very elegant solution that doesn't resort to PNGs. Something to consider perhaps. Of course, this probably wouldn't work with your scaling background (which is itself a nifty trick).

 

In any case these are just my honest impressions. Let me hasten to add that I don't think the new site looks bad.

[Darcy]

... IE6 might be fixed, what a pain to make these things work right. I should have transparency and the floating elements working. Transparency is working on my disk with my testing application but not over the web, I'm not sure I can trust the testing version of IE6 that I'm using though. I think it is blocking the DirectX transparency call.

 

http://www.nihonto.ca/test/

 

If anyone wants to check.

 

ComplexSpiral, thanks for the suggestion, I had seen that a long time ago and forgot about it. The author did a poor job of explaining what he was doing and got caught up in congratulating himself on his cleverness. It can be explained in one sentence: he is pre-rendering all of his effects in Photoshop then using four different clipping regions to expose them...

 

The limitations of course are:

 

- he has to stick his image in a corner

- it has to blend into a solid border color on the exposed sides

- falls down and goes boom on versions of IE less than 7, and apparently Opera too, but he has some hack I guess to do some of it in IE...

- Scaling is also probably out the window... real background images do not scale. I am cheating to make mine work by putting some IMG elements in place and then telling them to be 100% wide and then to be fixed, then setting a low z-index. So it's mixing foreground and background behaviors.

- multiple layers of transparency will not work.

 

I am using all five where his approach breaks down.

 

In terms of slow scrolling, testing side by side, any version of IE does transparency very fast relatively. FireFox seems to have a slow implementation of it. I will do what I can to speed things up as soon as I get the interface elements working. Right now I am using some small image files for the transparency and it will probably speed up if I increase the block size on them.