Wednesday, November 26, 2008

Principles of Effective Web Design

What makes a web site effective? Is it design, verbiage, site architecture, graphics, element arrangement? TBH Creative believes it is a combination of all of these elements. In addition, it is an evaluation of your users and preparing a web site that meets their needs visually with an appropriate display of features, information and functionality.

An article titled "10 principles of effective web design" by Smashing Magazine does a great job discussing principles to effective web sites. I have highlighted the key points below, but encourage you to check out the full article.

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

How do users think?
  • Users appreciate quality and credibility.
  • Users don’t read, they scan.
  • Web users are impatient and insist on instant gratification.
  • Users don’t make optimal choices.
  • Users follow their intuition.
  • Users want to have control.
Here are the rules:
  1. Don’t make users think According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.
  2. Don’t squander users’ patience As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.
  3. Manage to focus users’ attention The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.
  4. Strive for feature exposure Guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.
  5. Make use of effective writing As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Writing should be adjusted to fit the medium.
  6. Strive for simplicity Even my dad always says "less is more"!
  7. Don’t be afraid of the white space White space helps to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen.
  8. Communicate effectively with a “visible language” Organize. Economize. Communicate.
  9. Conventions are our friends Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information).
  10. Test early, test often This is an often overlooked component to many web sites, although very important. According to web usability expert, Steve Krug, testing one user is 100% better than testing none.
Want TBH Creative to help you create an effective web site? Contact us today to learn more about our web design services.

Saturday, November 22, 2008

Which web site is better?

CommandShift3 is where websites do battle! Want to see a bunch of different web sites, see the best web sites, the worst, get yours evaluated, or vote on others? On CommandShift3, you are presented with the screenshots of two websites side by side. If you click the screenshot of the site you think looks best, the page reloads and you start all over again. It never ends.

Check out this site: http://commandshift3.com/

Flash Experts: Check this out for a laugh.

Click the image below if you have used Flash and want to see a funny animation about the software. Or if you haven't used the software, check it out and you'll see all the little things that are used to create a movie.
  Great job Alan Becker. Thanks for sharing! How much time did this take you to create?? Check out Animator Vs. Animation 2 if you like the first one.

Friday, November 21, 2008

What is Web 2.0?

Everyday I explain to clients about Web 2.0 and why they should consider these techniques for their design or actually why I recommend Web 2.0 basics for their new web sites. The term Web 2.0 describes the prevailing style of web design or the current school of web design. In one word, Web 2.0 means simplicity.

Simple, clean, bold page designs deliver more impact with less:
  • They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
  • They use fewer words but say more, and carefully selected imagery to create the desired feel.
  • They reject the idea that we can't guess what people want from our sites.
It's amazing how removing unnecessary elements from a page can make it so much more effective. I reviewed a site yesterday for a client and my thoughts the whole time were that there was just too much going on.

TIP: Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements.

Other Web 2.0 tips:
  • Central Layout
  • Use Fewer Columns
  • Separate the top section This area is often called the 'banner' or 'header'. This is where you logo and navigation should appear.
  • Clearly separate important areas of page real estate
  • Simplify the navigation
  • Include a bold logo
  • Use bigger text No one wants to squint to read what you are trying to say. Check out NoSquint if you have this problem on web sites your visit regularly.
  • Define a bold text introduction. Your main message... make sure the users don't miss it and draw them in. According to statistics, users leave web sites when they are confused and cannot find what they need. A simple and easy to use navigation and bold introduction will help eliminate this problem.
  • Incorporate strong colors
  • Don't over design, but use special effects and treatments to add value to the design. - Add 3-D effects sparingly to enhance the feel of the design. - Use gradients: Gradients soften areas that would otherwise be flat. - Incorporate the illusion of a reflection
  • Use Icons and starbursts Web 2.0 design has fewer, better icons that carry more meaning. Starbursts or star flashes look like labels on the web site and draw attention.
Read more and see samples of Web 2.0 from the source of this post.
Visit TBH Creative's web design portfolio for some samples of Web 2.0 design.

Wednesday, November 19, 2008

HTML Email Width - How wide should it be?

This is a tough question because the answer depends on your audience and which email client they use. I build email newsletter for approx. 600 pixels based on past readings, and this topic recently came up again with a potential new client, so I decided to do a little research to see if this is still correct. Found a great article by Christopher Knight that looks into this question deeper and does some comparison (see below). I did some comparison of my own also of email newsletters that I receive (and did not create).
  • Westview Hospital's Healthplex Sport Club: 818 pixels (centered)
  • Carnival Cruise Sale Promotion: 600 pixels (centered)
  • Dreamweaver Day Spa (Christmas special): 602 pixels (centered)
  • Netflix: 607 pixels (centered)
  • Bloomingdales: 760 pixels (centered)
  • Veer: 590 pixels (left-justified)
  • Kodak Gallery: 610 pixels (left-justified)
If you are looking for a quick answer, here is the sum of it:
  • Anything under 620 pixels is "safer" than anything greater than that.
  • If you want to play it safe, shoot for anywhere between 500 to 600 pixels for your HTML fixed width newsletter.
  • What you don't want to do: Define an abnormally large width that will force your reader to horizontally scroll to read your email newsletter. This would be a big mistake.
Here's the article: How wide should an HTML newsletter be?
... Now, the more popular "Defined Width" setting: Defined Width means that you specified a specific width that your email newsletter will be, regardless as to email client, monitor size or screen resolution. The majority of my newsletters are defined width around 620 total pixels wide.

Let's look at some HTML ezines that I've received recently to see what they use for pixel width and whether they use left or center justification:
  • Andrea J. Lee in Creating What Matters uses 433 pixels wide (left justified)
  • Alexandria K. Brown, the EzineQueen uses 491 pixels wide (centered)
  • Sirius Satellite Radio uses 538 pixels wide (left-justified)
  • Christopher Guerriero of MaximizeYourMetabolism uses 557 pixels wide (centered)
  • Red Hot Copy (Lorrie Morgan-Ferrero) uses 595 pixels wide (centered)
  • Michael J. Katz's E-Newsletter uses 595 pixels wide (centered)
  • Gary Ryan Blair's The GoalsGuy Newsletter uses 628 pixels wide (centered)
  • eMarketer uses 790 pixels wide (centered)
Once you decide on the pixel size of width for your HTML email newsletter, the next decision is to LEFT justify or CENTER it. I left justify mine, but most folks CENTER them. Gut feel is that 70% of fixed width HTML newsletters are centered and 30% are left justified. This is personal preference.

What you don't want to do: Define an abnormally large width that will force your reader to horizontally scroll to read your email newsletter. This would be a big mistake.

Analysis on the above sampling of HTML fixed width newsletters:
Anything under 620 pixels is "safer" than anything greater than that. eMarketer takes a great risk with their 790 pixel ezine width and they are really making a statement: Our readers are early adopters and the technologic elite who can afford and have the larger monitors and higher screen resolutions to view our email newsletter.

If you want to play it safe, shoot for anywhere between 500 to 600 pixels for your HTML fixed width newsletter.
________________

If you are considering re-evaluating or starting a email newsletter campaign, consider TBH Creative for assistance with design and even selecting a vendor based on your needs. Thanks for reading and hope this was helpful.

Friday, November 14, 2008

Should my web site be in Flash?

Adobe FlashAn extension on my post yesterday, I thought it might be good to provide some more information. I found this great article (An Evaluation of Flash on web sites. Article by Dimitrios Bendilas.) that gives an overview of what Flash is, problems of bad use, when Flash can be useful to enhance your web site, and explores a good solution for hybrid web sites with Flash pieces and HTML.

Read the full article

__________________

What is Flash? Adobe Flash is the standard for delivering high-impact, rich Web content. Designs, animation, and application user interfaces are deployed immediately across all browsers and platforms, attracting and engaging users with a rich Web experience. Flash allows web professionals to make more impressive and complex graphics with motion, sound and video.

__________________

We recommend not creating your site completely in Flash because it makes updates more difficult, is not good for search engine optimization, and there are simply better ways. For added interest on your web site, Flash can be added in pieces with a combination of other technology including basic HTML and CSS or XML.

If you hire TBH Creative for your web design project, we will sit down with you and evaluate the advantages and disadvantages of Flash. It is in our best interest to develop a site that is powerful and effective to keep your business, so we will never recommend Flash for a greater profit. In fact, we typically discourage Flash unless there is value added from it.

Thursday, November 13, 2008

An easy way to determine if your web site should be Flash

The Flash wave has hit again. Every few months, multiple clients ask for a Flash web site, and we discuss the pros/cons. As a supporter of search engine optimization (SEO), usability, and accessibility, I try to explain the disadvantages of a full Flash web site and encourage Flash pieces only with purpose.
Below is a funny graphic I found today to answer the question: Should I create a Flash web site?
Source: Google Cache
This was actually posted back in 2006 on Google Cache. The author says "As you can see, it gets pretty complicated, but hopefully you can apply this flash website flowchart the next time you are trying to decide whether or not you should create a flash web site."

Virus Alert! - Tell people you know

With Christmas fast approaching--be alert for an email with virus attachment on print. The subject line will be "UPS Paket NO3089767834" (yes, paket is mis-spelled)
Attention Virus Warning Service Update We have become aware there is a fraudulent email being sent that says it is coming from UPS and leads the reader to believe that a UPS shipment could not be delivered. The reader is advised to open an attachment reportedly containing a waybill for the shipment to be picked up. This email attachment contains a virus. We recommend that you do not open the attachment, but delete the email immediately. UPS may send official notification messages on occasion, but they rarely include attachments. If you receive a notification message that includes an attachment and are in doubt about its authenticity, please contact customerservice@ups.com. Please note that UPS takes its customer relationships very seriously, but cannot take responsibility for the unauthorized actions of third parties. Thank you for your attention.
This virus applied to FedEx also. Snopes confirms that it is real: http://www.snopes.com/computer/virus/ups.asp

If you are in need of professional and reliable web site design services in Indianapolis, Indiana, contact TBH Creative.

Monday, November 10, 2008

A great tool for web site browser testing (Litmus)

A colleague of mine told me about the Litmus application a few months ago. It is an application to help make browser compatibility testing for web sites easier. I just came across his note again and am looking forward to trying it out. Has anyone reading this used the software?


What is Litmus? The advanced testing tool for web professionals.

Litmus says: We've felt the pain of getting website designs to work correctly across different browsers. Not to mention designing email newsletters that work on all email clients. Litmus makes compatibility testing easier.

Litmus is fast, reliable and affordable. How much is affordable? 1 day usage is $24, 1 month/1 user is $49, 1 month/10 users is $199. All unlimited.

Check out the Litmus blog for some company updates. See screenshots of the app

For web sites, the software tests: Windows browsers
  • Explorer 8.0 (Beta 2), 7.0, 6.0, 5.5 & 5.0
  • Firefox 3.0, 2.0, 1.5 & 1.0
  • Flock 1.1
  • Google Chrome 0.2
  • Netscape 9.0 & 7.2
  • Opera 9.5, 8.1 & 7.5
  • Safari 3.1
  • Sea Monkey 1.1
Mac OS X browsers
  • Camino 1.6 & 1.0
  • Safari 3.1 & 2.0
Linux browsers
  • Firefox 3.0 & 2.0
  • Konqueror 3.5
Apparently this software is also great for email newsletter testing which can be very challenging to properly test. This user thought it worked well. The Litmus application tests these email clients:
  • Outlook 2007
  • Outlook 2003
  • Outlook 2002/XP
  • Outlook 2000
  • Gmail
  • Hotmail
  • AOL Mail
  • Yahoo! Mail
Again, if anyone has experience with this software, please leave some comments.... otherwise, I'll write more of a review once I've used it a few times with clients.