SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)

    New JavaScript Site

    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,248
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Last edited by felgall; Sep 24, 2011 at 17:08.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Enthusiast shref's Avatar
    Join Date
    Nov 2004
    Location
    Egypt, Alexandria
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Shreef
    blog: shreef.com
    twitter: @shreef

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.
    The only code I hate more than my own is everyone else's.

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Location
    Minnesota, USA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Guru dojo's Avatar
    Join Date
    Feb 2005
    Location
    Romania
    Posts
    899
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dojo View Post
    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).
    Last edited by felgall; Sep 30, 2011 at 19:58. Reason: added comment about fonts
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Rich78 View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •