What Makes a Good Web Design? 858
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?"
Uh (Score:2, Funny)
Re:Uh (Score:4, Insightful)
Actually Eric Binna and Lou Montoulli invented the Blink tag at Netscape. It was an easter egg, it was never documented by Netscape, they just used it a couple of times on their Web site. It was actually meant as a joke.
To answer the original question, Web designers should be taught to use as little active code as is necessary. I am fed up with sites that collapse in a mess of poorly debugged Javascript. At least these days Javascript rarely causes the browser to crash, but you can still go to a major site and hit a Jscript bug with a major browser release.
The main design point I think Web Designers need to be taught is allowing the user to decide how to view the site. I really get fed up with sites where the main purpose is to satisfy the Web Designer's ego.
My absolute hate is sites that start to mess arround with the controls on my browser. Especially those that try to disable the back button or fix the window size. At home I have a large LCD display, only i spend a lot of time looking at sites that insist on folding themselves up to a postage stamp size in one corner with 6pt fonts.
Don't ever put 'best viewed in 640x480 on your site, or anything like it. The whole design of HTML was to make that type of thing unnecessary.
IE now allows you to enable javascript on a per site basis. since turning off Jscript by default and only enabling it when necessary the quality of my browsing has improved greatly. A major side benefit is that popup ads no longer work. Now if we can only persuade MSFT to allow Macromedia to be disabled on a site by site basis or provide a button that says 'Never download this application it is a crappy piece of crap whose sole purpose is to bombard me with crappy adverts i don't want to see'.
Re:Uh (Score:3, Informative)
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.
One Facet of good design: Elegance (Score:5, Insightful)
Re:One Facet of good design: Elegance (Score:3, Interesting)
It ends up looking bad, not working, and generally being annoying.
So my ideal web design: no javascript. No java. No proprietary extensions.
Provide the text you want, and arrange it on the page in a nice readable way (with CSS, preferably), and don't bother with anything else. It just gets in the way, makes things unreadable, and makes it very difficult for the data be used in any other way.
Re:One Facet of good design: Elegance (Score:5, Insightful)
Re:One Facet of good design: Elegance (Score:5, Insightful)
flash, etal. has just gotten out of hand... eye candy is cool the first 3 times you see it.. after that it's just a waste of bandwidth.
Listen to the clever people... (Score:4, Insightful)
From his book, User Interface Design for Programmers: [amazon.com]
Usability is not everything. If usability engineers designed a nightclub, it would be clean, quiet, brightly lit, with lots of places to sit down, plenty of bartenders, menus written in 18-point sans-serif, and easy-to-find bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other.
(he also said that on his site in Nov 2000 [joelonsoftware.com].)
Joel's a far more clever guy than I, and is always much more eloquent in expressing ideas. You should listen to him, too.
J.J.
Re:Listen to the clever people... (Score:3, Interesting)
They already have these in most places. They're called Starbucks. And they seem to be doing pretty well for themselves...
-- Jason Lefkowitz
Re:One Facet of good design: Elegance (Score:3, Funny)
Re:One Facet of good design: Elegance (Score:3, Insightful)
The medium has to be appropriate to the message, and I'd say it isn't in this case.
After seeing that site, I certainly would not trust them to create a genuinely marketable game. For a computer hardware company or technical support, though, it would be a breath of fresh air.
D
K.I.S.S. (Score:5, Informative)
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.
Re:K.I.S.S. (Score:5, Insightful)
The problem is, just which page is making the noise?
Re:K.I.S.S. (Score:5, Funny)
One of my favorite web-sites (which shall go link-less, for obvious reasons) states: "This page has been pessimized for Internet Explorer, as those of you listening to William Shatner singing Mr. Tambourine Man have realized."
Re:K.I.S.S. (Score:2, Interesting)
For values of "cool" equaling "a waste of time and a duplication of effort"...
Know your audience and try to reach as many of them as possible. This doesn't mean that you have to support every combination of browser/platform/plugins/options, etc.
Re:waste of time (Score:4, Informative)
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.
Re:K.I.S.S. (Score:3, Interesting)
The only reason to maintain two versions is to deal with shitty browsers [netscape.com] that don't implement reasonably current standards, and you're better off using server-parsed HTML or CGI to modify your site on-the-fly to present itself in different browsers. This keeps you from having to maintain two site trees, and it also makes it easier to incorporate common sitewide elements (navigation bars and such) into your design. Browse this site [dyndns.org] with IE, Konqueror, Lynx, Mozilla, and Nutscrape 4.x, and watch how each browser keeps up. (The server generates two types of code: proper HTML 4 and CSS for browsers that can hack it, bastardized HTML for Nutscrape 4.x and earlier. Note that the W3C's HTML 4 and CSS buttons don't show up if you use Nutscrape 4.)
Re:K.I.S.S. (Score:3, Insightful)
Not necessarily. The two sites I maintain are built dynamically (well, at home, then copied statically to the server) from XML sources. All navigation, menus, and content for both the "fancy" and "plain" HTML versions come from the same source tree, and both are pretty much always in synch. Whenever they're not, it's a failure in my site-generation code, not anything to do with whether I've remembered to update both sides.
Best trick: All the "plain" stuff shows up in the 'No frames' tag, so if you surf to the main site w/lynx, you don't get "clikc here for the plain version," you just get the plain version. Simple, stupid, but something that used to annoy the crap out of me and so I'm quite proud of myself for doing it "right" (or at least "better").
Downside: You gotta make (or find, or buy) an XML-to-multiple-output website generation system. But, then, that's half the fun!
Re:K.I.S.S. (Score:2)
I just told one of my friends that is trying to get into web design these exact same things. He's using way too much javascript and html to get a very simple task done. KISS - it saves everyone a lot of trouble.
~LoudMusic
Re:K.I.S.S. (Score:5, Interesting)
I will STRONGLY disagree with you on that one.
ALWAYS pop up external links into a new window. It pisses the HELL out of me when I click on a link IN THE MIDDLE OF AN ARTICLE and end up LEAVING the site and have to hit back, then select to open the link in a new window. (I end up doing this once on at least every site just in finding out if it opens things up in new windows or not).
For crying out loud, why in the WORLD would I wan to stop in the MIDDLE of an article on your site and go to some place else? Now _THAT_ does not make any sense. I would never get finished with anything if I browsed like that.
Re:K.I.S.S. (Score:3, Funny)
A guy goes into a doctor's office and prods himself in the shoulder gently with his finger. "Doc," he says, "it hurts when I do this." Then he pokes himself in the knee, "And this." Finally, he pokes himself in the belly, "And this."
The doctor says, "You're Polish, aren't you?"
Patient says, "How'd you know?"
Doctor: "You have a broken finger."
Look - you already know how to open a link in a new window. Do it. I've heard a lot of people complain about a lot of things about web design, but never this.
Reverse It (Score:5, Insightful)
To provide the user with choice (which is one of the most important things that a website developer can do), it's important to not force particular UI styles on users. Give them choices. In this case, the only way to do that is by not opening links in a new window.
-Waldo Jaquith
Simplicity. (Score:5, Insightful)
Information. That's the point of the whole thing, right?
Make it as quick and easy as possible to find the information that is on your site. And if the interface to do so is too complex to use Lynx for, you're suffering from HTML bloat.
--saint
Communication (Score:5, Interesting)
What made slashdot so popular? The comments. That's the point.
Re:Simplicity. (Score:4, Insightful)
Re:Simplicity. (Score:2)
Amen to that. Whenever possible, being viewable on Lynx should be your standard. And this is easy as can be if you learn to separate content [werbach.com] from style [westciv.com.au]. You do that and you'll have all your fancy effects, and the site will still look good in Lynx and be browseable by search engine bots.
Re:Simplicity. (Score:3, Insightful)
http://www.shadowscapes.com/ used to have a text on background layout for its left most navigation bar (the site layout has since changed and now uses some dynamic stuff that takes for-friggin-ever to find your way around, it breaks the "don't hide the navigation tools!" rule) that was perfectly functional.
Hell all you are doing is linking to another page that has further information on that particular piece of art.
I have visited sites with some VERY nice artwork, but damned if I could find much of it underneath the complex interface.
If I go to your art site I am looking for art, not applets, not flash, but ART. And more specificaly the ARTWORK itself.
If you run a tutorial site for how to create artwork, I want access to the tutorials, and not have to jump through a few thousand hoops to get to those tutorials.
If you run a site that contains information on the history of art I want to be able to quickly navigate between the different era's on your website so as to be able to check on things references from other parts of your site.
In NONE of those cases do I want some complex hard to use interface.
If I want to witness the latest in interface technologies over the web, I will visit a set dedicated to, hey, get this;
interface technologies over the web.
Not art.
Not litature.
Not books.
Not computers.
But interface technologies.
That is the ONLY time that I expect to have to deal with the interface of a site. The only time.
Kibo has an example (Score:3, Funny)
C-X C-S
My eyes! (Score:2)
No such thing (Score:4, Interesting)
Or, you could just put all the important stuff in flashing text
Re:No such thing (Score:5, Funny)
Totally! You don't have to worry about how to design the webpage, if you can just design the users. Just make them so they want whatever you're showing them. I connected the pleasure center of my user's brains to the yellow light receptors in their eyes. Then I just made all the backgrounds yellow, and they are ecstatic about it, let me tell you.
There's no agreement (Score:5, Interesting)
There's the progress camp:
www.webstandards.org [webstandards.org], that wants everyone to upgrade their browsers and live on the bleeding edge of style sheets (how ironic is it that their bleeding edge stance has been replaced with an "under construction" sign).
Then there's the compatibility camp:
anybrowser.org [anybrowser.org] that wants every web page to work in the old browsers.
There are probably a few things everyone can agree on, like Flash being worthless at best and extremely annoying most of the time.
Personally, I say: look at the successful dynamic sites. Google, Yahoo, Slashdot. Light HTML, very light images, strong dynamic backend. Don't get too caught up in the format details; it's the power of what's driving the web page, and the content, that matters.
Re:There's no agreement (Score:2)
A car can be driven away as fast as you can start it and put it into gear - maintenance is just a couple hours every few months; text downloads almost immediately on my modem.
That's the difference between flash and a car, and it's why flash sucks. I think it also says something about argument by analogy.
Score 5 (Funny) (Score:3, Funny)
This is one of the funniest and most ironic things I have read on Slashdot in a long, long time. Sehryan does a perfect job of playing the comic "straight man" who just doesn't get it, in one of the best performances of the year. Thumbs up!
Not Just Design Anymore (Score:4, Insightful)
It seems that web design has changed over the years in order to better accommodate database-driven websites. Text graphics, for example, are pretty much out.
Check out the big boys and see what they've been doing with their sites in order to compensate for massive quantities of content.
I'm biased, but I've got to say that the LDS Church website [lds.org] has done a remarkable job of integrating content and design in an attractive and useful way.
I have a better question... (Score:5, Insightful)
The "look" of the website, or the "content"?
Glammer up garbage, and its still garbage. Glammer up content and you've got a blockbuster site.
Just a tidbit to think about when redesigning.
BTW - Cliff, you realize that this is a "need hits on my website" article dressed in "AskSlashdot" clothes, right?
Um (Score:2)
Don't Make Me Think (Score:5, Interesting)
Another thing he brings up is usability tests. I admit, I haven't started doing this yet, but I agree with him. Grab a user that isn't a web programmer. Go to their machine and have them load your page. Then ask them to perform some function and watch what they do. Do they struggle when they try to add a user to the list of names? Do they search around for a help button? In some cases, have the user actually speak out loud about what they are doing. Usability tests can really help you learn where your app works well and where it just plain sucks. Hell, I forgot to add a 'save' button to one of mine because I knew how to get it to save without the button (there was a trick to it). I almost put it in to production, but we do quality checks with other people and they caught it (I believe my thoughts were, "Doh!").
Anyway, I'd suggest the book. It's something you could read while sitting in a Barnes and Nobel sipping tea or whatnot.
Re:Don't Make Me Think (Score:5, Informative)
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.
Know your audience (Score:2, Insightful)
<tim><
What do you want? (Score:5, Insightful)
Some people LIKE lots of Flash, animated buttons and dancing bologna on the screen. I like clean and simple. Each is appropriate for different tasks.
The question is, as always, "What problem are you trying to solve?"
Here's what not to do... (Score:5, Informative)
http://www.webpagesthatsuck.com/ [webpagesthatsuck.com]
Wow Web Designs all suck (lousy example) (Score:2, Insightful)
Content first - flashy last (Score:3, Insightful)
What is your content? That is why I came to your site.
Can I find and understand it easily?
If I can't figure out the content, the rest is useless.
Focus on your content. Why is your website there? Why am I looking at it?
Flashy == distracting == frustrating == waste of time
... unless your whole purpose is strictly to entertain
Check your market ... (Score:2)
Everything you want to know is here... (Score:4, Funny)
Design and Creativity are the wrong things... (Score:3, Insightful)
...to think about. Or rather, they are, but they should be on the list below usability. That is, if your web site is there to store some actual content or information, as opposed to being primarily a work of art in its own right (in which case you should go nuts and ignore the rest of my message).
For instance, just that front wowwebdesigns.com site you point already makes me grouchy. Why? They shrink the font size below the default font size. With my default setup, the page is completely unreadable. Fortunately, with Mozilla I can bump up the fonts for that page, but good web design would mean the user shouldn't have to do that.
The site is also too busy. Too many sites out there clutter the screen up with packed sidebars on both sides and advertisements and flashing animated images and Flash animations and oh my word.
The pages they list as "good" at may be pretty and eye candy, but unless you're trying to make a gallery piece which is supposed to be thrilling in its own right, they are what I would think of as *bad* web design. To my mind, good web design is a design that doesn't get in the way of your reading and getting to the information you want to find on that web site.
My idea of good web design? www.google.org is near the top. Very clean, simple, straightforward, does its job and is readable.
Clean, readable, not sensory-overload inducing, well-organized: all of these things are far more important for 80-90% of the web sites out there than anything having to do with being visually appealing or using creative and fancy new touches.
-Rob
hmm. (Score:2)
A good web designer.
Seriously, that's all there is to it. You can't really say what elements make a good web design.
You can say things that most people consider bad web design and avoid them, but not really what makes good web design, unless you are so boring and obvious as to say things like "clear, consistant layout" or "works on most modern browsers and is standards-compliant". (Well, duh).
graspee
Most Important Criteria (Score:5, Insightful)
You really can't go wrong if your website follows those three principles. There are hardware concerns, too (make sure your servers and your connection is up to the expected task).
jwz nailed it. (Score:2)
from design [jwz.org], by Jamie Zawinski.
Web Design tips (Score:2, Informative)
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.
What I look for (Score:2)
I'm just a guy who goes to a lot of web sites.
Here are my personal preferences
(1) THERE MUST BE CONTACT INFO. I was doing a project for a bit where I had to call various university math departments. It was very annoying when there was no way to get an address and a phone number for a website. Put that stuff on the first page.
(2) THERE MUST BE A SEARCH BOX. It is not hard to attach a search engine to a web-site now. So there is no excuse for not doing so. If I want to buy a bow-tie from you, and I know you sell them along with eleventibillion other things, I should be able to type "bow-tie" in a box instead of going through your navigation
(3) IT MUST LOAD FAST. Unless it is a photograph of a naked lady, I am not going to wait for that graphic to load. I have a very nice internet connection, and I still find pages where I have to wait for the labels on the "forward" "back" "search" "about" buttons to load, because of all the other graphics that are on the page
(4) THERE IS NO POINT FOUR
(5) IT MUST NOT CRASH MY BROWSER. Some pages make Internet Explorer crash. I don't know why. I don't care why. I just plain don't like it when that happens, so please make it not happen to me.
DJS
A Good Design... (Score:2)
Developing for the different viewing possibilites is a royal pain, but it a) should be done in the hobby arena, and b) MUST be done in the professional arena. Take into account when you're developing different browsers, platforms, resolutions, browser versions, etc. Because of these differences, try to conform to standards, make minimal use of technologies unsupported in some browsers (VBScript, lots of JScript) and try to code for ALL your users.
A good site will be easy to navigate, will help you along if you get stuck, is preferably searchable, and actually has content.
Oh, and NO auto-popups.
What the target audience is. (Score:2)
If your target is in the elderly group, BIG fat fonts, etc...
It think the thing to keep in mind is simplicity. Stay away from flash & cie on the front page. Always have a link back to the front page. Put the search in an abvious location. Don't put popup menus. Clearly identify categories (a la slashdot with icons...). Provide an alternate page for dialups, with less graphics (or simply for text-only browsers). DO NOT try to put everything on the front page. Remember that not every one has high res 22 inch screens. this site [konstruktiv.net] looks freakin great on my screen but looks like crap at my friend's place. It's simple and it's got style. But it's not for dialups.
The important thing is to keep the end user in mind.
What is the point of the site? (Score:2)
Compare the web sites of companies that make their money on the web (Google [google.com], Amazon [amazon.com], etc) to companies that make their money off the web (Ford [ford.com], Pepsi [pepsi.com], etc). You will notice how the web-based companies have sites that do not use Flash, big images, or anything else that makes it harder or slower to read their sites. The companies that make their money off the web will typically have sites designed by their marketing department to include the "coolest" features possible, regardless of how hard it makes the site to use.
MARQUEE (Score:2, Funny)
message goes here
(try it)
Re:MARQUEE (Score:2)
the tag is <marquee>message</marquee>
Is it for info or for entertainment? (Score:2)
K.I.S.S.
If for entertainment, I have no advice for you. Entertainment sites are meant to entertain, so I reckon Flash, javascript, animated gifs, audio, and all that stuff, well, it's sort of expected. But when go to a business or info site, I want speed and accuracy and simplicity.
Check out Jakob Nielsen's website (Score:5, Informative)
Simple solution for a lot of hits... (Score:2)
Whatever you do, don't make it look like this [webchannel.com]. I've never seen a website that said so much but left me wondering, "What the hell is it that they do exactly?"
Slow news day, huh? (Score:3, Funny)
Personally, I like Slash [slashcode.com]. What's that? You say your website isn't an interactive forum? Oh, dear.
Speed! (Score:2)
It depends on your audience (Score:3, Informative)
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 [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!
Jakob Nielsen's Alertbox (Score:5, Interesting)
I'd suggest reading Jakob Nielsen's Alertbox [useit.com] on web design, not only the current columns but past ones, too. Some columns like The Top Ten New Mistakes of Web Design [useit.com] are definitely worth reading. It's a couple years old, but people still make those same mistakes.
Besides not falling into the trap of flash without substance (pun intended; Flash is frequently useless for most web sites), keep in mind that people have come to expect certain things from how web pages work. It's nice to have an inovative design, but if it's so far outside the norm that no one can figure it out, people aren't going to use it.
For example, for web commerce, you may not like Amazon, but their site has become the standard for how people expect to shop on the web.
my opinion (Score:2)
If you use flash don't use it to display important data. Flash should be used in such way, that you can't really tell if it's flash. Use it for eye candy - but not too much.
No Flash Only, Compatible, Fast, Not annoying (Score:2)
- You also don't want sites that do not display well (or even worse, crash) in some browsers. I don't say you have to support every netscape version up to 0.7, but there really *is* a world apart from Internet Explorer 6.
- Make it fast. If you really want to cram your site full of gizmos, be sure to provide an alternative version for people who haven't got an OC30 directly connected to your datacenter.
- Do not annoy your visitors. That means: No pop-whatevers, no "If this banner is flashing, you've won a monkey to punch"-type of stuff. I also don't like pages with sounds, like the "cameron diaz ad" on kazaa [kazaa.com], or even the embedded mp3 on mobistar [mobistar.be]'s page. (Mobistar is a Belgian GSM operator).
One thing I think is really cool is the site of URGent [rug.ac.be], a Belgian student radio, where you can choose between several designs. The content is drawn from a database, and the designs range from a "lynx" theme to heavy graphics. (And I've heard there's a "kde-like" theme under way)...
Multiple Browsers - Multiple Platforms (Score:2)
As a rule og thumb I generally design for Netscape as there are fewer problems that crop up when the same page is viewed in IE.
Keep your styles limited to ones that operate the same over different browsers.
You'll find that macs and PC's show font sizes with much variation. My solution was to create a perl script to gather browser info and spit out a style sheet for that partuclar browser so that the font sizes and colors will be the same on multiple platforms and browsers.
Keep it appealling, but don't over do it. The only way to gauge what works and what's overkill is with experience.
Above all go to various sites and see what is functional and what is not. A site may be pretty as hell but impossible to use from a practical standpoint. Likewise a site may be wonderful to use but boring to have to sit through. Let your site's purpose dictate which way this should lean.
A portfolio site might do well with more graphics while a site on programming would do better with mostly text.
Whatever you do, just keep it functional first.
Good Web Design (Score:3, Insightful)
2) Create a site that is standards compliant. Please note that doing this requires adherence to 1.
3) Hypertext is an excellent manner of displaying and linking information. Keep that in mind. Information.
4) Proprietary inclusions such as Flash should be segregated from the main of your site, and identifiable as what they are.
5) There's not much that Javascript does that you really need. Honest.
6) Newspapers use narrow columns for a reason.
7) Sarif fonts are easier to read in column-form than sansarif fonts.
l
Nice Art Design != Good Web Design (IMHO) (Score:3, Insightful)
When I go to a website, there are a few things that will immediately piss me off:
If I have to resize my windows to view the page properly... I ration out space on my desktop right down to the pixel... if I have to resize the window to view some big page layout, I usually decide not to look at the page at all
If there is a pop-up anything... pop up ads are infinitely more annoying than banner ads. Why can't people take a lesson from Google, and their text-only ad policy? Also, if I click a link on your page, and you force my browser to launch a new window, I'm outta there. (I've always wondered why my browser can't disable this feature and just replace the current page with the new one ALWAYS)
Sacrifice of useability for artistic masturbation... if you find yourself thinking that you've just GOT to use that flash animation, or animated GIF, or whiz bang javascript, first do everybody a favor and ask yourself if it adds to the useability factor of your site. chances are your visitors are a lot less impressed with those gadjets than your are.
Not only do these things annoy, if you keep things simple you will have more time for content, which is all most of us are really concerned with anyway. Now that I've opened my fat mouth, I'm sure everyone will go visit my site and proceed to rip me a new one about how it could be better *grin* (feel free, btw)
No Flash; no Java; no cascading menus; no popups; (Score:2)
compatibility (Score:2)
The only design that works... (Score:5, Funny)
[] A teal color scheme
[] Black text on a white background
[]
[] A plethora of spelling and grammatical errors; otherwise, it will look like some type of machine is running the site rather than a genuine dumb human being
[] The ability to add users
[] At least 40% of all users must troll
[] Allow them to have a
[] Commenting capabilities
[] Comments must be rated as an integer value with 5 being the highest and -1 being the lowest. In special cases, incessantly naughty trolls can be bitchslapped into a -2 blackhole.
[] First post is life, the rest is just details
[] Moderating capabilites
[] Posts may be moderated an infinite number of times. Even if every rating is used a handful of times on the same comment, it should be rated as whatever adjective the last moderator thought it deserved.
[] Ultimate goal: build a large enough user base so that you can post links to sites you yourself hate on the front page and watch those sites' servers go up in smoke in a little under five minutes
This is meant as a joke. I love
:-)
The Problem (Score:2)
1. The specs for a good site. Such as file types, plug ins, hi/lo bandwidth, etc.
2. What doesn't make for good web design. Most everyone can look at a site and say "This is bad". Even fewer can look at a site and say "This is what makes this bad". And the fewest, smalllest group of people can look at a site and say "This is what makes this site good."
Good web design is, like any design, very open to interpretation. Although bad web design is a much easier subject to discuss.
It's completely relative. (Score:2, Redundant)
You should prioritize the following:
1. The code needs to be simple, as does the design- your page needs to load on everything. I've stopped bothering with Netscape 4.7 (layers! Gah!) but make an effort to make sure my pages load on Mozilla and Netscape 6, which requires effort for the fact that they both really hate multiple nested dynamic tables.
2. I'll get a "redundant" for that one, but I haven't seen this mentioned yet- The actual Information Design needs to be clearly thought out. What are users coming to your sight for? What do they want? Design your site to make whatever that is easy to find and quick to get to. You should be more concerned with the actual FLOW of your DATA than of your design- the form, naturally, follows function. If I have to run a search to find something that should be on the front page or part of the static navigation, or if running your URL through Google gets me somewhere I couldn't find, you've failed and need to take the class again.
3. Stay away from plugins. All Shockwave and Flash do is eat your bandwidth- not everyone has the latest version of the player, not everyone has the bandwidth to pull a 500k splash page, and most importantly, not everyone actually likes flash. All depends on your audience.
Beyond that, it becomes personal preference. I run at 1024x768, but my browser is a window that's about 700x400 - I hate browsing fullscreen and am not fond of pages that either force my rez or require horizontal scrolling. I also am strongly against audio elements in pages, and useage of flash if I notice it.
So build small- both in graphic file size and minimum physical area of the page. Build simple, so it runs on anything. Design minimally, so the user isn't overwhelmed with a wall of links and options and gets lost. And bottom line, keep in mind that no matter how clever you think your design is, 90% of the people using the web are idiots.
Ask yourself this question (Score:4, Informative)
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.
Elementary Watson (Score:2, Informative)
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
My favorite example (Score:2)
My personal favorite example of good web design is Baseballreference.com [baseballreference.com]. The layout is very clean so that the information is easy to digest and the pages are reasonably sized. It has a good search engine so that the information that people want the most doesn't require a lot of clicks to find. Just about everything that can be is made of pre-processed static pages rather than dynamic ones, which (together with the lightweight layout) makes it very fast. Most importantly, it really makes use of html. The information is densely hyperlinked so every page makes it easy to get to related information with one click. It's an incredibly useful site that's become a standard internet reference, and a lot of that is because it's well designed to make it easy to use.
Liquidity (Score:3, Insightful)
Nothing makes me madder than having to scroll back and forth across a web page because some idiot figured that since the site looked fine in his maximized browser on his 1024x768 display, he could hardcode the tables to be 1000 pixels wide and no one with have any trouble with it. Other than people using too much superfluous flair for its own sake, I think this is probably highest on the list of big problems designers make.
Take steps in the beginning of your design process to avoid the problem. Start using the percentages for widths in your table tags. Start using the ALIGN and VALIGN attributes correctly. Don't rely on FrontPage to position things for you with style properties, instead put them into properly formed table tags with the alignments set right so that the page flows when it's resized.
It really does make a huge difference.
Quite frankly... (Score:2, Informative)
user-centered design & good content - MUSTS! (Score:2, Informative)
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:
don'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? ;)
10 Commandments (I use) (Score:5, Insightful)
2. Flash is evil, and of the devil. Flash is blaspemy.
3. Javascript can be useful for on-page functions that don't necessarily require a server call, but remember your page still still fundamentally work with no javascript enabled.
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 always be used (see number 1) but make sure that necessary style pairings (such as colored tables and the text within) are defined in the same scope. A page-declared table color and text/css file declared table text color could cause problems if your style sheet file doesn't load.
8. Design for non-compliant brower protocols *only* if your business depends on it. Private sites should *always* be written to the HTML specs (see #1) all browsers be damned.
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.
Re:10 Commandments (I use) (Score:3, Informative)
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.
Re:10 Commandments (I use) (Score:3, Insightful)
Flash *can* be used to make some really nice navigation functions, but it's more often used to make flashy animations that just distract the user. Only use Flash as a last-resort, if at all.
4. Images should be used for illustrative purposes, not to show you found a neat image and *never* as a background.
Minor exception, on one of my sites, I use a three toned image as a background. It gives the appearance of the page being divided into three columns (left nav, main content area with white background, and grey blank right column). The look is clean and since the image is a small GIF that's just repeated by the browser, the download time is minimized. However, rule 4 applies where the background image in any way interferes with the reading of the page.
7. Style sheets should always be used (see number 1) but make sure that necessary style pairings (such as colored tables and the text within) are defined in the same scope. A page-declared table color and text/css file declared table text color could cause problems if your style sheet file doesn't load.
Also test between browsers. NS 4.x is notorious for mis-displaying CSS. Unfortunately, NS 4.x usership hasn't sunk enough (switching to NS6/Mozilla) to justify simply ignoring the browser. It will cause you more headaches, but at least the user won't leave your site right away.
Re:10 Commandments (I use) (Score:4, Funny)
You're asking the wrong crowd (Score:5, Insightful)
Frankly, I think you're asking the wrong crowd.
Of all computer users, the Linux crowd is the least qualified to comment about design. Oh sure, there are exceptions, both among Linux users and among Slashdot readers, but just read the comments that have already been posted. The common thread is that people wouldn't want to sacrifice content for a flashy web site, and that just shows their ignorance. These people don't realize that good design does not involve compromizes. Good design is about presenting the content in such a manner that the appearance enhances the content presentation, not distracts from it.
Besides, look at the state of 99% of Linux software, especially the open source stuff. User interfaces are the last concern of the developers. It's obvious to me that the majority of Linux developers and users really don't care, or just don't know anything about, good design. But, I guess I should cut them some slack, since it's very hard to be a good programmer and a good designer. Yet I'm disappointed that most developers don't try to get good design ideas from others.
So yes, Virginia, you can have your cake and eat it too, provided that the web site is designed by a real graphic designer. Such an individual has both training and experience in creating designs that work.
Re:You're asking the wrong crowd (Score:4, Insightful)
Why?
Because they have no idea what "filesize" is.
Every single web site I've seen that's been done by a graphic designer is basicly that: a graphic.
Need a menu bar? JPG.
Need a background? 300K JPG
Need a next button? JPG
Need text? JPG
Everything is an image. Why? Because Graphic Designers can't handle the fact that web pages look different for different people. The only way they can controll this is by using lots and lots and lots of images.
Not only should programmers not be allowed to design web pages but neither should graphic designers.
Here is a step by step plan (Score:3, Informative)
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.
Graphics: use "Alt", "Height" and "Width" (Score:3, Interesting)
To some extent, you can have your cake and eat it too- a fair number of graphics, as well as a page that displays quickly if you always use the "height" and "width" attributes in your IMG tags to manually specifiy the dimensions of your graphic. This way, the user's browser can go ahead and render the rest of the page quickly before the graphics are downloaded since you've alreay told it how big that image will be.
This is potentially a HUGE gain in the perceived load time for your site. I hate waiting for a bunch of graphics to load, but if I can start reading the page while the graphics load in the background I don't really mind.
The "alt" attribute for your IMG tags is important, too. This "alt" description is what gets displayed before the image has loaded, or if the user has graphics turned off or is using a non-graphical browser (maybe they're visually impaired!).
Additionally, descriptive "alt" tags help your images get ranked higher in image search engines, such as Google's. This is an increasingly popular way for people to find your site.
What's Wrong With Flash? (Score:3, Interesting)
Part of the dip in web popularity and content, content, content push right now has something to do with how BORING most sites are visually. Information and communication can be highly visual, multimedia experiences without the techno soundtrack and popup windows. "Content-freaks" tend to forget that photos, infographics, video, audio (used sparingly), even motion graphics are often ESSENTIAL components of successful communication.
I think good web design goes beyond presenting viewers with long articles and extensive commenting/forum features.
It's the attention to detail.
Sites like k10k [k10k.net], pixelsurgeon [pixelsurgeon.com], presstube [presstube.com], and others, succeed in providing visual stimulation, while google, slash-anything, etc. succeed in providing content. There are very few sites that succeed at both. None that I've ever done. Probably because the number one feature people ask for is SPEED.
Well used flash, with a nice php/sql powered backend, can really deliver speedy content to slow modems and fast modems alike.
That said, I'm still leery of using flash on front doors and on high traffic / wide user-base sites.
Oh and one other thing that drives me crazy. Forms that don't allow auto-fill for states b/c of pull down menus, and forms with excessive validation or required fill boxes...
Been thinking about this a lot myself.
Subjective (Score:3, Insightful)
Good web site design is subjective. What one person considers good to look at, another won't. Some people actually like those huge flashing animated gifs they put on web sites. Do what you like if its a personal site. If its commercial and you're doing it for a client, then of course do whatever the clients like.
That aside, I know I might be rehashing a lot of other people's comments, but here are a few of the things I keep in mind when designing sites:
- Conforms to the W3C [w3.org] accessibility guidelines and validates (HTML, CSS, etc.) If your site does this, it will cover a lot of the other bases and cut down on problems. Also try running your site through Bobby at http://www.cast.org/Bobby/ [cast.org]
- Doesn't use unnecessary graphics or flash. When you have a site about art, movies, or other topics that lend themselves to heavy graphics or when you want to show off something, like a product or your campus - use the images and make sure they're nice ones. In most cases tons of graphics and fancy flash things aren't necessary and just contribute to download time.
- Looks acceptable on as many browsers as possible. It might not look identical on all, but there isn't anything that's illegible on an older or non-traditional version. Try a site like Any Browser's Site Viewer [anybrowser.com]that will show you what your site looks like on using other browsers, or older versions of HTML support.
- Dynamic Content is important if you want to bring visitors back. They come to your site once, find what they want and never come back again unless your content changes. On the same note, when they get there the content must be up to date on things that are timely, like events information
- Make sure the site downloads fast - most importantly the front page. I now have a 24kbps connection at home and realize just how important this one is.
I guess those are my main ones. I won't get into all the others because so many people have covered them on here already.
This site - Any Browser [anybrowser.com] and this site Software QA Test [softwareqatest.com] have testing tools that may be of some use to you.
I'd give you some examples of my work, but I really can't afford for for any of my sites to be slashdotted right now.
My own web design rules (Score:3, Insightful)
If you don't have anything interesting to say, don't even bother.
Do not use any animations or blinking text on a page, when there's any text to read, especially if they can't be turned off by simply pressing Escape or clicking Stop. I don't mind ads, as long as they don't interfere with reading, and animations do interfere.
Don't publish invalid HTML. Always use W3C HTML Validator [w3.org] and CSS Validator [w3.org] on your pages online. Always use HTML Tidy [w3.org] before your new pages are online. If you don't write HTML but you use a WYSIWYG Web authoring tool instead, and its output gives any errors or warnings when tested with HTML Validator [w3.org], complain to the vendor of this tool you use asking to remove the bugs.
HTML or XHTML [w3.org] are for the logical informations about your document. CSS [w3.org] is for defining the look and feel.
The <NOSCRIPT> tag is not for writing "Your browser is bad, come back when you install better" but for providing the same functionality for browser without JavaScript or with JavaScript turned off.
(By the way, texts like "If you can see this text, that means you have no JavaScript" are as stupid as "If you can see this text, that means you have a kernel panic")
If your website is unusable without JavaScript, it needs a redesign. Don't use <a href="javascript:..."> links if you don't have equivalent <a href="http:..."> links inside a <NOSCRIPT>.
If your website is best viewed with any specific browser, or in any specific resolution, you're not a good web designer and worst of all, you don't understand what the Web is all about. See the Any Browser Campaign [anybrowser.org]. Install Lynx [browser.org] (a text-mode browser) and see how your website looks like. If it's unusable, it's poorly designed. Remember to always use ALT property in IMG tags, aspecially in navigation buttons.
See the Web Accessibility Initiative [w3.org] and always try to meet the Triple-A, Double-A or at least Level A Conformance. Use Web Accessibility Initiative logos [w3.org] on your website, or just a text information about your level of conformance.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, inventor of the World Wide Web
People may access your website using Braille terminals or voice synthesis. Testing your website with Lynx [browser.org] is always a good idea.
Remember that 10% of your visitors are color-blind in some degree. Remember that black text on white background is the best combination for any text longer than few lines. Try to learn from the good old books, not from the magazines about the latest celebrity gossips.
Remember that the best font for text longer than few lines is a serif, variable width font, like Times. Try to learn from the good old books, not from the magazines about the latest celebrity gossips.
You should always use the default font face and default font size for the normal text content on your website. Just don't define the face and size, and it'll be ok. Remember that when you use size "-2" for the whole text on your page it means: "For the text on this page, use the font two levels smaller than what the user has chosen as his/her default and favorite size of font".
Use your own font faces, sizes and colors other than black on white, only for logos, headers etc., but not for the main text to read, longer than few lines and especially longer than a paragraph. Soemone has set a bigger size as a default for a reason - maybe he/she has a small screen, maybe he/she has problems with eyes, maybe he/she just likes big fonts - respect this decision.
If your site is multilingual, use the Accept-Language HTTP header. My browser sends Accept-Language in every single request and it's stupid that I have to click English version links, after I've already told it in my HTTP request. See the RFC 1945 - HTTP/1.0 [w3.org] (May 1996)
It's nearly 6 years old feature, still most of people don't use it. RFC 2616 - HTTP/1.1 [w3.org] (June 1999) defines much richer Accept-Language header (See section 14.4), but please, use HTTP/1.0 functionality at least. See www.debian.org [debian.org] which is a great example of this feature functionality.Try to learn from the good old books, not from the magazines about the latest celebrity gossips.
Contact me [slashdot.org] and I'll fix your broken website or supervise your webmasters for very affordable prices.
This is not the place to innovate too much (Score:4, Insightful)
I do web programming for a living, and we get into some very interesting conversations when we're designing a site. Occasionally, I get some very wierd requests for new and novel interfaces. This is a bad idea.
Although the web is fairly new. almost everybody is expecting to see a few things.
I may be heavily biased, since that is what I do all day, but make absolutely sure your code is valid HTML, and leave out all the kruft. Pretty much all WYSIWYG design interfaces by default don't put out valid html, so don't use them. [Emacs |VI] will perform admirably, produce clean code, and if you use a server side scripting language and hide most of your code in templates, will be as fast or faster than Dreamweaver or Frontpage. (You are using PHP/Coldfusion/CGI/ASP, Right?)
For the Love of (insert your choice of deity here), don't make a site all flash unless you have an extremely good reason to. As of yet, I have never heard of a good reason to do so, but they might, in theory, exist. Anything that you put into a web page, be it Javascript, Flash, Shockwave, audio, video, and massive, massive graphics, slows down the site, makes it harder to load, and will turn people away. I'm not saying to use NO graphics. I use quite a few at work, but keep them small, and realise that users very well may have images, stylesheets, or browser-supplied fonts turned off.
Finally, remember what HTML is designed to do. HTML is a markup language designed to format text. All the nifty graphics and such are good, and they have their place, but they weren't invisioned when HTML was designed, and in a sense, they are foriegn to the medium. Use them with caution.
Whoever mentioned the book Don't Make Me Think has a very good point. That one sentence tells you more about User Interfaces than many books ever will.
a few key things to remember (Score:4, Interesting)
all these are of course simple usability thoughts. you still need to consider file sizes/image optimisation, cross-browser issues, etc. key to all of these though is knowing your target market. if I'm making a site for other designers it's doubtful it would need to support anything less than 32bit colour 1024x768, a higher than usual bandwidth and slightly more patience to see some eyecandy. however cross-browser compatibility becomes a key issue.
thats all for now, i may follow this up a little more if people want it at a later date.
CONTENT (Score:3, Informative)
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.
Read the "HTML Hell Page" (Score:3, Informative)
Re:One thing... (Score:2, Funny)
Re:One thing... (Score:2, Funny)
Re:target platform/browser - Windows/IE (Score:2)
Making your page look good on every browser and platform is impossible. It will take too much work and you probably don't have all the systems.
Or, instead of going into this foolish mindset of thinking that you have to code for every platform, just write your web page using the standards that are out there, and they will render just fine on any standards compliant web browser. It's not that hard!
-Rob
Re:target platform/browser - Windows/IE (Score:4, Interesting)
Bullshit!
Making a page that looks good on every browser is as simple as using standard W3C approved HTML. Once you start using advanced CSS you'll run into a few problems, but they're managable. But once you start using scripts, animations, frames and proprietary plugins, you'll never get it to look decent on any browser but they one you're coding for.
We've got a new guy at work who used to be a web developer. I had a long discussion with him about why websites were designed for specific browsers. Why use all these proprietary plugins and scripts redirecting browsers to appropriate versions, instead of just using the standards that are out there. The answer was surprising to me. "The requirement and specifications that come from marketing demand that the website look *identical* to every viewer."
He was serious. His former company was paying testers to measure stuff on the screen, to verify that a box in NS wasn't two pixels taller than it was under IE. They even had some pages on the site that were 100% Flash. If more browsers could handle embedded PDF, they'd use that instead. Ridiculous.
Use FRAMES and Images maps if you need it.
Good idea. Especially since you NEVER need to use frames, and should ALWAYS accompany image maps with standard text navigation.
Sheesh, I bet you're one of these guys that doesn't even use alt tags.
Flash and Shockwave when necessary
And just when are Flash and Shockwave ever necessary?
Re:target platform/browser - Windows/IE (Score:5, Insightful)
I dispute that: there's a certain very well-defined set of circumstances in which using a frameset is beneficial. Although I agree that 99% of the frameset usage on the web is inappropriate, in certain circumstances framesets can be used for efficient navigation and still look good - the main advantage of frames is that they only need loading once - it's a frivolous waste of bandwidth to put the same graphical navigation bar on each page, for example (not that I'm a huge fan of graphical navbars).
Still, the rule for frames is: If in doubt, don't use them.