15 replies [Last post]
ZirconCode
ZirconCode's picture
Offline
newbie
Japan
Last seen: 13 years 31 weeks ago
Japan
Timezone: GMT+5
Joined: 2008-12-13
Posts: 6
Points: 0

I need opinions on my very first site:
http://www.zirconcode.com/

Please don't rate the text content as there is none (none worth rating Smile ).

I tested it in IE 7 and Firefox 3. According to BrowserShots it should look the same on all browsers except for IE 4 and IE 8. In IE 8 the last menu item is lower than the others. Just tell me if it looks strange on your browser.

The CSS (http://www.zirconcode.com/style/style.css):

/* All */
body
  {
	background: #110044;
	background-image: url(pictures/code.png); 
	margin: 0;
	padding: 0;
	text-align: center; 
	/*height: auto;*/
	/*width: 800px;*/
  }
 
/* All - Container */
div.all
  {
	background: #9999ee;
	background-image: url(pictures/border.png); 
	margin: 0 auto 0 auto;
	text-align: center;
	/*margin: 0;*/
	padding:  0;
	width: 800px;
	/*border-width: 2px;*/
	/*border-style: solid;*/
	/*border-color: #ffff00;*/
  }
 
/* Header */
div.header
  {
	margin: 0 50px 0 50px;
	width: 700px;
	height: 100px;
	padding: 15px 0 0 0;
	/*border-width: 1px;*/
	/*border-style: solid;*/
	/*border-color: #ffff00;*/
	/* background: #00ff00; */
	/*clear: both;*/
  }
 
/* Header/Title */
div.title
  {
	/*position: absolute; left: 250px;*/
	/*float: right;*/
	height: 100%;
	width: 100%;
 
	font-size: 25px;
	background: #000099;
	color: #9999ff;
	text-align: center;
 
	margin: 0;
	padding: 0;
	/*background: #660066;*/
	background-image: url(pictures/title.png); 
  }
 
/* Main Container (body text) */
div.main
  {
	padding: 35px;
	background: #e5e5ff;
	border-width: 1px;
	border-style: solid;
	border-color: #000066;
	margin: 35px 65px 15px 65px;
	/*min-height: 100%;*/
	/* padding 35*2 + border 1*2 + margin 15*2 = 102*/
	/* 800-102 = 698 */
	width: 598px;
 
	/*float: left;*/
	/*overflow: scroll;*/
	color: #000066;
	text-align: left;
  }
 
div.main div.welcome
  {
	display: block;
	height: 50px;
	width: 550px;
	background: #c5c5ff;
	color: #000000;
	/*overflow: hide;*/
	padding: 20px;
	margin: 0px 0 10px 0;
  }
 
div.main code
  {
	display: block;
	height: 200px;
	width: 550px;
	background: #eeeeee;
	color: #000000;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	overflow: scroll;
	padding: 20px;
	margin: 10px 0 10px 0;
  }
 
div.main a
  {
	color: #cc00cc;
	text-decoration: none;
	text-decoration: underline;
  }
 
div.main a:hover
  {
	color: #0000cc;
  }
 
 
div.main table
  {
	border: 1px solid #000066;
	color: #000066;
  }
 
div.main td
  {
	border: 1px solid #9999ff;
  }
 
div.main tr
  {
	border-top: 1px solid black;
  }
 
div.main p
  {
	text-indent: 30px;
  }
 
div.main h1, div.main h2, div.main h3, 
div.main h4, div.main h5, div.main h6
  {
	color: #880099;
	font-style: italic;
  }
 
div.main hr
  {
	height: 1px;
	color: #000066;
	background-color: #000066;
	border: 0;
  	width: 80%;
  }
 
div.main ul
  {
	list-style-image: url('pictures/list.bmp');
  }
 
/* Feed Burner Blog */
div.feedburnerFeedBlock ul
  {
	list-style: none;
	margin: 0;
	padding: 0;
  }
 
div.feedburnerFeedBlock span.headline
  {
	font-size: 16px;
	font-weight: bold;
  }
 
/* Footer */
div.footer
  {
	padding: 5px 0 5px 0;
 
	margin: 0 50px 0 50px;
	width: 700px;
 
	/*text-transform: uppercase;*/
	font-size: 12px;
	background: #000099;
	color: #9999ff;
 
	border-width: 0px 0px 10px 0px;
	border-style: none none solid none;
	border-color: #e5e5ff;
 
	text-align: center;
	/*float: left;*/
  }
 
/* Menu Container */
div.menu
  {	
	/* background: #eeeeee; */
	/*clear: both;*/
	float: left;
 
	/*margin: 0;*/
	padding: 0 50px 0 50px;
 
	margin: 0;
	width: 700px;
 
	/*height: 25px;*/
 
	/*background: #ff0000;*/
 
	/*border-width: 0px 0px 3px 0px;*/
	/*border-style: none none solid none;*/
	/*border-color: #000099;*/
 
  }
 
/* Second Menu Container (invisible) */
div.menu ul
  {
	width: 100%;
 
 
	/*float: left;*/
	padding: 0;
	margin: 0;
 
	/*border-width: 1px;*/
	/*border-style: solid;*/
	/*border-color: #ffff00;*/
 
	/*background: #ff0000;*/
 
	list-style-type: none;
  }
 
/* Item in Menu */
div.menu li
  {
	width: 100%;
 
	/*border-style: solid;*/
	/*border-width: 1px;*/
	/*border-color: #ffff00;*/
 
	padding: 0;
	margin: 0;
	display: inline;
	/*float: left;*/
  }
 
/* Link in Menu */
div.menu a
  {
	/*list-style: none;*/
	display: block;
	float: left;
 
	margin: 0;
	padding: 0;
	/*border 1*10 = 10*/
	/*800-10=790*/
	/*790/5=158*/
	width: 139px;
	height: 20px;
	text-decoration: none;
 
	border-style: solid;
	border-width: 0 1px 0 0px;
	border-color: #000066;
 
	text-align: center;
	background: #66aaff;
 
  }
 
div.menu a.two
  {
	width: 279px;
  }
 
div.menu a.last
  {
	width: 140px;
 
	border-width: 0 0px 0 0px;
  }
 
div.menu a:hover
  {
	color: #66aaff;
	/*border-style: solid;*/
	/*border-width: 1px;*/
	/*border-color: #66aaff;*/
	background: #000066;
  }

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Honestly?

Here is my honest opinion. I am NOT trying at all to be mean. But when I opened and saw it for the first time in the first half a second, I thought 1993.

Maybe read some design trend articles.
http://www.webdesignerwall.com/trends/best-of-css-design-2008/

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's too hard to

It's too hard to differentiate where one post ends and the next begins on the home page, particularly as there's no gap between the last sentence and the following heading.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

ok

1. Your title is not SEO friendly.

2. Your title doesnt need to be in a div. This should be an

<div class="title"></div>

3. Your menu doesnt need to be in a div. Just style the UL.

4. The welcome text also doesnt need to be inside a div, this could be a

.

5. should not be there. Use margins instead.

6. Need to work on typography and margins more. Its hard to see where posts begin and end.

7. You need some line-height in there. Lines of text are too close. I mostly will use something like line-height: 1.3; or something.

8. Your post titles should be an element like or something.

9. the blue hurts my eyes to look at. It's not very inviting.

ZirconCode
ZirconCode's picture
Offline
newbie
Japan
Last seen: 13 years 31 weeks ago
Japan
Timezone: GMT+5
Joined: 2008-12-13
Posts: 6
Points: 0

Thanks!

Deuce wrote:

Here is my honest opinion. I am NOT trying at all to be mean. But when I opened and saw it for the first time in the first half a second, I thought 1993.

Maybe read some design trend articles.
http://www.webdesignerwall.com/trends/best-of-css-design-2008/

Thanks Smile ! I guess I hope that theres a chance that you mean that my website is too bland. The backgrounds are simple colours while on the 2008 design trends theres pictures everywhere (or nowhere for a simple design). I'll try to find something which takes away those boring background colours. Any suggestions?

Tyssen wrote:

It's too hard to differentiate where one post ends and the next begins on the home page, particularly as there's no gap between the last sentence and the following heading.

Thanks Again Smile ! I fixed it.

CupidsToejam wrote:

1. Your title is not SEO friendly.

2. Your title doesnt need to be in a div. This should be an

<div class="title"></div>

3. Your menu doesnt need to be in a div. Just style the UL.

4. The welcome text also doesnt need to be inside a div, this could be a

.

5. should not be there. Use margins instead.

6. Need to work on typography and margins more. Its hard to see where posts begin and end.

7. You need some line-height in there. Lines of text are too close. I mostly will use something like line-height: 1.3; or something.

8. Your post titles should be an element like or something.

9. the blue hurts my eyes to look at. It's not very inviting.

Thanks Again Again Smile !

1. I looked at this article http://blog.convurgency.com/656/how-to-make-seo-friendly-title-tags/ and my titles seemed fine. Sorry, I can't see your point :?

2. I don't have a site title, it's a picture. Is that what you meant with SEO friendly?

3. Fixed It Smile .

4. Fixed It Smile .

5. Fixed It Smile .

6. Not sure if I fixed it Yet, I'm looking for a nice font.
edit: I assigned a specific font style for everything. It looks a lot cleaner, Thanks!

7. Fixed It Smile .

8. Can't Fix It Sad . I'm using FeedBurner to import my Blogger Blog. The FeedBurner Format: http://www.google.com/support/feedburner/bin/answer.py?answer=78991.
I'm using:
<script src="http://feeds.feedburner.com/DevelopmentDiary?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/DevelopmentDiary"></a><br/>Powered by FeedBurner</p> </noscript>

9. Is there too much blue? The wrong tones of blue? Is the background too dark? Do you suggest adding another colour? Which one?

Thanks again for all your Constructive Criticism Laughing out loud !

edit: I Removed the border (of the main body text) as I couldn't see why I put it there in the first place :?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

by "title" i mean

by "title" i mean Zircon Code. This is one of the first things the search bot sees and will index. You want this to reflect more on what the site offers. Something like this...
Zircon Code for all things XHTML, CSS, Photoshop, Adaobe. Something descriptive. Your big header image, should be the .

XHTML

<div id=header"><h1>Zircon Code</h1></div>

CSS

DIV#header {background: url(title.png) no-repeat;}

something like this. Research Image Replacement.

ZirconCode
ZirconCode's picture
Offline
newbie
Japan
Last seen: 13 years 31 weeks ago
Japan
Timezone: GMT+5
Joined: 2008-12-13
Posts: 6
Points: 0

CupidsToejam wrote:by

CupidsToejam wrote:

by "title" i mean Zircon Code. This is one of the first things the search bot sees and will index. You want this to reflect more on what the site offers. Something like this...
Zircon Code for all things XHTML, CSS, Photoshop, Adaobe. Something descriptive. Your big header image, should be the .

XHTML

<div id=header"><h1>Zircon Code</h1></div>

CSS

DIV#header {background: url(title.png) no-repeat;}

something like this. Research Image Replacement.

Thanks! I read up on Image Replacement, it's amazing (or maybe not) how many things I don't know Laughing out loud .
I fixed the tags and the actual title. I hope my title is more descriptive now.

I re-validated and fixed two CSS mistakes I made. Do you have any other suggestions for making the site look better?

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 23 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Try less saturation for the

Try less saturation for the blue bg it will be easier on the eyes

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

CupidsToejam

CupidsToejam wrote:

XHTML

<div id=header"><h1>Zircon Code</h1></div>

What's the div for?
Why not just use the h1?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

DIV stands for division. The

DIV stands for division. The header is just that. But you are correct, it does not have to be a div to work. I just believe in having things organized. I will usuall have divisions for header, sidebars, and footer.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

CupidsToejam wrote:DIV

CupidsToejam wrote:

DIV stands for division. The header is just that.

No it's not, the header tag (ie: h1) is just that.

This design requires 3 divs.

<body>
<div id="wrapper">
<h1>...</h1>
<ul id="nav">...</ul>
<div id="content">
<h2>...</h2>
<p>...</p>
...
<div id="footer">...</div>
</div>
</div>
</body>

body has the blue binary background
wrapper has the png shadows with the light blue background that repeats all the way down the page. It will also have the padding set so that all elements will fit inside the defined area
h1 will implement the image replacement technique
ul is the navigation
content is exactly necessary but can provide additional padding for the content
all h2 and p will be defined as necessary
and the footer div which will divide itself from the content and provide a different colored background as specified.

both you and the OP are making this design harder then it needs to be to code.

adding additional divs for division, just gets you into a divitis mind set. Having random unnecessary code isn't going to help anyone, especially someone new to the development side.

So far it seems like you have a grasp about what is going on, but then other times I'm not too sure. By all means, keep coming back and helping out - but if anything, do what I do when you want to help and you're not 100% sure, let the OP know that you're not exactly positive on the answer so that way the new guys don't get too confused when someone else comes along and gives them different advice.

/rant

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Deuce

Deuce, you totally misunderstood what I was saying. I dont need you saying I dont know wtf is going on. I took that as a personal attack. I was simply explaining the basic structure of a website when divs are concerned. I was not saying his website needed to be structured that way. I was simply explaining what divisions meant, and how they are tools for grouping common elements on a page. Getting the XHTML organized. when i said the header was a div, i didnt mean the . I was referring to the masthead.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

ZirconCode wrote:Deuce

ZirconCode wrote:
Deuce wrote:

Here is my honest opinion. I am NOT trying at all to be mean. But when I opened and saw it for the first time in the first half a second, I thought 1993.

Maybe read some design trend articles.
http://www.webdesignerwall.com/trends/best-of-css-design-2008/

Thanks Smile ! I guess I hope that theres a chance that you mean that my website is too bland. The backgrounds are simple colours while on the 2008 design trends theres pictures everywhere (or nowhere for a simple design). I'll try to find something which takes away those boring background colours. Any suggestions?

I wouldn't say too bland, I am a big fan of minimalism.
Keep an eye on high contrast typography, easy readability, differentiation is content areas.

Take a look at http://jasonsantamaria.com/

Very simple, yet very easy to read, navigate, and has all of the information present.

I was just pointing out what other people are doing for design, make your site your own, don't feel like you need to copy what they do.

Keep your code clean, semantic, valid, readable, and keep your users with disabilities in mind.
Make sure your font sizes can be scaled without ruining the site layout.

I think you're on a very good path, and I think with the help you will find on this site you will definitely be able to take your site to the next level.

Keep in mind what I stated above, you can minimize your code, minimize your images, and in the end minimize your load time for your time.
Keep in mind those with bad eyes, Ed will be the first in a post to yell at you for not being able to read your site, but remember, lots of people from lots of different age ranges and lots of different physical states will be visiting your site, you want to be able to welcome them all equally and let them all be able to use your site.

That, and coding your site semantically and with disabilities in mind can vastly improve your SEO within the site itself.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

CupidsToejam wrote:... I

CupidsToejam wrote:

... I took that as a personal attack. ...

Aw, you'll be alright.

mustafaquilon
mustafaquilon's picture
Offline
newbie
Chennai
Last seen: 13 years 31 weeks ago
Chennai
Timezone: GMT+5.5
Joined: 2008-12-22
Posts: 5
Points: 0

Hey there...

IIRC, Purple of all colors has the "highest" saturation levels. Hence, you see purple/blues mostly as links. Subtle shades of this color along with white can give great results. The background pattern is a distraction too.

I believe lcd screens would saturate it even more and making a text on a saturated background attractive, readable is a difficult task.

However, if you wanted to make it look like a hacker/coding site or something then the colors justify themselves and are a good place to start with. Else, sometimes the best place to start is background-color: #fff;

Some Inspiration:

http://vandelaydesign.com/blog/design/minimalistic-web-designs/

http://www.smashingmagazine.com/2007/03/26/keep-it-simple-stupid-showcase-of-simple-and-clean-designs/

http://www.smashingmagazine.com/2007/03/05/45-fresh-clean-and-impressive-designs/

Regarding the code, you have SCRIPT tags between your HEAD and BODY tags.

More later... Smile

ZirconCode
ZirconCode's picture
Offline
newbie
Japan
Last seen: 13 years 31 weeks ago
Japan
Timezone: GMT+5
Joined: 2008-12-13
Posts: 6
Points: 0

mustafaquilon wrote:coding

mustafaquilon wrote:

coding site or something then the colors justify themselves and are a good place to start with

Thats Good Smile

mustafaquilon wrote:

Regarding the code, you have SCRIPT tags between your HEAD and BODY tags.

Yes I'm trying to include this feed: http://feeds.feedburner.com/DevelopmentDiary with PHP instead of Script but every time I try to access this URL: http://feeds.feedburner.com/DevelopmentDiary?format=sigpro with PHP nothing happens. Any Ideas?

mustafaquilon wrote:

The background pattern is a distraction too.

Yes I thought so too. I turned it into a plain white background for now and it looks lots better. I'm not going to leave it at plain white but I'm not sure what to put there yet. Maybe some code in very light colors?

Deuce wrote:

Keep in mind what I stated above, you can minimize your code, minimize your images, and in the end minimize your load time for your time.

Yes I'm deffinitely going to minimize my pictures. It has never really bothered me since I have a 100mb/sec internet connection. Is there a certain format especially useful for this purpose?

Thanks Guys Laughing out loud !