Finally got my site back up and redesigned. I even bought a domain finally. This is partly for a school assignment that isn't due for a couple of weeks, but I plan on keeping this site as my official portfolio. I welcome all comments and critiques. I've been out of practice for a while so it might be a little rough around the edges. Be Brutal, I can take it =)
I haven't reviewed a site in quite a while either, so I guess that puts us on even footing, eh?
Thoughts, in order, as I looked through your site:
Wow, that's a bit... narrow.
The menu links are incredibly tiny... very hard to see. (It's at this point that I'm guessing maybe this page was designed for a lower resolution--I'm using 1024x768, which I don't think is all that high)
Whenever I click on a menu item, the bottom border of the content area jumps up and then extends back down to allow the content in. Basically this means that the content area is continuously contracting and expanding. Somewhat distracting.
Ah, the color scheme. Obviously it's not killing me, otherwise I would have been screaming about my eyes up at the top there. All in all, I'd say it's... man, I really need to teach you all Korean so I can just use these handy Korean words that pop into my head. Hold on. Hmm... "no trouble"? I guess I would have to say I feel... ambivalent? I don't hate it, but I don't love it. However, it does not interfere with my browsing experience, so that's a good thing.
The only thing that bugs me is the background image. The flowers are too faint to be made out without me sticking my face right in front of the monitor, but they're visible enough to register. The result is that I find them... not distracting... not necessarily disturbing, either... I guess it's kind of like getting a tiny pebble in your sock. It's not going to kill you, but it can end up driving you batty. I would either eliminate the pattern and go with straight brown or bring out the flowers more so they can be seen without straining.
Um, I guess that's about it for the surface. Now to look under the hood.... Neat and tidy code, standard compliant from what I can see, specified encoding so the text doesn't bork in my browser... looks good to me. Don't have time for more than a cursory look, though.
So, there you have it. Another fine SOC review by yours truly.
Thanks for giving it a rundown Suho. I agree with a lot of what you brought up. Lemme go over it point by point.
Yeah it is very narrow and that bothers me too. I initially designed the page to be variable width as you can probably tell just by looking. (the menu buttons are all transparent and unaliased. There also isn't just a fixed with background but lots of cut up images and code to make what could be accomplished with just a fixed width background) I'm using a lot of modified ALA sliding doors to layout the graphics. Its a way of making tabs, but the technique is very versatile if you get to playing with it. This should allow me to have a variable width page, but there is code in the works page that won't work correctly unless the page stays the same width. I think I'm gonna have to rewrite a good chunk of code to get this to be expandable. I really prefer expandable liquidy pages, but was willing to let it slide if I didn't hear anything negative about the width in here. Its the first thing I heard in here though so I'll have to tackle it.
The page wasn't designed for lower rez specifically, but I didn't want to exclude them. Thats why I picked a very narrow width when I couldn't get the variable width working. The menu items are prolly way to small. I made the dirtystyled button first as just a title graphic. Useability wasn't an issue with it since it was just for looks. But then I decided to put the menu there instead and I did all the buttons the same size. Still think it looks cool but you're right they should be bigger. I'm sure I can enlarge them while keeping the same feel. Maybe I'll make their font the same size as the next/prev/zoom buttons on the works page.
The bottom border jumps around because it is positioned with CSS and javascript. Again I'm using mostly ALA code here, this time from their footers article. The article offers some CSS only methods but they don't degrade as gracefully. I think when I rewrite the sliding doors code to allow for variable widths I'll have to use some javascript to get all the positioning just so. I find with javascript and css you can do a TON if you only expect people to be using browsers like IE6 and FF. While I do want valid and accessible code, I'm not going to expect netscape 4 users here so I won't be using the most backwards compliant code. (The layout will DEPEND on javascript) Perhaps what I need to do is wrap the whole page in a div with display:none and set it to display:block when everything is loaded and placed.
I think I've been here too long because I find it nearly impossible to start a web project without the color orange . I usually pick out a couple colors before I even start on the graphics. I liked the colors I had picked out when I started but the more and more I work on the site the more old they get. I think the orange inner border is the only nasty color that needs to be changed. Not sure to what though, I'll have to play around. Maybe I'll make all the different subsections of the site different colors there ......ooooh, that'd be fun!
Having a pebble in my shoe is worse than torture to me, so I gotta fix the background Hehe, the original had even less contrast. I do all my developing on my laptop now and its screen is great, it has a TON of contrast, too much actually. When I check things out on other machines they look washed out. I just bumped up the contrast on it, hope it looks better now. I also didn't want the background which is pretty busy to overwhelm the content, plus its some of the first serious pixel pushing work I've done and its not anti-aliased so it doesn't look so hot in high contrast. I think the next revesion is a good balance now, but tell me if it needs more or less.
Well the code DID validate, but after all this tinkering it hasn't for a while now. That'll be easy to clean up once the functionality is there.
Thanks again for your comments Suho! and keep 'em coming if you or anyone else can.
I hate those links. my Res here is 1024x768 and here it's small I'm imagining a guy on a Mac with a res of 1600xwhatever! Microscopic I believe so! And you could have done some more work on that header its... nothing! I mean there's nothing to tell you it's someone's site other than the syntax! I think Suho covered the XHTML validationg thingy it's not Strict.
Color well that's interesting. Nice moderate but the orange is distracting the viewer from the overall site perhaps a nice dark color there because you've already got a dullish-bright color in the center there's no need to intesify that color with an even brighter color on the sides you dig?
Next your site doesn't show properly in Opera the works page in particular. I haven't tried it in FF but IE seems to work it nicely. Also something that really really bothers me, in the works area you just have to go through all your work till you reach the end?!?! Now lets say you have this layout and you have like oo 100 or so different items in your portfolio. Now lets say someone wants to see that Nintendo thingy you did but it's more than half way down the list... that guy will just go crazy going through all that stuff till he reaches the one he wants! Also how are you going to link back to a specific work item??? Plainly put no way to archive! Isn't that what a site is all about an archive?!?
Finally you've alot of work left on this site. I like the bg though nice and serene not too WOW just right oh and is that an iPod design I see
Just checked the new and improved background... much better. I can see it now, but it's not overpowering. Of course, as you pointed out, different monitors have differing levels of contrast (for some reason I could not think of that word when I was writing my original review), so mileage may vary.
Not much else to add at the moment. Have fun futzing around with the code!
Site looks nice but I want to emphasise what people have already said about your header links, they are too small! I use 1600x1024 and I just can't read them unless I make like the hunchback of Notre Dame
pixel fixed width is evil - if you must have narrowness, use a percentage or something
the nav images are too small (also nice to have anchors extend past the literal image some [like padding] when there is no clear boundary)
background position change is nicer than total background image swap
two images being used for layout
no text inside nav list item anchors
JavaScript for layout? No thanks (& putting images over header text? Why not just use background images and hide the text?)
JavaScript errors
.com/contact.html, etc instead of just .com/contact/, etc
font sizes set in pixels
GIF?
why are you using XHTML (instead of just HTML)?
gj with the CSS validation link - dunno why so many people think that'll just magically find their css file(s)
I know some people from high school (class of 2001) that went to UCF
be careful with alistapart - they get some silly stuff on there
Although I like each individual item..nothing seems to go together...
1) the background is very elegant but not modern.
2) the orange and red are modern and clean but the shades are "diner booth" colors and are very loud.
3) the links at the top are too small..
4) the fonts/colors/size in other areas are not blended properly..the primary font is large, black and plain in the main text area. There are other font colors that would blend with the red/orange.
Solutions..choose a background that has the same "feel" as the rest of the design...choose colors from the background for font colors and links..bland the page carefully in color and texture...including the color of the background in the main text area...
All the elements are fine but nothing seems to go together..
Other than the really small section links, my only other major beef is the way you navigate through your gallery - it breaks the Back button, i.e. whenever I zoom in on an image and then go back I'm always brought back to the first document. I have no way of even going back to the piece I was just looking at without having to click "next" until I find it again.
Thanks for all the comments. A lotta good points I have to go over here. I've redone all the colors and I'm much happier with them now. I still havn't uploaded them though, because I'm trying to restructure my template so that it is more liquid and relies much less on javascript. After that I'm going to redo javascript on the works page. It is frustrating as synax pointed out, that it currently breaks the back button. The code for that page I did completely from scratch, and I didn't realize that problem with it during my own testing. Hope to have a much improved revision up in a week or less.
Been kinda busy, but I got back to working on this. I gave up on the purely liquid layout. I'm just gonna wait till the next CSS spec and load of browsers comes out before I do that again =) In the meantime I redid the layout a little bit. I changed the colors and scaled up the buttons. This is only a test really. I don't have the title in yet because I have to update my version ofInkscape to get text to paths. I plan on writing it on on one of the green bands. I may change the font of the buttons now too and perhaps align them to the path as well.
Just want to see if I'm moving in the right direction now since I sorta started over... again what do you guys think? Clickaroo!
Whoa... at first I was really confused. One thing you have to remember when using background images (that is, background images specified for elements through CSS) is that the browser gives no indication that they are loading. This might not be a problem if the background image isn't too large and/or does not play too major a part in the design. The two background images you have there, though, are very important, and without them the site looks broken.
I only mention this because it takes a really long time for the images to load, and my connection (ADSL) is not a slow one. I took out my stopwatch and forced a reload, and here's what I came up with:
Time to header background image loading: 13.5 seconds
Time to body background image loading: 29.6 seconds
(This is starting from when the browsers says "Done," not from when the page begins to load.) You also need to take into account the fact that you have no other images on the page right now (except for the page background, which is light), so this is the bare minimum load time for me. Honestly, 13.5 seconds was more than enough time for me to click back here and load up your original design because I was sure you had lost your senses and gone on some sort of minimalist boxy kick. The thirty seconds total wait isn't so bad once the header image pops in and you realize that there's more to come, but it's still a long while to wait for a design to finish loading.
I know I'm carrying on a lot about this seemingly little thing. After all, you have no control over the fact that the browser says "Done" even when the design is far from being finished loading. You can, however, try to cut down on those file sizes: almost 250k for the header image and nearly 500k for the body image! At the very least, try to rework it so that the design doesn't look broken before the images are loaded. But I think cutting down those file sizes would help a lot as well. 13.5 seconds is more than enough time for people to assume the page is still under construction and click away.
quote: Schitzoboy said:
I gave up on the purely liquid layout. I'm just gonna wait till the next CSS spec and load of browsers comes out before I do that again =)
Honestly, I can't say that I agree with this line of thinking. That's like saying you'll start being nice to others once we achieve world peace. You know how long it takes browsers to catch up to the specs. Or maybe we don't, since some of the major browsers still aren't caught up, and probably never will be. If you want to do a fixed layout, that's your call, and maybe a fixed layout will better suit your needs--I'm not going to argue the pros and cons here--but don't use the browsers as an excuse.
Anal retentive complaining aside, I like the design itself. I would increase the side margins for the body text so that the text doesn't run right up against (well, close enough) the side of the body background image. Also, I'm not sure about having the title below the menu. i suppose I would have to see it to make a judgment, but I think the title should be the first thing you see. I guess it all depends on how well it stands out.
About the image sizes, I know they're ridiculous now. I havn't crushed the image sizes yet because I'm probably gonna have to cut them up first (plus I'll probably do some endless tweaking on them as well). I'm installing wordpress again as we speak, then I'll have a template to work off of. I really just wanted to make sure the 'style' was working. Be sure I'm make them much smaller and soon.
It wasn't easy for me to give up the liquid style I was after originally, but I just cannot get it to work reliably across platforms. The tech just isn't there yet. I can use javascript etc. but then the page loads looking all strange and out of place untill the script puts everything where it is supposed to go. Resizing also causes enormous amounts of jitter with this technique and sometimes after the resize an additional refresh is still necesary. Thats just unacceptable. A pure CSS solution is possible, but quite a few variations are required for differnt browsers and platforms. No CSS only solution I found failed gracefully. My last option was to remove alot of the repeating background images and drop shadows so I didn't have to worry about patters lining up at different resolutions, or empty drop shadow divs that were giving me the most trouble of all. However I went through all that hell in the first place so I could try to achieve these visuals. Sacrificing the visuals would defeat the point entirely. So I'm sacrificing the liquid layout instead.
After coming home from work and looking at the buttons again. I really don't like 'em. You're right too about their placement; Title should go on top. I'll be working on that next. Thanks again for your time Suho, I really appreciate it! Hopefully if real life doesn't keep gettin' in the way I'll have something worth showing off when this is through.
Thanks again for your time Suho, I really appreciate it!
Not a problem.
quote: Schitzoboy said:
Sacrificing the visuals would defeat the point entirely. So I'm sacrificing the liquid layout instead.
I guess you've got to decide what is most important. Although I am generally a proponent of liquid layout, I'm also not a very skilled graphical designer/artist, so I don't have to worry about impressive visuals mucking things up for me.
Ultimately, I can understand where you're coming from.
posted 04-12-2005 03:14
. I usually pick out a couple colors before I even start on the graphics. I liked the colors I had picked out when I started but the more and more I work on the site the more old they get. I think the orange inner border is the only nasty color that needs to be changed. Not sure to what though, I'll have to play around. Maybe I'll make all the different subsections of the site different colors there ......ooooh, that'd be fun!
Hehe, the original had even less contrast. I do all my developing on my laptop now and its screen is great, it has a TON of contrast, too much actually. When I check things out on other machines they look washed out. I just bumped up the contrast on it, hope it looks better now. I also didn't want the background which is pretty busy to overwhelm the content, plus its some of the first serious pixel pushing work I've done and its not anti-aliased so it doesn't look so hot in high contrast. I think the next revesion is a good balance now, but tell me if it needs more or less. 
oh and is that an iPod design I see 
what do you guys think?
