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?"
There is no such thing as good web design. There is only good user design. Who are you users? What do they want to accomplish by visiting your site? What do you want them to accomplish on your site? Once you answer those questions you'll be in a position to make some decisions about a design that compliments your goals.
;)
Or, you could just put all the important stuff in flashing text
There's a huge split. If you ask the "Slashdot Community" what makes good web design, you'll hear... a lot of noise.
There's the progress camp:
www.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 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.
Loneliness is a power that we possess to give or take away forever
I'm in the process of reading the book "Don't make me think!" by Steve Krug. It's a very easy read, very short, big pictures etc. One of the main points he brings up which I think you should keep in mind is exactly what his title suggests.. don't make the user think. If the user has to think about using your page, "Gee, where's that search button? Is that the product I want?" etc, well, who knows how long they'll stick around. Don't make the user think.
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.
-Frijoles-
two versions of the same website is cool.
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.
I'd suggest reading Jakob Nielsen's Alertbox on web design, not only the current columns but past ones, too. Some columns like The Top Ten New Mistakes of Web Design 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.
Is a web page software though? I don't think so. This is my main complaint about most web pages - they try to be software, with all their javascript, and complex stuff...
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.
no matter how cool the flash animations
.so or .dll responsible.
Rumour has it that useful content has been delivered with flash, but I've never seen this. In fact, now that browsers are showing up with this obnoxious crap as a plugin, I've taken to deleting the
Use a text editor. The HTML genrated by the fancy programs is abominable, often invalid and more and more seems to confuse browsers into taking long periods on unknown activity to render. Use standard HTML. Don't use an image for a button where a text link will do. Make it useable in Lynx or w3m. Don't use frames unless you've got a good reason.
Avoid silly backgrounds (or ANY backgrounds) and silly combinations of foreground and background colors. I am increasingly running into web pages that are absolutely, literally unreadable due to this last.
More stuff to avoid:
HTML Hell Page
"that's not encryption - it's a new perl script that I'm working on..." - from some Matrix parody
The only reason to maintain two versions is to deal with shitty browsers 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 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.)
20 January 2017: the End of an Error.
I'd say my personal favorite things are:
Consistent graphics - size your pictures to the size you want them viewed at. I went to a band homepage with a 4 meg jpeg. Uh no.
Consistent color scheme - single color background, complementary colors. (Easy to read!)
Poor user interfaces - If I can't figure your site out in 5 seconds, I'm off to Google.
Banner Ads - As long as they are unobtusive, (slashdot) I don't mind. If I find myself in the land of 10,000 banners, I'm gone. Make sure the ones you have are actually geared towards the site's info. eg - Hardware review site=no increase size of my software, thanks
Don't use 900 different fonts. Use fonts and font sizes to set sections apart, not sentences. Don't underline unless it's a link.
Animated GIFs - a personal pet peeve, especially 'Under Construction' digging dudes and dancing hamsters
Please check your links often, and update oftener! Nothing sucks as much as a site that's been dead for 2 years. If it's dead, put a bullet in it and take it down!
Real Audio(TM) - Just say no. I will not use the resource sucking, HD bloating, Info-Grabbing crap, and neither should you.
Test on every browser on every platform you can, not just the latest or your personal favorite.
No embedded MIDI. Ever. Period.
Just a couple off the top of my head...for real examples of what not to do, SomethingAwful has a good selection of sites. Plus, Photoshop Phriday is a hoot!
Enough!
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
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?
A Government Is a Body of People, Usually Notably Ungoverned
Of course, content is king. But one of the tradeoffs is always nice graphics vs. load time.
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.
OtakuBooty.com: Smart, funny, sexy nerds.
Good points made by all on the virtues of simplicity, searchability, aesthetic pleasure, and such.
:)
Additionally, conformity to W3C HTML recommendations (at least HTML 4.0 Transitional) is always a plus.
Try my website, The Sensorium in IE 5+ and/or Mozilla 0.9.5+, and notice that it looks the same. This site conforms to the proper recommendations. It's based on PHP Nuke for the back end scripting, but the page design itself was created from scratch.
Cross browser compatibility used to be one of the most daunting challenges for a web designer to overcome, but since the birth of the new releases of Mozilla, it has become easier and easier to create pages that satisfy the Windows crowd, Linux crowd, AND the W3C.
Good luck
--
The Bailiwick - DESIGNHUB2005
There are so many backend hotshots and content delivery gurus on Slashdot. Clean, streamlined design and multimedia are not mutually exclusive, regardless of what the current crop of webmasters push on people.
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, pixelsurgeon, presstube, 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.
I know this is offtopic as most of my posts are, but I think there should be a new rating for moderators:
+1 Creative Goatse Link
anyone else agree?
THERE IS NO DATA. THERE IS O
"- Finally (my personal biggest gripe) is DO NOT OPEN NEW WINDOWS when I click on a link. EVER. Not when I'm going to a new section of your site, and certainly not when I click on a link away from your site. If I wanted to open a new window to follow the link, I would have myself."
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.
Need help treating your acne? Come here!
It seems it's quite popular to say Flash is eeeeviiil, but I'd like to make a case for it:
- You can make a site that's very small, and still looks good (80kb)
- You're sure of how it will look at the user's side. Fonts for instance are embedded in the format.
- The format is as open as for instance pdf (check www.openswf.org) and there's lots of open source libraries and tools that use it.
- You can make it so it's scalable - so it adapts to the size of your browser window. This is important to me, because I can't count the number of times I cursed when I'm viewin html websites on my high-res monitor because they used fixed font-sizes in their css.
Yes, it's true that there's alot of crap sites out there made in Flash. I get the willies everytime I see an "intro". But there certainly also are a lot of crap HTML sites.
Using jpegs or gifs that are 100kb to begin with, or that just cram so much text in a view that you don't know where to start looking, and you get a headache to begin with.
At least with Flash you don't have to deal with slight differences in rendering CSS boxes between internet explorer 5.0 and 5.0 SP2 or whatever. (Even mozilla has it's share of anomalies)
Even if you do your entire html site "by the book" , spec-compliant, clean, etc, you can't avoid encountering bugs between the different implementations.
The only reason _NOT_ to use flash, is because there's no adequate Flash editor for Linux, (or for that matter, an adequare vector drawing program for linux either) - it's the only reason I still need to dual-boot. I'll try wine+flash soon - hoping it's usable.
What makes a good website? Well, it all depends on the actual information you have to offer. If people can find something interesting on your site, and the UI of your site doesn't get in the way, or even, does actually _help_ the visitor to find what they're looking for, then you succeeded.
Yes, but would you take style advice from this man?
I've never understood the cult of Nielson. "Pretentious" is the word that comes first to mind. "Pompous" is another, when he rips into a site he dislikes.
The following are list of No-No that I have seen on real website that could have been a potential vendor, but I as an hardware engineer usually pick someone else's part (if they are more or less equivalent) who have technical info available a few clicks away instead of having the sales rep call back just to route my question to the tech department which take a total of 3 days.
You got to love the domination of the user by ignoring their font size preferences ! Who cares about people that have problems reading small prints in 1600x1280 display on a 21" monitor. Everyone uses a 800x600 display. (only marketing types do that. The rest of us who do real work use as high res as possible) Afterall they are only customers who have no appreciation of the godlyhood of being a web designers.
Who cares about being readable. Let's put dark fonts (black) on a dark background (dark blue). Or better yet, let's put bright red fonts on a bright yellow background to make the whole web page stands out. (Gives you headache after 30 seconds)
Let's make thing difficult to find by intentionally hiding file using the most obscure non-descriptive names.
Who cares about keeping things simple. It is great to make web pages that take 3 minutes just to download and another 15 minutes to crunch through for formating and needless sound effects. If you are not using 3GHz PC, you won't be able to affort what we have to offer. Besides we are the only people you would want to deal with.
(Sorry guys you just lost about $250K worth of business to the other guys today.)
We are very exclusive. We don't want to tell you what we are trying to sell you. If you have to ask, then we need all your personal info so that we can SPAM you and track you on our website.
(You being #3 supplier just lost to the #1 & #2 supplier has over 60% of the market in the business. Shouldn't you spend more time to let people know what you are selling ? The #1 & #2 have every bit of technical data of their products and good documentation available on their web without requiring user ID & password.)
We make our phone number hard to find on the website. We don't even have a person to answer the phone. If you send us an email, we could get back to you in 2 week. (Don't bother. I already designed your parts out by then.)
This webpage is for IE only. (Buzz!! If you are the IT support group that also happens to service 50%+ Un*x workstations for a huge company, that's a dumb dumb thing to do.)
The comments fields are 1" by 1/2" boxes. We don't expect anyone actually to fill in anything. (That's only useful for people that uses 640x480 display.)
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.
Glenn
The Smrt way to trade CFDs on the ASX
Other things to consider:
Don't constrain your content to a two inch-wide column no matter how wide the user's browser window is.
Don't have a picture on your front page saying "click here to enter this site".
Don't use Flash, unless you're selling Flash consultancy services.
They already have these in most places. They're called Starbucks. And they seem to be doing pretty well for themselves...
-- Jason Lefkowitz
Read my blog.