Jump to content


Webpage review, javascript use


  • This topic is locked This topic is locked
8 replies to this topic

#1 Guest_kilbad_*

Guest_kilbad_*
  • Guests

Posted 20 October 2006 - 05:22 PM

I have been working on fixing up this page for a while, particularly due to its cluttered nature, and wanted to know what everyone thought about it:: http://www.kilbad.com/index.php?id=wa

Also, how do you all feel about my javascript use with regard to the "[ + ]" text expansion feature that is present in the third block of links near the bottom of the page?

Thank you all so much in advance for your feedback!

Brendan

p.s. Thank you steviewdr for all your feedback already!  You have definitely helped to improve my overall website!

#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 20 October 2006 - 05:36 PM

i think you've pulled off the script quite well, although, there are a couple things i'd suggest:

1) let the user know they can click on it and what it does. maybe a color difference or tooltip or something to show that there's more information to be seen

2) i would love to see the additional information show up in a different color or with padding and a background-color, or in some way set it off from the rest of the page. otherwise, it could get difficult to see exactly what was added.

otherwise, i'll give you a couple thoughts on the rest of the page for free as well ;)

try putting a line-height of 1.3em on your page content. it looks a bit crowded still. maybe the extra spacing between lines would help.

is there any way you could group your information and possibly change your display slightly to accommodate those groupings of data. overall, i love the clean feel of the site, but those are just a couple thoughts, for what they're worth


You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 Guest_kilbad_*

Guest_kilbad_*
  • Guests

Posted 20 October 2006 - 05:53 PM

ok, let me work on a few of those things and then I will repost here to see what you think..  thanks!

#4 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 20 October 2006 - 09:52 PM

on contacts, you could put a redirect to go to the login page, it would save an extra click, people normally like things happening quicker.

Your site itself also doesn't signify anywhere on there what it's actually for. It seem's like a personal site, but without saying that ,people could be lost with interest as to what the site is even there for, the purpose of it's existence. 

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#5 akitchin

akitchin
  • Staff Alumni
  • Advanced Member
  • 2,516 posts
  • LocationCalgary, AB, Canada

Posted 21 October 2006 - 12:25 AM

i'll second obsidian's suggestion where line-height is concerned.  i would also suggest the following:

1)  put a little more space between the bottom of the nav and the top of the content.  i feel like a tall guy in a short car when reading it, and the nav link text distracts me from the content.

2)  i find those tildes annoying, to be frank.  this is opinion though, so ignore me if no one else thinks so.

3)  the links don't really stand out.  they look like regular text with a VERY subtle colour change, and don't have any rollover effects so they appear stubborn and rigid.  i think when most people roll across links, they like to see some kind of response to tell them it's different; even just an underline on hover would be a nice touch.

long story short, it's nice but could definitely do with something to make the site a little more responsive and easier to read.  i like the [ + ] implementation too, but as obsidian says, it could do with some segregation to highlight the difference.

#6 Guest_kilbad_*

Guest_kilbad_*
  • Guests

Posted 21 October 2006 - 03:56 AM

Thank you all for your feeddback.. and I have tried to consider everything you have suggested

1) I have changed the [ + ] and expansion text to another color..  what do you think of the color?  Does it work? ..or would you recommend another color.

2) I have added a 1.3em line-height to the entire site, and am currently checking it at browsershots.org to make sure everything looks ok across browsers/platforms..  let me know if you think it looks ok

3) Anytime a login is now required, the user is sent directly to the login page.. there is no longer an intermediate page indicating a login is necessary

4) I think the tildes are someone annoying too.. however, I have tried some different bullet options and nothing seems to work that well.  I have also tried using nothing, but got some negative feedback about that..  akitchin, do you have any specific ideas about how to improve this?

5) I added a subtle color change for the links upon rollover..  I like it a subtle..  but is it too subtle?

6) With regard to the space between the nav bar and top of the content, this is the only point we don't see eye-to-eye.  I don't think more space is needed.  However, if you feel like this is a Huge problem, I am willing to reconsider.

Thanks again!  bt

#7 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 October 2006 - 12:16 PM

1) I have changed the [ + ] and expansion text to another color..  what do you think of the color?  Does it work? ..or would you recommend another color.

i think the maroon for the actual link is great, but maybe use a slightly lighter shade of gray for the text instead of the same maroon? that way, it will seem like it's separate from the rest of the page text, but it won't be so bold on the page, either. i'm thinking like a #666666.

2) I have added a 1.3em line-height to the entire site, and am currently checking it at browsershots.org to make sure everything looks ok across browsers/platforms..  let me know if you think it looks ok

better. did you apply it to <p> tags specifically, or did you just apply it to the body tag? i didn't look at your CSS directly this time around :P ... if it's just applied to the body, try putting it on your <p> tags as well. it looks good, but just a tad more space might be good. if you add some more, and it's too much, just take it back off ;)

3) Anytime a login is now required, the user is sent directly to the login page.. there is no longer an intermediate page indicating a login is necessary

that's good. you may want to consider allowing for a small login form to be available on each page if they're not logged in (just a thought). then, once they log in, you can have it be their logout link. this helps with usability, but is by no means a necessity.

4) I think the tildes are someone annoying too.. however, I have tried some different bullet options and nothing seems to work that well.  I have also tried using nothing, but got some negative feedback about that..  akitchin, do you have any specific ideas about how to improve this?

i would recommend not using bullets at all, but using an image or icon of some sort. the tildes are definitely distracting, especially when they're the same text color and everything as the rest of your content. find an icon or little image you like, fade it out a bit, and use it as a "bullet" of sorts instead of an actual character... at least, that's what i'd recommend ;)

5) I added a subtle color change for the links upon rollover..  I like it a subtle..  but is it too subtle?

if the color change is your only change, i'd say it's a little too subtle. however, if you also added something: maybe a text-decoration: underline to your hover, the color change would be perfect.

6) With regard to the space between the nav bar and top of the content, this is the only point we don't see eye-to-eye.  I don't think more space is needed.  However, if you feel like this is a Huge problem, I am willing to reconsider.

i think the difficulty comes with the fact that the content starts immediately with no header tag to introduce the page. i'm kind of torn on this one. i think it's a bit crowded as akitchen says, but i don't know that simply adding padding is the answer. i think if you have a styled page title of some sort, or introductory header placed in between the nav and the content, it would help tremendously. even if it was simply a Welcome to my site header, it would be a visual divider between your page nav and the content.

@kilbad ~ it's refreshing to see someone who is honestly considering every suggestion and at least trying them out and making a decision. also, it is great to see someone who will take suggestions and verbalize disagreement if there is some. keep in mind that every set of eyes sees pages differently, and it all comes back to perception and personal preference. take note of what we suggest, and try them to see if you like them, but in the end, it's your site, and it needs to be what you want it to be.

keep up the good work.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#8 Guest_kilbad_*

Guest_kilbad_*
  • Guests

Posted 21 October 2006 - 02:41 PM

1) I have now added link underlining upon hover, and I think you were absolutely right.. it looks much better

2) I did try a slightly larger line height, but decided the 1.3em had already grown on me, so I changed it back.  I did apply the line height to the body css tag, and it seems to be applying to everything, so I did not add it anywhere else..  was there soemwhere you felt the line height was not working?

3) I have, in the past with other kilbad.com editions, had a small login form on each page..  but since I am going for a more minimilistic website, I decided not to do that again..

4) I tried some bullet images, but nothing seemed to work.  I just cannot tame that list.  Therefore, I decided to go back to the tildes, but colored them to grey..  is that any better?  I know it isn't great

5) I kept the color of the [ + ], but turned the expanded text to a light grey.  Do you think there is a better color for the [ + ] ?

6) I think that an "introductory heading" is a good idea..  but I have not worked anything out yet that I like..  but again, I agree that is probably a good idea.

@obsidian --Thank you for the compliment.. I really do try to take the input I get seriously.

#9 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 October 2006 - 03:03 PM

1) I have now added link underlining upon hover, and I think you were absolutely right.. it looks much better

great!

2) I did try a slightly larger line height, but decided the 1.3em had already grown on me, so I changed it back.  I did apply the line height to the body css tag, and it seems to be applying to everything, so I did not add it anywhere else..  was there soemwhere you felt the line height was not working?

not particularly. i just wondered what the paragraph text would look like with slightly more space, that's all :D

3) I have, in the past with other kilbad.com editions, had a small login form on each page..  but since I am going for a more minimilistic website, I decided not to do that again..

makes sense

4) I tried some bullet images, but nothing seemed to work.  I just cannot tame that list.  Therefore, I decided to go back to the tildes, but colored them to grey..  is that any better?  I know it isn't great

??? it's a preference thing. you'll be browsing one day and see something done, and say that's it! that's exactly the look i need!

5) I kept the color of the [ + ], but turned the expanded text to a light grey.  Do you think there is a better color for the [ + ] ?

no, i think the [ + ] looks fine as it is.

6) I think that an "introductory heading" is a good idea..  but I have not worked anything out yet that I like..  but again, I agree that is probably a good idea.
eriously.

looking forward to seeing that when you get it up
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users