About six months ago I purchased the domain name http://www.davidsissitka.com/ (That funny looking S word is my last name.) with a few intentions:

-Create a place that would allow me to keep track of my portfolio, and share it with others.
-Help me learn, if all goes well a few months from now i'll know enough about MySQL and PHP to create my own blog.
-Keep track of my favorite website designs that others have created.

Somewheres along the line I got busy, and I finally started working on the design yesterday. Anyways, here is what i've got:

URL - http://www.davidsissitka.com/images/layout.png

I really don't like the drop shadow, but if I remove it everything seems a bit out of place. The layout minus the drop shadow can be seen here:

URL - http://www.davidsissitka.com/images/alternative_layout.png

As you can see, I like simple designs. Aside from some sort of mouseover animation on the navigation (Probably changing the bottom border color and moving the arrow a few pixels over.), I think that i'm pretty much finished. Thanks for any crticism or suggestions!

I like the alternative.

The first one, the drop down shadow is a little bit of a turn off.

The background seems to be too bright. Maybe if you toned it down the actual layout would stand out more.

And I think that it looks better without the drop shadow.

Looks better with drop shadow to me.

Thanks for the replies guys!

Edit: I just got around to thinking about your replies, I think i've got something that looks better. The drop shadow was good, but it needed to be modified. The background color, I think that that was just to much green. Here's what I think that i'll be going with:

URL - http://www.davidsissitka.com/images/final_layout.png

Edited: Hrm, now the grey seems like it's a bit to much.

Looks nice, I would go with something like #dde6cf.

put that color here in

seems it fit not 100% with the green, but it give a nice pastell colorsheme ...

Thanks guys, i'll give it a shot and see what it looks like!

It's pretty much done, it took about an hour longer then expected though, Internet Explorer just doesn't like to play by the rules of relative positioning. Now i've just got to see what things look like with the alternative background color, thanks for the replies again guys!

http://www.davidsissitka.com/

I really like the way it looks without any content...and I almost ALWAYS hate designs that don't use the full power of page space - so, good job!

...however, I am very curious to see what it might look with some content in it. I think, depending on how you do it, that it might REALLY throw off the balance of the artistic design of the current page.

Thanks! I understand what you're saying, I want to try and keep things as simplistic as possible. The header is done, if anything is added to it it will be one of the Make Poverty History ribbons (One can be seen here.). The only thing i'm concerned with right now is the footer. The text in the left column seems a little bit dark, and the text in the right column seems a little bit light. I'm hoping that the gap that content leaves there fixes things, but i'm not really sure how that's going to work out.

It's funny that you use the word "artistic", when it comes to web design I probably lack more creativity then anyone you've ever met. Thanks again!

Edit: I didn't like any of the footers content, it's gone now.

Edit: Added Make Poverty History ribbon and added the necessary JavaScript to preload all of the mouseover images.

Wow that's really nice, so is the code!

How did you do the drop shadow?

Thanks a lot! The drop shadow was actually fairly simple, it consists of three images. The first one is
the header:

http://www.davidsissitka.com/images/header.png

The second one is the content, it tiles horizontally as the content expands (Check out the attachment, that is the following image with a 25 pixel height.):

http://www.davidsissitka.com/images/content.png


The third one is the footer:

http://www.davidsissitka.com/images/footer.png



Click to view attachment

Ah I see. Thanks.

Its looking great, I'd love it in blue though.

Very simple and clean, great job. Now just put some stuff in it and you're done.

1. Use a heading for the main header. (hide the text with a negative text-indent if you want to.)
2. Use a list for the navigation, and have non-image links. (non-content images = bad.)
3. Don't use JavaScript rollovers. Do #2, then just have a :hover state on the links to make a one-image rollover.

You forgot to add type="text/css" to your stylesheet-link:

Number two is out of the question, as i'm using a commercial font. However, i'll look into number one and three! Thanks!


Doh, I can't believe I missed that, i'm suprised the validator didn't go nut! Thanks!

What? You can't have a commercial font without using 'img' tags?

When people don't have the font installed, no, no you can't. It's Myriad Pro Bold, it's one of the fonts that was used in the IPB GDK, very little people seem to have it. I suppose I can try to substitute the font though.

Err, you can have images without using 'img'...
Just use an unordered list, then have block-level links with the image as their background. Much, MUCH more accessible.

Hrm, i'll give it a shot. I suppose it would be nice to have 4 images as appose to 4 images per link.

I've redone the navigation with unordered lists, there is no longer anymore JavaScript. Thanks Veracon! It was kind of strange how I had to do it, but I got it done and it's standards compliant and displaying correctly in Firefox 1.0.4 and Internet Explorer 6.

Spania (span-mania).
(Why do you have a span inside the links? )

So that I could align the text within the link. I haven't done much with block level links, is there a better way?

You can use text with a font that a user does not currently have on their machine, it's a specification within the W3C CSS Standard...though I haven't tested it, it theoretically should work.

Also, the JavaScript should still be there for IE (v6) as it doesn't cache images from CSS for some reason.

I believe that you're talking about embedding fonts? If you are, there is a problem. Internet wants the font to be in one format, while other browsers want it to be in another. More information on that can be found here:

http://www.netmechanic.com/news/vol3/css_no15.htm

Hrm, I suppose i'll still preload the images, thanks for the heads up!

Any block-level element (like your links, since they have 'display: block') can just have a text-align. Will work fine.

Thanks, but I would also need a way to position the text vertically, by default the text was aligned to the top left. I've added the necessary JavaScript to preload the images, and 'type="text/css"', thanks again guys!

Here is the first page with any content, it nor the code is done yet, this is just for the people who were wondering what it would look like with content:

http://www.davidsissitka.com/portfolio/usaviostore.html

You remove stuff quicker than I can get online...

I like the multiple colors idea.

Just to be pedantic: http://www.w3.org/TR/2002/NOTE-xhtml-media...ation-xhtml-xml.

I do to, I just think that i've done it wrong in this situation and that I can accomplish something better.



Thanks, i'll check that page out!