Most websites today are quite graphical in nature due to better monitors, faster connections and increases in technology.  A website design will often revolve around a “branding effort”, such as a logo or other printed collateral that was created before the website was implemented.  Unfortunately, not all logos have been created with the thought of how they may display on a monitor, since they are frequently designed originally for business cards or stationary.  This can produce problems future problems if the logo contains finely detailed elements and/or a variety unique color variations.  The issue is that monitors consist of a grid (rows and columns) of square pixels.  Each pixel displays its own color to collectively produce the content that one sees on the screen.  Obviously, not every element on screen is “square”, so how are we able to see circles, curves and other none linear objects on a website?  The answer is pretty simple.  Graphical elements can display differently using a trick called “anti-aliasing”. 

Below are two black circle images on a white background.  The image on the left is “aliased”, the image on the right is “anti-aliased”’


Notice how the circle on the left appears jagged (also known as the “jaggies”) and the circle on the right appears smooth and round?

Now, let’s take a look at each image close up.  Below are parts of the same circles magnified.


The above image on the left contains only two colors of pixels, either black or white.  The image on the right contains 67 colors, all various shades between white and black.  While one can still see the square pixels in each image when magnified, at normal size, the eye will be fooled into thinking it is perfectly round.

Frequently, I am provided with artwork containing fine lines or very detailed fonts.  Depending on how large a logo is displayed on a website, elements can sometimes appear “fuzzy” due to anti-aliasing, when in print they are not. 

Colors used within a brand can also produce problems.  Print collateral is often created using the CMYK print process.  CMYK stands for Cyan, Magenta, Yellow and Black (K) and functions similarly to layering by partially, or entirely, masking colors on a lighter (usually white) background.  Monitors, instead, use RGB (Red Green Blue) by mixing these three colors to display images.  Because CMYK consists of four elements, whereas RGB has only three, information can be lost in a conversion between the two.  Often, a conversion produces a different, but similar color, usually appearing “brighter” than the original printed matter.  Therefore, the beautiful shade of teal blue on your stationary, that you spent hours on getting just right, may end up being far too blue, or green, or bright on a monitor. 

Granted, tweaks can be done to simulate a color fairly closely, but this still doesn’t guarantee a perfect match.  Monitor type, various video cards, different calibration settings, and whether the user is viewing the website on a Mac or PC, can all contribute to producing varying shades of the same “supposed” color.

The end result is that, while printed matter produces a product that is guaranteed to be viewed the exact same by all users (except for possible color blindness), the web has far too many elements that cannot be controlled.  Being knowledgeable of what you are up against, keeping your designs simple and clean, will provide you with a better chance of branding your business equally across all media.

I’m the first to admit that creating a webpage is not all that difficult. I know for a fact that a 12 year old can create a website.  I’ve taught many classes to 6th graders in Oregon State University’s “Adventures in Learning” program.  Granted the class is only 2 weeks long, but young learners garner enough of the basics to produce a functioning webpage.  So, why should you pay a professional when your teenage, computer-geek niece or nephew could spit out a website for your business in a couple of days at a fraction of the cost?

The answer is, what risks are you willing to take with your online presence?  Static web pages are little more than text or images placed between pairs of “tags”.  The “tags” determine how items appear within a webpage and are enclosed within “greater than” and “less than” symbols.  For example, if you wanted to make the word “hello” bold within a webpage, your coding would be <strong>hello</strong>.  The first part of the pair “turns on” the tag, the second part with the slash, turns it off.  Furthermore, there are really only three required pairs of tags for any static webpage: <html><head></head><body></body></html>.  By only inserting this coding and saving the page as an html file, you would have a fully functioning webpage.  No kidding.  The page would be blank, but it would be functional.  Didn’t I say it wasn’t hard?

Depending on layout, a static webpage is technically easy to create. However, I’m often asked to “fix” or re-design websites that have been developed by others.  If webpage coding is so simple, then why would someone need to hire a professional?  Simply put, there is more to web design and implementation than just coding. 

Below are a few examples of how non-coding elements can impact a visitor’s website experience, often resulting in the person leaving and going elsewhere.  Note, in some instances, there could be additional possibilities to each scenario.

“My webpage looked great on the previous developers screen, but now I’m getting complaints because my website looks REALLY big to people and only part of the pages are viewable.”

Problem:  MONITOR RESOLUTION.  Resolution is essentially the number of pixels used to display content on a monitor, usually given in “width x height”.  The larger the numbers, the higher the resolution and the more information that can be displayed within a given space.  The previous web designer had a very large screen and created a non-flexible layout that filled their 1920×1080 monitor.  Currently, only a little over 2% of users have screen resolutions that are high enough to accommodate this type of resolution.  The website was displaying far too large in monitors set at lower resolution.  This placed much of the content outside of the viewable area, requiring visitors to not only scroll up and down but side-to-side as well.  Visitors HATE to scroll side-to-side.  Don’t you?

“My website has been online for six months and I still can’t find it in Google.”

Problem:  SEARCH ENGINE OPTMIZATION.  Putting a website online doesn’t guarantee visitors.  With millions of websites for any given topic, it’s a virtual “needle in a haystack”.  So how does your website get found when you are selling the latest and greatest product?  Search engine optimization (SEO) can be used to increase a website’s listing in a search engine’s unpaid (also known as organic) results.  While SEO is incredibly multi-faceted, there are many things that can be done to help the search engines (Google, Yahoo, Bing, etc.) find your website.

“My homepage has only 3 images, but it takes forever to download.”

Problem:  IMAGE OPTMIZATION.  Web pages are usually graphical in nature.  Unfortunately, images take far longer to download than just text.  Delays in a page’s load time can be affected by the number and types of images used.  A JupiterResearch survey found that 33% of broadband shoppers are unwilling to wait more than FOUR SECONDS for a web page to load, whereas 43% of narrowband users will not wait more than six seconds (Akamai 2006). By optimizing images, one can shave several bytes off the overall page size, creating quicker download times and a better user experience.  Webpages use three image file formats which are .gif, .jpg and .png.  Each of these formats offer unique qualities depending on the particular image being used.  Images that are line drawings or contain a lot of “flat colors” should be saved in a .gif format.  Photographs or highly detailed images with “millions of colors” should be saved in a .jpg format.  The .png format is a newer replacement for the .gif format producing even smaller file sizes.  However, some older browsers will not be able to display .png images.  One should NEVER use .tiff, .bmp, or other unsuitable web formats. 

“My website looks fine in Internet Explorer but some of my visitors are having problems when they use Firefox, Chrome, Safari, etc.”

Problem: CROSS-BROWSER COMPATIBILITY.  Through the years, the market has broadened to include various types of web browsers such as Internet Explorer, Firefox, Chrome, Opera and Safari.  Initially, features were added to browsers without any coordination between companies. Although most browsers supported some particular feature, differences ranging from slight to gross affected the way the feature functioned or looked.  Due to an attitude shift towards more compatibility and compliance in coding standards, this is becoming less of a concern in newer browser versions.  However, there are still a significant percentage of visitors that continue to user older browsers, so cross-browser compatibility can still affect current layouts and design.

“Visitors say they can’t find the information they are seeking on my website”

Problem:  USABILITY.  You can have a beautiful website that downloads fast, is search engine optimized, and cross-browser compliant, but if visitors can’t find what they are looking for…you’re sunk.  The term usability is often mentioned in web design as the intangibles that relate to the user experience.  When someone visits your website, is the navigation (links to other pages) intuitive?  Or, do they have to spend too much time determining where they should go to obtain the information they are seeking? Do they know where they are at on your website and is it easy for them to return “home”?  Is the content succinct and understandable, or is it long, cumbersome and confusing?  What colors are you using and do they invoke the emotions you hope to achieve?  Are the pages and navigation consistent and branded to reflect your business? Do you have a way for people to contact you? 

These items and many others make the user experience.  Remember, you’re not designing the website just for you, but for your visitors.

Welcome to the initial post of the Network Enterprises blog written by Kelly Wildman, owner of Network Enterprises, LLC. For those of you who don’t know me, I’ve been a web designer/developer since 1997. I live and work in Corvallis, Oregon which is located in the beautiful Willamette Valley. I’m often asked by far away clients, “Gosh, doesn’t it rain a lot in Oregon?”. Well yes, sometimes copious amounts on Oregon’s west side, but that is also why it is so lush here.

I first became interested in website design because it appealed to both my creative and technical nature (my formal education was in accounting). Since then, my horizons have expanded to include other aspects such as accessibility, usability, search engine optimization, ecommerce and database development.

I really do love my work and enjoy getting to know new clients and their livelihoods. I realize that there are many web design firms to choose from these days, so I am always honored when a client trusts me to implement their online presence. Selecting and hiring a web developer is a critical business decision, making it especially important to determine what firm might be the best fit for any given circumstance. If you’re pondering hiring a web designer, I would urge you to consider the following:

1. Acquire a domain name. Domain names are a website’s “address”. If you have purchased one through a domain registrar, then you may be ahead of the game. If not, what names have you considered and are they available? A good web designer can steer you in an appropriate direction.

2. Find a web service provider. Websites need to exist on a special computer called a web server which will make your website accessible to the internet. Since there are many web service providers available, which ones might suit your needs and anticipated traffic? If you don’t know, a competent web designer should be able to make several suggestions.

3. Ask for a portfolio or examples of work. Anyone who’s created at least one website can call themselves a “web designer”. Would you hire someone to drive a School Bus when they’ve driven a car only one time? Somehow, I don’t think you would.

4. Ask for references. A competent web designer should be able to quickly provide you with a list of past and current clients. Find out if they completed projects on time, within budget, and what their working style is like.

5. Interview them. Although a web designer may not be an employee, you should still determine if you can work with them. Are they professional, courteous, sincere, and prompt? Do they “speak your language” or do they rattle off acronyms and terms that sound like a foreign language? Do they understand the scope of work at hand? Do they ask as many questions of YOU as you do of them?

6. Ask about a contract. I’m still amazed at how many web designers do not produce contracts or a written scope of work. This is can be a recipe for disaster. Contracts should protect the developer and the client equally, outlining what should be done, at what time and the costs involved.

7. Ask yourself “are you ready?” It is common for a client to believe that they MUST have a website. In all honesty, this may not be the case. However, if you believe that a website would be a benefit to your business, then it WILL involve additional work and consideration on your part. Do you know what you want and why? How will your website support your current business goals? How do you anticipate compiling the information necessary to relate these goals through your website? Content such as text and images will need to be supplied. Do you have the time, staff or resources to do this?

By heeding these few suggestions, you have an improved chance of weeding out inappropriate web designers that could end in disaster. My goal has always been that if my client’s succeed, then so do I, aspiring to not only meet a client’s expectations, but to exceed them.

I wish you the best in your web design goals!