What should a GOOD website look like?

I’m getting antsy. It’s been awhile since I worked on my last web project (Six Degrees of Nothing), and now that it’s pretty much as done as it’s going to get in the foreseeable future (well, except for a few PHP quirks in the message boards), I’m looking for a new project.

I have no idea what it’ll be about, nor do I have any real ideas for layout right now (I’m tempted to do either a “black background” page, since there are design issues that are quite different from white/grey background pages, or an oddly shaped - say a circle or triangle - site, just for the technical challenges), and that’s where the teeming millions come in.

What do you think a cutting edge website should look like? The thin bordered rectangular quasi-modern look? The all-lower-case-all-sans-serif look (in combination, even)?

Note: I suck at flash and at “freehand” art. I am fairly handy at Photoshop, though.

a few suggestions

  • don’t use flash it’s terribly annoying if you’ve got a slow connection and most of the time ends up lame anyway. flash is way overhyped

  • in terms of design, try to do something interesting. don’t do boring menu frame on the left, body frame on the right deal, and other such things.

  • colour is important. think about you colour scheme, and how the colours used on your site complement/detract from each other. there’s nothing worse than seeing a poorly coloured site (for instance #0000ff on #000000). along these lines, make sure you have a mood or tone in mind for your site. this should relate to any graphics used, fonts, colours etc.

this probably has been pr’y basic, but i’m just saying - there aren’t any rules, just look at it as if you’re making an artwork. then make it functional.

It depends on what kind of information that the website has on it. I ideally it should load within 30 seconds @56K. Also should have a text alternative website.

The best way to know what a good website is supposed to look like, so check out these links:

WORST OF THE WEB:
http://dmoz.org/Computers/Internet/On_the_Web/Worst_of_the_Web/
MY WEBSITE (definitely worthy of Worst of the Web, but hey, no ads!):
http://www.freewebz.com/levi

I love flash, and I think it adds a dimension to webpages, when done properly, that HTML doesn’t offer and Javascript is just too buggy to handle well (I don’t know how many pages I visit with javascript coding errors, ugh!).

Flash is often overdone, however. I mean, I am talking “neon sign” simple. If it is to be more complicated than that it is far too flashy and won’t work on a lot of browsers. anything you do in flash should also be theoretically do-able in animated GIF format too, but .swf files are smaller and cleaner-looking.

At any rate, I think that most business webpages are the absolute poorest model for how a website should be designed. In my opinion, if you cannot easily sum up a web page structure in a table-of-contents or outline style format (as in: site map!) then * don’t put your friggin’ page on the web*. Unless it was like my erisnet.net page which was supposed to be all over the place. :slight_smile:

You hear a lot of netizens whine about “flash” and “javascript” and “text only” which is ok if you really feel you need to access a large audience. I personally feel that they need to go to their local library to surf if they are too cheap to download free functional browsers. I am bitter about it.

What I like
Frames! Argh, I can’t say how nice they can make a page look. They also make loading much nicer because the whole friggin’ page, graphics and all, doesn’t have to reload every time you follow a link. However, my beef with frames is their poor implementation. I like: navigation frame (resizable), title frame (no border), main frame. Thus, the window is divided first into two sections, navigation and other (left and right), and then the “other” is divided into two sections again (top and bottom), title and main. I think it is very simple and looks very nice, and can accomodate all sorts of screen sizes easily enough. It doesn’t require messy back button nonsense which I find myself using all over the web.

When I use frames I say: if I were driving through this webpage, is the shortest distance between to points accessible without following more than two links or hitting “back” more than once? If not, then something is wrong.

Some people don’t like frames because they are, some say, “buggy.” I don’t know how they are buggy. I have never had problems with them.

Plain Backgrounds! don’t try and get too fancy with color schemes on backgrounds. Black backgrounds give me a headache. If you gotta use pictures in the background try and make them faint and not “busy”. I am reading your page, not admiring the artwork. :slight_smile:

Interactivity? I could care less. Reading or otherwise browsing your page is interactive enough. I don’t need little popup windows or alternate text all over the place. I don’t need neato or cute rollover images. I just want to see what you have to say, sell, or otherwise distribute. But, interactive elements don’t really bother me, either, and many people do seem to like them.

What I don’t like
People who insist that every web page should be viewable by every browser ever, or similar hogwash (test it using fifteen different versions of seven different browser styles in eight different operating systems… :mad: ). If I had more to say on the subject the Mods would yell at me for saying it in IMHO. I simply do not get mad at my VCR for not playing DVD’s, and I don’t expect movie makers to release all movies in all formats, and I don’t see why the web is any different whatsoever, so I have nothing more to say on the matter.

Websites which have any moving ads whatsoever. Not much to say here, either, but every single ad seems to detract from the page, IMO. Especially animated ads… the static ads I can live with. I’ve even clicked on a few!

Background music. I think that explains itself well enough.

Busy pages. So many pages have simply too much stuff to say and I effectively end up not hearing any of it.

Here is Microsoft’s main page, and even though it doesn’t use frames it still is very nicely designed. There are graphics that aren’t busy, easy nav-bar on the left, some comments about stuff in the right, simple title bar with very general information links on the top. That design is very flexible, easy to shift around to stay interesting without becoming a burden to read or interact with (still, I like frames better, just me though I sometimes think).

Thisis compaq’s main page, and it is redundant and completely, IMO, unintuitive. Contrasting colors are harsh on the eyes. I think it is garbage, IMO.

Here is TheSpark’s home page, a decent one IMO that is busy but organized well enough from the outset. If you have flash activated there is a good example of what I think Flash is great for on their logo (put your mouse over it)… I am not sure how it looks when flash is not present, probably a static .gif or maybe a rollover animation.

All in all, I think the best advice is to think: “Who is reading this webpage?” If your answer is “Everyone!” then you are lying to yourself and need to take a break. Consider your target group, what they normally interact with (take IGN’s style for gamers, for example), and work from there. Do not design a page for everyone, it will be boring.

The less neat stuff is on a page, the less interesting it is. I don’t even think God could design a webpage for everyone, so don’t let some people tell you you should either. That claim is simply ridiculous.

My two bits.

Mostly in response to erislover’s excellent post, some of my own thoughts.

What I like:

Consistency: please, put your navigation elements on the same part of every page. Don’t assume I came in through your homepage: if it’s a big site, give me a ‘breadcrumb trail’ like Yahoo! does so that I can work out how to get around. Never, ever leave navigation elements off a page just because you assume people can only access it one way.

Simplicity / elegance: subtle colour combinations, small but well-formed text blocks, all these I love. Sixteen fonts, seventeen colours, fifteen text sizes: that I hate.

Printer-friendly pages: probably more appropriate for large commercial sites, but I really appreciate the pared-down, image-free, header- and footer-less alternative for my work research. By all means impress me with your design skills, but a nice link to the plain old version would be great.

What I don’t like:

Unnecessary images: I’m not a complete usability freak, but a lot of sites seem to use images where text would work just as well. By that I mean (for example) navigation buttons that are just GIFs or JPGs of text on a plain background. Why? If I don’t have that font installed, deal with it. Use a decent, common font selection in your stylesheet or coding and I’ll cope.

Frames (sorry erislover): too many sites use this when they don’t need to. Sure, for big sites with big navigation needs they’re a great idea. But title frames take up page space telling me something I knew about when I hit your homepage – why not just put a small ‘home’ logo image on the page instead? And if you only have three or four pages, small image links or plain text links will do nicely for navigation. On my unreliable (but not uncommon) 56k dial-up, framed sites generally take longer to load.

Distractions: animated GIFs, banners and scrollers irritate me, and distract me from the real content on a page. If you’re an advertiser then it’s fair game: you’re trying to distract me and catch my eye. A scroller saying ‘Welcome to my website!!!’ in blinking red text will make me mad, however.

‘Under construction’: if it’s not ready, don’t publish it. If it’s temporarily unavailable, fine, but if (like certain companies who should be ashamed) it’s because you haven’t decided what to do on the web, damn well leave it. Put up a page with your email and phone number so I can contact you a different way, but a blank page with that ‘cute’ road sign just grates.

Javascript pop-ups: not ads, but those little scripts that ask for your name to tailor little ‘hello’ messages. Sorry. I don’t fill in any boxes unless I know I need to.

What I think has to be done carefully:

Browser compatibility: as erislover implies, your audience is the key. If you’re designing a site for a band selling to college students (for example) then lots of flashy graphics, some Flash and support for version 5+ browsers is probably fine. If you’re selling to people in the media / journalism / advertising, make sure your site is compatible with Macs! But most sites (and I’m only speaking broadly here) don’t need to be designed with the lowest common denominator in mind. Having said that…

usability: don’t stop using images just because I happen to be using Lynx (text-only browser). But please put well-described<alt> tags in so that I know what all those fancy image links are for. If your site is image-heavy, please use thumbnails linked to separate pages so I don’t have to wait forever to see it.

i hate frames. they look awkward and blockish and they prevent the web site looking smooth and streamlined. anything frames can do can (in my experience) be done better with <div> tags and/or shtml (but i don’t know much about this).

for an example of a frame-like interface, without using frames (i.e the menu is on every page) check my site. (it’s not finished yet, and i certainly don’t hold it up as the pinnacle of web design, but for what it does it seems to have worked so far.

it’s not the fault of javascript that it’s buggy (although i must admit that this is ery annoying). like with any coding, you have to make sure you’ve got it working properly.

Hopefully something like mine. It’s in the little red house at the bottom. It’s not near done yet. I hope to have it looking a little better soon.

I like mine. I try to strive for some sort of art, while still showcasing my friends and pics. If you have a personal site, give it humor! Don’t put up inside jokes! Make it worthwhile for someone to read it.
And NEVER use the little things that follow your cursor around! Evil! EVIL!
http://www.geocities.com/reddragon60

:slight_smile: I knew my frames “rant” wouldn’t go over. You really think they take longer to load? Ah, well. I must admit I’ve never seen a site use frames (except mine, when it was up) in a manner I approved of.

i think an interesting point to make is to check your page with different screen resolutions. I am continually amazed at the number of people who still view in very small resolutions (640 by whatever 480?), and there is nothing (IMO again) more frustrating that having to use the sideways scrollbar.

So, consensus is kill frames… so be it. The layout should still be pretty similar, though, even without them.

I know! I know! :smiley:

My site is entirely in black and white, except for my artwork. (Even my pics are all b&w.) I hate frames (used them for awhile) and Flash is truly EVIL. I also make sure I have alt tags for the Lynx guys.

I also have graphics from two of my older pages online at http://www.jinwicked.com/othersites/oldsite/ and http://www.jinwicked.com/othersites/oldsite2/ . Hope you get an idea soon. I personally don’t like the slick total-Photoshop plastic look, so my graphics are integrated hand art and Photoshop jobs with subtle javascript.

      • Straight HTML: no Java, Flash, CSS or anything else extra that has to work just to view the page.
  • Green lettering on a black background. If you’re really the with-it type, you do three versions of all your (text only) pages: green on black, while on black and black on white, with links on each to the others so people can pick which is easiest for them to read. --And no flashing lettering, ever.
  • Consistent navigation menus.
  • No advertising, if possible.
  • No links to empty pages.
  • Links to pertinent photos/images, with the size/description of each listed.
  • No .gif’s.
  • No “automatic” audio or video.
    ~
  • MC

I actually have dabbled with giving out web site awards. In a moment of insanity, I thought it would be fun. My main domain (not my Yosemitebabe page, which I list in my profile) is “rated” by one of those awards-giving organizations. Apparently (according to them) I don’t suck. (But I don’t get the highest rating, either. Above average, is all.) And my main site has gotten a lot of awards, and is generally considered “above average”. (But that’s not a huge deal, really. I’m not pretending to be an expert, at all.)

Some of the criteria I have for giving out web site awards:

All pages should have a consistent look. No different background and different graphics set for each damned page.

Load time should be reasonable. If you have a graphics site (as in, a lot of photography or artwork) a longer wait is OK, but better warn us first. I have a crappy phone line with 33.6 connection, and if I have to wait more than 20-30 seconds, I get impatient. Especially if there are a lot of extra graphics that didn’t need to be there.

Also, I have some idea of how large graphics should be. There is just NO EXCUSE for a 150 x 150 pixel graphic to be 20-50 Kb. And there is NO excuse to put a graphic over 60 Kb on your pages without warning. If it’s that large, make a smaller version thumbnail, and link it to the larger one. Optimize your web graphics. I find Photoshop’s “Save for Web” function to be absolutely fantastic. (I believe Photoshop Elements has the same thing.) There is just NO EXCUSE for these average sized images (say, 400 x 400 pixels) that are over a hundred Kb in size! No excuse! Optimize, or warn people that they are going to download some huge bloated graphic! Just don’t foist it upon them. They often won’t wait.

Flash intros should have a “skip intro” link.

No music that can’t be turned off. (Better yet, no music.) NO TRAILING CURSORS! As someone else mentioned already, they are the Devil.

Cross-browser and cross-platform is important, up to a point. I don’t expect a page to look super-perfect when I view with my Mac and Netscape, but if your cascading style sheets render the whole page into a jumbled mess (and I’ve seen this - overlapping graphics and text, or text overlapping text) then forget it. There just is no excuse for that. At least try to get your site to be “passable” (as in basically legible) in the two main browsers, and the main platforms. (Windows, Mac, and possibly Linux.) You can go to one of the web authoring newsgroups and ask for a “Mac Site Check” and have Mac users review your site for any problems. Unless you are 100% sure that NO Mac or Netscape users ever visit your site, in which case, never mind. But, in general, it shows (IMO) laziness or apathy to just not give a damn about a certain percentage of your audience.

Content over style. I am big on content. (In fact, I believe that I have received some “above average” awards for my site because I have a lot of decent content, not for my web design, which is merely average.) If you have a super-splashy, fabulously designed site, but have nothing to say - then what exactly was the whole point?

Well, I am a windbag, aren’t I? Well, this is all just IMHO.

Yeah, the whole web thing is a big question. Personally, I’ve shown the SDMB to web clients as a good example of a complex dynamic website. But it all depends on what you are trying to do, and what you want to present. And these days, I spend a lot of time worrying about browser and HTML compatibility so I tend to keep things really simple (i.e. a simple table layout enclosing everything).
What people like and find informative in a design is something I’ve puzzled over quite a bit. I should give you a good example from my last (and I do mean LAST) pro web design project. I produced 5 different layouts, simple, squarish, nice graphics, easy to update. My partner pressed me to do 6, so I did a stupid design with two loopy ovals that is almost impossible to do without complex tables generated in Imageready. My design was deliberately bad, so nobody would possible consider picking it. And of course, that’s precisely what the client liked. It was absolute hell setting it up, and the client can’t maintain it themselves. And I’m sure as hell not going to maintain it anymore.
Anyway, my favorite web design commentator lately is “CodeBitch” on http://www.macedition.com since she has far more tech knowledge than I do. That site’s layout is nice and clean, and CodeBitch argues for the standard boring layout (two column with a bar across the top) because that’s what people are used to, and it works because it’s familiar.

Any site that doesn’t charge you money.

http://boards.straightdope.com/sdmb/announcement.php?forumid=4