IT Web Design Noob in need of help.

Hi guys,

Not sure if anyone views this section of the forum anymore but…

I’ve been trying to rebuild our Robotics team’s website (www.team2472.com) since early last year…

So, I was wondering if you guys could give any advice on what I should do in the future. The website is by no means finished, and it will be updated at least weekly for awhile…

Thanks for looking, and looking forward to reading feedback.

A couple things I noticed…

I was clicking the navigation along the top, and noticed the same links along the side. After going to several different pages, the links are different on each page! That will be rather confusing to the average visitor.

My suggestion would be to remove the navigation on the sidebar, and keep only the top bar.

On the same note, some pages are only available from the sidebar navigation. Maybe you could use a drop down on the top? If you do, make sure you don’t have several ‘levels’ of drop downs. Try to keep it at two max.

For example,


About -> The Team -> Members
                  -> Mentors
                  -> Captains
Media -> Photos
      -> Videos

The biggest thing to me is the Flash Slideshow on the homepage. Flash won’t load on iPhones/iPads/iPod Touches, some version of Android, and it is rather slow to load. I would highly recommend something done in JavaScript instead, such as NivoSlider (http://nivo.dev7studios.com/), which supports images and links, and will speed up the page load.

I like the look of the site - it’s simple and it fits your team’s colors.

You have a good start, so keep working!

You’ve made a great start. A few things I would suggest:

Try not to use serif fonts (Times, Century, etc.) on dark backgrounds as they tend to be hard to read.

Don’t use <table> where it isn’t necessary. There a some places where I noticed tables holding headers and paragraphs when the semantic tag (h1, h2, h3, p, and the like) would’ve been sufficient. You could also float the dates of the news postings off to the right and images to the left. For example:

<h3 style="border-top: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5;"><span style="float: right;">10.8.2011</span><a href="/internalpages/newsarchive/article0000002.html">Build 2 Update 1 Now Live!</a></h3>

<div style="float:left; width:150px;">
    <img src="_images/newsbuttons/webnews.jpg" alt="state fair pic" width="135" height="136" align="absmiddle" />
    <p style="font-size:9px; text-align: center;"><em>New Website Build</em></p>
</div>

<p>The IT Department has Launched Website Build 2 Update 1! To read more about what it includes and what it means to you, click the title.</p>

Last, but not least, I noticed that on the sponsors page, some of the text went below the bottom of the content area and into the footer. There is a way to prevent this in a 2-column layout without having to define a definite height for the content box. What you do is set a container up as the main box (with the same background/border as the sidebar) and put the 2 inside it. The content will push it down and make the sidebar appear longer, when it really isn’t. To do this, here’s an example:

CSS:


#wrapper {
    background: #900;
    border: 3px solid #000;
    border-bottom: none;
    width: 960px;
}
.sidebar {
    float: left;
    font: Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    padding: 0 5px;
    width: 135px;
}
.content {
    background:#FFF;
    border-left: 3px solid #000;
    float: left;
    min-height: 640px; // set this to a height greater than that of your sidebar by at least 25px
    padding: 5px;
    width: 802px;
}

HTML:

<div id="wrapper">
    <div class="sidebar">
        <!-- Sub-navigation, extras go here -->
    </div>
    <div class="content">
        <!-- Gimme all your content -->
    </div>   
</div>

Hope this helps,
Q. Sheets

Can someone give me some links to the websites or online services using which I can make my websites using second-level domains?

Do you mean sites where you don’t need to code to make a site?

If so, try weebly.com or webs.com.

Although I’m going to say that your website will be much more professional, and you’ll have greater control if you design it yourself and use a free host such as 110mb.com or 000webhost.com.