The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Feedback and advice on first draft

  • # September 18, 2008 at 5:44 pm

    Hi everybody,
    I’ve been following 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 )

    Here is the temporary url:

    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…

    Aziz Light

    # September 19, 2008 at 1:08 am

    Very interesting. It isn’t bad at all.

    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.

    # September 19, 2008 at 4:48 am

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

    PS: did you try to click on the logo ? :lol:

    Aziz Light

    # September 19, 2008 at 9:21 am

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

    # September 20, 2008 at 5:45 pm

    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.

    Aziz Light

    # September 29, 2008 at 12:37 pm

    I’ve updated the first draft. Now it’s more like a second draft since it got a nivigation menu. I also added the styles for the sidebar and the footer.

    So what do you think?

    Can you give me also your comments on the actual code please?

    Here are the HTML and the CSS.

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


    # October 7, 2008 at 5:33 pm

    I like the icons/nav! Very cute :) What’s the diamond shaped one do with the flames when you hover :) ?

    Look at your code, I think you have a lot of <divs> in there. Maybe find a way not to go overboard with the div-age? For example you have:


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

    # October 8, 2008 at 7:43 am

    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.

    Aziz Light

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed