Jump to content

Webpage review, javascript use


Recommended Posts

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:: [url=http://www.kilbad.com/index.php?id=wa]http://www.kilbad.com/index.php?id=wa[/url]

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

[i]p.s. Thank you steviewdr for all your feedback already!  You have definitely helped to improve my overall website![/i]
Link to comment
https://forums.phpfreaks.com/topic/24568-webpage-review-javascript-use/
Share on other sites

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 [b]something[/b] 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 [b]some way[/b] 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

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. 
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.
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
[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
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.
[/quote]
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.

[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
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
[/quote]
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 [i]might[/i] be good. if you add some more, and it's too much, just take it back off ;)

[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
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
[/quote]
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.

[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
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?
[/quote]
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 ;)

[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
5) I added a subtle color change for the links upon rollover..  I like it a subtle..  but is it too subtle?
[/quote]
if the color change is your [b]only[/b] 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.

[quote author=kilbad link=topic=112146.msg455292#msg455292 date=1161403005]
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.
[/quote]
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 [i]Welcome to my site[/i] 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 [b]your[/b] site, and it needs to be what [b]you[/b] want it to be.

keep up the good work.
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.
[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
1) I have now added link underlining upon hover, and I think you were absolutely right.. it looks much better
[/quote]
great!

[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
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?
[/quote]
not particularly. i just wondered what the paragraph text would look like with slightly more space, that's all :D

[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
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..
[/quote]
makes sense

[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
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
[/quote]
??? it's a preference thing. you'll be browsing one day and see something done, and say [b]that's it! that's exactly the look i need![/b]

[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
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 [ + ] ?
[/quote]
no, i think the [ + ] looks fine as it is.

[quote author=kilbad link=topic=112146.msg455423#msg455423 date=1161441666]
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.
[/quote]
looking forward to seeing that when you get it up
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.