Topic: 256b.com v3.beta (Page 1 of 1)

People hi'

I'm "administrating" an archive of demos made in 256bytes called 256b.com. Actually, I'm fed up with current skin and the people easily get lost in it. So I came to the following beta version. I've focused on the graphical aspect, so don't look too close at the markup I rather like the color scheme and general layout.

The most frequent updates are in the comments, oneliner and latest added demos, that's why I've put the news low in the page. But I wonder if my tired eyes don't miss something.

Any suggestions, comments, critiques are welcome. Thanks in advance.

Mathieu "POÏ" HENRI

I like your version better than the previous.

The clickable area of the links along the top is too big. For some reason my cursor turns into a hand when it's even 30 or 40 pixels below the links. That's a little confusing. Maybe that'll change when you actually start using real hyperlinks.

The other thing that threw me off was the borders on the "Post Oneline" form. The text areas don't look like text areas, because their borders pop *out*. It took me a while to figure out why it let me type in them. I suggest you swap the upper left and lower right borders on the text inputs (but not on the button), so that they appear to pop *inwards* rather than outwards.

I like the colors, and everything is spaced apart and layed out well. Nice job. Too bad the markup is sub-par

I agree with slime about the post onlin buttons......they don't give a clue what action is needed. I tried to click on them to see if there is a hidden text area which will show up. So i thought it was not working. When i start typing on them i saw something happening. Although there is written form field on the textarea so is on the button.
Besides the post online section doesn't realy fit in with the rest of the style.

The layout seems ok and is better than the current version but it's a bit dark. At least it's not that damn white background so much people like. And i am able to look ad it in a dark room after a hard day work.
You could brighten the sides a bit and make the the text area look like the heading graphic and you're halfway home.

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Thank you pals.
I'm also the author of the previous verions which I did ( scripts & "design" ) in a big rush from only the Ftp account. The former administatred could no longer handle the site so he gave me access to its guts while it was bloated like a 3 legged goat I enjoyed the site and its theme so I couldn't let it fall apart.

Slime: The navigation list have a padding-bottom to align its baseline with the middle of the logo. I'll try to figure a cleaner way for that. You're right, usually form fields have inset borders, so I conformed to the de facto standard and changed the submit in a CSS rollover button stylized like the logo.

Rinswind 2th: Is the 'Post oneline' area any better ? The sides are brighter and emphasize the content gutter. Thank you for pointing that. I went for a dark color scheme 'coz I'm a nightly coder and the bright background hurts my eyes.


/!\ I mainly work with FireBird and make use of the :hover and :focus pseudo classes thus some effects may not work in outdated browsers. Whatever, suggestions, comments and critiques are still welcome.
Cheers,

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 11-04-2003).]

I didn't see the text fields prior to the changes, but I can tell you that I had no problem figuring out that they were text fields, even before I read this thread. I guess borders do make a significant difference.

Other than that, I don't really have too much to add to the comments made above. The design is nice and clean and easy to follow. I like it.

Just wondering, though: would it be too much trouble to make the text liquid? It's just that sometimes I like looking at bigger text, especially when I'm tired, and it aggravates me when I can't change the text size (that's something about IE you have to keep in mind).


___________________________
Suho: www.liminality.org

Although the accuracy of the comments on the design/usability aspect, the updates were so minor codewisely that I didn't bother to backup the first beta. Since that page seems globally ok, I'll start to work on another one ( certainly a page presenting a demo with the visitors comments + the list of the linked demos ). The markup will be cleaned and validated ( if possible in a correct time lapse ) later.

Suho1004: Sorry, I'm so used to FireBird's Ctrl+Plus and Ctrl+Minus that I forgot that IE's built in text size feature doesn't work with the font sizes set in pixels. It's fixed now. In fact, with the previous border settings the text inputs looked like some buttons.

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 11-04-2003).]

Yes, me likes. Much better.

quote:

---

Sorry, I'm so used to FireBird's Ctrl+Plus and Ctrl+Minus that I forgot that IE's built in text size feature doesn't work with the font sizes set in pixels.

---

Rub it in, why doncha? I know, I know, I really am going to switch one of these days...


___________________________
Suho: www.liminality.org

I've re-worked on this site. The stylesheet is separated, there's a favIcon ( 24bits PNG with alpha, thanks to correct PNG support ) and I've added some real fake links ( <a rel="nofollow" href="#">...</a> ). The markup is not yet optimal, there's still that #@! table and I wish to make something better for the navigation list.

Anyway the main update is that when you *click on the logo* you switch between the home and the page of a demo. The url of this puppy is still the same.

Cheers,

Mathieu "POÏ" HENRI

Poi.

Yess this looks ok.... and as i work alot at night too i actually liked the dark bakground.
The text areas do fit in better now.
I'd say go for it switch the site and make it the new site...

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Nice work poi, much better than the original!

Do you really need to use italic for the menu and the '5 latest things'? I think it would look better if you just went for simple bold text there instead.

The Post Oneline form looks much better now, but I'm not sure about the submit button. It looks like it is to small and missaligned the way you have it now. If you want to keep the same type of button you should make the orange part almost as high as the input areas, so the reflection starts bellow the input areas. But I think it would look better if you used a button styled similair as the input areas, but with the borders switched so it pops out of the page. The thing you've done with having the text appear on hover is nice, but from a usability view it would seem better if the user knew what the button did the whole time. One thing you could to while keeping a nice effect there was only have the orange button there to begin with (with text), but when the user hovers over the button you could add the reflection.

Code wise you should drop the table, but you allready know that. What do you mean with "wish to make something better for the navigation list"? From what I see the navigation is coded correctly with <li>'s and CSS. Only thing I could see that might improve that part would result in removing the table and going for a CSS based layout.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Rinswind 2th: Thanks. I still have some pages to do with the new theme plus cleaning up and validating the markup until I can put it online.

Veneficuz: Thanks too. Your remark vanished my own doubts about the use of italic. I tried to find a way to differentiate at first sight the links from the simple texts written in orange ( like the nicknames in the Oneliner & Visitors comments, or the titles of the Latest news ). But it makes the texts harder to read and break the consistency of style. So I'll get rid of the italic.

Regarding the submit, I wish to keep the orange CSS rollover to remind the logo. To make it more evident that it's a submit button, the button should always have the text "SUBMIT" and the orange thingy may slide few pixels above the floor on hover. For the alignement, a vertical-align=top; looks a little better.

That's the graphical aspect of the navigation list that disturbs me. It's plain. I think, I'll simply make the texts with some images written with the font used for the logo, and keep the hover effect.

Since I have no deadline for that re-design, I want to make it correctly, and if possible to have a valid XHTML+CSS markup. At the moment, I'm fighting a little to reproduce the 3 columns layout and especially the vertical border between them.

Mathieu "POÏ" HENRI