Archive for the ‘Web Design Tips’ category

Did Google give web designers their groove back?

November 20th, 2009

Clean code is groovy

hippieOne 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? 

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.

why we need white space

cluttered design uncluttered design

white spacePlanned 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.good design

centered designs are passive activate your design

the importance of white spaceWhite 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 is a color

use of white space another use of white space

balanced designWhite 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.designs need space

design with too much color clean designs use less color

white space connectsWhite 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.white space directs movement

white space connects elements white space moves the eye

eye strainSpace 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.spacer

text block with little space text block with enough space

spacerHopefully now that you’ve learned to SEE and appreciate the power of white space you understand that white is not a thief, it is a super-hero!

Moving your osCommerce store, Word-Press Blog or Forum from PHP4 to PHP5

May 18th, 2009

Learning via blood, sweat and tears

php4 to php5Just over a year ago, the webhosting company that had been servicing a number of my clients for many years sold out to a new company, Jumpline.com. Jumpline has proved to be one of the worst companies I have ever had to deal with in my career as a web designer. Several times clients were moved to new servers without notice, resulting in stores, forums and blogs being broken. Control panels were suddenly changed to Plesk, leaving customers stunned and scratching their heads. Many of the email accounts were not transferred properly, losing forwards, whitelists, etc., and some email boxes were not even turned on! Problems escalated and some became unsolvable because technical support was either non-caring or non-available. Mostly, Level 1 support did not have the expertise to help and for some reason was overly resistant to moving tickets to Level 2 until many long days had passed. The bottom line… it was time to move to a new host.

I did a lot of background research and settled on a new company. The point of this article is not to promote a webhosting company (I am not a reseller) but since I’ve already told you who the WORST webhost is I’ll just add… HOSTGATOR ROCKS!

In recent weeks I have moved 7 clients to new hosting, including 3 osCommerce stores, 2 Word-Press blogs and 2 Forums. One of the biggest challenges was moving from Plesk and PHP4 to cPanel and PHP5. I encountered many issues along the way, but between tech support going over the top to help me (did I mention Hostgator rocks!) and scouring forums for advice, all of the issues were resolved and life is good again.

Some of the solutions were easily found and some I had to do some serious digging for, so I decided to list some of the problems & solutions here to help others out and hopefully prevent a few gray hairs. I will also be adding some of these solutions (and more) to specific categories in my web design forum as soon as I can, but for now I’ll just focus on getting things up and running.

Reinstalling osCommerce and forums onto a new webhost running PHP5

Moving osCommerce and Forum files to a new webhost is no big deal, but moving a database from PHP4 to PHP5 and getting everything to run properly did prove challenging. On each site it seemed a different problem cropped up, but what was very helpful for me was learning the order in which things should be done.

My new host offered a one-click installation of the most current version of osCommerce, so my first thought was to run the install and let it create the database, upload our store files, and then import our SQL file using the backup restore within osCommerce. Saving you a little time here – that does not work! Here’s what you should do:

1. First you will need to make a backup copy of your database from your old host. Do not make a backup from within osCommerce using the backup tool, instead export the entire database to your hard drive via phpMyAdmin.

2. Next, upload the files from your old host to the new host via your preferred ftp program.

3. After the files have been uploaded, create a database on the new server. The following are the steps for cPanel:

- Click “MySQL databases”

- Under “Create New Database” give your database a name. Write down the name of your new database. Note: The name you select for the database is usually appended to your user name, i.e., username_databasename.

- Once the database has been created click “go back”. You will now need to create a user for the database.

- Scroll down the page to the MySQL Users section. Add the user name and password for the new user and click “create user”. Once the user has been created, click go back again.

- Now that the user is created, you need to assign permissions for the user to edit the database. Scroll down to the section “Add user to database” and choose the user & database name you just created.

- Next you will be taken to the permissions page. Click “all privileges” for the user and “make changes”.

4. The next step really depends on your new host and the level of support they provide. I found with Hostgator that it was best to upload the SQL file that you backed up from your old host to your server (into your public_html directory) and then ask tech support to import the database for you. They are more then happy to do so and seem to automatically problem-solve any issues that may occur.

If you have to import the database yourself, be careful to remove the section of the SQL that creates the database from the file before importing.

CREATE DATABASE `username_databasename` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; USE `username_databasename`;

Since the database has already been created, you will receive an error unless that section is removed.

5. Once your database has been installed properly update your osCommerce configuration files located in the catalog/includes and admin/includes folders. You will need to update your https: path, your database name, database username and database password.

Hope this helps someone to get off on the right foot. I will be posting answers to more specific problems regarding broken SSL and missing forum pages to the Front Range Web Designers Forum in the near future.

5 big no, no’s when shopping for a web designer

January 19th, 2009

While not an exhaustive list (I could definitely come up with more!) here are some major things to avoid when hiring a web designer:

1. Don’t let your web designer purchase your domain name for you. Suppose down the road you end your business relationship with your designer OR the designer closes up shop OR moves to another company. Not only is the owner of your domain name MIA, most of the time he has taken the login & password for your registrar with him! If your designer uses his personal name and email address as the administrative contact not only will he receive all notices regarding domain expiration (you’ll be unaware), all changes in ownership will have to be validated through that email address. If the email address no longer exists it gets even more complicated. Bottom line… Make sure you own your domain name!

2. All in one packages purchased from web hosting companies that include hosting, web design and web design maintenance are not always a good deal. Some of the pitfalls can include:

- Paying a monthly maintenance fee even when no updates are required for the month.

- In some cases the web host may retain ownership of the site, so if you change web hosts in the future you will not be able to take your site with you.

- Some web hosts require that updates be made through their company, leaving you subject to the company’s (some time excessive) time frame.

- Most “all in one” companies use template systems so your choice of design may be limited.

- You may pay extra for features that you never use.

Many times it is more economic to find an affordable web host and hire a web designer that charges for updates only when updates are required. You will generally have more flexibility with your site’s design and you can request only the features that you intend to use.

3. Don’t use a web designer that insists on his own design. It is one thing for a web designer to advise you regarding site structure, accessibility, color theory and organic search engine optimization - that is their obligation as a professional and what you are paying them for. It is another for the designer to insist on a web site “look” based solely on their personal taste. It is not unheard of for a web designer to provide a draft to their client and if the client expresses unhappiness with any aspect of the draft for the designer to become offended. This is a sign of immaturity and unhealthy pride. A good web designer should always take your vision and likes/dislikes into account. The perfect website should be healthy, perform well, attract the appropriate customers, AND make you proud.

4. Remember that a web designer is not necessarily a search engine optimization specialist. While a good web designer should be educated and incorporate healthy organic SEO techniques into their design, a web designer cannot be held responsible for the ongoing performance of your site (especially in a competitive market) unless you have specifically contracted for those services. Web design and SEO are two distinct industries that compliment and build upon each other.

5. If you already have a website and are looking for a redesign you do not have to move your site to your designer’s recommended web host. Many times web designer’s resell web hosting and are looking to make a little side money. Though it sounds easy enough, moving a web site is more complicated then you think. First you need to take the “if something can go wrong it probably will” law into consideration. There will be at least 48 hours of downtime, and forms and email links have to be reconfigured and retested. Unless you are using an exchange server, there is a chance you will loose all emails sent during the transition time. It gets even more complicated if a site is running an online store. In that case, configuration files have to be edited at the server and gateway levels, the database reinstalled, and the store retested. You should only switch web hosts if you are unhappy with your current host.

Web Designer, SEO or Both?

September 6th, 2008

What is the job of a web designer?  To create a website that is aesthetically pleasing to their client or a website that is guaranteed to perform well on Google?  What is an SEO?  Is my web designer an SEO?  Is an SEO my web designer?  The answer is yes… and no.  The lines are not always clear and the subject is often open to debate [see thread at the Small Business Forum regarding implementing an SEO friendly design into the build of a website].  Before you hire a web designer then, it is important that you understand the different roles a web designer and SEO can play in the design and ongoing performance of your website… and where the lines sometimes get blurred.

What is SEO?

SEO stands for search engine optimization, and simply means putting your website into such optimal shape it ranks well on search engines.   This, however, covers a lot of ground.  It involves the careful planning of site structure, the development of relevant content, the use of clean code, how your pages link together, positioning and use of keywords, description and title tags, garnering natural and high quality links to your site and marketing.  On an ongoing basis, SEO may involve the monitoring of statistics and analytics to see which pages are performing well and which are not and making adjustments accordingly.  It also means, when possible, continual adding of fresh content.

Is a ”search engine friendly” site the same as a site that has been ”search engine optimized”?

You won’t find these terms clearly defined in Webster’s Dictionary for sure, but basically no.  A search engine friendly design means that a site has been designed with search engine ranking in mind.  In other words, the design will not hinder search engine ranking, though it does not guarantee HIGH rankings either.  This includes particular attention to site navigation, internal linking of pages, and the amount and positioning of good, quality, keyword-rich text.

A search engine optimized site has been taken a step further. In this case the focus is on improving a site to the point that it ranks well on a search engine.  As mentioned above this entails a lot of extra work and monitoring of a website, and some argue that for particularly competitive industries the job is never really finished.

Do I need a search engine friendly website?

Believe it or not, there are circumstances when a search engine friendly site is not necessary, but those cases are few and far between. For instance, I once developed a website for a photographer that did business locally and was not concerned about reaching an international market. Their site was used basically as a portfolio and for draft viewing purposes.  Most importantly, they marketed their website frequently in other venues such as direct-mailers, flyers, business cards and other promotional publications.  In this situation, the client felt it was more important to impact their visitors visually and chose to have their home page created as a full page graphic and basically no text.

Why is that important?  Because search engines are not human and can only connect specific keywords to specific sites if those keywords are actually on the website.  So if the keyword “photography” is not on the home page the site generally will not be found when a search is conducted for those terms.  This was a trade off that my client clearly understood and decided to compensate by advertising through other means.  This type of design could be considered search engine unfriendly and is not the norm.

In general you should always expect and require a search engine friendly design as part of your web design package.

Do I need an optimized site?

Whether your site needs to be optimized will generally depend on the competitive nature of your industry and how important search engine rankings are to your business.  Since the only value a search engine can offer it’s visitors is relevant results, it is no surprise that they are constantly tweaking the formula by which they determine which sites are ranked the highest.  As forumlas become more sophisticated so has the “art” of website optimization.  Tricks and quick fixes that you may have heard of in the past no longer work with reputable search engines like Google and could even cause your site to be banned.  If you choose to have your website optimized, it is always best to go with a professional.

So can my web designer do it all?  What should I expect?

A good web designer should always have a working knowledge of SEO – enough knowledge to create a search engine FRIENDLY website.  This is standard.  This is also where the lines sometimes become blurred.  There are web designers that specialize in optimization and offer ongoing optimization services, but not always.  In the case where a web designer does not offer these services, they are still responsible for some optimization basics, such as careful planning of site structure, clean coding and optimal page linking, but cannot be held responsible for continued upward movement in rankings.

If it is clear that ongoing marketing and adding of content will be necessary to increase site ranking and the web designer cannot offer such services, then site structure must be a main consideration in the site plan.  The site must be created in such a way that adding content in the future does not require a redesign of the whole site.

What’s the bottom line?

Not all web designers have the SEO skills to ensure that your website ranks highly on search engines, especially in highly competitive industries.  Conversely, not All SEO’s have the skill to create an attractive website.  The important thing is that before you start your website design you discuss the scope of services with your web designer.  Be aware that even if your web designer does offer optimization services, those services will generally be an add-on service and not included in the cost of your website design.

Before contracting with a web designer, here are the 10 most important questions to ask:

(1) How important is search engine ranking to you?

(2) What do you do to ensure your designs are search engine friendly?

(3) Can you show me examples of web designs you have created that rank well in Google?

(4) Should my site require ongoing optimization, including the adding of content, do you offer those services?

(5) If you do offer ongoing optimization services, are they included in the cost of the web design or is it an add-on service?

(6) If ongoing optimization is an add-on service, how much will it cost?

(7) How much experience do you have in website marketing?

(8) Can you give me examples of websites you have optimized and records of your results?

(9) Can you provide me with references?

(10) If you cannot offer ongoing optimization services, what will you do to ensure that my site is easy to add on to or update by a SEO professional in the future.

In most cases a web designer can and should meet your basic optimization needs.  If more advanced optimization skills are needed, however, you may have to contract with an SEO specialist.