New JavaScript Site

[felgall]

Earlier this month I started creating a new JavaScript site at http://javascriptexample.net (just 178 pages to start with and there's only a dozen or so still to have their initial content added).

Since then I have been mostly concentrating on getting some of the basic content in place and so haven't given much thought yet to how the site should look. Any suggestions on how to improve on the really rough design that I have so far will be appreciated. I am far more of a web developer than I am a designer so I am certain that there's plenty of ways that my current design can be improved.

[unemployment]

Felgall in many ways you're my javascript hero. Your site's content is very good, but you don't display it elegantly. I would try restructuring your tab structure in the top left corner of the page.

[felgall]

I have adjusted the appearance of that menu slightly and also added a few extra options to it. Not sure what else with it needs changing.

[r937]

compared to web designs done by professional web designers, your site looks simple and straightforward, and i see this as a good thing

there is no chance that visitors will be distracted from the content

(almost) everything works as expected, and that, too, is part of design, isn't it

to my eye the colours are a bit off (the main page background has too much pink in it, but hey, i am just another developer like you)

the previous/next buttons are the only thing i found confusing -- from the main menu i chose Examples > DOM > Basic DOM, and noticed that in choosing this level, that there were two other levels, DOM Tables and DOM Forms, and once i landed on Basic DOM, i thought the Next button would take me to DOM Tables -- i know where it actually went, and i can see what you were doing, but i was momentarily lost

there is one thing, though, that i see as a negative -- you have ~two~ google ad areas, and i think you should have at most only one

[felgall]

Thanks Rudy,

I have redone the next/previous navigation so that those one the main pages go from category to category rather than being included in a loop with the pages within the category. Also because that removed the way back to the category from the sub-pages I have added an extra button to the pages for that. Hopefully now the navigation is less confusing. I thought ahead and put the next/previous navigation in an array so that the navigation for the whole site can be changed just by updating the array - so this didn't take very long to change

I didn't notice how pink that colour was until you mentioned it. I have redone the colour scheme with slightly brighter colours and a white background to the page. I think it looks better than my first attempt but still not sure that I have got it right yet.

I am also still thinking about ad placement - can't quite make up my mind between the two different spots.

[shref]

1. Why not choose other colors or change the levels? the blue is too bright and can be annoying. a good example can be Facebook's blue, it's not bright and is eyes friendly.

check http://colourlovers.com

2. the fixed header is eating part of the screen, if you don't want to replace it, you can make it smaller.

3. add this to the css of your p tag "text-align: justify;" to make text look more organized.

[felgall]

The header is now smaller and not as bright and the text is now justified.

All of the suggestions so far have resulted in definite improvements (still haven't made up my mind about the ad placement yet except for the home page).

[oddz]

Have you considered hiring a designer? Really… I'm serious because it looks like you have spent quite a bit of time on it and to have a design like you do is well… let's just say a huge turn-off to the immediate eye. If your not a designer, then don't try to be one knowing your role is important. You obviously are very knowledgeable in the technical aspects but the quality of presentation is a direct reflection of what the site has to offer to the unknowing. I'm not saying people will not read the information who perhaps know of you from this forum, but to a passer by googler they are sure to leave your site the second they enter at this point.

[jleighs]

I think your site is very easy to navigate and understand. I like the parrot too. The one thing I didn't like are the ads located under the Next button. It competes with the main content. The ads on the right side are in a good location, you can see them without them interfering with the text. Very informative though - I think I'll spend some time on your site and learn some more javascript.

[dojo]

The information is terrific, but the design really puts me off. If I wasn't coming from SitePoint and knowing who you are here and respecting you for all the wonderful things you said and did here, I'd get out of the site in a second. I can understand the need to have a simple and effective design, I'm usually a more 'complex theme' designer, but can appreciated a minimalist design. In this case the colors are not good and there should be some tweaks to make it better.

Here's a link to a smashingmagazine article with minimalist designs: http://www.smashingmagazine.com/2008...clean-designs/

Some of them are excellent. Play with typography, choose some light and modern colors (that blue is a huge no no, it's so 'crude' and hard to work in a decent color palette). Use some paddings, smaller size for the main content in some areas, re-work the buttons, rework the header (love the parrot, but it took a while to see it), don't use the blue text shadow etc.

Small tweaks that will make your site really stand out. Yes, we're being superficial here, but it's true people are now looking for the complete package and that means a nice design too

[felgall]

In this case the colors are not good and there should be some tweaks to make it better.

Some of them are excellent. Play with typography, choose some light and modern colors (that blue is a huge no no, it's so 'crude' and hard to work in a decent color palette).

II have changed it to use lighter colours and even I think it now looks a whole lot better. I'll go through those example on the link you provided again later and see what else I can come up with to improve it further - still a way to go but hopefully now slightly closer to a usable design.

I have now changed the fonts the page is using - yet another improvement that still has the original fonts at the end of the font stacks I "borrowed" from http://www.sitepoint.com/eight-definitive-font-stacks/

Each change hopefully gets it that much closer to looking acceptable (its never going to look fantastic because I quite obviously don't have the artistic talent of a designer - my artistic talent is in the programming area).

[Rich78]

Browser = Chrome. Eevrything seems to work fine except your menu top left is not flush with the bottom of your header box, maybe that's how you wanted it. I like it, it's clean and to the point, your meta descriptions are descriptive, but I don't see any meta keywords on your pages.

Hope this helped,

Rich

[felgall]

Browser = Chrome. Eevrything seems to work fine except your menu top left is not flush with the bottom of your header box, maybe that's how you wanted it. I like it, it's clean and to the point, your meta descriptions are descriptive, but I don't see any meta keywords on your pages.

Hope this helped,

Rich

The menu is deliberately overlapped onto the header so as to make sure that all of the pop out part will be visible at lower screen resolutions (I originally had the menu arranged differently ans when I checked it on the college computers where I teach JavaScript it disappeared off the bottom of the screen).

It is still less than a month since I first started creating the site and since the major search engines ignore the meta keywords I saved time by leaving that tag out for the moment.

Your comments certainly helped. It shows that the changes I have made based on the prior comments have fixed a lot of the problems.