Lookin' good! Do you only want feedback on the layout? Or everything? Well, I'll give feedback on everything anyway.
First off the bat, let's talk about your design. It's simple, straight forward and works. The only element that I think could be worked on better is the contact information. Why is there a big empty block adjacent to it? If one more advice I can give in the design aspect. Experiment adding a few more colours to the page. What you have now works but feels dull. i.e, uninspiring. Here are some tools to help you pick colours that will go well together,
-
You must be registered to see links
-
You must be registered to see links
-
You must be registered to see links
Additionally, you might want to look over these charts.
Now let's talk about functionality. You have a sticky navbar but your website hardly requires it considering the vertical length is quite short. In addition to that, you don't have a one page design where sticky bars are naturally used in.
The twitter widget sucks. There are plenty of other ways to implement a twitter feed where you have more control over the feed (e.g, the appearance). Here's one such jQuery plugin.
Your footer social links are not working.
You will benefit by giving links more of a visual aid to have your users be aware that they're actually links and not just bold and highlighted text. Things like hover effects are a good place to start.
Now we can move onto the front end.
Why are you not using HTML5 along with it's new tags? Tags that would most definitely benefit you are such tags like <nav> <header> <section> <footer>, etc. These new tags are designed to make users search your site more easily and they also benefit screen readers.
To change your document, just replace
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
To
Code:
<!DOCTYPE html>
<html lang="en">
In your CSS, I haven't noticed any kind of reset file. Each browser sets it's own "default" settings for each element, that, if you do not overwrite, will look different on each browser respectively.
Normalize was created to address this issue.
Why on earth are you still using tables to assign your columns/grid? This technique is no longer supported by any standard. Instead there are many other great alternatives. For example, I released a resource on these very forums for a replacement based on SASS (
http://forum.ragezone.com/f145/responsive-grid-websites-foundation-1009848/)
Additionally you can use a "professional" grids such as 960 grid.
You can also do a general search on Google to find many other grids. (They're quite easy to make)
And whilst I'm aware that this is a prototype, I feel I should still let you be aware of a few things that you should do in your production ready version.
Combine all of your CSS files into one single global file for starters. Also, why have you given ids to your css file link tags? This is the first time I've seen this.
Code:
<link href="styles/style.css" rel="stylesheet" type="text/css" id="global_css" />
<link href="styles/topbar.css" rel="stylesheet" type="text/css" id="topbar_css" />
<link href="styles/header.css" rel="stylesheet" type="text/css" id="header_css" />
<link href="styles/content.css" rel="stylesheet" type="text/css" id="content_css" />
<link href="styles/sidebar.css" rel="stylesheet" type="text/css" id="sidebar_css" />
<link href="styles/footer.css" rel="stylesheet" type="text/css" id="footer_css" />
Each of these lines make a separate HTTP request. Each request is in turn completed before the next is started. The result? It simply takes longer going back and forth fetching these files, effectively slowing down the page.
Move your JavaScript calls to the end of the document, before the ending <body> tag. This is a common practice primary because JavaScript libraries and plugins are fairly big and require some time to load properly. Instead of wasting time having them load first, all the other content on your document is loaded before the libraries are. Making your page "load" faster.
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.sticky.js"></script>
In your CSS, I noticed you did this often (with padding and margin both)
This can simply be summarized into
This is because the logic behind most attributes of this nature go from
TOP > RIGHT > BOTTOM >LEFT
So
Code:
padding:5px 10px 2px 6px;
translates into
Code:
padding-top:5px;
padding-right:10px;
padding-bottom:2px;
padding-left:6px;
Yet, if we only have one value, that value is substituted to all. i.e,
is
Code:
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
Another thing I noticed is that in your CSS you're not following a "DRY" approach.
Take for example the styling you do to your Header tags. All of them share the same colour, font family and the padding/margin reset, yet you have repeated the attributes for each header tag. This can be easily rectified by following the approach below
Code:
h1, h2, h3, h4, h5, h6{
margin: 0 0 0 0;
padding: 0 0 10px 0;
font-weight: lighter;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
color: #7c07a2;
}
h1{
font-size: 21pt;
font-family: carroisreg;
}
h2{
font-size: 17pt;
}
h2{
font-size: 13pt;
}
So on and so forth.
You should probably only use the <h1> tag once per page, usually to define the page title. h2, h3, h4 all exist for a reason.
Well, that's it for now. Good luck
![T0W3L - [WIP] TowelWEB Prototype - RaGEZONE Forums](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 "T0W3L - [WIP] TowelWEB Prototype - RaGEZONE Forums")
![T0W3L - [WIP] TowelWEB Prototype - RaGEZONE Forums](http://towelweb.ca/prototype/images/twscreen.png "T0W3L - [WIP] TowelWEB Prototype - RaGEZONE Forums")
