All I Want for Christmas...is a great HTML editor

The MIT program recently hosted guest speaker J Cornelius of Coffee Cup software to discuss the company's web design tools. He serves as VP of Operations and had a wealth of information to share about their products. I have actually used a free download of Coffee Cup HTML editor for a previous JavaScript project and was not incredibly impressed. However, the download I had was not full-featured, so I've yet to see the full potential of the tool first hand.

A good HTML editor can be a beautiful, time-saving tool that can help you to stay organized as you create your web page(s). Even more appealing to me personally is an HTML editor that provides the flexibility of switching between "code" and "design" view. As an Internet Technology student, it is crucial that I can both write and comprehend the code needed to create a website. However, the more complex your web design becomes, the more tedious and time-consuming it is to experiment with changing the shade of green for your background, aligning your right navigation or the text in your footer, changing fonts, and so many other necessary/repetitive actions.

Web design software can greatly assist you with making these tweaks quickly and accurately. The greatest example I have found thus far (and I admit I haven't explored many) is Adobe Dreamweaver CS5. One of the features I love the most about Dreamweaver is its inclusion of the "pick color" tool. As opposed to searching for and guessing what hexadecimal code is the exact match for the color you desire, you can use the "pick color" tool to select that exact shade, hue, etc. Furthermore, you can switch your view between "code", "design" or "split" to view both side by side. There is an additional option to view the "live" code so that you can get a better feel for that your webpage would look like in a browser.

I nearly forgot to explain my odd title for this blog post. As we enter the 2010 holiday season, my goal this year is to be proactive in preparing for the inevitable exchanging of various gifts we've come to know as the commercialized Christmas (My focus is celebrating family and faith, but the gifts are always in the mix). With this in mind, I am already nagging family and friends for their gift lists and have taken the liberty of beginning my own relatively early. After realizing I already have everything I want/need, I finally settled on one thing I would not only love, but would greatly benefit from in my field of study... Adobe Dreamweaver CS5 of course! Anyone familiar with Adobe's products knows all too well that their software is not cheap. Instead of receiving several moderately priced gifts I won't get much use out of, I'd much rather have a single more pricey gift that will assist me in my many web design endeavors! Just a note...from past Christmas gift experience, I am almost positive this plan of mine is out of my realm of control and will fail miserably. But it's certainly worth a try :-)

SpoolCast - Luke Wroblewski

UIE (User Interface Engineering) is a technology consulting firm with a focus on web site and product usability. Their website is home to the UIE blog SpoolCast (name after the company's founder and CEO Jared M. Spool). The blog features numerous posts highlighting user interface experience topics.

As a part of last week's homework, we listened to a podcast within one blog posting by UIE Podcast Producer Brian Christiansen. Christiansen interviewed designer Luke Wroblewksi who started of discussion with the very innovative Google Instant. In my personal experience, I had missed any murmuring of this new Google search engine feature. Instead, I was pleasantly surprised when I stumbled upon it. Like many others I talked to who discovered Google Instant the same day, I was extremely impressed by the real-time search results I received the instance I began typing.

Either way, back to the expert Wroblewksi. I found his mention of Yahoo's LiveSearch interesting as I had no idea that Yahoo had developed its own instant search interface back in 2005. He explains that users involved in the demo described the experience as "magical", very similar to how I and acquaintances perceived Google Instant.

Web Usability - Navigation

An integral part of designing a site with excellent usability is allowing users to find the information they need in as few clicks as possible. This requires an intuitive navigation which involves consideration of layout, labeling, and content.

The navigation of a website can either enhance or destroy its usability depending on how challenging finding information is. Anyone who has ever visited a site and found themselves going in circles (or perhaps reaching a dead end) in search for that one nugget minutes later understands just how critical web navigation is to user experience.

During class last Thursday, we were given an assignment that involved going through a list of items/pages to locate within a designated website. My group was surprised by how many clicks it took to find what we felt was important enough to be on the home page. This class activity provided a perfect example of the divide between what a web designer and user considers to be intuitive navigation.

Here are a few critical items to consider in relation to navigation:

1. Logical grouping of information
2. Appropriate and consistent labeling of pages/hyperlinks
3. A way to navigate backwards without hitting the "Back" button

Web Accessability - "I hear you knocking...but you can't come in"

"I hear you knocking
But you can't come in
I hear you knocking
Go back where you been"

This 1970 Dave Edmunds Billboard hit really sums up accessibility issues as they relate to the web. Website designers who choose to create pages that lack accessibility are sending this very message to individuals with audio, visual & mobile disabilities to name a few. Careful consideration should be taken when designing for those who use tools such as screen readers, braille terminals and speech recognition to utilize the web.

Wikipedia defines web accessibility as "the inclusive practice of making websites usable by people of all abilities and disabilities." Some of the most common accessibility issues include:

• Invisible content - content with a display:none or visibility:hidden in the CSS
  
• Missing alt tags - Images that do not display should still show a descriptive text so that users have an indication of what is missing
  
• Event handlers - events like onclick or onmouseover should not require a mouse or keyboard
  
• Words displayed as images instead of text - once zoomed in, these images will appear pixelated while text will remain crisp.
  

Visual Web Design

The combination of colors you choose to use on your site is essential to its visual appeal. An unpleasing or awkward mix of colors not only looks bad, it can distract users and reflect poorly on the credibility of the site.

A great colour scheme can help you to achieve the the highest quality look and feel when applied to your header, footer, navigation, body, and text.

The following from 1stwebdesigner lists 10 basic visual web design mistakes:

1. Bad Font Usage
2. No Images, Text Only - while having enough white space is important, there needs to be an adequate balance of your use of images and text throughout.
3. No Paragraph On Long Articles
4. Very Tiny Font Size
5. Heavy Flash Usage - too much can slow down your website
6. Body Text Above Colorful Background - It's never a good idea to attempt placing text (any color) over a colorful background.
7. Too Many Advertisements
8. Unwanted Pop Ups - This is a quick and easy way to lose visitors.
9. Too Long Articles
10. Link Colors Aren't Visible - Your link text colors should be a different color from your regular body text. An example would be a bright blue link in contrast to the black text.

http://www.1stwebdesigner.com/design/basic-visual-web-design-mistakes/

Web Standards

Designing using Web standards requires adhering to the predetermined specifications and standards set by organizations such as WaSP & W3C.

Using web standards is beneficial for individuals who strive to give themselves (or clients) a professional appearance and reputation.

Web standards are important to web design for:

1. Maintainability
2. Usability
3. Clients
4. A quality design

From http://dustinbrewer.com/why-web-standards-are-important-in-web-design/

Information Architecture

As a high school student, one of my favorite memories of taking the SAT (there are very few) was the analogies section. I found them intriguing and I still see their relevancy and application to my life today. If you share the same sentiment, I'm certain you will appreciate the following in helping to explain the mystery of Information Architecture as it relates to creating websites.

Information architecture is to website as blueprint is to house.

In case this alone doesn't instantaneously bring back the memories of your test-taking days, I'll restate this in a manner that may look more familiar:

1.) IA : WEBSITE ::

(A) cat : dog

(B) book : library

(C) blueprint : house

(D) peninsula : continent

Did you instinctively reach for your #2 pencil to record the correct answer on your scantron sheet? Mission accomplished.

Considering this analogy should get you thinking about the similarities between IA and a blueprint, but let's discuss in more detail by continuing to compare a website and a house. When planning to build a house, one needs to consider:

1. Who will live in the house
2. How many inhabitants will there be
3. How will residents use the space
4. What are the residents' expectations

In the same way a builder asks these questions, an Information Architect must analyze:

1. Who are the website's users
2. How many will visit and utilize the website
3. What tasks do users need to accomplish (login, find info, purchase, etc.)
4. What are users' behaviors & what do they consider to be a logical flow of information

Creating the taxonomy (the practice and science of classification), interviewing users, building sitemaps, and using wireframes are just a few of the tasks IA's complete to design this "blueprint".

For those who may confuse Information Architecture with Web Design, the house example still serves as a relevant example in distinguishing between the two. IA deals with the blueprint of the "house" (website) while Web Design relates to picking the paint colors, fabrics, wall hangings and so forth. In other words, a website's background/font colors, text content, graphics, etc. are handled by the Web Designer.