More Mountain Dew, Please
Unlike the content development phase, the actual creation of a website is the domain of the web programmer. We lock them in their dark room with a box of Twinkies and a case of Mountain Dew, hand them “the website plan”, “the content” and “the design”, and they magically meld it all together into a website. Okay, not really. Sometimes we bring them a pizza.
In the previous article, we discussed the extreme importance of content development and ongoing search engine optimization. In this article, we’ll talk about graphic design, and how to program modern functionality and features into a website. Again, we will try to be as non-technical as possible and touch on only what you need to know.
Who Is The Designer?
“Hey, I’ve got a cousin who’s an interior decorator and did newspaper ad layout back in the 80’s, maybe he could do the graphic design for my website and save me some money?” Um… maybe not! The Internet is a unique medium, unlike anything that came before it in a lot of significant ways. It’s not a static medium like a billboard or a magazine ad, no matter how many people try to make it into a video-only medium… it’s not television. The primary purpose of a website is not to grab the attention of a person who is driving by on the highway, or about to turn the page to finish reading an article. The primary purpose is to present information clearly and concisely. So, while there are graphic designers with talents and experience in a wide variety of media, if they don’t have the website design experience, they can’t produce a “good” website -- perhaps a “pretty” website, but not a “good” one.
Let’s take a moment to think about “bad” websites. What makes a bad website? Truthfully, you can get away with a lot of poor design choices as long as the site functions well and provides the information that the user seeks. (Content is King!) But, in general, the sites that strike us as being “bad” are those with a disconnection between graphic design and functionality. How does that happen? It’s very simple. The design process is both a graphical problem and a programming problem. Graphic designers and programmers are more often than not very different personality types! There are those rare few graphic designers who have programming talents, and programmers with some graphics skills, but the BEST of each of those worlds is rarely present in the same person. With the differences in graphic artists and programmers in mind, let’s take a closer look at “bad” websites. How many websites have you visited that functioned well, but just didn’t look right? The chosen colors and graphic elements were bland, or just “wrong”, it just wasn’t pleasing to look at -- but, it worked perfectly! That’s a typical “programmer-designed” website. At the opposite end of the spectrum, how many sites have you seen that look fantastic, but are completely useless? You click on things and they don’t work, or don’t do what you expect them to; the artwork is great, but the positioning and layout might be a little off; you can’t find the information you’re looking for -- but, it looks great! That’s an “artist-programmed” website. Both of these fundamental problems are very common.
So, who designs the website? It has to be a designer who understands the requirements of the programmer. If the designer and the programmer are the same person, that is great. (Assuming that person is truly qualified to do both!) Otherwise, the designer and the programmer need to work together as a team to reach the goal of a visually appealing website that is functional.
Where Do We Begin?
It all begins with graphic design. If the client’s business has a logo, that is normally the best place to start. Select colors, fonts and graphical ideas that mesh well with that logo. The client’s desires must also be considered. Does the client want the site to look “professional” or “casual” or something in-between? This is the realm of the graphic designer.
We like to turn our graphic designers loose with as little guidance as possible. Just give them the basics and let them run with it. We have them create two or three basic designs, present them to the client, and then either refine a final design based on what the client liked about one or more of those designs, or completely start over with a better understanding of what the client likes and dislikes.
Making It Work
Okay, we’ve settled on a design that the client likes and that meets the needs of the programmer, now what? The programmer puts it all together and makes it work! It might sound like the simplest part of the process, but it is usually the most complex and time-consuming because there are so many facets to consider. For each of those facets that goes ignored, your website loses some of its potential, so it is critical that you understand what is required.
What’s On The Menu?
One of the first things to be considered is the website navigation system. How does the user find the page they are looking for? A very basic website might have a simple list-style menu with just a few pages to choose from, but those sites are becoming more and more rare. More often, we will use a multi-tiered menu system with pages categorized into logical groups so that the user doesn’t have to sift through 20 top-level menu items. Six to eight top-level items is usually best, and if a sub-menu has more than about 10 items, additional grouping is wise.
The general rule of thumb is that a user should be able to reach any page on your website from the home page within three clicks. Click-click-click-answer! That is the ideal website navigation. If you have sufficient depth of content, you may need to extend that rule to 4 or maybe even 5 clicks… but ONLY if required.
The navigation then blurs the line with graphic design, as it has to be styled to match the graphical theme of the website. Designing a proper menu is a topic worthy of its own article, so we’ll just leave it at that for now.
This Page Looks Goofy
Have you ever run across one of those web pages where the formatting is just so messed up that you wonder how the designer ever left it that way? Odds are that they didn’t... or at least they didn’t think that they did. Let’s back up a little bit and talk about standards. This won’t hurt, I promise.
The Internet is built on standards. HTTP, HTML, CSS, the list goes on and on. Most of the network-level standards are pretty concrete and adhered to, but as you get up into the standards that affect how pages are displayed in your web browser... well, things get a little goofy. There are standards. Programmer-types like standards. They make things predictable. Stuff either works or it doesn’t. Or not.
We usually blame Bill Gates. Oh, it’s not really his fault (or is it?), but he’s the head of Microsoft, and Microsoft’s Internet Explorer (IE) browser is pretty much the root of all evil as far as web programmers are concerned. Why? Microsoft likes to bend the standards and sometimes even make up their own standards. They get away with it because their browser is the most popular web browser on the planet. We all want (need!) our websites to display properly in IE, so we bend (oh, how we bend!) to the whims of the latest version of IE. We even bend to the quirks (yeah, go ahead and search Google for “IE quirks” when you get a minute) of the prior two or three versions of IE just because so many people are still using them!
So, why not just design everything to work with IE in the first place? (Ol’ Bill would like that, wouldn’t he?) Because, even though IE has historically been the most popular web browser, sometimes taking close to 80% of the market, that percentage has been steadily declining. As of 2009, to design strictly for IE would be ignoring well over 50% of the market! Other browsers in use include Firefox, which is getting closer to 50% of the market every day, and a few less-popular browsers, such as Safari, Opera and the new Chrome browser from Google. Fortunately, IE is the only one that’s truly “quirky”. The other browsers generally play by the rules. Go figure.
Back to our page that looks funny. What happened to it? Well, oddly enough, most programmer types like to use Firefox as their own personal browser, and sometimes they forget to recheck their work in IE to be sure it displays properly, especially when just making a quick update to an established page. Or... a somewhat wiser website programmer might check his work in IE, work around all of the IE bugs, then forget to check it in the other browsers. It’s easy to make such errors, and not nearly as easy as it should be to avoid them. Each new version of Microsoft’s browser is getting better, though.
A Different Perspective
Content, check; SEO, check; graphic design, check; programming, check; browser compatibility, check. We’re done now, right? We could be. A lot of websites stop there (if they even cover all of those bases), but there are a few more things to at least consider, even if you opt to not act on them. We talked about all of the standard web browsers, like IE and Firefox. But, there are other ways to browse the internet.
The big one these days is mobile devices. Everything from the tiniest cellular phone to the latest Blackberry or iPhone is capable of accessing the Internet, and you’d better believe that if you have a website, somebody is going to try to access your website on one of those devices. Even if they’re just looking for your phone number, or trying to find your address so that they can swing by your office on their way home, they need to be able to access your website. It would be unwise to overlook the potential marketing value of mobile compatibility.
Another one to consider, and a lot of government and public service websites are required by law to address this one, is being accessible to the visually impaired. To meet this goal, your website needs to be able to be “read” by a person who cannot see it, or has a limited capacity to see it. They need to be able to peruse your menu, follow all of your links, make sense of your layout, and even know what the images on your site represent, all without any visual cues at all. Fortunately, there is special software available that strips out most of the formatting (similar to the mobile browser) and reads the text only. For the most part, as long as we’ve built a site that is compliant with standards (here we go again) and followed a few simple courtesy rules, like including alternate information for each image, and using tables sparingly and logically, the visually impaired can navigate your website pretty well. But, if you expect them to make up a significant part of your user base, or if you just want to be accessible because it’s the right thing to do, at a minimum, your website should be tested for compatibility.
Obviously, any of these methods of alternate browsing bring a lot of discussion to the table... and potentially a lot of additional cost.
Wrap It Up
Wow, it’s hard to write a “short” article about web design that has any real value! We hope this article taught you a thing or two that you didn’t already know about modern web design. We’ll be following up with specific articles about many of the details that we had to cut short in this article. Look for them on our website!
