Saturday, July 30, 2005
5 Rules of Good Web Design
Since you had to suffer through my last rant on bad web design, you may as well suffer through this exposition of good web design.
1. Attractive
The early years of the web consisted of static pages of text that contained information but little or nothing in the way of design elements. We've come a long way since then.
Today good web design needs to consist of attractive layouts and good color schemes. Saying that however, you don't want to get bogged down in your design so much that you visually overload the reader. Here is a good example of that. Visually the style is unique and creative, but I just can't suffer through the design getting in the way of the content.
2. Content
Your web site must have a reason to be there. Every day hundreds of web sites are added to the web and many of these are fluff sites with no valuable content. Want to ranked higher in Google? Your site needs to deliver well thought out and useful content to its readers, even if those readers are only your friends and family.
3. Navigation
People need to be able to navigate with ease through your web site. Design an appropriate navigation structure and always leave it in the same area on every page of your site. Although Site Maps are used more often for search engines to spider your site, it may still be a good idea to include one on your site.
Readers shouldn't have to guess where a button or link is going to go on your site. Clearly label all your buttons and use standardized language for all your links. It may be fun to have a link labeled "What up?", but "Contact Me" is much more succinct.
4. Keep it up to date
Keep adding content to your site and check for broken links periodically. Things that you wrote two years ago may no longer be valid. Users will be more likely to come back if you continue to offer them something new.
Your design also needs to be kept up to date. Certain design elements like frames have gone out of style. Don't be afraid to offer your readers a new look from time to time.
5. Branding and uniform look
Readers need to know that they are still on the same site while they are browsing. That means having a uniform style across all your pages by keeping your colors and layout the same. Sites designed around CSS have the advantage by setting your style and keeping it.
1. Attractive
The early years of the web consisted of static pages of text that contained information but little or nothing in the way of design elements. We've come a long way since then.
Today good web design needs to consist of attractive layouts and good color schemes. Saying that however, you don't want to get bogged down in your design so much that you visually overload the reader. Here is a good example of that. Visually the style is unique and creative, but I just can't suffer through the design getting in the way of the content.
2. Content
Your web site must have a reason to be there. Every day hundreds of web sites are added to the web and many of these are fluff sites with no valuable content. Want to ranked higher in Google? Your site needs to deliver well thought out and useful content to its readers, even if those readers are only your friends and family.
3. Navigation
People need to be able to navigate with ease through your web site. Design an appropriate navigation structure and always leave it in the same area on every page of your site. Although Site Maps are used more often for search engines to spider your site, it may still be a good idea to include one on your site.
Readers shouldn't have to guess where a button or link is going to go on your site. Clearly label all your buttons and use standardized language for all your links. It may be fun to have a link labeled "What up?", but "Contact Me" is much more succinct.
4. Keep it up to date
Keep adding content to your site and check for broken links periodically. Things that you wrote two years ago may no longer be valid. Users will be more likely to come back if you continue to offer them something new.
Your design also needs to be kept up to date. Certain design elements like frames have gone out of style. Don't be afraid to offer your readers a new look from time to time.
5. Branding and uniform look
Readers need to know that they are still on the same site while they are browsing. That means having a uniform style across all your pages by keeping your colors and layout the same. Sites designed around CSS have the advantage by setting your style and keeping it.
Labels: Web Design
Friday, July 22, 2005
Web Design Don'ts
Flashing/Animated Graphics
Please don't. The spinning email icon may look cute to you, but it's not, it's distracting and annoying. Flash icons are a little more tolerable, but don't over do it. If you figure you just have to have an animated icon, here's what I suggest:
Step 1: Apply non animated icons to your web site.
Step 2: Drink a bottle of Gin.
Step 3: Look at your web site while spinning around in your chair. Voilà! Animated icons.
Music
Boy does that cheesy midi song sound cheesy. If people want music while they surf they will put in a real CD. They do not want to listen to Candle in the Wind sounding like it's being played on a Casio keyboard. Trust me on this.
Splash Page
Unless your splash page is for language selection, there's no good reason to have one. Go ahead and make it using Flash, and make sure it takes two minutes to load, and then say "Look how cool I am". I assure you. No one else will think you're cool. "But..." you say? But nothing...I said no already.
Dark Background with dark text
I guess if you don't want any visitors to your site this is O.K. Black and Dark Gray looks great when it's on a T-shirt...not when it's on a web site.
Disable the right mouse button
You're so clever. Do you think I can't figure out a way to copy your precious picture or text? All you're doing is really ticking off the people who browse with their mouse. If you like, I'll teach you a way to print "You are stupid" all across the screen using BASIC. That should amuse you for hours.
Business sites that look like cat ass
For the love of Pete people...have a professional design your business web site! I can't count the number of times I've not purchased something from an online business because their site looked like it was designed for the price of a bottle of Mountain Dew. This includes brick and mortar stores with a web site. I will not purchase things in your store if your web site looks like ass. I'm not the only one.
Thanks goes to Christian for getting me started.
Please don't. The spinning email icon may look cute to you, but it's not, it's distracting and annoying. Flash icons are a little more tolerable, but don't over do it. If you figure you just have to have an animated icon, here's what I suggest:
Step 1: Apply non animated icons to your web site.
Step 2: Drink a bottle of Gin.
Step 3: Look at your web site while spinning around in your chair. Voilà! Animated icons.
Music
Boy does that cheesy midi song sound cheesy. If people want music while they surf they will put in a real CD. They do not want to listen to Candle in the Wind sounding like it's being played on a Casio keyboard. Trust me on this.
Splash Page
Unless your splash page is for language selection, there's no good reason to have one. Go ahead and make it using Flash, and make sure it takes two minutes to load, and then say "Look how cool I am". I assure you. No one else will think you're cool. "But..." you say? But nothing...I said no already.
Dark Background with dark text
I guess if you don't want any visitors to your site this is O.K. Black and Dark Gray looks great when it's on a T-shirt...not when it's on a web site.
Disable the right mouse button
You're so clever. Do you think I can't figure out a way to copy your precious picture or text? All you're doing is really ticking off the people who browse with their mouse. If you like, I'll teach you a way to print "You are stupid" all across the screen using BASIC. That should amuse you for hours.
Business sites that look like cat ass
For the love of Pete people...have a professional design your business web site! I can't count the number of times I've not purchased something from an online business because their site looked like it was designed for the price of a bottle of Mountain Dew. This includes brick and mortar stores with a web site. I will not purchase things in your store if your web site looks like ass. I'm not the only one.
Thanks goes to Christian for getting me started.
Labels: Web Design
Saturday, July 16, 2005
The Shark Tank
I friend pointed this site out to me. If you've ever worked as a technician or system administrator you've probably run across similar situations.
Here's my favorite one so far:
Support pilot fish gets a call from a user visiting this branch office. The user has a wireless laptop, but she can't get it working with the office's network.
"Knowing that our local wireless segment requires encryption software to be installed, my partner grabbed a network patch cable and headed up to the office the visitor was using," fish reports.
But when partner arrives at the user's office and starts connecting the laptop to the network jack in the wall, she stops him.
"You don't need to do that!" she says. "It's wireless. It works fine at my house."
Support tech explains that to use wireless in this building, special software has to be installed. Then he shows her that with the network cable attached, her laptop is communicating with the network just fine.
"Oh, I guess that's OK then," user says, and tech returns to his office.
He hasn't been back long when the phone rings again. "She called back, saying her computer crashed and could someone come fix it," says fish. "This time it was my turn to head up there.
"When I arrived, I found the laptop shut off. I also noticed there wasn't any power cable plugged into the laptop, nor was there one in sight.
"Figuring that the laptop had gone into sleep mode to conserve battery power, I asked the user if she had the power cable for the laptop."
"Oh, it's wireless!" she tells fish. "I don't need to plug it in."
Then she tells fish that she's had the laptop for more than a year and has never plugged anything into it, because it's wireless.
Fish tries to explain that "wireless" just means the laptop can connect to networks without cables, but it still needs a power cord for recharging the battery.
"The battery shouldn't be a problem," she says. "I just got a new one for it."
"I scrounged up a spare power cable for her model laptop," grumbles fish. "Then I put in a purchase request to get her a new power cable, because apparently the laptop didn't come with one -- since it was wireless."
Here's my favorite one so far:
Support pilot fish gets a call from a user visiting this branch office. The user has a wireless laptop, but she can't get it working with the office's network.
"Knowing that our local wireless segment requires encryption software to be installed, my partner grabbed a network patch cable and headed up to the office the visitor was using," fish reports.
But when partner arrives at the user's office and starts connecting the laptop to the network jack in the wall, she stops him.
"You don't need to do that!" she says. "It's wireless. It works fine at my house."
Support tech explains that to use wireless in this building, special software has to be installed. Then he shows her that with the network cable attached, her laptop is communicating with the network just fine.
"Oh, I guess that's OK then," user says, and tech returns to his office.
He hasn't been back long when the phone rings again. "She called back, saying her computer crashed and could someone come fix it," says fish. "This time it was my turn to head up there.
"When I arrived, I found the laptop shut off. I also noticed there wasn't any power cable plugged into the laptop, nor was there one in sight.
"Figuring that the laptop had gone into sleep mode to conserve battery power, I asked the user if she had the power cable for the laptop."
"Oh, it's wireless!" she tells fish. "I don't need to plug it in."
Then she tells fish that she's had the laptop for more than a year and has never plugged anything into it, because it's wireless.
Fish tries to explain that "wireless" just means the laptop can connect to networks without cables, but it still needs a power cord for recharging the battery.
"The battery shouldn't be a problem," she says. "I just got a new one for it."
"I scrounged up a spare power cable for her model laptop," grumbles fish. "Then I put in a purchase request to get her a new power cable, because apparently the laptop didn't come with one -- since it was wireless."
Thursday, July 14, 2005
CSS...where have you been all my life?
Sometimes I think I have it all figured out and there is nothing new under the sun. Sometimes I'm dead wrong.
For about five years I've been content with HTML (We won't talk about the two years I was content with FrontPage - those were the darkest of the dark ages). In those carefree HTML days the table tag had become an old friend. I needed to place a graphic? Layout a paragraph? Table tag how you doin'?
What a fool I was.
CSS entered my life two months ago, and it was like I was being made anew. The scales fell from my eyes and for the first time I saw the world that was web design. I also couldn't stop waxing poetic.
CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. It stands for Cascading Style Sheets, but it may as well stand for Craptasticlly Super Simple. Granted I haven't delved into the real meat of it yet, but from what I've messed with so far, it seems very straight forward and nicely structured.
I also picked up a handy little reference guide from Amazon called the CSS Cookbook. It's very well put together and looks at CSS from the standpoint of "need and solution". You need to make the first line of paragraph bold? Here's how you do it...
I can dig it.
I still haven't tackled a major site design using only CSS, but I'm really looking forward to it, and Macromedia's Dreamweaver MX 2004 has really focused on CSS this time, making it very easy to code.
For about five years I've been content with HTML (We won't talk about the two years I was content with FrontPage - those were the darkest of the dark ages). In those carefree HTML days the table tag had become an old friend. I needed to place a graphic? Layout a paragraph? Table tag how you doin'?
What a fool I was.
CSS entered my life two months ago, and it was like I was being made anew. The scales fell from my eyes and for the first time I saw the world that was web design. I also couldn't stop waxing poetic.
CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. It stands for Cascading Style Sheets, but it may as well stand for Craptasticlly Super Simple. Granted I haven't delved into the real meat of it yet, but from what I've messed with so far, it seems very straight forward and nicely structured.
I also picked up a handy little reference guide from Amazon called the CSS Cookbook. It's very well put together and looks at CSS from the standpoint of "need and solution". You need to make the first line of paragraph bold? Here's how you do it...
I can dig it.
I still haven't tackled a major site design using only CSS, but I'm really looking forward to it, and Macromedia's Dreamweaver MX 2004 has really focused on CSS this time, making it very easy to code.
Labels: CSS
