Jump to content

Final (hopefully) design for my site.


DarkWater

Recommended Posts

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. ;)

Link to post
Share on other sites

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? >_<

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

- 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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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. >_>

Link to post
Share on other sites

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

Link to post
Share on other sites

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. :P 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.

Link to post
Share on other sites

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:

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.