New site - how's it so far?

[matt9669]

I've had this domain for a bit and it's been in my sig, but I think it's finally ready for the [H] crowd to at least get a look at it and see how it's progressing. Any suggestions, tips etc. are well appreciated - I'm an experienced C/C++ programmer but my HTML/CSS/Jscript are rusty

Anyways, check out http://www.mattoverclocked.com and see what you think - thanks guys!

Oh BTW this site is hosted off Vanderbilt University's webspace, the domain is registered with MyDomain.com (very good service, IMHO) and redirected to the actual Vanderbilt page. The real address is masked per the domain forwarding settings. So far this has worked great - no hosting fee, no bandwidth limits, local access to server space!

 

[Deadlierchair]

I didn't have a good option...I would have picked "it's a great start." Very snappy and fast, that's for sure. Good visibility and easy to navigate.

 

[AMD[H]unter]

Not bad, man! It's easy to navigate, it's fast, and its clean. Good job. You might want to move up to some more graphical designs, though. Overall, great job!

 

[Excavator]

Definitely like the css version - http://people.vanderbilt.edu/~wm.davis/ - better than the frames version. I kind of like the text only approach - looks kind of cool and it's very fast. No reason for frames though.

None of it validates... have a look at http://www.w3schools.com/site/site_validate.asp

 

[matt9669]

You might want to move up to some more graphical designs, though.

Yeah, I guess I'll have to dive into Flash for the page to really come alive *sigh*

For now, I suppose I could just Jscript the navbar, make it a pull down menu, things of that nature - see look, that's the coder in me, I need to think "artist"

Should the navbar be at both the top and bottom of the pages, or just the bottom? I use Firefox but I didn't notice anything odd with IE, any errors? Guess that's it for now, I'll keep adding over the weekend, but thanks for the feedback crew

 

[matt9669]

None of it validates... have a look at http://www.w3schools.com/site/site_validate.asp

Thanks for the tip Ex, I'll have to get on that

 

[Excavator]

haha! Cool smilies

I did not mean to be that cruel though, sorry.

 

[carl67lp]

I didn't have a good option...I would have picked "it's a great start." Very snappy and fast, that's for sure. Good visibility and easy to navigate.

That's about how I feel, too. It looks okay, but I absolutely hate gray backgrounds. I mean, if I saw a gray background walking down the street, and it said, "Hey, Carl! How's it going?", I'd hit it with a shoe.

Of course, then I'd feel bad. No sense in wasting a perfectly good shoe.

But I digress. It's definitely a good start, but I think you've got a ways to go. Pictures, man, pictures--that's what the Web is all about nowadays. At the very least, spice it up with some colors.

Check this out: an excellent color scheme generator for the artistically-impaired, like me. Use it well, my friend.

EDIT: I noticed that on the Vapochill pages, the full-sized images load in a separate window. This is bad juju as far as I'm concerned. Bad Web usabilty (c.f. Jakob Nielsen et al).

 

[Lethal]

It's very plain vanilla. Could really use some graphic design to spark it up.

Also, as you are using a cloaking frame, there's nothing for a search engine to index, if you care about getting your site listed at SEs.

 

[matt9669]

I noticed that on the Vapochill pages, the full-sized images load in a separate window.

To some this is a negative, some a positive. I personally agree and like the image to load in the same page, but being lazy I just used the "target=_blank" parameter to make it work. I could just as easily use "target=MAIN" - in fact, I'll give that a whirl.

That color scheme generator is schweet, for the "artistically-impared" among us

Dunno in general though. I'd like to keep the page loading fast, the text-only layout comes off very cleanly, so instead of increasing image count I might play with the color scheme, get something fairly high-contrast going, make sure visibilty stays good and doesn't go overbright (washed-out I guess).

Main problem right now (IMHO) is lack of content, but I wanted to get the base pagecode/layout right before I dove in to adding more pages.

As for a search engine? Don't give a crap at this point, it's more for me to show off personal projects and interests to friends and the online community, I'll get a real hosting solution when I feel the site is ready to go public . . . that being said, I could setup subdomains for each of the pages, which would give SE's something to index, even if it's in the cloaking frame - that would work right? (Maybe? Experts fill in the blank here . . .)

To those of you who actually got to the end of this post, HAPPY NEW YEAR!!

 

[carl67lp]

To some this is a negative, some a positive. I personally agree and like the image to load in the same page, but being lazy I just used the "target=_blank" parameter to make it work. I could just as easily use "target=MAIN" - in fact, I'll give that a whirl.

I've felt that way too, that there are negatives and positives, and it depends on the situation. Having gone to a Web usability conference (Nielsen/Norman Group), I'm firmly in the "do not pop a new window" camp.

That color scheme generator is schweet, for the "artistically-impared" among us

There was another one that I would have linked you to, but unfortunately it seems the server is down. It's called "ColorMatch Remix," and while there seems to be a mirror, I don't think that's the original site.

Dunno in general though. I'd like to keep the page loading fast, the text-only layout comes off very cleanly, so instead of increasing image count I might play with the color scheme, get something fairly high-contrast going, make sure visibilty stays good and doesn't go overbright (washed-out I guess).

Main problem right now (IMHO) is lack of content, but I wanted to get the base pagecode/layout right before I dove in to adding more pages.

I can understand fast-loading, but so long as your graphics are optimized, they won't add much time to the overall loading duration. Of course, that's not to knock a good color scheme. Consider this: Last night, I was about to write a PHP/MySQL bookmark system because I didn't like Active PHP Bookmarks. Then I sat down and thought, "Actually, I don't like how it looks." So instead of rewriting the system, I simply rewrote the style sheet.

You can see what the system looks like by default and then see what I did on my own site. I used that site I originally linked you to for the color scheme. Admittedly it's not perfect--the margin/padding values aren't exactly what I'd like--but it's close enough for me to be happy with it. (Incidentally, I might still write my own system, but I think I might go larger, with bookmarks and contacts and RSS news feeds and the whole bit. Sort of like my own portal page.)

So that's that. I've just proven that you can make a much more attractive page just by changing fonts, paddings, margins, and most importantly colors. Come to think about it, though--why not do what the Wikipedia does, and throw in a "watermark" graphic behind the text boxes? Adds maybe 2K or so for a good optimized GIF, and adds a lot of spice to the page.

 

[matt9669]

Thanks Carl, you've really added a lot of constructive things to think about. I'll have to start with the basic changes (validation, window popup etc) and move to the more complex ones as I go.

As I understand it, PHP is a method of linking your bookmarks to an external database - I have heard of this but have ZERO experience with it - how difficult is this to setup (i.e. worth it for a small page like mine) and are there any good tutorials out there? Thanks!

 

[carl67lp]

Thanks Carl, you've really added a lot of constructive things to think about. I'll have to start with the basic changes (validation, window popup etc) and move to the more complex ones as I go.

As I understand it, PHP is a method of linking your bookmarks to an external database - I have heard of this but have ZERO experience with it - how difficult is this to setup (i.e. worth it for a small page like mine) and are there any good tutorials out there? Thanks!

Glad to help out.

PHP is a scripting language--read more about it at www.php.net. It's like ASP.NET (or classic ASP), JSP, and others, and it's a way of dynamically creating a Web page, more or less. The forum uses PHP to pull information from the database to create a threaded forum; my bookmarks page (which uses a PHP script someone else created) connects to a database of all of my bookmarks; and a news reader I wrote uses PHP to connect to RSS-enabled news feeds to give me snippets of news stories. I also use PHP to manage and store all of my product keys for my software, and like I mentioned I plan on using it to create a portal for things I do online frequently.

For your site, I don't think you need to worry about it yet, but where it can become useful is if you ever want to "personalize" your site for various visitors, or if you want password-protected areas, or if you want to reuse the same sections on multiple pages (e.g., common navigation)--here, PHP would "include" a file of common information across multiple pages. That's what I do on a major site of mine, Wayne State University's Division of Development and Alumni Affairs. Here, I use PHP as a templating system; each page is made up of three sections--a section that determines which part of the site it's on, spitting out the header and navigation sidebar; the main content; and a section that spits out the footer. Thus, every "page" is made up of several different files. Without PHP, every time I wanted to change the navigation I'd have to change dozens of individual files--very cumbersome and very error-prone.

 

[matt9669]

Just updated the site - I have implemented a new color scheme and the pages now validate. Go have a look see, post your opinions here. No server side scripting/PHP yet, that'll be awhile . . . as for what to do about the cloaking frame . . . not sure yet.

Dunno if I'll get around to it tonight but I'll add some more content as well. I'm thinking I'll render the page title(s) in 3D text, maybe the links too, should add some color to the page. Thoughts always appreciated!

 

[matt9669]

Can't sleep so I popped open Ulead Cool 3D (I love this program - great for non-artists) and made a 3D title. Not sure about the color etc. but I like the idea so for now it stays. I'll have to play with the font, color, style, lighting etc. to get "the perfect" logo but it's definitely a step in the right direction, IMHO . . .

Got any ideas, lay em on me

 

[tim_m]

white text on a bright blue background almost makes me want to kill myself. sorry but that's just not a good color scheme, it's very irritating for me to look at. try a light blue instead of primary blue and then you would probably have to make the text a darker color.

 

[maw]

- background is too bright for that white text. try going with a darker text or darker background.
- it's a little "too" plain. with nothing but a sea of text to look at, it makes me tired just thinking of reading through all that stuff. i think you need some graphics or other visual cues to guide the visitor's eyes throughtout various parts of your content. Something as simple as differentiating each new blog entry (e.g. make the date a different color) would help.
- find a way to organize your thumbnail images better, they look kind of jumbled and mismathced they way they are now.
- loads lightning fast!! even the page with the thumbnails, awesome!

 

[matt9669]

white text on a bright blue background almost makes me want to kill myself.

I take it that's a "no"

It's an improvement on black-on-grey I think though, but it is pretty bright - just wanted to avoid a "pastel" look - thanks to the magic of CSS, it's easy to play with, so here I go experimenting! (Any suggestions?)

 

[matt9669]

- find a way to organize your thumbnail images better, they look kind of jumbled and mismathced they way they are now.

I just threw them in a centered paragraph, that way they scale with the page size w/o effort - I'll try a table layout, that's prolly my best bet. But I'll have to admit, that's one of those "if it ain't broke" type problems so it's low priority . . .

- loads lightning fast!! even the page with the thumbnails, awesome!

Thank you, Vanderbilt server team

 

[carl67lp]

I take it that's a "no"

It's an improvement on black-on-grey I think though, but it is pretty bright - just wanted to avoid a "pastel" look - thanks to the magic of CSS, it's easy to play with, so here I go experimenting! (Any suggestions?)

Pastels aren't necessarily bad. I mean, pink and light blue and light yellow are perfect on a kid's Web site, or an Easter-themed one, or ... It all depends on context.

Referring back to the bookmarks page I talked about earlier: the main "cell" of the page is backed in a quasi-pastel color, but it's offset by a more dominant shade of the same base color, and accented with bold colors to draw the eye. The text is dark on a light background, so it's easy to read, and the only light text is on a very dark background (the white on navy blue). It's not perfect, of course, but it's better than the default greytones.

But I'd have to agree that white on "standard" blue looks pretty icky. When I looked back at your page, I literally backed away from the screen (my eyes are pretty sensitive as it is). But like you said--with CSS, it's easy to play around with things.

My biggest suggestion is one that has been made a few times: Break things up. Use some columns, maybe put your navigation in one column and the body text in another. Or use some cool CSS menus from the List-o-Matic
(I've used this on several production sites).

Basically, jazz it up. Think of it this way--would you read a magazine if it was only text and no graphics? I mean, they do exist, but they're usually called "journals."

 

[carl67lp]

I just threw them in a centered paragraph, that way they scale with the page size w/o effort - I'll try a table layout, that's prolly my best bet. But I'll have to admit, that's one of those "if it ain't broke" type problems so it's low priority . . .

Just saw this as I posted my reply. Two words:

NO TABLES!

Tables are for tabular data--not for layout. Go back and look at the Development and Alumni Affairs Web site. It looks like a table layout, but it's not...it's all done in CSS. Another example is the
WSU Computing and Information Technology Web site that I more recently designed. It's since been modified slightly, but not by much. (Also, this site exhibits the List-o-Matic menu that I referenced.)

CSS can do all of your layout. You'll never need to use tables for layout again.

 

[tim_m]

if you want more tableless design examples, goto
http://mathcs.muhlenberg.edu
which i am in charge of. now if only my college's main site didn't suck

 

[carl67lp]

now if only my college's main site didn't suck

I share your pain. Our university's main Web designer knows nothing of this stuff. Her published guidelines still reference the obsolete "font" tag. Gah.

Plus, her stuff rarely if ever validates. The sad part is that I applied for a job in her department (prior to getting the job I have now, technically within the same division but not totally Web-related) and wasn't even interviewed. Sad, very sad.

 

[matt9669]

Thanks for the examples guys. In truth, I agree, the website needs some graphics added, a more eye-catching layout, etc. Seeing as that will take some time (plus I don't have much experience doing spacing with CSS) I'm going to keep this thread handy as a reference, but I need no further responses at the moment - you can officially consider the poll closed.

Give me a week or two to really go back to the drawing board, create some graphics, play with the CSS styling, get something I like instead of a quick fix. I'll open a new thread on the subject when I feel the site is ready to be reviewed again.

Thanks!

 

[maw]

Thanks for the examples guys. In truth, I agree, the website needs some graphics added, a more eye-catching layout, etc. Seeing as that will take some time (plus I don't have much experience doing spacing with CSS) I'm going to keep this thread handy as a reference, but I need no further responses at the moment - you can officially consider the poll closed.

Give me a week or two to really go back to the drawing board, create some graphics, play with the CSS styling, get something I like instead of a quick fix. I'll open a new thread on the subject when I feel the site is ready to be reviewed again.

Thanks!

just keep in mind that you don't need a lot of graphics to make a site look good. Oftentimes all that's needed is the right combination of layout, white-space, font selection and colors to change a looking mediocre site into a great looking site. here's one example