blog

Take a look around, there are examples of good design all over. The icons on your computer screen, the street signs outside your window, the vitamin water on your desk, each are pulling for your attention so that you might notice them, interact with them, or even buy them. Have you ever really taken a step back, and thought about how the choices you make each and every day are influenced by design?

No matter the situation, the way something looks is the first thing that anyone has to form an opinion, liking or perception about. The first time you meet someone, before you know anything about them, you judge on appearance. When you are shopping for shoes, before you slip them on to test for comfort, you judge them by the way they look. Or even a web application, before you dive into it’s functionality and how it works, you judge it based on the design. The fact of the matter is, good design is valuable, because it influences these perceptions, and ultimately your choices.

Recently I was having a conversation with the newest member of the dynamIt team, Andy Hutter, who had just purchased a new TV for his place. So I asked him which television he chose. He said that his decision came down to an LG or Panasonic, and he ended up choosing the LG because of how slick it looked. Two televisions comparable in price, picture, size and specs, but Andy chose the LG because of it’s design.

Design on the web is no different. People will form lasting opinions about a company or organization based on the way their site looks, and make choices based on that. Users make nearly instantaneous judgments of a web site’s visual appeal. These impressions impact perceived credibility, usability, and ultimately influence purchasing decisions. Web users form first impressions of web pages in as little as 50 milliseconds (1/20th of a second), according to Canadian researchers. Check out this article that highlights a study on the “halo effect” and “cognitive bias“, supporting the theory of first impressions in web design.

Sometimes it can be hard for designers to make clients understand the value of good design. A lot of companies/organizations settle with a free template, a site done in Frontpage, or having their secretary’s son do it because he is a computer science major. There is a ton of value in investing in a good web presence, because it’s a lot more than just making a pretty page on the interwebs.

It Will Improve Your Company Image

Visual communication is an integral part of a customer’s experience of a company or product, and it plays a key role in building a brand image.

It Helps Reach Company Goals

Good design is backed with a strategy. Our process at dynamIt allows us to discover a client’s objectives with thorough strategy, and this leads to design solutions that push to accomplish company goals for the future.

It Establishes Trust

Many studies have shown that the design of an unfamiliar ecommerce site will greatly impact the decision making process when a user goes to buy a product. I know that when I go to buy something online, if the site design sucks, I’m leaving.

You Will Stand Out Among Competitors

There is a lot crap on the web. I think this is pretty straight forward.

Even though your site may have superior products and services, an initial negative impression from a poor design can steer customers towards your competition. You only get one chance to create a good first impression, make it count.

Are there other scenarios where design has influenced you?

Our blog has been pretty quiet for the last month due to the fact that we’ve been pretty busy. It all came together last week as we saw the launch of four different client sites. Here’s a brief rundown of what we’ve been working on:

Columbus College of Art & Design

www.ccad.edu
We spent the last several months working with CCAD to completely re-orchestrate their website. Starting with web strategy and new architecture, designing the concept and the user experience, and finishing with web standards programming, we delivered the complete package. Our developers even got their hands dirty with a custom designed, AJAX-driven calendar integrated with the Google Calendar Data API.

CATCO

www.catco.org
CATCO is place to go for live theatre in Columbus. We worked closely with the people at CATCO to provide the online destination for information their organization and shows they put on each season. After many hours executing strategy & IA, concept design, UXD, and web standards programming we launched their new site. We had so much fun working on the project we even volunteered to help them promote the new site at Gallery Hop last weekend.

CallCopy

www.callcopy.com
Call recoding software specialist CallCopy came to us looking for a sleek redesign of their website as well as some guidance on navigation and architecture. After the first week of having the new site live we’ve heard reports that the new site has already yielded an increased conversion rate.

The Ohio State University Medical Center: CITIH

citih.osumc.edu
The Ohio State University Medical Center came to us looking for design and development of a microsite for its Center for IT Innovations in Healthcare (CITIH). This one had a tight timeline but we rolled it out in time for them to start accepting registrants for their summit Leveraging Federal Stimulus Funding for Healthcare IT Innovation.

Oh yeah, these are also the first four clients running the new version of the dynamIt Content Management System (dCMS). We launched that in July too.

Sorry to bore everyone with yet another developery post, but this does affect you designer types as well. Plus, I think it’s cool so I am going to share.

If you look closely around the web you will rarely see tabs that overlap each other. Usually, each tab is in its own self-contained box. The reason for this is that if two tabs overlap then turning one of those to its activate state requires the swapping of multiple graphics. This makes using sprites much more difficult and less effective (and if you’re still using JavaScript for image rollovers, well, that gets even messier).

So, I am working on the UI for the tabs seen to the right. You’ll notice that not only do they overlap, but each has a drop shadow that covers all the tabs and only those tabs that are “underneath” it. It is literally like we have four tabbed sheets of paper here that we want to be able to stack in any order. In my opinion, this is a pretty silky graphic effect, check it out, the PG. 2 tabs is all the way on the bottom, followed by PG. 1, then PG. 3, with PG. 4 on top.

My solution is to use absolute positioning along with transparent PNGs. Yes, transparent PNGs mean bad news for IE 6, but the solution is otherwise super-easy to work.

Simply cut out each individual tab and keep its alpha-channel transparency by saving as a PNG. Then, absolutely position each tab in its correct place on the page

Now here is the trick. If the server generates the active tab, whichever tab appears last in the HTML code will be on top based on the natural stacking order (i.e. no need to fool with z-index).

If the client-side can alter the active tab, messing with z-index is really not that difficult. I haven’t tried it, but something like the following should work thanks to jQuery.

$(’.tab’).click( function() { $(this).siblings().css(’z-index’, 1).end().css(’z-index’, 2); } );

Oh yeah, if you do need rollovers this method is totally compatible with your traditional CSS sprite.

I am working this afternoon on a top secret project that involves a system to manage pages and pages of HTML content. I won’t go into anymore details, but I do need to work deeply with HTML documents. Anyway, PHPQuery is a cool idea, but after implementing it, I noticed I was getting some odd characters where they were not supposed to be. So, another solution had to be found.

I turned to the Document Object Model (DOM) class built into PHP, which I had not yet used. The documentation sucks, but it is actually a really powerful class. It is, however, lacking one vital function. The ability to get and set the HTML/XML contents of an individual node, that is, the equivalent of the innerHTML property of JavaScript DOM.

I googled for a solution but came up empty. So, I had to invent the solution myself, and after quite some time of tinkering around here’s what I’ve got:

function innerHTML(&$dom, &$node, $html = false) {

     ## if html parameter not specified, return the current contents of $node
     if($html === false) {

          $doc = new DOMDocument();
          foreach ($node->childNodes as $child)
          $doc->appendChild($doc->importNode($child, true));

           return $doc->saveHTML();

      } else {

           ## get rid of all current children
           foreach ($node->childNodes as $child)
               $node->removeChild($child);

          ## if html is empty, we are done.
          if($html == '') return;

          ## load up $html as DOM fragment, append it to our now-empty $node
          $f = $dom->createDocumentFragment();
          $f->appendXML($html);
          $node->appendChild( $f );
     }

}

Not sure if this is the most efficient solution, but from what I’ve seen so far, it works.

Quality assurance, testing, debugging, bug hunting, etc. Whatever you want to call it, it sucks. It’s difficult to do, it’s not any fun, but it is an essential step of launching a web application.

It usually goes something like this: you write up your test cases to include actions that should work and some that should fail. You do black box testing and you do white box testing. Then, rinse and repeat.

Eventually you get to a point where you feel comfortable launching, but it does not stop there. Because this is web, we are not building software to be implemented in one company or institution or even across a single industry. Rather, when we decide it is time to launch a site, we instantly open ourselves up to a world of many different people with many different skill and experience levels.

Herein lies the difficulty. All of us internally, as well as the client, have a great understanding of the system and how it should be used, even if we have an opportunity to have some outsiders test the app, there is no way to predict how each individual will use it. Simply put, it is an incredibly difficult task to consider all the ways in which a user can possibly use each function of a web application.

Recently we launched an online store for a client. The client came back with one of their customers reporting that they got an error message when trying to checkout. After a good while attempting to reproduce this problem (and failing to do so), I realized that the user was using the site in a way that had originally never crossed my mind. Worst of all, the user’s actions were very logical. The site was designed so that there was no way to get to the final checkout stage unless you had items in your cart and you had entered all of your billing and shipping data. But once this was done, you were taken to a page that displayed your cart and a form to enter a payment method and checkout. I surmised that the user arrived here, decided they were not yet ready to purchase and bookmarked this page to return later. Like I said, a very logical action. However, upon return their session-based shopping cart and user data was gone, resulting in an error message.

Just one example of how quality assurance in web means being prepared for every user.

Note: I just wrote this article without mentioning the fact that we also must deal with things such as screen resolution, operating system, web browser, browser settings, plugins installed, etc. Yes, there are still people out there using Windows 98 and IE6 with cookies disabled and flash not installed. And, we’ve got to be ready for it.

Recently, we’ve had multiple requests for “print” links and printable versions of web sites. So, I started wondering, with widespread access including mobile, does anyone still print from web?

I posed the following question over twitter the other day: Does anyone actually print websites? If so, what types of sites and how often?

Some of the responses:

@Selicker: I print maps, instructions, and recipes

@noahwesley: I’ll rarely print a blog post/article to read later if I’m going to be bored and w/o laptop.

@fricto: My wife @owlpoo prints blog posts about cooking and knitting for the recipes/patterns quite a bit.

@beccarkt: yes! For competitive audits for clients and for articles, etc. Probably a couple times a week

So, YES. People still do print from web. They print stuff like, recipes, instructions, maps, long articles, and reports. Frequency seemed to vary-some as often as every few days, others very rarely-but the fact remains, web users still hit Control+P.

But even if not many users are printing from web anymore (which I have concluded is NOT the case), it is still really important to define a stylesheet for print.

It’s not that difficult to do, CSS makes it so easy for us to implement a print-only stylesheet. Sure it takes some more dev time to define layout styles that hide the fluff, ensure high contrast, and size things appropriately. But, that extra time makes your content and site much more accessible and usable.

Here are some dynamIt tips to writing that print stylsheet:

• If you do not already know this here is how to specify the media type for a style sheet:
  <link type=”text/css” rel=”stylesheet” href=”print.css” media=”print” />
• Remove things that don’t need to be seen when printed: navigation, features that do not pertain to the page’s primary content, ads (maybe?). The easiest way to do this is use display: none;
• Make sure that your text-to-background contrast is high. This is essential for readability.
• Do not bother making background images or colors print. People do not print from web for the design, they want content. (See above).
• If you are building from a fixed-pixel width design, keep your printable content around 700 pixels wide or less.
• Don’t forget to test it out by printing (and yes this means printing from IE6, IE7, FF2, FF3, Opera, Safari).