Rendering Engines – They Have the Power!

Last Thursday, J. Cornelius of Coffee Cup and the Atlanta Web Design Group (AWDG) stopped by our Web Design Usability class and talked about various topics in web design.

He made an interesting comment about designing for different browsers.  J. advised that you really didn’t have to struggle so much to make sure every web page looked the same across every browser, just make sure the user had the best experience possible for the browser they used.

What makes each browser display the same html code differently? It is the rendering engine.

A rendering engine is the code that tells the browser how to display the html and available style information in the browser window. By paying attention to a browser’s underlying rendering engine, web developers can have a better understanding how their page will be displayed.

Released by Mozilla in 1998, Gecko was the first reusable-rendering engine [Source:  Web Design In A Nutshell]. It was soon followed by Microsoft’s Trident, Opera’s Presto and WebKit.

According the Wikipedia, Gecko is used by a variety of products derived from the Mozilla code base, including the Firefox web browser, the Thunderbird e-mail client, and SeaMonkey internet suite.

Trident, the web browser engine from Internet Explorer, is used by many applications on the Microsoft Windows platform, such as Outlook Express, some versions of Microsoft Outlook, and the mini-browsers in Winamp and RealPlayer.

Opera Software‘s proprietary Presto engine is licensed to a number of other software vendors, and is used in Opera’s own web browser.

KDE‘s open-source KHTML engine is used in KDE’s Konqueror web browser and was the basis for WebKit, the rendering engine in Apple’s Safari and Google’s Chrome web browsers.

For a look at the various engines and where they are used, check out Wikipedia’s Comparison of Layout Engines.

Rocket Surgery Made Easy

Picture of Rocket Surgery Made EasySteve Krug has done it again! The highly respected usability consultant has written a sequel to his very successful book on usability Don’t Make Me Think.  While his first book focused on usability design, this new book focuses on usability testing and, once again, Krug grabs your attention with his new title, Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.

If you have read Krug’s first book, then you are familiar with his informal while engaging writing style. As with his first book, Rocket Surgery Made Easy is purposefully kept short and, as you can assume from its title, quite a humorous read.

Krug divides the book into two parts focusing on both the testing and what to do after the test. The first part is called “Finding Usability Problems” and contains the nuts and bolts about conducting usability tests.  It not only includes valuable information concerning the execution of the tests but also includes actual samples of scripts, forms and checklists.

The second part is called “Fixing Usability Problems” and addresses what to do with the information you’ve collected. Krug basically advocates two approaches to fixing your usability problems:  “tweak, don’t redesign” and “take something away”.

Tweak, Don’t Redesign

Krug cautions about the temptation to redesign when confronted with a usability issue.  Small tweaks and fixes just don’t provide the same satisfaction as a redesign.  However, small tweaks are usually quick and easy to implement and do not have the risk of being sidetracked or never finished.

Take Something Away

The reason many sites are difficult to navigate is because they are too busy. The users cannot find what they are looking for because they have too much stuff to go through. By removing some of the “noise”, it makes what is left easier to find. You can fix a problem by literally taking something away.

Krug points out early in his book that this method is not intended for all development projects. Where life and death situations are dependent on the usability of the interface (i.e. hospital systems, etc.) he recommends engaging a usability professional. However, in those situations where you cannot hire a professional, this book will definitely help you make your site more usable.

Why Am I Being Asked This?

Web Form Design WordleI recently listened to a very interesting pod cast by Luke Wroblewski on SpoolCast titled Innovations in Web Input.  Known as an interaction designer, Luke specializes in web forms and visual web usability.

Luke touched on quite a few topics related to the evolution of forms and form input on the web.  He talked about his days at Yahoo along with the development and impact of Google’s instant search.  He also discussed a new site, Quora, to illustrate how future sites will incorporate profile information from existing sites so that the user will spend less time on data entry.

This idea of entering less and the web “knowing” me piqued my interest and I decided to do some research and look at some of Luke’s blogs on the subject.

In Luke’s blog titled Web Forms for People, he expounds on the impact of Web form design.  Luke is an evangelist for the importance of Web forms.  “Whether it’s checkout in e-commerce, comments on news articles, or managing a fitness routine – Web forms often sit between people and their goals.” How can a site ensure the user’s goals and the site’s goals are aligned?

He recommends focusing on the core purpose of the Web site while designing a Web form. This will keep the users from asking, “Why am I being asked this?” and bouncing off the site before the goal is reached.

He illustrates the point by comparing two sites and their different approaches to gathering profile or user data:  tookmark and Brightkite.  Additionally he shows how Brightkite, with a simple redesign of its Web form aligned the form input to the goals of the site.

Luke recommends asking the following questions when designing a Web form:

  • Is this information necessary to give people what they want (the core purpose of the application)? If not, chances are people will question why they are being asked.
  • Will there be a better time to collect this information? Asking people for information once they are already using an application is often more successful than asking them before they start using the application.
  • Is there a way to explain why certain information is required? Clarifying how the information being collected aligns with people’s goals helps reassure them that they are making forward progress.
  • Are there better ways of collecting the information needed? After all, Web forms are not the only way to get input from people online.

By following Luke’s recommendations, a designer can improve the user interaction and satisfaction with a site. But most importantly, the designer can improve the impact of the site  – the crucial interaction that keeps the business running.

For more information on Web form design, I recommend Luke’s book, Web Form Design: Filling in the Blanks.

Good Navigation? Who ya gonna call?

Girl looking for directionsNavigation is one of the most important aspects of web design. There’s an art to effectively guiding your visitors around your site so that they learn how much content is available and where to find it.

How can you be sure your site is easy to navigate? By calling upon the services of an information architect!

According to the Information Architecture Institute, an international organization committed to advancing and promoting the practice of information architecture (IA), information architecture is:

  • The structural design of shared information environments.
  • The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.
  • An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

In general, IA is the work involved to analyze, organize and label information on a website or web application so that users of the software can actually find what they are looking for – the desired information or functionality. In a nutshell, the information architect creates the website or application’s navigation scheme.

Information architects work behind the scenes understanding the purpose and goals of the website and then determine how to best present that information to the target audience.  Working with the clients, using content inventories, competitive analysis and persona(s), the information architect helps define the strategy, content and features for the website.  This definition is then used as the foundation for the development of site maps, wireframes and screen designs – all tools used to define and document the IA goal – an intuitive website design.information architect

How do you know if the information architect has done a good job?  Check your website’s navigation against the following guidelines provided by

The navigation should:

  • Be easy to learn.
  • Be consistent throughout the website.
  • Provide feedback, such as the use of breadcrumbs to indicate how to navigate back to where the user started.
  • Use the minimum number of clicks to arrive at the next destination.
  • Use clear and intuitive labels, based on the user’s perspective and terminology.
  • Support user tasks.
  • Have each link be distinct from other links.
  • Group navigation into logical units.
  • Avoid making the user scroll to get to important navigation or submit buttons.
  • Not disable the browser’s back button.

Web Standards: To Use or Not to Use

web tools imageIn the beginning…

Tim Berners-Lee, considered the father of the Web, first envisioned the Internet based hypertext system in the late 1980’s. He wrote the first web browser, WorldWideWeb in 1991 to facilitate collaboration with his colleagues at CERN, the European Organization for Nuclear Research.

During the early 1990’s the industry saw many browsers developed and released. Marc Andreessen released Netscape Navigator free for non-commercial use and, by 1995, began to dominant the market. However, Microsoft soon answered by releasing Internet Explorer 2 or IE 2 free to all Windows users. Microsoft started grabbing market share and began, what has since been called, the era of ‘browser wars’. With the release of IE 4 in 1997, Microsoft changed the tides of the war.

Peace imageCan there be peace?

During this time development was rapid and the introduction of new features often took priority over bug fixes, resulting in unstable browsers, frequent crashes and many security holes. Because each technology used browser specific code, pages developed for one browser would not display well, if at all, in another.

Once again, Tim Berners-Lee saw a need.  In 1994 he started the World Wide Web Consortium (W3C) with the stated mission “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web” [Source: W3C].  Since then, W3C has grown to include over 450 member organizations including Microsoft and America Online (parent company of Netscape).

The treaty…

The W3C forms working groups to develop open specifications and guidelines to enhance the interoperability of the Web.  These groups make recommendations that are formalized and accepted by the W3C and their member organizations.  The current W3C standards are:

  • HTML 4.0 – HyperText Markup Language
  • XML 1.0 – Extensible Markup Language
  • XHTML 1.0 & 1.1 – Reformulation of HTML as an XML application
  • CSS – Cascading Style Sheets
  • DOM 1 – Document Object Model Level 1

peace treaty imageThanks to the W3C, the browser wars are over and with them the need to develop specific code for specific browsers.  All the major browsers are now cooperating and supporting the above standards so that the same piece of code in a web site will look the same across multiple browsers.

To use or not to use?

Designing with web standards is a general term meaning not only using the standard technologies, but using them correctly by separating the content, the scripting and the styling.

There are many tangible benefits to designing with web standards. Separating the content from the styling makes websites easier to update and less costly to maintain. Also, the separation will mean a substantial savings on bandwidth leading to lower hosting costs.  Finally, separating the content from the styling will increase a site’s findability since search engines can do a better job of indexing the sites.

Web Standards image

Most importantly, standards compliance allows web pages to be understood by people using different types of browsers, like voice or Braille browsers, making it easier for people with special needs to use the web. Additionally, its easier to code for mobile and tablet browsers.

In conclusion, designing with web standards will make your code more efficient, easier to maintain, more accessible and more staple.  Standards compliance will lower development and hosting costs while expanding your audience.  Thank you Mr. Berners-Lee for the Web and web standards!

Writing for the Web

Image of writer and keyboardWriting for the Web is different from writing for print. Why?  People read differently on the Web than they do when reading print. When viewing a new page, readers look at headings and subheadings, browse for hyperlinks and keywords. In other words, they scan!

So how do you convey your message?  By recognizing the needs of the user and making the copy easy to scan!

A lot of testing has been done on how long it takes for the average web surfer to decide if they want to read your page or move on.  Most viewers have made a decision in three to five seconds [Source: Nielsen: Alertbox].

It’s your job to present the information in such a manner that you grab the web surfer’s attention before they make a decision to click away.

Image of KISSThe following guidelines from web content expert Erin Anderson in Interact with Web Standards will ensure your web pages are easy to scan and help you capture that elusive surfer:

Paragraphs should be concise
Each paragraph should only convey one idea and be less than 60 words.  As the reader scans, they will only miss one idea if they skip the paragraph.

Headlines should be short
Headings let the reader know that they are in the right place. They need to be engaging and use key words. They should be eight words less.

Subheadings should be brief
Subheadings, like headings, summarize the content that follows. They should be no longer than 12 to 14 words.

Use bulleted lists
Bullet lists can help you cut unnecessary copy and make it easier to read.

Don’t use numbered lists
Numbered lists should be used sparingly and only where they provide meaning like describing the steps in a process or a top 10 list.

Use headings to guide the reader through the page
Strategically place headings and subheadings can show hierarchy and the relative importance of the topics. They draw a reader’s eye and help them navigate the page. Also, good headings help web search engines improve your findability.

And finally, as with all writing, you need to use good web writing form. Lead with active words, use simple sentences and be succinct.

For more words of wisdom and best practices for writing for the web, check out these additional resources:

The Use of Color on the Web

image of paint brush and plalletThe use of color is one of the most critical components of web design. From a visual standpoint, it is what the viewer  sees first. A good color combination can capture the attention of the viewer and prolong the time spent viewing the web page. However, color is also one of the least understood and most incorrectly used effects on the Web.  Using the wrong color combinations can result in web pages that are difficult to read, illegible if printed, impossible to display on some video systems, and in quite a few cases, just plain ugly.

When selecting colors to use on a web site, there is a sequence of rules you should apply. First, you must look at tradition and then you apply color theory.  Tradition is about the human eye and what is considered culturally acceptable.  For example, you would not use a lot of black on a wedding services site.  Accordingly, politicians in the United States use red, white and blue on their web sites to convey their patriotism.  Color has meaning, and the color choice must be both culturally acceptable and appropriate.

Color theory is applied when we take the base color we want, and then accentuate it with a complementary, monotonous, or analogous colors.  Sound confusing?  Let’s break it down by looking at the basic component of color theory, the color wheel…

Triadic Color Scheme

Colors are classified as primary, secondary and tertiary. The primary colors are red, yellow and blue. The secondary colors are those colors “between” the primary colors on the color wheel and are made from combinations of the primary colors.  For example, orange is made from red and yellow; green is made from yellow and blue and purple is made from blue and red. As you might guess, the tertiary colors are between the secondary colors. And finally, you can affect the tint, tone and shade of the color by adding white, gray or black.

It is helpful to keep the color wheel in mind when thinking about what combinations of colors to use in your website. These best color combinations are:

  • Monochromatic Color Schemes – the same color but with tint, tone and shade
  • Complementary Color Schemes – colors directly opposite each other on the color wheel
  • Triadic Color Schemes – colors one-third of the way around the color wheel (see above)
  • Tetradic Color Schemes – colors one quarter of the way around the color wheel

Feel like you may need some help?  Don’t worry, there are tools available.  Check out the  Color Scheme Designer and you may just uncover the colorist in you!