Feedback and advice on first draft

Hi everybody,
I’ve been following css-tricks.com for some time now, I’ve learned a lot but I’m still a big noob so please don’t be too hard on me :|
This is a first draft of what will become my personal site/blog. It’s flawed, it loads slow and it’s incomplete (especially the sidebar). Anyway I think the first thing I’m going to do is replace the big logo (although I’m very proud of it, I created it!! :D )

PS: I don’t have IE6 but I think it will look messed up on it :? I think I’m going to create a seperate stylesheet or change the layout to a fixed width for all browsers, I did not decided yet, suggestions welcomed.

PS(2): You probably noticed that there is no navigation. Initialiy I used intentionnally ugly CSS sprites positionned on the right of the logo (in the empty space) but I removed them because they were really too ugly and the page loads slow enough like this… I might create small css tabs or recreate the sprites so they are lighter, not decides yet either…

If you want to test in IE there is a program call IETester which tests from IE5.5 to IE8B1 I use it all the time for testing sites. The big logo at the top is nice it just needs to have more to it, it is sorta plain and boring.

A few things to consider:
1. Contrast: A lot of new designers (myself included) tend to forget about people with color deficiencies. The color of the text isn’t bad but try looking at in a black and white environment maybe just take a screen shot and turn it black and white and see what happens. I don’t know how big of a problem this is for your site but you might consider using a lighter color for the text.

2. The headings/titles for the posts need to be larger. Being the same size as the text can be a problem especially if the user doesn’t perceive the slight difference of color in the heading from the body (not the text but the area around the text).

You can consider yourself a noob but really any good designer is always learning and never truly knows everything. I myself am not a designer but I am learning.

Thanks a lot for the small review. I’m glad you think "it isn’t bad at all", it’s a first for me :lol:
I don’t use Windows anymore, now I’m only on OS X and Ubuntu, so I can’t really use IETester. However I used browsershots.org to take some screenshots on IE 5 , 5.5, 6 and 7. As I expected it looks different, but it looks less messed up than I expected :) this is the link to the screens.

Regarding the contrast, I tried to change the mode to Grayscale, to set the Adjustments to Black & White and to Desaturate and everytime it looked fine to me :? ; I tried this on my mac only. In that design I try to use as few colors (and/or color ranges) as possible to keep it very simple. If you really think that the colors might be an issue for the color blind can you please send me a screenshot of what it looks like on your computer so that I know what you exactly mean please? What I could eventually do is use a lighter color for the posts title background, but I’m afraid that will break the design; I want to keep it dark and simple. What I might also do is increase a little bit the title’s font size, the letter spacing and the height of the little title box.

I am also encountering some problems with the design: did you notice that there is a horizontal scrollbar? It appeared when I moved the header out of the wrapper and changed its width to 100% . Do you have any idea on how I can fix this please? Also, as I said before, the page loads really slowly. Does that have to do with the way I used CSS/HTML or it’s just because of the size of the images? The body background loads really slowly in particular, it’s strange. I use a 3*3 pixels small image that is tiled vertically and horizontally which size is 45 bytes (it says 4KB on disk but I’m pretty sure the actual size is 45bytes..) .

Anyway, thanks again for the comments, any other comments/critics/suggestions are welcomed, I love to learn and am redo the whole thing from scratch if necessary :D

Looks good, my only thing is the font on the right sidebar is so tiny :(

I like the click action on the logo, I suggest you make it a hover state too.

Also, what are you going to do for navigaiton? I realize this is a first draft, but have you though about how to incorporate it into this design?

Browsershots.org is pretty good for getting compatibility issues, the only thing is you kinda need a live version of IE to work with so you don’t have to wait to get your screenshot and than figure out exactly what the heck is causing the IE messups.

You might find some of these things interesting on getting IE6 on your computer:

Getting IE6 On Your Mac
I personally use Multiple IEs, but I’m a PC user, so I don’t know how it works with Mac/Linux, actually I think it doesn’t, but there has to be some solution for mac users to have availability to IE6!

thanks css girl. When you saw the site the sidebar was not styled yet, I was hesitating a little bit but I updated it now and I think it looks pretty good (according to my standards; it looks … not so good compared to most of the site that are submited in the forums, I think).
I also thought about the navigation. It’s kind of hard to implement something that will look good and will not ressemble all the other blogs out there. For this reason I decided I am not going to use tabs unless it’s my only option. I thought of something cool, I’m trying to create it now, we’ll see if it looks cool or not in the end. I created a little schema to explain how it will work. I started coding it but I’m getting weird results. If you have any suggestions on how to do this please don’t hesitate. Also if you don’t understand my handwritting, tell me and I’ll type it on the my computer (and I’ll create a small wirefram to show better how it works).
Once again if you have any suggestions, critics, insults..anything regarding my site please don’t hesitate.

Note: the HTML code actually contains some php code. Please don’t pay attention to it, I’m still learning php and I won’t be using that code anyway.
Note 2: You will see comments with {{{ and }}} in it. I use those commands to fold my code (I use jEdit).

Why not just give the ul the navigation ID instead of wrapping the whole ul in the div?

Same here:

Code:

Lorem ipsum dolor

You can have that same effect without wrapping the h3 in the div, by just applying the title class to the h3.

Also yo have a lot of <div class="clear">&nbsp;</div> in there. If the CSS is decent you shouldn’t need so many clears between divs. Also, when you do use a <div class="clear"></div> you don’t need the &nbsp; in there.

Did you hard code in the content or is it auto generated by a CMS? If you hard coded it, you’re paragraphs should theoretically be wrapped in a p tag individually and not seperated by a few <br />s.

Another example of a lot of divs:

Code:

Lala lala

-content-

Instead of wrapping that in three dvis there should be a much simple way to do that with maybe one div.

Thanks a lot for the little review, the critics and the advices! Very helpfull. I will reduce the number of divs and fix the clear div as soon as I have a minute free. It’s weird because I’ve never inserted &nbsp; in any clear div. I hard code everything for the time being, not using any CMS. I will convert this design to a wordpress theme soon though.
Also I’m glad you liked the nav menu :D I’ve put some energy into it. The little diamond shaped one with the flames is used to seperate the nav into two: on the left the icon that have their label on the right and on the right the icons that have their label on the left. The little diamond itself is a reference to two things: 1- the movie hackers, hence the name of the list item/icon : Crash and Burn, and 2- It’s the logo of Massive Attack, which is the best trip hop band that exists imho.
Finally, the <br /> tags. They’re generated with php. Basically I created a small php script to simulate a blog system, and this script converts the returns (when I press enter in a text area) into <br /> tags. This problem won’t really be a problem since I’m going to use WordPress for the blog, so no more <br /> tags.

I will try to improve my code asap and then I’m going to convert that into a wordpress theme so that I can use it in my whole site :D
Anyway, thanks a lot for the review, I really appreciate it.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.