Archive for November, 2009

Did Google give web designers their groove back?

November 20th, 2009

Clean code is groovy

One of the perks of hiring a web designer to develop a custom website has always been clean code; although it is sometimes hard to quantify that benefit in light of the ongoing savings associated with content management systems. I’ve always taken the high road when it comes to clean code for the simple reason that it is easier for someone else to step in and modify down the road, and it can also prevent browser compatibility issues in the future. And, o.k., I’m a neat freak! Still, it is often hard to communicate the value of clean code to a client when the words “page rank” aren’t involved.

Clean code took a blow in 2006 when Vanessa Fox (Google) stated in an interview with Rand Fishkin (SEOmoz):

“Google doesn’t really care all that much about the code to text ratio, we’re going to pick up the text, extract it from the page, and we’re really going to ignore the code.”

And again in March 2007 when Adam Lansik, SEO Strategist at Google, stated in an interview:

“…But, here is the core problem why we cannot use this in our scoring algorithms currently: There are a ton of very high quality sites, pages and sites from universities, from research institutions, from very well respected ecommerce stores, of which I won’t name any, that have really crufty sites, and sites that won’t validate. On some of these you can view the source and cry. And, because this is quality content, we really can’t use that as an effective signal in search quality. So, you can quote me a saying, I would be thrilled, it would make my day if people would decruft their sites, but it’s not going to directly affect their Google ranking.”

But recent comments made by Matt Cutts’ (head of Google’s Webspam team) regarding the possible impact of page speed on website ranking in 2010 may have finally given weight to the fact that clean code can impact search engine rankings.

Webpro News said regarding their interview with Cutts on November 13, 2009:

“From the sound of it, speed is going to be a huge factor in SEO moving in to 2010. He says that a number of people within Google consider speed to be very important to the web, and they are considering if that should play a role in the rankings of websites in search results.

According to Cutts, speed hasn’t played a role in rankings in the past, but that may very well change. Watch the video for more details about Caffeine and Google’s resources for helping webmasters improve site speed.”

Why is this important? Clean code = fast web pages.

I’ll use a CMS if I have too!

Because of my love for graphic art and my passion for clean code, I have always had a hard time accepting content management systems, although I do recognize that they are a valid solution in certain circumstances. In cases where a website has to be updated frequently (real estate agents, photographers, churches, large organizations, etc.) site owners can lose their shirt in maintenance fees unless they learn some html or use such a thing. But still, they are confining and stifling and ugly and…

Recently, when I took on a real estate company as a new client it only made sense to use WordPress. I spent a great deal of time customizing the site so it would not look like a template – and I have to say I was surprisingly pleased with the code generated on the home page. Not perfect mind you, but not nearly as crappy as some of the code I’ve seen generated by other content management systems. WordPress has come a long way and installing a SEO plugin to allow the customization of title and description tags helped as well.

For a moment I almost waffled. Maybe content management systems aren’t evil…

But thanks to Matt Cutts “encouragement”, I have come to my senses again and am warmly embracing my roots. I got my groove back! CMS is a solution, but it will not be the ultimate solution any time soon. Here’s why…

Awesome tools, but now what do I do?

In his interview with Webpro News Matt Cutts mentions a couple of tools to help analyze your website’s page speed, one of which is the Firefox plugin “Firebug”. I Recently ran the Firebug page speed analyzer on my website and blog because I wanted to improve load time. I have to tell you, it was SO cool! My website was no big deal to optimize since it is hand-coded and I only use one CSS sheet and no javascript,. The blog, however, was another beast! Some of the suggestions, which I think will be common to the majority of sites running CMS, are not that easy to implement. My blog runs on WordPress, which Matt Cutts says takes care of 80-90% of SEO mechanics, and still had to deal with half a dozen style sheets and over 14 javascripts. I can’t imagine the work involved on a site running a less optimized software.

One of the standard suggestions is to minify javascripts and CSS, which basically means removing all of the extraneous line breaks and white space generated by CMS & many html editors. You can actually click on links in Firebug to get the minified versions to copy and paste into the style sheets (sweet!), but only the main template style sheet is easily found. Other minified versions refer to inline CSS and javascript located within various plugin files – the source of which is not specifically given.

Another common suggestion is to “leverage browser caching” which involves modifying the hidden .htaccess file on your sever, and enabling gzip compression which is way over the head of your every day blog owner.

While Firebug provides some simple suggestions that are not difficult to implement, such as optimizing graphics and including image sizes, many of the “meatier” suggestions, in my opinion, take the skill of a web designer.

Also, on my blog, many of the bloated style sheets and javascripts noted by Firebug were referenced externally from plugin websites so I could not modify them anyway. Even though WordPress has come a long way in cleaning up their code, they have little control over the code generated by plugins. One of the great features of a custom design is that you have total control over the code and scripting. One of the great features of hiring a web designer is they know what they are doing!

Web design is easy… uh huh!

Several years ago one of my clients moved to a hosted CMS and used a web creation tool to build a flash website. After the new site was created, she called me with genuine concern in her voice. “I’m really afraid that once people find out how easy it is to create their own site you will lose all of your business”. I told her not to be concerned, that the benefits of a custom design ensured that it would always be in demand. Six months later she called wondering why her website did not pull up in Google even for her company name.

Still, it makes you wonder. CMS are becoming more popular than ever, and right now with this tough economy “free” sounds good to everyone. But if results count, a custom design, coupled with web design skills, still has more to offer. As a matter of fact they may be even more valuable in 2010. What do you think?

Share/Save

8 comments »

Posted in Search engine optimization, Web Design Tips

White space is not wasted space

November 12th, 2009

When designing a website or piece of media I many times work with clients who view white space as something that needs to be filled. Often, open space motivates a client to think “what can I put there?” It is easy for a design to get bogged down with unessential information if white space is not valued. In a proper design white space is just as important (if not more so) than the copy space. Here’s why…

Space gives the impression of quality

When looking for “cheap”, we mostly run to Wal-Mart, Target or The Dollar Store; where isles are so narrow and the shelves so packed full of goods we can barely maneuver our carts. But when we are looking for quality, we head to the mall where the stores are more spacious and elegant. Our senses “feel” quality from the second we walk through the doors. And, since we have made the decision to invest more money, there is a certain level of expectation. What makes the difference? Clutter!

Take a look at the two publications below. Note how the use of white space lends to the feeling of “quality products” in the ad on the right.

Planned white space can activate a design

Used wisely, white space can make a design come to life. Centering all of the elements on a page causes the white space to “disappear” because it is too predictable. The problem is the design becomes predictable too! By creating a “passive” design you ensure that it will most likely not catch anyone’s eye.

Take a look at the two graphics below. In the graphic to your right not only does moving some of the elements off-center make the graphic more dynamic, the white space becomes more dynamic too.

White space is just as important as black space

Have you ever looked at a poster that displays an obvious image with another image hidden within it? At first the hidden image may be hard to see, but once you have seen it you wonder how you missed it to begin with. In the same way, white is sometimes hard to see. Even so, white is a color, just like black, and it adds value to a design. Do you see more white in the picture on your left or right? Which white is more dynamic? In either case, now that you are looking can you see the white?

White space can prevent a “bad acid trip”

A fear of white space often leads people to add too much color to a design. Empty spaces are turned into blocks of color, graphics are colored, and sometimes color is used excessively to make important pieces of text stand out. When visitors arrive on your home page or see your media for the first time, their eyes have a split second to decide where to land first. Too much color, bolding and capitalization causes the eye to become overwhelmed and move on. For a website owner this means a quick click away from your site. For others it may mean people passing right by your poster without any desire to read it.

The examples below show how color can actually diminish the importance of your message. In the example on the left everything looks either important or unimportant, depending on your perspective. In the example on the right, the important parts of the message stand out quickly. Note how the white space has added value to the design – nothing has been wasted.

White space provides direction and keeps us connected

White space should be used like a traffic cop, directing eyes in the direction you want them to go. It is the glue that connects images with text and can be used to move the eyes up and down or left and right.

In the example on the left it is hard to know which way the eyes should move or what text goes with what image. In the example on the right, the image and description problem is solved and the evenly placed white space tells the eyes to move from left to right.

Space is soothing to the eye

Since the eyes can only take so much strain, cramming too much text into too small of a space can cause eye fatigue. Website owners especially need to take this into consideration because the hard-to-read text is combined with the glare from a monitor. White to the rescue!! Take the same amount of text, add sufficient white space, and the problem has been solved.