OK, I've dished out a lot in this forum, and it's time for me to start taking some. Yes, I have finally gotten off my butt and begun my personal site, inspired mainly by people here. It's not nearly finished yet, but the basic structure and design is ready for review.
Before we get to the link, a few words about what the site is and what I'm looking for in terms of reviews. It is basically an online journal, a place for me to rant and rave about whatever I want. So keep in mind that it is a personal site, and I have no business aspirations whatsoever. I haven't actually begun the journal (the main page is just greeking), and there isn't much in the way of content yet, but there should be enough in the way of filler to give you an idea of what the site will look like with the content in place.
At this stage I would appreciate comments on technical aspects of the site, what doesn't work in which browser and platform, etc. I would also like to hear about usability issues, things that confused you or pissed you off. The design is pretty much the way I want it, so any comments on design may be ignored. Don't let that stop you from saying what's on your mind, though.
Finally, a few caveats: 1) This site is currently on my ancient account at Tripod, which means you're going to get mad pop-ups. I apologize for this--I will be looking into getting some real hosting when I get back from Thailand in January. 2) Thanks to the JavaScript Tripod inserts into my pages, your choice of style sheets will not be remembered from page to page (or visit to visit). Since this site won't be on Tripod for long, I'm not going to bother fixing it.
There are a few more specific issues I would like to discuss...
1) I ran my pages through the XHTML validator, and the only error I get is that "alt" is not an attribute. If I take it out, though, it gives me an error because "alt" is missing. I've given up trying to figure out what the heck is going on. Anyone have any ideas?
2) Is there a way to deactivate hover in CSS once it's been activated? More specifically, I have hover specified for my links, but this does weird things on my thumbnail page in Mozilla and Opera. I ended up just setting the hover for the thumbnail links to the background color, making the hover invisible, but I was wondering if there was a way to remove the hover all together.
3) I only have one set of photos up right now, mostly for demonstration. Seeing how much of a hassle it is to make a separate page for each photo, I'm wondering if PHP might not be a better way to go about things. Unfortunately, I don't know anything about PHP. I guess I'll have to work on that.
4) If you read the About page, you'll see that I am currently agonizing over the posting interval (weekly, daily, etc.). If anyone wants to add their thoughts on this, I would appreciate it.
5) I also can't figure out what's up with the style switching. The content area changes color first, and then the rest of the page follows, with the background image coming in later. It's really weird, and I've never seen this problem on other sites. I'm wondering if it's Tripod again...
Well, I guess that's it. I'm sure I screwed something up somewhere, so let me have it with both barrels.
(Oh, I also didn't add encoding to the individual picture pages, since I don't think individual pages is going to be my final solution.)
[This message has been edited by Suho1004 (edited 12-08-2002).]
From: A graveyard of dreams Insane since: Mar 2001
posted 12-07-2002 20:08
Not much to say about it, except good work! Really liked your idea with the dotted background behind the text
But I think you should place the menu in a place where it is visible from the beginning. I had some problems realising there was a menu there at once since it was at the bottom of the page and not visible until I had read everything/scrolled down. You could keep the same style etc, but just place it at the very top...
I'm not very fond of the font you are using, but that is just a matter of taste. I think that a couple of more pixels indenting would look nice as well. But as with the font thingy, that is a matter of personal taste.
1 - I don't know about the alt-problem. I've always used the alt attribute and I've never had that problem before...
2 - I don't think there is any way to do it using CSS, but you could check which browser it is with JavaScript (or php) and then an appropriate style sheet.
3 - The image 'problem' seems like a great excuse (as if you needed one ) to learn php, so what are you waiting for?!
4 - I would go with the second option. Post when you feel like you have something to say. I'm pretty sure that is the way I will go when I finally get my homepage going... But the important thing is to go with the option that seems best to you. You can always change to something else later on if you realise that it can work better another way.
5 - The style switching works without problems for me. Everything changes at once
Edit: Damn fingers. They keep pressing the wrong buttons no matter what I do...
_________________________ "I don't know half of you as well as I should like; and I like less than half of you half as well as you deserve" - Bilbo Baggins (S.R 1401)
[This message has been edited by Veneficuz (edited 12-07-2002).]
Good point about the menu. I think that did occur to me at one point, but then I forgot about it. My only concern is that it will look funny up there. I will play around with it, though, and see what happens. I suppose having the menu in a readily visible area is important. I may even have two menus--one at the top and one at the bottom--since some of the pages might get a bit long.
You don't like Georgia? I wanted to use a serif font for the feel, and Georgia is the safest thing out there. Unless you don't have Georgia on your system, in which case you will see, um, let me check.... Hmmm... apparently the only thing I specified after Georgia was default serif, which may be Times New Roman (which definitely sucks). I'm not really familiar with too many other serif fonts that look nice on the screen. This is something I'll have to look into.
If you have "Footlight MT light" installed on your system, that's what you'll see for the page headings (it's the same font used in the background graphic).
Just checking here, but when you say you are not fond of the font, does that mean you just don't like it, or is it actually hard to read. Because I don't want a hard to read font on my page. I suppose I could experiment with a sans-serif (Verdana) for the body text and leave the headings in Georgia.
1) Hmm... yeah, I was kind of surprised myself. I have no idea what could be doing this. The funny thing is that it only pops up an error for the first instance of alt...
2) I'd rather stay away from browser sniffing it at all possible. The hack I used isn't all that bad, I don't think, I was just wondering if there was an official way to do it. Maybe I'll ask about that in the CSS forum.
3) Point taken. I'd better get to work.
4) Appreciate your thoughts on this. That's the way I'm leaning at the moment, but we'll have to see how it goes. Good point about being able to change methods later--I have to remember that nothing is set in stone.
5) Glad to hear the style switching is smooth. I guess it was just me... weird.
Any other comments from the peanut gallery? No royal treatment?
Black and Blue is also a tried an true combination, and looks good. The red concerns me a little. It doesn't look....bad...but it seems a little out of place to me. I think it might work better simply toned a little more.
The overall setup/layout works fine.
The flyout is great - love to see that incorporated into a page.
The graphic is the biggest qualm I have. At the moment, it seems like something you might see on a Jehovah's Witness pamphlet
The name and the caption in and of themselves is good, but the setup with the image and the elipse just kills it. The image would be a great place to incorporate some extra colors, and would benefit form a little more time invested in concept. It's just a little....cliche I guess.
So, to sum up my thoughts -
1) tone down the red a little more...perhaps lighten it a little as well
2) replace the graphic with one that has color, and a little bit more....depth.
Functionality and technical aspects all check out in my book. Not sure about the "alt" issue - a little confused. I would recommend going for the XHTM 1.0 strict while you're at it though...there's nothing you're doing that couldn't be made to check out xhtml, and it'd be a step towards keeping it forward compatible =)
Thanks for the comments, DL. Let me just make sure I've got everything straight...
When you say "tone down" the red, you mean make it stand out less? Like maybe toning down the saturation? Also, not sure if you checked out the other color scheme (white base), but I wonder how the red looks there. I imagine that if I lightened up the red on the black background, I would probably darken it on the white background--in other words, be moving closer to the body text color. OK, I think I got that.
The graphic... yeah, it's lame. I did it a while back when I was first tinkering with the idea for the site. I'm sure you know by now that graphics are just not my strong point, and I guess it shows here. So, I need color and depth (as in creativity and originality, right?). I'll be honest with you, I've been staring at that stupid image so long nothing else really comes to mind. I suppose I could try taking it out (maybe leaving in a graphic with just the text) and see what hits me, but I don't know. Not only should it be colorful and original, but I need one for each color scheme. *sigh* That kind of bums me out, actually. Oh well, back to the drawing board.
As for XHTML strict, that's what I'm shooting for--the only thing that doesn't fly is "alt"
For what it's worth, I did play around with the menus a bit, and I tried one with the menu at the top and one with a menu at both the top and bottom. Note that these are only test pages, and I only coded up style sheets for the black-and-blue scheme. These are just to give an idea of what the menus look like in different locations.
OK, let me tighten my laces and then I'll climb back into the ring... who's next?
[Edit: Hmm... after seeing the menu at the top like that, I'm wondering if it might not be a bad idea to take out the menu item for the current page, seeing as the title is right above it. Thoughts on that?]
[This message has been edited by Suho1004 (edited 12-08-2002).]
From: A graveyard of dreams Insane since: Mar 2001
posted 12-08-2002 13:50
And Veneficuz returns for the second round
The font was/is readable, it was just that I didn't like the look of it... But it turned out that the computers I was testing the site at didn't have the right fonts installed, so when I got home and viewed it here it looked much better
I like how it looks with the menu at the top. It might also be nice to have the menu at the bottom if the pages get very long... I don't think you should remove the current menu item from the menu. As it is now the user can't click on it (which is good), but it still is there to give the menu a more coherent feel.
_________________________ "I don't know half of you as well as I should like; and I like less than half of you half as well as you deserve" - Bilbo Baggins (S.R 1401)
I agree with DL on the red issue, however, that's a matter of personal taste so I digress.
Just one thing that bugs me is that there is no links bar at the top of your page. I have to scroll to the bottom to find the links. If this was a site I came to over and over that would really bother me.
V: I think I like the menu on both ends, to be honest. I think it give the page a balanced feel. It might be a bit much for short pages (maybe like the image pages), in which case I would probably have it just at the top.
krets: In my last post up there I put up a sample with the menu at the top--is that more like what you were thinking about? It never occurred to me when I was doing the page, but after V's first comment at realized that it was a major design flaw.
As for the red, yes, it is a matter of personal taste. If one person mentions something, I consider it. If another person mentions it, then I take it seriously. If I get three or more people mentioning it, it gets changed. So right now I'm seriously considering it.
Which brings me to my next point. DL mentioned up there that the logo sucks (well, maybe not in so many words), and I think I'm so sick of the thing at this point that I am inclined to agree with him. No one else has mentioned it so far, so I thought I'd toss it out there more specifically: does the logo suck, or is it OK? Brutal honesty will be appreciated.
Yes, your interpretations of my thoughts is correct.
I did look at the reverse color scheme, and did like that as well. However, if a less saturated red wouldn't work as well reversed...you could easily alter the 'reverse' color wihtout anyone really noticing that it wasn't actually the opposite color.
I also prefer the menu at top and bottom, more becuase of the visual effect than the actual need for navigation. And I think it's fine having the text for the current section at the top even though the title is there.
OK, it appears that the logo is a source of various and sundry opinions. On the one hand, it needs more color and creativity. On the other hand, it's too small, is in the wrong location and needs better typography. At this point the only thing I'm sure of is that everyone has a slightly different take on life. I think I may throw the logo into the PS forum and see what happens. No one has said that they actually liked the logo yet, which probably isn't a good sign.
krets: Your assessment kind of took me by surprise, I must admit. It never occurred to me that the logo might be too small (the original image was even smaller, and I made it a bit bigger). It also never occurred to me to have it anywhere but smack dab in the middle of the page. After reading that, though, I played around with the position a bit: I don't think I like it at the bottom, since all that white space at the top looks a bit odd, but having it at the top is not as bad (the white space at the bottom looks more natural). At the top, though, it just doesn't seem to line up with the page headers. I don't know... it's something I'll definitely keep in mind.
When you say "better typography," do you mean a different font or better work on the font I have? I kind of like the font, and I'm not really sure how I could improve what's there (typography is another one of my weak areas... I have a lot of weak areas).
Sorry I forgot about this site last night shou. *blush* My bad.
Ooh Nice, very nice.
Hmm. The logo does need some attention. It's position first and foremost could be better. Top left would add a slightly better flow to the layout overall IMHO. Typography, in terms of character spacing and positioning could also do with some work. The font is fine but the text is boxing in an image with such nice soft edges. Maybe re-working it so the text forms a har line at the top and the whole logo kind of falls off into the background as it runs down the page. Having that anchored to the top left would also work well I think.
Paragraph text could to with some tewaking too. The line height it a tad too height, espically if your only using indents to define different paragraphs. Maybe just adding some more white space between them would help. I'd also like to see a little more white space on the right hand margin with a line height that large. I like my margins to at least be 3x the line height, but that's just me.
Colour... I must admit, I like the flip side better. Black purple and red wouldn't have been my first choice for a journal site but they kind of work. Still, I think a little tweaking here could go a long way. It's all ballenced at the moment; black background, white text, warm link colour, cool accent colour. Try and unballence it a little. The flip side works well, nice and warm.
Suggestions. Add some font controls; ala style would be nice or I can help you with a JS solution if you want. You know mah Q number. Oh and more colour schemes! You've got a simple CSS page with only 1 image, go rank on it!
Navagation. Dude, menu at the top/bottom only. Tisk tisk... Maybe you could slot that in on the logo side. Or, if your sold on the menu being fixed to the content area I'd have to push for the top menu, maybe followed up by a smaller size '
OK, yet another take on the logo (but a confirmation of the positioning issue, at least). Let me just clarify some terminology: when you say "text forming a hairline(?) at the top," what exactly does that mean? Do you mean put both the title and caption at the top, and then let the graphic fade out toward the bottom? And is that "hairline" or something else? I'm trying to think of what it could be...
I think you have some good points on line-height, paragraphs, etc. I will take those into consideration and play around with things a bit.
As for colors, the only part I'm thinking about changing right now is the link color. I like the background, body and accent colors, so I think I'll stick with those.
Font controls: You know, this is a bit of a pet peeve of mine. People are so used to font sizes being fixed that they never bother to check to see if they aren't. All of my fonts are relative, so you should be able to use your browser to change the sizes. (btw, Drac, this is nothing against you personally, just one of my pet peeves :-) As for the color schemes, I think I'll wait until I've get everything else down before I go diving back into that pool of sharks.
Navigation: if you'll check my first post again, you'll see some other links there...
Oops, I meant "hardline", not "hairline". And yes, I was implying that having the text form a line across the top. Then maybe soften it out as it runs further down the page; again, just a suggestion. I'm sure there are a lot of different ways to improve it but the "logo" area forms a good 33% of your site's visuals and it dominates the overall look and feel of the site.
So I'm think nailing that bit will make a big difference overall.
Edit: Bottom left might also work well for the logo too. It all depends on how you want it to feel. Bottom left would feel a little bit more like a book and a little more 'epic'; top left would be more conservative and comfy.
[This message has been edited by Dracusis (edited 12-09-2002).]
Hmm, interesting ideas, especially on the differences between top and bottom positioning. Thanks!
I've gotten some new ideas for the graphic after talking with DL and Michael... I'm not sure when I'll get the chance to implement them, but I definitely do want to nail the logo part.
I incorporated the top/bottom menu into the regular style sheet, so that's going to be the standard now. The menu will only work on the journal page, though, since I haven't gotten around to changing the html on the other pages yet (they still refer to the now non-existent div id).
I messed around with the text itself, specifically changing the line spacing from 180% to 200%, changing the right margin from 1em to 3em, chaning the indent from 1em to 2em, and changing the width of the content div from 60% to 55% (to offset the change in the right margin). These changes I like, and thanks to Dracusis for getting me thinking on them.
The one change (text-wise) I made that I'm not sure of (and I've been debating since the beginning) is justifying the text. Originally it was aligned left, but I justified it. I think it looks a lot neater, and it allows me to put the flyout (pullquote, whatever) up against the right margin and have everything line up. The downside, of course, is awkward word spacing. I'm debating whether the neatness is worth the word spacing, which can get to be a bit hairy next to the flyout, especially at lower resolutions. Any thoughts on this would be appreciated.
The other major change I made is the red, but I'm not sure if I'm happy with it. I only changed the red on the black background, as I don't think the original reds worked too badly against the white. Anyway, I dropped the saturation on the regular and visited colors, which translates into upping the green and blue values one step (from #f33 to #f66, and #c00 to #c33). The regular link color on black now looks a bit more pink than red, and I'm not sure what I think about it yet. DL and krets, you guys originally commented on the red--any thoughts on this shade?
Oh, yeah, after Drac's latest comments on image positioning, I decided that I do like the bottom-left positioning after all (props to krets for seeing right off the bat what I couldn't). I know it's still the same crappy image with the same crappy typography, but I have't gotten around to whipping up a better image. In fact, I have a really nifty idea for a new image, but it probably won't get done until I get back from Thailand (January)--it's going to require some photography work (cheers, krets) and a prop (cheers, DL), and I want to get my friend who is into photography to help me out with it. So, in the meantime, just pretend that the image is really profound and fantastic and all that.
[Edit: OK, I just got so sick of that image that I replaced with a text graphic... this is just until I can get something less embarassing up.]
[This message has been edited by Suho1004 (edited 12-12-2002).]
that's a lot of thread for a page o' text! I like the flip side and it's nice, simple and clean (the purple and pink links on the black is not for me). Throw back to '95/'96, with style.
i should really read this thread now, see what all the yada's about =)
Heh... I guess the majority of the text here is me... spelling out what I did, responding to people's comments, getting clarification, etc.
I figured some people would like the original and some people would like the flip side, so I guess I'm cool with people liking one and not the other. But the pink does kind of bother me. I know you weren't around for the original reds, Jason, but what do you think I can do to save the links on the black. What about abandoning red and going in a different direction? I'd like to stick with red if possible, but it has occurred to me that perhaps the red is just not going to work with the blue/purple (some people call it blue, some people call it purple... I just call it #6cc ;-)).
I realize that we're really getting down to window dressing here, but I won't be able to make any major changes until I get back in January, so I figured I'd fine tune a little more...
on black I like very primary colors, blue red cyan yellow white (zeros and effs baby) but that's a personal thing I reckon. The pink and purples is too *hot* pinkish/prplish, like pistachios you know?
looks like you're enjoying yourself, that's the important part here. Maybe have the bug badly even. =) have fun
A visit to the main page now will reveal four styles to choose from. The last two are the same as the first two, except I tried out some different link colors. They might be a little too "out there," but I'm not sure yet. Anyway, they are there for comparison.
Jason: judging by what you said above, you're probably not going to like the new link colors. And I probably screwed up the flip side for you, too. Just experimenting...
I looked at your stylesheet and you appear to give quite a lot of attention to detail so I should mention one that'll bug you til you implement it if you're going to use a background color on hover, mebbe you should give the links a 2px padding at left and right? Now whenever you se your links hovered you're cursed to see the edges touching, ~shiver~ =)
From: A graveyard of dreams Insane since: Mar 2001
posted 12-12-2002 20:51
It is looking good
I like the original link color better. The new one looks nice as well, but it just doesn't seem to fit as good with the rest of the colors.
The text looks better and is easier to read with the extra indent and line height. I don't think it is a good idea to use justify the text... I do see the point of justifying it to fit in the flyout better, but I think it will look better in the end if it is left aligned. Only the top and bottom border of the flyout reaches the far right edge as it is so I don't think it will that much of a difference either way. The user will automaticly 'draw' a line where the text ends and trace it down to the flyout creating almost the same effect as if the text was justified. If it had been for print you could have rearranged the text to fit better when it is justified so that the spaces didn't get that big, but on the web with different browser and text sizes it will end up looking strange for a lot of people. Right now I have a couple of spaces that is the same width as two m's, and that has a very distacting effect when reading...
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
Jason: Brilliant! You know, that has been bugging me immensely, and I've been trying to figure out what to do about it. It never occurred to me to give the links padding! I love you, man.
V: Thanks for the input on the link colors and text alignment. Believe it or not, but I actually had trouble sleeping last night because of those friggin' link colors. The conclusion that I came to before I was finally able to fall asleep was that I liked the red, but I would have to fiddle a bit with it, since what looks good against black doesn't necessarily look good against white. So I think I'm going to play around with red a bit until I find a combination that I like (but I'll leave up the other colors, just in case someone else wants to comment).
Text alignment is still up in the air, but I think I'm leaning toward ragged right. Two ems of space between words is just way too much, and since this site is going to be primarily text, readability is key. I think I can live with the flyout on ragged right.
Now, if you'll excuse me, I'm off to pad my links. Hmm... sounds like a euphemism...
[Edit: OK... padding complete, and I must admit it looks much nicer. Thanks, Jason.
I also fiddled with the style sheets a bit... now, the four links on the front page will lead to, respectively: 1) the black color scheme with red links and justified text, 2) the white color scheme with red links and justified text, 3) the black color scheme with orange links and ragged right text, and 4) the white color scheme with purple links and ragged right text. This way, you can compare both the link colors and the text justification at the click of a button. God, I love style sheets.
These will probably be the last modifications I make before I leave for Thailand next Tuesday. Feel free to make any comments, of course, as I will be taking everything into account when I come back. At that time I will put the site up in what will hopefully be its permanent home, with all the content, and I'll post the news in a new thread. So thanks to everyone who's helped out--it's been real.]
[This message has been edited by Suho1004 (edited 12-13-2002).]
From: North Coast of America Insane since: Dec 2001
posted 12-13-2002 18:38
I never, never, never surf full-screen. I typically use an 800x768 window. At 800 wide, I like the way the text overlays the logo. Very sharp. What I don't care for is the way the menus wrap.
First, at issue is semantic markup. Like you, I use a sh*tload of DIVs and few H* tags.
Second, is reliance on DIV as presentational markup. I also tend to style DIVs then put stuff inside them, when styling the element itself, or giving the element the class, might be the better way to go. (Eg: <div class="menu"> becomes <ul class="menu"> ). The question is then, when is a section a section (structurally) and when is it not (used as convenient presentation change)?
it was my assumption that the alt was only used within a <img src="" />... i mean im no vet at programming, isnt an alt used to make like a drop down text block when hovering over something that describes it a little more.. like a picture.. but why would you need it for text then? if text has words to describe where the link goes alrdy? i dunno.. i just looked through several XHTML tut pages that say their pages are setup correctly and none of them have a alt="" attribute within a <a href></a>.. just my random thought? slap me if im totally mistaken
brucew: I don't like the way the menus wrap either, to be honest with you. At some point, though, wrapping becomes inevitable. The only thing I would like to do is get rid of the bar to the left of the item that wraps (a left border, actually), but I don't know of any way to determine in CSS whether an element is going to wrap or not, so I don't think that's possible. The only thing I did think of was taking out the border entirely, but I'm not sure how that would work.
Good point about semantic markup (and that's a great link--thanks!). You're completely right about the menus, of course. I went and did them as lists like a good little programmer, and then slapped them inside completely unnecessary divs! Thanks for the wake up call on that one. I'll look into some of the other pages and see if I can't cut down on the unsemantic markup.
chudtza: That, of course, is the answer. I think this occurred to me one night as I was lying in bed, but I just haven't gotten around to trying it out. Thanks for the confirmation. I'm just wondering what I should use instead of the alt... title, perhaps, but I haven't really looked into that yet. I know the text I'm using for the alts now isn't all that helpful, but I do plan on making them more descriptive. I'll have to look through some XHTML pages for the correct way to do this. Thanks.
And thanks to everyone who has offered advice here. I will be leaving for Thailand tomorrow, so the new version of this site will go up in about one month's time. Until then, everyone have a merry Christmas and happy new year.
[Edit: I checked, and "title" is the proper attribute to use, rather than alt. Should be a simple 'find and replace' operation...]
[This message has been edited by Suho1004 (edited 12-16-2002).]
posted 12-07-2002 14:54
) to learn php, so what are you waiting for?! 
I wanted to use a serif font for the feel, and Georgia is the safest thing out there. Unless you don't have Georgia on your system, in which case you will see, um, let me check.... Hmmm... apparently the only thing I specified after Georgia was default serif, which may be Times New Roman (which definitely sucks). I'm not really familiar with too many other serif fonts that look nice on the screen. This is something I'll have to look into.
