Final (hopefully) design for my site.

[DarkWater]

Okay, I still wasn't too pleased with the "new" layout I made.  I worked on this one and I'm actually really content with the way it turned out.  The colors are nice, the text is easy to read, and the layout uses percentages so it looks great on big monitors and small(er) ones.

 

http://www.phpspeaks.com

 

Does anyone have any suggestions or comments?

 

P.S: The XHTML and CSS validate.

P.S.S: The menu looks like shit in Internet Explorer (even IE8).  I have no idea why, and I quite frankly don't care why.  If they want to read my blog, they'll use a real browser or live with it.  I think it's fair enough to have that mentality on a personal blog.

[waynew]

Did you know that in the last one, out of 9641 users who visited one of my websites, 72.08% of them were using IE Explorer?

 

There is definately some kind of problem with the layout in IE.

[DarkWater]

Yeah, I know there's a problem, I just can't figure out how to fix it right now and I don't really have the time.  I could play around with it eventually, but until then, they can use a better browser.  But do you have any other suggestions? >_<

[waynew]

I do like the colour scheme. Its easy on the eyes. I like the logo as its pretty simple yet not too boring. In IE, the header Some Post is very very large. Is it meant to be that way? Also, About me sections usually tend to be on top, but different strokes for different folks and all that jazz I suppose.

[DarkWater]

I do like the colour scheme. Its easy on the eyes. I like the logo as its pretty simple yet not too boring. In IE, the header Some Post is very very large. Is it meant to be that way? Also, About me sections usually tend to be on top, but different strokes for different folks and all that jazz I suppose.

 

The whole design is messed in IE.  The About column dropped down to the bottom and it's just skewed in general.  View it in FF.  The About part is the 3rd column and not on the bottom.

[waynew]

Oh right. Looks good in FF. Man, your website could be a museum for the differences between the two browsers.

[DarkWater]

Looks much better in FF, right? xD  Any other comments?

 

P.S: It totally could be a museum for that.  It's pretty funny actually.

[waynew]

I think that if the background colour of the footer was the same as the banner (dark dark grey) it would look better.

[nrg_alpha]

- DarkWater, I like this look the best of all versions you have proposed. As other have said, the colour scheme works well for the eyes.

 

- With regards to IE, even though I dislike IE (immensely), as waynewex mentioned, IE is the biggest chunk of users out there. I would make it a practice to take some extra time while in the development stages of a site to make it run as good as possible in IE (while IE in general is terrible, admittedly IE 8 is starting to render pages more correctly, as they have bolstered CSS support and are making their browser more W3C compliant). To shun IE is to in effect walk away from the largest user base (unfortunately).

 

- I noticed that the bullet list in the center column is slightly strange (speaking specifically with regards to the Comments column). Even in Firefox, the bullet point graphic (small discussion baloon) doesn't line up well with multi-lined entires. I looked into your code, and noticed you are using <ul> and <li> tags for this construction. I would recommend having a look at definition lists <dl> which can contain definition terms and definition descriptions.. I find that listing items in the fashion you have done works much better when constructed with <dl>,<dt> and <dd> tags instead.

 

- There's no search 'go' button (or of something equivalent)?

 

- I think I would put the 'about' section in tab in the top menu, thus freeing up space on the home page for more valuable info.

 

Overall though, in general, I am liking this version the most.

 

Cheers,

 

NRG

[DarkWater]

1) I'll fix IE eventually; it's a personal blog.

 

2) I'll work on that, as I noticed it too with multi-line entries.

 

3) I'm adding Javascript for that, with a submit button in <noscript> tags (check out the source, the second part is implemented already)

 

4) Maybe.

[DarkWater]

Does anyone else have any suggestions before I start coding the actual application?

 

@nrg_alpha: I'm going to fix the list bullet soon, I just haven't gotten around to it yet.  And I think I'm going to keep the About Me because I feel like keeping it on every page.  Maybe, after I get it up and running though, I'll make an About page and add something else to that right column, like pictures or something.

[nrg_alpha]

It's your site, your call

[DarkWater]

It's your site, your call

 

Any other suggestions though? xD  I probably will end up changing the About column, but there's time for that later.

[nrg_alpha]

I think the only other thing that stands out is your footer.. not sure as to the categories in this section.. but I did a quick mockup of how I would handle the footer (don't mind the 4 colour crappiness of the image).

 

This would streamline your footer, resulting in a much thinner one. As it is, I feel your footer is large. Having a format similar to the screenshot, nice and centered would be more appealing to the eye IMO.

[DarkWater]

Well, those categories are just examples.  There's going to be a lot more categories once I get it all going.  Also, the footer was supposed to be large so that it's a major element of the page.   I'll play around with centering it though and see if I like it.

[travisnapoleansmith]

I think I know why the menu is not going left to right in IE.  I believe in IE if you use an ul tag - unordered list all items in the list, the LI - list items - go from top to bottom.  Similar to using a bullet listing in a word processor like Word. Try using a div inside of another div to get it to go left to right.  That might help the problem out a little bit.

 

Travis

[DarkWater]

I used display:block; and float:left; on the <li> tags.  It should be displaying in IE as it does in Firefox and every other browser.

[travisnapoleansmith]

That is not the problem; LI means a list item it can be found in an ordered or unordered list.  This makes a list in the browser window.  This list goes from top to bottom like a shopping list.  If you want the items to go horizontally use a div for each menu item or created a nested ul like i have below:

 

<ul>

  <ul>

      <li> first menu item </li>

  </ul>

  <ul>

      <li> second menu item </li>

  </ul>

</ul>

 

This will work in all browsers.

 

Travis

 

I was just reading up on this at http://www.peachpit.com/guides/content.aspx?g=webdesign&seqNum=234 in your css file try using li { display: inline; } instead.  It might fix the problem.

[DarkWater]

I use float: left; to make them horizontal.  I've made menus like this before, and they usually work in IE.  Idk why this one doesn't work though; I'll get around to fixing it soon.  Any other suggestions?  Please use Firefox when you look at it for suggestions though.

 

EDIT: Tried display: inline; and it changed nothing. >_>

[ionik]

a ul list should display the same in both browsers using the following css

 

.ul

{

  list-style: none;

}

 

.ul li

{

    float: left;

    margin: 0 2px 0 2px; // change to whatever u need it

}

 

then the html

 

<ul class="ul">

  <li>Item</li>

  <li>Item</li>

  etc etc...

</ul>

 

What i use all the time never have problems

[DarkWater]

I removed the About column and added some pictures from my camera.  I think it actually added a bit more interest to the main part of the page.  Any new suggestions?

[DarkWater]

Switched the two side columns as well to separate the text a bit.  I like it much more now.

[JasonLewis]

Looks good. Although your mixing between sans serif and serif fonts. Sure, you can do it, but I think you should pick one and be done with it. Personally, Sans Serif fonts are better for the web.

 

For some reason, when I use IE to view it on your server it screws up. I downloaded your site because I was going to attempt to fix it. When I opened it up in IE on my localhost it looks fine. Strange.

[DarkWater]

I used serif for the headings. =P  Serifed fonts are okay for headings imo.  And really, it looks okay in localhost?  That's so strange, considering there's no PHP or anything. o_O  Damn you, Internet Explorer. D:

[JasonLewis]

Yeah I suppose, it does look kind of awesome.

 

But yeah. It looks the same in both IE and FF on my local machine. So, I have absolutely no idea what's wrong with it.