Slashdot Mirror
What Makes a Good Web Design?
Grand Master Math asks: "I'm currently redesigning my website and I have checked out tons of various web sites, gone from link to link, etc...to find the best web design techniques, layouts, and features. Wow Web Designs proved to be a pretty useful site, as it showcased virtually 'the best of the web' in design and creativity. I was wondering what the Slashdot community has to say about web design and what the best web design should implement and address. From browser compatibility, to simplicity and complexity, and customization to user interaction, what should a perfect web design incorporate?"
Keep it simple
To the point
Searchable
Flash-non flash versions
no unnecessary plugins
no popups/unders, etc.
two versions of the same website is cool.
Not everyone has a blazing net connection, so remember the little guy sucking on a 33.6 dialup connection.
that's it.
Sent from your iPad.
Web Pages That Suck
http://www.webpagesthatsuck.com/
useit.com. It's a great resource for usability information, including a lot of stuff on web usability and design.
It really depends on who you're targeting, and on what your content is. A personal homepage with a bunch of family pictures is going to have different requirements than a site where you're trying to show off your Flash skills in hopes of landing a new job.
Jakob Nielsen's useit.com is a highly regarded source of information on what makes people's browsing experiences enjoyable and worthwhile. Generally speaking, Jakob advocates designing sites so as to make the user's experience as painless and "friction-free" as possible; some specific recommendations would be to try and design your site so that it doesn't require specific browsers, resolutions, or plug-ins to operate properly. If you want to keep people's interest, page loading times should be under 10 seconds, which places limits on how big your graphics will be and how many of them you'll have on a page (somebody has already mentioned remembering people on 33.6 dialup connections).
On the other hand, I've seen some amazing sites that were pure eye-candy. In that case, having a specific browser and/or plugin (usually some version of Flash) was an absolute prerequisite, and nobody minds because the animations on such sites push the envelope of what can be done with current technology, so it's understood that the "latest-and-greatest" stuff is required to view them. Few if any of them are practical; they're just fun, so it's OK to break the rules.
Good luck!
1) Are you selling a product or yourself?
If you are selling a product, keep it simple. Flashy shit, while nice as eyecandy, inevitably will cause problems with SOMEONE's browser out there if they don't have installed/activated the plugin that you require and then you've alienated a potential customer.
Also, make good use of the title tags. Put the page name AND COMPANY OR PRODUCT NAME in it, and not "Home" or, worse, "Untitled Document". Think of how you want your bookmark in their list to look.
I see a few complaints on how not to make a site. What people need is more of a structured method to make a usable site.
1) Start with your users. Who are they? Can they be categorized? i.e. Business Men, Students, Computer geeks. Rank them in order of importance.
2) Figure out what each group wants from your site and what characteristics about them make them that way.
3) Organize the hierarchy of the site based on what each group wants, giving priority to the category of users declared most important. Organize your content based on user goals and not the other way around.
4) Design the pretty web pages to fit the hierarchy, choose the interface tools that fit the data best.
You misunderstand. The book advocates a way to design websites so that it's easy to use and you don't have to waste your time trying to figure out how things work.
Imagine that the reply button on /. was at the very bottom of the page and you had to enter the number of the comment you were replying to.
Or think of doors, where you have to stop and figure out whether you need to push or pull to open it (sometimes instructions are taped to the door to make this task easier).
If you are interested in good user interfaces, I recomend this book.
...richie - It is a good day to code.
Actually, not. There's the normal page that 99% of users will use but through effective use of SSI it doesn't have to be duplication of effort at all.
" />
If your default design requires Javascript, include a
<noscript>
<meta http-equiv="refresh" content="0;http://server.domain.com/texthome.html
</noscript>
in the HEAD.
This will send all of the folks with no scripting to the page that has none.
The very first thing that should appear on the default page is a link to the text-only version. This is for the benefit of non-sighted users who are using a browser that processes the scripting. This should appear first because you don't want them to have to wait while their screen reader recites the entire page before they get to the one piece they really need to function.
Yes, by all means "know your audience." But, remember that unless you are going to authenticate your entire audience there will be other people coming to your site.
My office has been taken over by iPod people.
1. World Wide Web Consortium is self-proclamed God but nobody matters.
2. Flash is evil, and of the devil. Flash is blaspemy.
3. JavaScript should be used only for the absolutely most trivial functionality. It is best to just not use it at all.
4. Images should be used for illustrative purposes, not to show you found a neat image and *never* as a background.
5. Images should be small and reduced to webpage resolutions.
6. Content shouldn't be laborous to read. Black on white text is the best, but at least always make sure to use contrasting colors.
7. Style sheets should never be used. They simply don't work consistently across browsers.
8. Proprietary HTML add-ons should never even be considered. They just go counter to the principles of the WWW.
9. Do not covet they neighbors hyperlinks. Links should be used in *context* and not in a random listing. Don't say "you can find a link about greyhound adoption *here*." Instead, write either "There is a lot of information about *greyhound adoption*" or "*Greyhound Puppies Inc* has a lot of information about greyhound adoption." All of this results in a page more useable by non-traditional browsers. (see number 1)
10. If you change the color of links, you should make sure that the default colors (blue, purple, red) will show up on your site. Another reason not to use picture backgrounds. Also, don't ever *ever* reverse the color scheme... cool (blue-like) colors for unvisited links, purple or red-like (hot) colors for visited links.
And I'd like to introduce a #11 and a #12 commandments:
11. Never use frames.
12. One distinct URL per page.
I like websites where the content is readable and easy to find. I don't want to look at lots of images or listen to music (or wait for those files to download). I shouldn't have to click through a bunch of pages to find what I'm looking for.
Make the content easy to read, and make it easy for me to navigate to the content I want.
And don't put anything important up in the top inch or so, where banner ads usually are on many sites. I've developed a blind spot there, so I won't see it.
Cara Hart chart@eNOSPAMfurn.com Systems Administrator eFurn.com, LLC. and ARITEK Systems, Inc.
The root problem is that the tag was bodged. We spent several months working through the issues raised by embedded images and the right way to do it. Then an undergrad decided he would bodge them in and gave 18 hours notice before he released his new code.
That is why IMG sizes are measured in pixels rather than something useful like Knuth's em and ex measures which scale with the font sizes. As it is someone with a 300dpi LCD display (yes they do exist) would see a 'full screen' 640x480 gif in a 2 by 1.5 inch rectangle.
Afterwards the undergrad spent his time telling reporters that everyone else opposed images altogether and did not understand their importance. And he wonders why we helped Microsoft wreck his start up.
Looking for an Information Security student project suggestion?
Try http://dotcrimeManifesto.com/
http://www.tuxedo.org/~esr/html-hell.html