1001 Designs: New Site, Screen Test

[Jonathan Walton]

Hey Folks,

So, I've got a new site design for 1001 Designs (and a new effort of mine called "Hundred Flowers") and I'd like some assistance.  It used to be that web designers could test pages in two browsers, IE and NetNav, and be cool.  Not the case anymore, both fortunately (for uses) and unfortunately (for web designers).  There are so many browsers out there now that it's nearly impossible to anticipate everything people might use.

I'm an old school HTML programmer.  I do it by hand in NotePad.  I don't have a fancy program to make stuff universally compatible for me, so I try to keep things simple.  That said, I'm sure I'll need to tweak the site a bit.

So, in addition to thoughts on the design itself (which would be welcomed), if anyone's running a non-mainstream browser (Firefox, Mozilla, whatever), I'd appreciate it if you could take a look at the site and see if anything looks wrong or illegible.

Thanks muchly.

[ethan_greer]

I'm using Mozilla Firefox 0.8 (a kick-ass browser, incidentally) on Windows XP and can see the site without any problems. Looks good.

I like the Tragicomic, by the way. Alpacas are cool.

[Matt Machell]

Looks OK in IE 5.0 though 6 on PC. There's a slight glitch in the lineup of the images to the right on Mozilla Firebird and Opera 7 (they don't align with the base of the grey column's text as in IE), but this is a very minor thing and text size is browser dependent anyhow.

-Matt

[jrs]

Jonathan,

The website looks nice!  I used Safari 1.2.2 on Mac OS X to view it, and unless you have undisclosed apps running in the bordering white space, it works in that browser.   I like the whitespace, btw.  I do have a couple comments.  First, the text is tiny!  I needed to make it bigger to read it, which causes the "blossom" text to become misaligned from the "plum" text.  Second, I automatically think underlined text is a link.  I even did rollovers on the flowers to the left, another design element that makes me think of links.  Yeah, I've got that Pavlov's dog link-hunting behavior.  Nothing wrong with those elements on the page, but I wanted you to know that some viewers (or just me) may make assumptions about them.

Julie

[Jürgen Mayer]

Works in both Mozialla 1.5a & Safari 1.2.2 on MacOS X, but I have to agree with Julie, everything is too small.

In Safari, everythings is centered in the middle of the window, with the grey stripes reaching from top to bottom. In Mozilla, it only centers horizontally, vertically it clings to the top of the window and the grey stripes don't continue to the bottom of the window.

[ethan_greer]

Just thought I'd check to make sure - On my computer it looks the same in IE 6 as it does in Firefox 0.8.

[Jonathan Walton]

Thanks for all your help, folks.  Now I know what things to tweak.

Julie & Jurgen, I was worried a bit about the font size, but anything larger looks awkward with the rest of the design.  I don't have a great solution, but I'll definitely do something about it to make it more readable.  Probably have to be CSS based, though, which is a bit more of a pain.

Julie, the underlined words took the place of what would normally be BOLD, since bold characters don't show up in that small of a type face (the letters just get slightly bigger).  When I make the text bigger, I'll go back to bold, which should hopefully clear that confusion up.  Additionally, the flowers on the left WILL eventually be links, so you have good web intuition after all :)

Jurgen, I'm a little bit worried about how you're saying it shows up in Mozilla, centered, but at the top of the page.  They must not support <table height="100%"> tags.  Hmm, a bit distressing, but I don't know of a great way to fix it, unless anyone has any suggestions?

Matt, I think I may end up doing the central text area as an imbedded <iframe> that'll scroll on the side, which should keep bigger font sizes from stretching the box and knocking the other elements out of alignment.  Anybody know, off the top of their heads if Mozilla/Safari/Firefox support iframes?  I know older version of NetNav didn't, but I don't know what's common nowadays.

Ethan, thanks so much for taking the time to look at them in your browsers.  I'm glad you enjoyed the paca comics too :)

Thanks again, everyone, for your help.

[Jasper]

FYI, Opera also displays it as centered and at the top of the page.  While neither Mozilla or Opera are mainstream in their use, their renderings of pages are generally more reliable than those in IE or even Netscape -- so maybe it's an implementation issue?  I agree that the text is too small.  At least go with em lengths (instead of px) so the user can resize it (Or include a javascript switcher to change it for them.)

[Jürgen Mayer]

Julie & Jurgen, I was worried a bit about the font size, but anything larger looks awkward with the rest of the design.

For my taste, everything is too tiny, the text, the buttons, the 1001 logo. I'd like to supersize it. No, that's all, thanks ;)

[ethan_greer]

Hi Jonathan,
I specifically want to avoid insulting your intelligence, so disregard anything in this message if you're already knowledgeable about such things. I should also point out that I'm far from an expert HTML designer, and I have the graphical instincts of your average cinder block. So take all of this with a grain of salt.

First off, overall your design looks nice. I like the layout, the spartan colors, and the columns of text and links and stuff. It's attractive without distracting from the content.

Editorial comments:
If the flowers are to be links, avoid the "mystery meat" linking technique. In other words, don't force the user to mouseover (or worse, click) a cryptic picture in order to figure out what it links to - include a text label.

It's best to avoid using a table for your overall page layout, also.

Don't be afraid of CSS. There's a great resource on it to be found here. I use this reference all the time. (I use a text editor for my web pages also. Power, brother!)

I also second (third?) Jürgen's sentiment that everything's too small. I'm running 1024x768 on a 19" monitor and things seem unnecessarily compact. Lots of people use a higher resolution on a smaller monitor, and they might have problems with your site. In general, I think it's best for the HTML to (firmly) suggest layout and font family, and let the user decide on font sizes. Easiest way to see what your page will look like under various conditions is to load it up in a browser and then resize the window to extreme dimensions large and small.

I had assumed that "plum" and "blossom" appeared on different lines on purpose. If it changes when Julie adjusts her font size, maybe they're supposed to be on the same line? Looking at your source, I see you've got the flower picture and the word "plum" in one table, and then "blossom" in an adjacent table. That seems risky - you're leaving an awful lot up to the client's browser here. Again, best not to use tables as a layout tool.

Of course, you could leave everything as is, too. As I said, it does look nice.

[John Harper]

I agree with Ethan: CSS is your friend. Treat her well, and she'll never disappoint you.

I'm running 1600x1200 on my design machine and the layout is indeed very, very tiny. But I don't really have any trouble reading it and I'm used to the mico-text approach. The small size isn't much of a turnoff for me. For some people, though, very readable text is a deal-breaker. If this was a personal home page, it would be no big deal. But for some kind of biz site, I suggest bumping up the text size to accomodate as many viewers as possible.

I'm totally digging the design, though. The flower icons kick butt.

[MarktheAnimator]

Hello,
It works in mozilla.

Nice looking site.

As previously stated, I'd say the text is a bit small.... however, it also depends on who is reading it.  If your readers are older folks, I'd say you have to increase the font size.  Otherwise, it could work ok.

As to the design, well there are many ways to do things.  

Here is my favorite website:
http://www.xeofreestyle.com

Its fun to go there and just watch it go. :)

So throwing in some flash effects may give it some punch,.... but then again, I'm an animator. :)

You could get the program, SWISH which does very cool animation using Flash.  It's very easy to use and all you have to do is drop in the animation into your website.  You can get some cool text effects twith this program.  

I've done a few sites with animation stuff.  
You can check out my website, and here is another one:
http://www.bridwellsystems.com

There are also some very good places online to learn everything you would ever want to know.

Try this:
http://www.w3schools.com

Let us know when you update the site and we'll check it out.