SITE REVIEW: Infomania

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Hi, I made a template for my site and I want you to review it and tell me what you think.

url: http://www.freewebs.com/elitezenith/Inf ... index.html

Thanks.
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Nice simple design there Professor Bogey. The main text is a bit dark, maybe make it a light grey or white? Also you should make the header text smoother.

You should use div instead of a table though, it's easier... if you know CSS.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

ok, thnx breeze, I'll fix the template.

BTW, is the template that good that nobody can find anything to say?
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Bogey wrote:
BTW, is the template that good that nobody can find anything to say?


I think they're just staying away for fear you'll steal their coins on Greed.

Edit: BTW, I think you should switch the background colour with the colour in the table, and use more than just blue :)
  • spork
  • Brewmaster
  • Silver Member
  • spork
  • Posts: 6299
  • Loc: Seattle, WA

Post 3+ Months Ago

Breeze wrote:
BTW, I think you should switch the background colour with the colour in the table, and use more than just blue :)


Agreed. I like the simplistic design, but all the blue is a bit much, and the red buttons don't seem to fit in (color-wise) with the rest of the page.

Overall, a nice start.
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Yep. Find a nice design and play around with it until it's perfect.
  • find webster
  • Born
  • Born
  • find webster
  • Posts: 3

Post 3+ Months Ago

Great site...nice design
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I just don't like the header image, it looks a bit pixelated, or stretched rather ...
Image
As you can see the colour of the menu isn't quite the same as the background, but that's in IE7 and IE's colours seem to be a bit off or something ...

Also 40 w3c validation errors ... click here to see them in action ...

Maybe also disable the link of the page that the user is on, and make it another colour ...
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 483

Post 3+ Months Ago

The menu text seems to be a bit small and cramped up (maybe I'm the only one who thinks so)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

THanks, I took all of the advice into consideration and I will change the background color to blood red and darken the blues and make the font another color.

I'll see what I can do to fix the validation errors, I want my site to be 100% validable. Thanks for all of the reviews, more would be greatly appreciated.

Yes Righteous_trespassor, just for you I will disable the link that the users would be on :).

Thanks and more would be greatly appreciated.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

Bogey wrote:
Yes Righteous_trespassor, just for you I will disable the link that the users would be on .

Thank you, you know I always complain about that ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

I updated the index file only and I didn't bother with the others right now since they all look the same (until now).

The navigation buttons is just a test, I'm going to remove them and make my own buttons.

Is the text readable (at home page)?

Righteous_trespasser I didn't disable the link on the test, but I will on the other REAL buttons that I'm going to put there.

Thanks.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

Yeah that's nice and readable ... I also think the red is nicer than just blue ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

I would need help on the buttons though. My photoshop quit working, I re-installed it and it still doesn't work.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

That sucks big time ... How do you need help with the buttons?
  • tay_ay
  • Student
  • Student
  • User avatar
  • Posts: 84

Post 3+ Months Ago

i think you should change all colors. try 3-colors
and choose some relevant and smoother colors

i am not an expert but as a user i think this kind of sites are much more easy on eyes.

i hope this helps
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

righteous_trespasser wrote:
That sucks big time ... How do you need help with the buttons?


I does, I need some one to make a button for me (I'll give the specification if anybody volunteers VIA PM.)

Thank you.

WARNING: This is not a job offer, I wouldn't pay for anybody to make the buttons. I'll give credit though if the person who made the buttons has a site.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

tay_ay wrote:
i think you should change all colors. try 3-colors
and choose some relevant and smoother colors

i am not an expert but as a user i think this kind of sites are much more easy on eyes.

i hope this helps


Which colors do you suggest?
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

When you get your ImageReady or Photoshop working try the colors: (#29385c bgcolor) (#7986a6 table/div color)(white or #9caacf for links). And the top banner I don't think you should have the browser interpret the height/width, make it the full size or something, because it's pretty stretched.
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

Here I redid your banner are here's what I got, It's just an idea though.
http://farm2.static.flickr.com/1104/531067893_72880e94ae.jpg?v=0
It has several versions of the text in different places to add a little variety so you can see how it looks in different places.

/* Edit: You will have to make it shorter and longer(height/width) to fit what you want though */
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

murcielagossi wrote:
Here I redid your banner are here's what I got, It's just an idea though.
http://farm2.static.flickr.com/1104/531067893_72880e94ae.jpg?v=0
It has several versions of the text in different places to add a little variety so you can see how it looks in different places.

/* Edit: You will have to make it shorter and longer(height/width) to fit what you want though */


Thanks, I'll look into it.

Any more would be great.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Also, thanks for the color advice. I'm changing them right now.
  • tay_ay
  • Student
  • Student
  • User avatar
  • Posts: 84

Post 3+ Months Ago

Bogey wrote:
tay_ay wrote:
i think you should change all colors. try 3-colors
and choose some relevant and smoother colors

i am not an expert but as a user i think this kind of sites are much more easy on eyes.

i hope this helps


Which colors do you suggest?


i think your favorite color is blue. so you shoul try to select a very dark blue, a light blue, and a contrast color
i tried these colors. they are easy on eyes and also look nice
for background : 29 - 32 - 70 (hex : 1D2046)
for borders : 190 - 239 - 151 (hex : BEEF97)
for background between borders : 110 - 160 - 206 (hex : 64A0CE)
you can use the main background color as fore color

try these colors on paint together hope you like it
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

For the menu you want to create look at: http://css.maxdesign.com.au/listamatic/ to get some ideas or just take one of the nav menus. Good luck.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

I don't like the header much.
Maybe try to edit a photo and paste text on it.

And don't let it strech, that's not good for the quality.

The colours don't fit. The red-brown combined with blue :? Maybe use some colour sheme or such.

Maybe add some photo's
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

I haven't worked on my site for some time now, but now I have re-chosen my colors and re-aligned my logo and now I have a big blue spot to the left of my logo. I want to right a centered and on the bottom text but I can't find a way to do that. Everytime I try something the main table the logo is in splits.

The url is: http://www.freewebs.com/elitezenith/Inf ... Index.html

righteous_trespasser, you may do the buttons for my site. I'll show how I want them to look. I did them already, but the only thing that stops me from uploading them to my site is that the transparencies aren't there.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Should I make my links as text? I mean, just regular links not images or anything? Although I'd like the images I made (not really "made" but used the template from Adobe Fireworks).
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I like it without the stretch much more (the logo) ... and In my opinion text links are great, because they get search engine spiders to crawl the whole of your site, you can make those image rollovers with text links on top ... with some simple css ... If you don't know how, I'll be glad to help out ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Please help me out righteous_trespasser (I'm still trying to learn how to spell your name right without peeking :)). I tried simple rollover textual links, but the rollovers don't work and the links are an ugly blue on the blue background.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

firstly for the links in the stylesheet you'll have something like:
Code: [ Select ]
/* so this is the first part that defines all the links in the document */
a
{
font-weight:normal;
color:#000000;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a:link
{
border:0px;
font-weight:normal;
color:#000000;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a:visited
{
font-weight:normal;
color:#000000;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a:hover
{
font-weight:normal;
color:#000000;
text-decoration:underline;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}

/*then let's say we have different colour links for the menu/navigation */
/*we'll then give them a class called "menu" */

a.menu
{
font-weight:normal;
color:#444444;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a.menu:link
{
border:0px;
font-weight:normal;
color:#444444;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a.menu:visited
{
font-weight:normal;
color:#444444;
text-decoration:none;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
a.menu:hover
{
font-weight:normal;
color:#444444;
text-decoration:underline;
font-size:12px;
font-family:arial,helvetica,sans-serif;
}
  1. /* so this is the first part that defines all the links in the document */
  2. a
  3. {
  4. font-weight:normal;
  5. color:#000000;
  6. text-decoration:none;
  7. font-size:12px;
  8. font-family:arial,helvetica,sans-serif;
  9. }
  10. a:link
  11. {
  12. border:0px;
  13. font-weight:normal;
  14. color:#000000;
  15. text-decoration:none;
  16. font-size:12px;
  17. font-family:arial,helvetica,sans-serif;
  18. }
  19. a:visited
  20. {
  21. font-weight:normal;
  22. color:#000000;
  23. text-decoration:none;
  24. font-size:12px;
  25. font-family:arial,helvetica,sans-serif;
  26. }
  27. a:hover
  28. {
  29. font-weight:normal;
  30. color:#000000;
  31. text-decoration:underline;
  32. font-size:12px;
  33. font-family:arial,helvetica,sans-serif;
  34. }
  35. /*then let's say we have different colour links for the menu/navigation */
  36. /*we'll then give them a class called "menu" */
  37. a.menu
  38. {
  39. font-weight:normal;
  40. color:#444444;
  41. text-decoration:none;
  42. font-size:12px;
  43. font-family:arial,helvetica,sans-serif;
  44. }
  45. a.menu:link
  46. {
  47. border:0px;
  48. font-weight:normal;
  49. color:#444444;
  50. text-decoration:none;
  51. font-size:12px;
  52. font-family:arial,helvetica,sans-serif;
  53. }
  54. a.menu:visited
  55. {
  56. font-weight:normal;
  57. color:#444444;
  58. text-decoration:none;
  59. font-size:12px;
  60. font-family:arial,helvetica,sans-serif;
  61. }
  62. a.menu:hover
  63. {
  64. font-weight:normal;
  65. color:#444444;
  66. text-decoration:underline;
  67. font-size:12px;
  68. font-family:arial,helvetica,sans-serif;
  69. }


Now that we have our links in place we need to add a hover event for the table cells we're targeting ... so let's say you have two images (normal.gif and mouseover.gif) ... we now give a class element to the cells that we want to show these rollovers on ...
Code: [ Select ]
/* so we're calling the class "nav" */
td.nav
{
background-image:url('images/normal.gif');
width:100px;
height:25px;
margin:auto;
}
td.nav:hover
{
background-image:url('images/mouseover.gif');
width:100px;
height:25px;
margin:auto;
}
  1. /* so we're calling the class "nav" */
  2. td.nav
  3. {
  4. background-image:url('images/normal.gif');
  5. width:100px;
  6. height:25px;
  7. margin:auto;
  8. }
  9. td.nav:hover
  10. {
  11. background-image:url('images/mouseover.gif');
  12. width:100px;
  13. height:25px;
  14. margin:auto;
  15. }

please note that the widths and heights above are targeted to the table cell and not the image ... if you want to change the values of the images you can add:
Code: [ Select ]
td.nav img
{
height:100px;
width:25px;
}
  1. td.nav img
  2. {
  3. height:100px;
  4. width:25px;
  5. }

now that we have the stylesheet set up, next thing we'll do is edit the html ... we now have to remember that the table cells where we want the rollovers to happen must have a class called "nav" and for the menu we have a link class called "menu" ... so in the following code I'm just going to show that part of the code ...
Code: [ Select ]
<tr>
<td class="nav">
<a class="menu" href="#">HOME</a>
</td>
<td class="nav">
<a class="menu" href="#">INFORMATION</a>
</td>
<td class="nav">
<a class="menu" href="#">SOMETHING</a>
</td>
<td class="nav">
<a class="menu" href="#">SOMETHING ELSE</a>
</td>
<td class="nav">
<a class="menu" href="#">OTHER</a>
</td>
<td class="nav">
<a class="menu" href="#">CONTACT INFO</a>
</td>
</tr>
  1. <tr>
  2. <td class="nav">
  3. <a class="menu" href="#">HOME</a>
  4. </td>
  5. <td class="nav">
  6. <a class="menu" href="#">INFORMATION</a>
  7. </td>
  8. <td class="nav">
  9. <a class="menu" href="#">SOMETHING</a>
  10. </td>
  11. <td class="nav">
  12. <a class="menu" href="#">SOMETHING ELSE</a>
  13. </td>
  14. <td class="nav">
  15. <a class="menu" href="#">OTHER</a>
  16. </td>
  17. <td class="nav">
  18. <a class="menu" href="#">CONTACT INFO</a>
  19. </td>
  20. </tr>

So now that part will have table cells with "normal.gif" for background-images, and when we hover over any part of the cell the background image becomes "mouseover.gif" and the links in those cells are the colour "#444444" where the rest of the links in the page are "#000000" ...

I'm really sorry if I am talking to you like you know nothing ... I do tend to do this because I have two smaller brothers and a little sister, so it becomes a habbit that not everyone likes ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Actually, it was easy to implement. That you so much Righteous Trespasser, you helped me out a lot right now. I'll work on the images right now :).
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Okay, now how do I make the whole image clickable? I mean the background that changes on roll-over, or is it impossible? If it's impossible than I guess I can live with it (somewhat :)).
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I don't think you can do it like that, I think that is the only way to make those links text links ... otherwise you'll have to go back to just plain rollover images, but then they won't be as SEO friendly ... I don't know if anyone else knows of a way, but I don't unfortunately ... maybe you should post it as a question in "website design" forum ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Ok, I will post that as a topic on "website design". Thanks for your help RT. You can check my site right now. THe menu links are a bit of a demo. You can give me some advices on how to make the links better.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

The top one doesn't have a black stripe up top yet ... and maybe you could preload the images for slow internet connections ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

righteous_trespasser wrote:
The top one doesn't have a black stripe up top yet ... and maybe you could preload the images for slow internet connections ...


Okay
  • Majik_Imaje
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Point Hope Alaska

Post 3+ Months Ago

But is this in development? nothing works ? I do ike the colors but it appears you are either starting it all over because . nothing seems to be written in the big fields of pre-pasted text for layout ? I am confused at the request for a review. I would want to see a site that is working. not a template page still underconstruction.. nice job though.!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Ok, Majik_Imaje. I guess that is the reason not many people give me the review but I just wanted to do it one thing at a time. The menu seems to be done to my liking but I don't know what you guys think. I posted a topic asking for help on Website Design but no body answered to it yet (to the latest post on it I mean). I don't know if the colors are still agreeable and don't make people blind because I have a hard time figuring out which color to use (for the text) that would make reading the content easy. I want my site to be eye appealing and have useful information on it as well.

The pre-pasted text is a Latin filler.

I also have to make a little request. Can someone convert the site from <TABLE>s to CSS? I'm not good enough with CSS to do that, although I'll give it a shot. That would be great if someone can do it for me.
  • Majik_Imaje
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Point Hope Alaska

Post 3+ Months Ago

well I do know that you can make the background clickablel if you are using Dreamweaver.. I know how to do that.. on any image or make any image turn into anothr image (roll over) Dreamweaver is fun to use and easy to get the hang of..
  • Kiwipulse
  • Novice
  • Novice
  • Kiwipulse
  • Posts: 16
  • Loc: Montreal

Post 3+ Months Ago

I can tell you that you need to work on it more! It such a empty template to me. I dont like the dark blue color, I feel agressed and it give me a big headache. Maybe another template will do the job. But if you keep working on this template, you should then change the dark blue to a lighter color, or change yours texts to white. Hope it help :D
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Majik_Imaje wrote:
well I do know that you can make the background clickablel if you are using Dreamweaver.. I know how to do that.. on any image or make any image turn into anothr image (roll over) Dreamweaver is fun to use and easy to get the hang of..


I don't have Dreamweaver (I used up my 30 day trial already). Can you help me? It is in CSS on HEAD. You can view my source and see what I'm talking about.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

I was at my friends house and used their laptop which uses IE6 to view the internet. I checked my site on it and it was messed up. The top table was messed up and the navigation table was spread out. The status bar said that there was an error so I double clicked on it and found out that the error consisted of the 1st character which is a space (or the "<" for the <!DOCTYPE...). Can somebody help me out on fixing it?

(P.S. Can somebody convert my site into full CSS rather than my TABLES?)

(P.S.S. How about the menu background clicability?)

Post Information

  • Total Posts in this topic: 42 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 1 guest
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2016. Ozzu® is a registered trademark of Unmelted, LLC.