Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Review my website as a critics to help build it better

    Hi,
    This is regarding the website named www.gametion.com

    It has more than 3000 unique visitors daily and want to make some changes to it so that it looks more professional. Its mainly created using easy HTML and ASP in some pages. Please advice me as what new features should be used in the website to make it more appealing.

    It is updated daily with new games. We also create our own games like :

    www.gametion.com/frogfly.htm

    Even your small your inputs are very much appreciated.

    Thanks for your time once again.

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Using tables for layout is bad!

    After converting from tables to divs, styled divs will look much more professional that colored tables.

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Not too crazy on the stars at the bottom, simple text links will be fine
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Hi Millenia,
    Thanks for your input...I looked at the link...I am not very proficient in HTML but has a interest in online games so went on for creating the website.
    I will look into Divs and will try to convert the tables.

    Thanks a lot for your invaluable input.... !!!
    Let me know if you feel something more which I can change in my website www.gametion.com.

    Thanks again and take care!!

  • #5
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi BabyJack,
    I used the stars to make the page look attractive. But it seems it doesn't give professional look. I will try to update it using text links using numbers and will create new pages with text umbers only.

    Thanks a lot for your advice. I am looking for more of them. Do you think I need to add something more to my website to make it look attractive and professional.....please post messages if you feel.

    I never thought posting for review of my website in a forum would help me this much....

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Your navigation menu on the left is very, very long. In addition there are no "mouse-over" effects. Separating games into 5 categories you already have, then separating those 5 cetegories into subcategories in a collapsed CSS menu (see example here) will clean that part up and give a much more professional look and feel. You don't need extravagent effects, but it is nice to have a small color change or highlight effect when you hover your mouse over a menu selection.

    Check these examples out for guidance and you can customize them to your needs:

    http://www.cssplay.co.uk/menus/flyoutt.html

    http://www.cssplay.co.uk/menus/flyout5.html

    http://www.cssplay.co.uk/menus/flyout_wall.html


    If you aren't confident with your programming skills you can offer pay someone to develop it for you here. Just be sure to read the rules before you post a job, if that is what you choose to do.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You might also want to incorporate a search bar into the header rather than the link to a search page. That would save users a step.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Rowsdower,
    Thanks you so much for reviewing my website. The serach bar idea is good one. And I never thought about "mouse-over" effects.
    And finally seperating the 5 categories in a collapsed CSS menu (which I don't know how to use). So I will look at the links and will encorporate them.

    Your review was really so good and I thank you again for reviewing my website so closely.

    Let me know if you have something more to say.... you are so wonderful.

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    It loads really slow and there is a pop up...

  • #10
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry

    Hi srule,
    I have a good bandwidth, so I never thought of this...does it really loads slowly

    Do u have any suggestion as what can be done for it as I have images on pages for the links. Does a popup is not a good thing... it would come only once for a single user...and not everytime the same person opens the site.

    What are your suggests on increasing the speed.

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Shabnam View Post
    ...And I never thought about "mouse-over" effects.
    And finally seperating the 5 categories in a collapsed CSS menu (which I don't know how to use). So I will look at the links and will encorporate them...
    Here is a basic starter method for your menu. This will build the basic structure of the menu and provide links to your pages:
    Code:
      <div class="menu"> <!-- Open Menu -->
        <ul>
          <li><a href="<whatever link you need here>.html" title="Online Games">Online Games</a> <!-- Notice that there is NO closing </li> tag here. We close this list item later... See below. -->
            <ul>
              <li><a href="<whatever link you need here>.html" title="Play All New Games">New Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Play All Games">All Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Play Top 100 Games">Top 100 Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Are You in a Hurry? Play 5-Minute Games">5-Minute Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Download Games">Download Games</a></li>
            </ul>
          </li> <!-- This is where we finally close the <li> from above. Any time there is a sub-list you must make sure to leave the parent list item open until the sublist ends -->
          <li> <!-- This would open your next section ("All Time Games") using the basic form shown above. -->
            <ul> <!-- This starts the subsection menu -->
              <li><!-- This would have a link to "Action Games" using the method above --></li>
              <li><!-- This would have a link to "Adventure Games" using the method above --></li>
              <li><!-- This would have a link to "Arcade Games" using the method above --></li>
    ...
    <!-- continue adding your sections until you have all of your "All Time Games" links added -->
    ...
            </ul> <!-- This closes the current subsection of the menu -->
          </li> <!-- This ends the "All Time Games" section. Remember that when using a sub-list you MUST put a closing </li> tag here and NOT above. -->
    ...
    <!-- Add more sections like those above until you have all of your main categories full -->
    ...
        </ul>
      </div> <!-- Close Menu -->

    Now that the menu is built, you need to use CSS (cascading style sheet) styling to make it work as a dynamic, "flyout" menu. For purposes of demonstration I will use one of the styles from a link I gave you earlier:
    Code:
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/flyout5.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    
    .menu {
    position:relative;
    z-index:1000;
    font-size:90%;
    height:235px;
    margin:25px 0 0 15px; /* this page only */
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    width:150px;
    position:relative;
    border:1px solid #888;
    border-width:1px 1px 0 1px;
    background:#9bb;
    }
    
    .menu li {
    background:transparent;
    height:26px;
    }
    * html .menu li {margin-left:-16px; margin-lef\t:0;}
    /* get rid of the table */
    .menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
    
    /* style the links */
    .menu a, .menu a:visited {
    display:block; 
    text-decoration:none;
    height:25px;
    line-height:25px;
    width:150px;
    color:#000;
    text-indent:5px;
    border-bottom:1px solid #888;
    background:transparent;
    }
    /* style the link hover */
    * html .menu a:hover {color:#fff; background:#999;}
    
    .menu :hover > a {
    color:#fff; 
    background:#999;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    top:-1px;
    left:100px;
    }
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul {
    visibility:visible;
    background:#dde;
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ 
    visibility:visible;
    background:#ded;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { 
    visibility:visible;
    background:#edd;
    }
    .menu ul.top2 {top:25px;}
    .menu ul.top3 {top:51px;}
    .menu ul.top4 {top:77px;}
    .menu ul.top5 {top:103px;}
    .menu ul.top6 {top:129px;}
    .menu ul.top7 {top:155px;}
    If you want to play around with this to learn how it works just take all of the code below and plop it into a new *.html document. This will let you play with the mechanics and the style without worrying about anything else.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample Menu</title>
    
    <style type="text/css">
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/flyout5.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    
    .menu {
    position:relative;
    z-index:1000;
    font-size:90%;
    height:235px;
    margin:25px 0 0 15px; /* this page only */
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    width:150px;
    position:relative;
    border:1px solid #888;
    border-width:1px 1px 0 1px;
    background:#9bb;
    }
    
    .menu li {
    background:transparent;
    height:26px;
    }
    * html .menu li {margin-left:-16px; margin-lef\t:0;}
    /* get rid of the table */
    .menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
    
    /* style the links */
    .menu a, .menu a:visited {
    display:block; 
    text-decoration:none;
    height:25px;
    line-height:25px;
    width:150px;
    color:#000;
    text-indent:5px;
    border-bottom:1px solid #888;
    background:transparent;
    }
    /* style the link hover */
    * html .menu a:hover {color:#fff; background:#999;}
    
    .menu :hover > a {
    color:#fff; 
    background:#999;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    top:-1px;
    left:100px;
    }
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul {
    visibility:visible;
    background:#dde;
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ 
    visibility:visible;
    background:#ded;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { 
    visibility:visible;
    background:#edd;
    }
    .menu ul.top2 {top:25px;}
    .menu ul.top3 {top:51px;}
    .menu ul.top4 {top:77px;}
    .menu ul.top5 {top:103px;}
    .menu ul.top6 {top:129px;}
    .menu ul.top7 {top:155px;}
    </style>
    
    </head>
    <body>
      <div class="menu"> <!-- Open Menu -->
        <ul>
          <li><a href="<whatever link you need here>.html" title="Online Games">Online Games</a>
            <ul>
              <li><a href="<whatever link you need here>.html" title="Play All New Games">New Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Play All Games">All Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Play Top 100 Games">Top 100 Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Are You in a Hurry? Play 5-Minute Games">5-Minute Games</a></li>
              <li><a href="<whatever link you need here>.html" title="Download Games">Download Games</a></li>
            </ul>
          </li>
          <li> <!-- This would open your next section ("All Time Games") using the basic form shown above. -->
            <ul> <!-- This starts the subsection menu -->
              <li><!-- This would have a link to "Action Games" using the method above --></li>
              <li><!-- This would have a link to "Adventure Games" using the method above --></li>
              <li><!-- This would have a link to "Arcade Games" using the method above --></li>
    ...
    <!-- continue adding your sections until you have all of your "All Time Games" links added -->
    ...
            </ul> <!-- This closes the current subsection of the menu -->
          </li> <!-- This ends the "All Time Games" section. You MUST put a closing </li> tag here. -->
    ...
    <!-- Add more sections like those above until you have all of your main categories full -->
    ...
        </ul>
      </div> <!-- Close Menu -->
    
    </body>
    </html>
    You can change background colors or even use background images for menu items, you can change fonts, change font colors, borders, etc. Once you get good enough with CSS you can really make these menus look nice and you don't need to add any more Java to your site. Check here (http://www.w3schools.com/) for basic guidance. Read through all of their CSS pages and then come back to the forums (in the HTML/CSS section, not the site review section) and seek specific clarification if there is something you don't understand.

    Quote Originally Posted by Shabnam View Post
    ...Does a popup is not a good thing...
    No, nobody I have ever met has ever liked popups. Not even on a first-time use only. Lots of companies make software specifically designed to block popups so why add them at all? They'll probably be blocked and if they aren't blocked you will most likely annoy your users. If you really, really need advertising try using a tasteful banner ad.[/QUOTE]


    Quote Originally Posted by Shabnam View Post
    ...What are your suggests on increasing the speed.
    Switching from tables to div's for your layout will go a long, long way to help reduce the filesize of your page. Aside from that, make sure that your image use is appropriate and that the image sizes are manageable. Minimize your use of Java scripts as well.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Shabnam (12-06-2008)

  • #12
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Rowsdower,
    I am overwhelmed by the kind of help you have given me. I appreciate your help and guidence. I will encorporate the divs to tables and the other things as suggested by you.

    The site given by you is too good.

    Thanks again
    Last edited by Shabnam; 12-08-2008 at 06:05 AM.

  • #13
    New Coder
    Join Date
    Dec 2008
    Location
    In greenaries
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi All,
    I have made some changes to my website. I converted most of html files to ASP. It has been more than 2 months but I don't know why they are still not indexed with google. Traffic come on those pages only from yahoo, msn or other search engines.
    I am very much dishearten. I used the metatags as I was using when created them using HTML. Don't know if ASP pages need different kind of tagging or something else to be indexed by Google.
    Please help me as earlier when I was adding a HTML page to my website the page was getting indexed in not more than 2-3 days.

    Please help me on this....do I need to change back all asp pages to html.


  •  

    Tags for this Thread

    Posting Permissions

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