REVIEW REQUEST: CM Central Layout

Hi, I just moved this from Graphics & Design to Website Critiques area. It be helpful if you posted your URL here so we could give some feedback on your site. We would also appreciate it if you would take a look at the posting agreement for Website Critiques - this is something you would normally see if you posted directly to the critiques forum.

Thank you and welcome to TWF!

It's more fun this way, we have to guess his website URL.

Is it even online??

oh sorry...the url is CM Central

Looking at it on 800*600, IE5.5.

Text sizes are a little too big. Maybe try a different font. Times New Roman doesn't work well here.

Colors are a little bland. Maybe you could try to tie your color scheme in with the banner (which looks pretty good).

The ad up the top isn't looking good. I hope you're not intending to host it on angelfire?

The page title reads as "Page Title".

There isn't much else to review. With some more content, the site should shape up a bit.

I get a horizontal scrollbar at 800*600. Not really much to add to what Abhishek said as there isn't really much on there, needs a design.

I get just a wee horizonal scroll as well. It is sorta plain. Maybe after you plug in some more content it will start coming to life. Keep us posted on your updates.

ummmm firstly, get yourself a proper hosting account, so you can leave the yucky angelfire banner behind.

The page looks disjointed because the banner thingy doesnt line up with the side menu. Whats CM? for a newbie going to the site for the first time, it isnt immediatly obvious what the sites about, if you use the full version of what it stands for you'll probably get better responses from such engines too!

I don't think you necessarily have to move to a paid hosting account. I think we all probably started out on something like this at one time or other. If you are serious about your site, however, you may want to consider investing a couple dollars in a domain and a good hosting account.

You may also want to consider learning the HTML code rather than relying on MS publisher. You'll get a lot more control and power over your layout if you know what's going on behind the scenes.

I think you've done a decent job here as far as the layout goes. The banner/logo graphic isn't bad looking, but it does seem to be a little fuzzy to me. Try to find a better balance between quality and download speed.

Another problem is the font you've used here. Default Times doesn't look as nice as a sans-serif such as verdana or helvetica. I would also like to see a more interesting colour scheme here. It could be an idea to pull a colour or two from the Brazilian flag in the logo there to add some interest to the layout.

Thanks for your help and more criticism would be appreciated. I do know a bit of HTML and I think that the colour scheme should stay the same as I don't want to overcrowd with colours.

Oddly enough, the layout looks exactly the same on IE5.5, O6 and NS6...

Who would've thought Publisher, of all things, would achieve the impossible?

You say you don't want to overload it with colour but at the moment it is so very bland. Suppose it'll depend on what content you are putting in there.

I agree.

You don't have to use lots of color. You could very well stick to a grayscale theme, using various shades of gray. And the odd color for highlighting and what not.

The colors are very plain, as everyone stated above. I suggest you read some HTML tutorials from Funky Chickens.com, but I'm not sure if they're still online. For colors, try downloading the trial version of Paint Shop Pro. There's a feature where you can find the exact color you want and the program gives you the code for the color.

I do have different shades of grey on my site and there is highlighting. I am still in the process of designing though!!

I don't know if I'd recommend Funky Chickens. Their own design isn't that good, and the HTML tutorials aren't valid (no mention of closing etc). Even their own code isn't valid...

I have added some content onto the site....can you guys have a look and tell me what you think???

I really didn't notice anything different.
Is this the correct URL?
http://www.angelfire.com/cantina/cmcentral/temp_CMC_tba.htm

That's the url he gave us and it's still the same and still very grey.

Sorry....the URL is now:

http://cmcentral.neopages.net

I just got the Angelfire 404 page

Yeh that is why you need to look @ the URL that contains Neopages!!!

Can you give me some feedback please????

I don't think grey is the ideal background color, very hard to blend it with content etc, for sections its ok but not the entire background. try white background and if you want greys, use lighter grey for navigation section with darker for nav heading sections or something.
You need more of a theme going. add some links like, what is CM, about us, related links ...
The way your content is now your page will become very long, so maybe have an achive section for older news. for updates etc on the main page keep it to soccer news. the top post has this: "On that list is to fix some of the reviews pages which don’t work! The tactics bit needs fixing and also the forms need fixing!"
Don't tell people your site doesnt work, maybe add another section with site updates mentioning whats been updated or added, changed etc but people dont need to know everything.
You need to use the word "soccer" in your content, the word "football" can mean different things in different countries, football can be rugby or soccer.

I agree with Busy that the grey background isn't right, it looks like there should be a background that hasn't loaded and this is the default colour. White would be much better IMO.

I also think that the header at the top should go right across the top, can you move the two bits to the left to the bottom? This is also casuing a small horizontal scrollbar at 800*600 for me. You also need to keep your fonts consistant, the first paragraph is Times New Roman and the rest Veranda.

Hi guys,

I thought that I should update this thread and not start a new one. Can I have a bit of feedback on my new design please? I would be most grateful for your help!

Catch it here:

http://www.cmdirector.neosurge.net/index.php

I guess I should tell you all about the site right as you Americans are unlikely to know about this! Well, it is about soccer (football is we call it) and it is about a computer game on football. The site has been knocking around since May last year but this is the first design I coded by hand. Pretty pleased with it myself but your feedback is welcome!

If you can think of anything I can improve or something to make my design better then I would be grateful.

Three quick comments:

- The rotating soccer ball enlarges beyond button bounds, which doesn't really look nice. Are you able to fix that, or does flashbuttons not let you do that? Also, I'd go with home-made buttons rather than templates.

- The site stats marquee isn't relevant or necessary. I was expecting to see latest news and scores in the scrolling text. As Busy said earlier in the thread: "... people dont need to know everything."

- Try to incorporate more of your primary design colours into the main section. It's somewhat plain right now.

I vaguely remember your old design(s), and I think it has been improving all along. Keep it up.

Quote: Originally posted by Abhishek Reddy

- The rotating soccer ball enlarges beyond button bounds, which doesn't really look nice. Are you able to fix that, or does flashbuttons not let you do that? Also, I'd go with home-made buttons rather than templates.

No I cannot change that unfortunately. Nor can I get rid of the link to Flash buttons. If someone with Flash was able to do something to edit the .swf file then I guess they could change it but as I don't have Flash then I can't!

Quote: Originally posted by Abhishek Reddy
- The site stats marquee isn't relevant or necessary. I was expecting to see latest news and scores in the scrolling text. As Busy said earlier in the thread: "... people dont need to know everything."

Ok. Good point but it would be handy if people asked how many players were in the database or how many graphics there are on the site and would save me time replying to them.

Quote: Originally posted by Abhishek Reddy
- Try to incorporate more of your primary design colours into the main section. It's somewhat plain right now.

By that do you mean the green or something similar to this? How do you feel about the grey border. Is there any other aspects which you could think of changing to make the site look more striking and unforgetable?

Quote: Originally posted by Abhishek Reddy
I vaguely remember your old design(s), and I think it has been improving all along. Keep it up. [/B]

Thanks! I appreciate your feedback! Very grateful!

Quote: No I cannot change that unfortunately. Nor can I get rid of the link to Flash buttons. If someone with Flash was able to do something to edit the .swf file then I guess they could change it but as I don't have Flash then I can't!

Pity. How about simpler buttons? Flash isn't the most fluid or accessible technology. Besides, the Flashbuttons link at the bottom makes it look a wee bit ameteurish.

Quote:
Ok. Good point but it would be handy if people asked how many players were in the database or how many graphics there are on the site and would save me time replying to them.

Sure, put the info up if you think it's necessary, but not in a scrolling marquee going across the top of the page, please. How about somewhere on the side? Or on another page - an FAQ, perhaps?

Quote: By that do you mean the green or something similar to this? How do you feel about the grey border. Is there any other aspects which you could think of changing to make the site look more striking and unforgetable?

Yep, the green is what I meant. Try working small amounts of it into something like the headings or images. I'm not too sure... it's up to you, really.

As for making it striking and unforgettable, what you should do is borrow a little from commercial marketing techniques and go for branding. Get a unique logo or symbol of some sort that identifies with the site, instead of going for a potentially overpowering colour scheme.

Quote: Originally posted by Abhishek Reddy
Pity. How about simpler buttons? Flash isn't the most fluid or accessible technology. Besides, the Flashbuttons link at the bottom makes it look a wee bit ameteurish.

I now have Flash on a trial and I should buy it when this expires. Actually I will go and buy it now! It looks pretty good and you can do loads of stuff with it! I will now have a play around with the buttons and will see if I can remove the Flash Buttons thing and customise it in some way.

Quote: Originally posted by Abhishek Reddy
Sure, put the info up if you think it's necessary, but not in a scrolling marquee going across the top of the page, please. How about somewhere on the side? Or on another page - an FAQ, perhaps?

Oh, that is true. I could just have an info page or something like that. Thanks! Good idea!

Quote: Originally posted by Abhishek Reddy
Yep, the green is what I meant. Try working small amounts of it into something like the headings or images. I'm not too sure... it's up to you, really.

As for making it striking and unforgettable, what you should do is borrow a little from commercial marketing techniques and go for branding. Get a unique logo or symbol of some sort that identifies with the site, instead of going for a potentially overpowering colour scheme.

Well as you can see we have a green logo and I was thinking of customising Coranto with those colours. The blue logo on the side will be changed to a greenish thing.

The logo is pretty unique and I would like to be able to do something with the grey border but I haven't a clue what...

I have been told to smooth the edges of the News tables...how is it possible? Would I use HTML?

I don't know what they mean!

That scolling marquee is really quite annoying.

You say at the bottom "Site optimised for resolutions greater than 800x600 and best viewed in 1024x768"

a) you don't need it on there as it wont change the browser size people are viewing the site in and it shouldn't matter
b) the layout is IMO too narrow to be best viewed at a reolution that big. Can you not make the width of the layout more like 750 wide so it at least fills more of the screen as at the moment there is loads of blank space either side at 800*600!

Right, I have got rid of the marquee and encorporated some green into the layout. What they want is round edges on the boxes in the news section...or they say it would look good because of the nav being rounded.

Better. Maybe try the writing on the green in white to make it easier on the eye to read.

If you want the corners rounded you'll have to do that using images.

Link to save people hunting for it on previous page.

Ok so this is slightly off the beaten track for this forum, but, do you want to be listed in search engines?

If you do then I wouldn't touch Flash for nav bars. Google is working on a solution to read Flash content & links, and FAST have just released tech that will do the same (although Google - accounting for most search engine traffic - don't use this).
In short Flash can only be used where links are replicated on the same page in HTML, therefore, if you want to be listed in search engines the very least you're going to have to do is repeat the nav bar with text or pictures somewhere else on the page. What I would recommend is to forget the fancy footballs and do the nav bar with HTML links

Hope this makes sense, and isn't too far off the forums intended subject matter

Quote: Originally posted by The Webmistress
Better. Maybe try the writing on the green in white to make it easier on the eye to read.

If you want the corners rounded you'll have to do that using images.

Link to save people hunting for it on previous page.

I have added the white text and it looks much nicer. How would I do it using images? The border is created by HTML code...

About the search engine, I have or will have, meta value tags so won't that help?

Yep, that does look much better with the white text.

Not many search engines now take that much notice of meta tags! Have a read through the Search Engine Challanges forum to get some more idea of how to make your site search engine friendly.

Ok...thanks for that advice. I am still a tad stuck on rounding the boxes though. Are you suggesting that I round the edges in a graphics program and then upload it and set it as the border? I don't know if Coranto, the news program, allows that. Does anyone else?

You have to create each corner as a graphic and then set the tables with cells to house each corner and then use a cell for the top, bottom & side borders. No way to do it just with html.

I understand about the graphic and the first bit of the celld but then you lost me!

Here is the current code for the table, how would I add a cell there?

:

Posted by:

Basically it goes:

Heading Text

This is just a simple example of how you could create a table for layout purposes (I love tables )

tags are now deprecated, you can rid yourself of their evil either by using CSS, tags, or just using the table "center" property.
Let us know how you get on with the tables. I'll put an example on my server if it'll help

Yeah that would help thanks! I can get rid of the center tags then? Do you think it would look better if I did something to the grey border around the outside of the site?

I don't actually think now that the grey is too bad as you use it within the main layout, I would make the layout wider though to fill the space better!

That would mean that my banner is stretched out of proportion though...

I will have a go at the curve things now.

When making the graphic should I include a green background or not?

I agree with those that commented on the color. Find 2 maybe 3 colors at the most that blend well and go with it. Maybe stay away from bright, blinding colors to.

But at the current moment in time it is ok? When I mentioned about doing something to the grey, I meant livening it up a bit. Putting a few pics in or something. Is it possible to do that with code?

When making the curved parts the easiest way is in your graphics program draw a circle to the size you need for the corners, make the circle the green colour with the border colour as the stroke around the outside. Cut it into 4 and save them as separate gifs to be put into your table cells.

I wouldn't put pictures as backround images into the grey part. Either change the colour or expand your layout.

I've cocked it up guys! Look at it now!

http://cmdirector.neosurge.net/index.php

Current code is:

'

Quote: Originally posted by Timewell

<table border="0" cellpadding="2" cellspacing="1" bgcolor="#000000" width="376">
<strong><center> </strong>
   <tr>
<td width="376" class="text"><img src="http://cmdirector.neopages.net/images/topleft.jpg></td>
       <strong><div align="centre"><font color="white"><Field: Date> : <b><Field: Subject></b></font></div> </strong>
<td><img src="img src="http://cmdirector.neopages.net/images/topright.jpg"></td>
     <strong></td></strong>
   </tr>
   <tr>
     <td width="376" bgcolor="#FFFFFF" height="91" valign="top" class="text">
      <div align="left"><Field: Text></div>
       </td>
<strong> // missing a <td> and </td></strong>
   </tr>
<strong></center> </strong>
<tr>
<td width="376" class="text"><img src="http://cmdirector.neopages.net/images/bottomleft.jpg></td>
     <strong><p align="right" class="text"><font color="white">Posted by: <Field: User></font></p></strong>
<td width="376" class="text"><img src="http://cmdirector.neopages.net/images/bottomright.jpg></td>
   <strong></td></strong>
</tr>
</table> <br>

'

All the bold bits are out of place, tables contents go between and , you have them outside of them. And the bottom two td's both have the same width (376) but the tables width is only 376. When doing tables you only need to add the size to the top td's as the lower ones become that size automaticaly. "centre" is spelt the American way "center". you also need width, height and alt tags in your image tags. You shouldn't use "<" or ">" for layout, use &lt; for < and &gt; for > as they will interfer with your code

So is that code fixed? All I have to do now is add the alt, width and height tags right? Although I thought it would appear at the default size...

I just tried to view your site and got an angelfire message that the page couldn't be found...did you change your url since you first posted it????

Yeah! I guess I should change that URL!

Quote: Originally posted by Timewell
So is that code fixed? All I have to do now is add the alt, width and height tags right? Although I thought it would appear at the default size...

It's not fixed, I just pointed out the problems so you can fix it.

Have a look at my html site, at the bottom of most pages it has common faults and the quiz, take note of the common mistakes and do the quizs, the questions are pretty easy (I have to change them one day) so if you get any wrong look for what you got wrong. making mistakes is good because it makes you learn how to fix it. if you get it right then you move on and dont spend any time on finding out what/where/why/how

The bits in bold you have added though. I just have to do the alts and widths and heights etc?

Ignore my previous post!

What would you suggest as sensible widths and heights for the curves?

[Edit]:

I have it back to normal size now but for some strange reason, the images do not appear yet they have been uploaded and are in the correct directory. Also, the border and background doesn't appear. Can you tell me why? I am sure it is something simple!

your code shows some images are at the base and others in a folder called "images"

it's your url
http://cmdirector.neopages.net/images/topleft.jpg
http://www.cmdirector.neosurge.net/banner.gif

notice the difference? neopages and neosurge

you shouldn't use the complete address for images, mainly because the browser things its an image outside of your site so goes out then back in, if the images are in the "images" folder, just use "images/image.gif" if they are at the base, just use "image.gif"

Right, they appear but I am so bad I haven't a clue what to do now...

whats your web address?
neopages.net or neosurge.net just change the ones that aren't your web address to the correct address, or do away with the address all together and just use the folder/image name

It is:

http://www.cmdirector.neosurge.net/index.php

I have done that but it looks like above!

the corners show now and everything is there that is meant to (according to your code) , you'll have to add more images if you want to make them boxs (top middle, right middle, bottom middle, left middle and center) you only have the four corners

Right, I have made the text black so that you can see everything. I still can't see how to make it look like it used to, the green "boxes" and white text only with these curved edges.

I have played around with it for a bit and it now looks like:

http://cmdirector.neosurge.net/index.php

What do you think?

those corner images have what looks like the remains of a drop shadow so you'll have to use images on the sides instead of colours. the bottom box wont work properly as the text is to long for the top and is making two lines of text which is higher than the corner.

You're also missing some tags in those tables still as well as some misplaced ones

But if the tags and stuff work now then what would just fiddling about with it do? Apart from making it neater!?

Also...would it be possible to put a little Flash thing as the background for the table? Don't worry, it will just go in a and out so no interference!

You can't use flash as backgrounds

ok...so if I use Flash in the box and have it fade out, it won't show the text behind it?

nope, you'd have to have the text as part of the flash

aah ok. I also guess that if I wanted Flash to appear where the body is grey then I would have to have the Flash grey right?

You have somewhat confused we with what you are trying to do with flash. IMO forget flash!

personally, i like a liquid-collapsable/expandable table-based design. But what youve done here is good enough. I would have liked to have seen a little more content on the first page; provides the user with a little insight as to how imformative the site will be. I like the button animations alot, if you did those on your own, bravo...

all together, a good site, and worth visiting....

sL|De

No I got the buttons from Flash Buttons. I think I will lose them when I have the time to make my own because it has the amateurish Flash Buttons thing.

Thanks! Glad you like the site!

I had tried to do a mouseover for some links on my front page but I have messed it up...can you see why?

It all seems to working fine? Don't like the middle table now though

By the middle table you mean the large borders right? Well I have been given a few suggestions by someone who helped to design the site with me and here are the images that he decided to use.

My first question to you would be, what one is your favourite?

My second is, would they be easy to implement and change the borders of the table etc? Please bear in mind that it is an online news system so the changes made will be shown in all my news.

They all need different set ups, the first (top) could be done with only 3 td cells, the second would need about 10+, the third (bottom) would need about 9. The first and third would use less graphics but all are small enough you probably wouldn't have to worry about that.
My pick would be the top one

I agree that out of those three the top one is best, but you will need to make sure that any graphics you do use are good quality and not jaggedy as they are above.

Could you explain how to set up the first one for me? I know roughly, where to put the TD's I think...but don't, if you get my drift.......

The way I'd do it is ignore the outline (use CSS to recreate this), take the date off the strip (date would be text) and strip would be background (if it wasn't a fixed width), so the only image would be the corner as a square.
You could code it with HTML or CSS, since it's a news bit I'd stay away from the CSS method as you have no control over the input placed in there and one stray can throw your whole layout off.

With a table, just use 2, one top and one at bottom.

You could use 3, two top and one bottom (the corner having it's own cell) but either will work.

Well with my current code, still not really corrected, I would place the TD where the current top left is right?

Now I don't know what to do with the strip, nor the border. Can't the border be recreated with HTML?

Can do it several ways, easiest is two cells like so

'the questionmarks above are to be changed to suit, cellspacing and padding could be 0 but depends how you want to lay it out. You can use padding and spacing to make the border but the CSS method actually works better than the HTML method in NS4.7. If you want the CSS method just put a around the table with border solid colour 1 or 2

Another way, which is better but does have some issues in some browsers is like this:

'This is the perfered method but the second cell has issues in certain browsers and may be bigger or smaller so best way around this is to size the first td cell same as the image and use width="100%" in the cell next to it.

Hope this helps

I am not fond of green, especially, bright green, in web sites, but this one that pulls it off nicely

Good job

Jim Miotke
www.idbDeveloper.com

Catchy navigation links

Cool! I am glad you guys like it! I feel that I have gained so much knowledge compared to my previous attempt. I am now trying hard to find the time to work the top example into my code.

Right. Well when I was trying to add the code, 2nd one, that Busy gave me. The strip wouldn't appear as the background.

http://www.cmdirector.neosurge.net/test2.shtml

I have put the CSS in the URL but don't know whether he wanted me to use CSS...

I actually missed a few bits in the code I gave you above - sorry (missed the ';' and '}') I have fixed the code above.

'Change this code you added to suit if needed but leave 'url' as url and don't replace it with your URL

OK, well the site idea is cool, but its a fairly simple style, not really adventurous but it works, just a query, why the green? You have done well on the content, its obviously jammed with info which is great. Where do you promote it? Well done, top effort my son, a worth 8/10 in my books.

Hi again guys!

For some reason, it duplicates a corner I think and also the bottom part of the strip is kinda messed up...

its because of your cellpadding value

you also have to cut off the rounded corner on the strip image or use the two cell method above