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/
These are the rule of thumbs I like to go by:
1) Keep it simple, stay away from very complicated layouts, avoid tables if you can, avoid nesting tables.
2) Use stylesheets as much as possible, for layout and control of appearances. But avoid using fixed fonts.
3) Avoid fixed-width layouts if at all possible, make sure your design can flow. Users who want to print your pages will like you. Users at very high resolutions will like you.
4) Don't use javascript to implement any critical functionality, use it to enhance the user experience.
5) Don't use splash pages, avoid flash or use it sparinglly.
6) Try to honor the conventions of the web that users will expect: i.e. underlined text=link, don't disable back buttons.
There are more but these should get you started.
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.
Step 1: decide what you are communicating
/., since most of us can't even spell).
Step 2: decide who you are communicating to
Step 3: communicate to your audience
Step 4: DO NOTHING ELSE
The genuine purpose of most of the web is communication; once you've accomplished that, don't waste time, bandwidth and screen on anything else.
If you're having trouble with #3, maybe you should be asking questions in a writing newsgroup or something (but definately not on
second society
-"I seem to be having tremendous difficulty with my lifestyle." - Arthur Dent
it's best to approach design from the perspective of the user (take a step back and put yourself in their shoes)
what do they want? where are they? what are they using?
if you want simple tenets of design,they're commonly summarized:
- speed of download & page rendering
- compatibility - no negative experiences!
- no more than 3 clicks to any piece of information
- don't make it necessary to scroll for essential information
- always give people a 'back' option - don't trap them on 'dead ends'
- no more than 7 +/- 2 choices on any page
- search and/or sitemap for targeted inquiries
very likely more, but that's a good start (and should keep you busydon't search for 'great web design' instead, search for 'usability' and try to find a critique that deconstructs some of the same types of site that you're going to build (e.g. no need to read a detailed critque of yahoo if you're not building a web search/catalog).
the most important thing is to realize the scope of your site/vision before you start. if you get frustrated/bored because you planned something grandiose and it's taking you years to build, then by the time you get around to filling it up with content, your content will suck.
be disciplined - plan out the 'dream site' then whittle that down to what's realistic - step back and make 'release 1.0' and implement the more disparate features/content in future releases. it will help you keep your content up to par with your coding & design, and give people a reason to come back again & again! do you think people read slashdot because they like GREEN and it's easy to navigate? ;)
www.pixelectric.com
Tips to appease your Mac audience
Other general Tips
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.
1) Fast page speeds. No page should ever take more than roughly 12 seconds to load on a 56.6 connection. If you have highly dynamic, scripted, or flashed pages/sites, offer an alternative low bandwith one. HTML compressors, when used correctly, can do wonders for WYSIWYG built pages (go notepad!). If you have only one or two pages that loads slowly, make sure you tell people before they click into it. Never have a home page that takes more than 9 seconds to load (six or less is better, 10 on the outside).
2) Cross browser compatibility. Contrary to popular belief, you do not have to make your site backwards compatible for less than 4X broswers, nor do you need to make your site cross compatible with oddball or lesser used browsers. I typically make my sites compatible for IE5+, NN4.X+, NN6.1+, Opera, and Mozilla 6. That's it, and that's 99% of your web traffic on a common site (though account for your expected users... *nix types probably will have a widely differing browser set to accomidate than above for instance).
This done by adhearing to HTML standards, using CSS effectively, and only cross-browser compatible javascripts and dhtml. I love CSS... it can ensure that everything even looks good on the lowly mac in IE.
3) You gotta understand what computers, browsers, operating systems, and color/resolutions will be visiting your site. A good rule of thumb is 8X6 at 16bit depth and cross compatible for major browsers (4X on), especially IE and later Netscape browsers on PC and Mac.
4) Avoid frames like the plague unless you are an expert at it. Most people dispise frames, though there are sites they may visit where they never even know they are there.
5) Use Ilayers only if you truely know them and their limitations on the user's end. Nice stuff, but it can really screw things up
6) Content is king. Avoid annoying flashing text and distracting colors. The most popular is still black on white, and other good colors are a vibrant red, medium yellow, and a subtle blue. Keep the content fresh and up to date where possible or expected, never date (or outdate) your pages with "last updated on" comments unless you plan on updating regularly. Justified text is nice.
7) Site navigation is queen. No page should be more than 3 clicks away from the home page. Also offer search and a site index that is current (dynamic is nice). Your navigation system should be consistent, clear, and easily understood.
8) Vertical and Horizontal content scrolling. Vertical is okay (big arguments still over this, but most don't mind a minor amount of it), but horizontal scrolling of any kind is a big no no.
9) Highly optimized, clear, clean graphics with minimal (translate non-distracting) animations if used. Compression is good, as long as you can see them clearly and without distortion or pixelation.
10) Make your site ADA compliant if you think for even a second a person who needs ADA styled pages might visit. Even a minimal effort, such as ALT tags is nice, and it's not too hard to do except on highly graphical sites.
11) Make your privacy and use policies clear and legally ready to be disputed. Nuff said.
"A word about the philosophy of this site: These pages are declared to be a fluff-free zone! There will be no unnecessary, superfluous, or useless graphics of any kind - including but not limited to: dancing, gyrating, or other animated icons, colored textured backgrounds that are impossible to read through, or forced downloading of bit intense pictures that may be of no interest to you. Nor, will I ever expect you to use a particular brand of Web browser to be able to effectively access these pages. There are and never will be any advertisements, cookies, or other impositions on your time and space. In the time that it may take wading through a single monstrosity of the professional Web page designers at other sites, you will be able to find out what you want to know, when you want to know it! What a concept. :-) (Note, however, that your browser needs to be configured properly to make sense of the many ASCII diagrams, schematics, and tables. See the document: Suggested Browser Settings for font and other related information.)"
Amen.
Flash can be great when used correctly. It should be used for animations on an animation based site. Flash intros and uses of Flash when there is no point for it are a waste of bandwidth and space, though.
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
It looks like this is going to get buried under the barrage of other posts, but I thought it worth mentioning anyway: go check out W3C's Web Accessibility Initiative. They have a list of guidelines and checkpoints for making sure your web site can be read by the widest possible range of users.