There are three common web design mistakes I see over and over and over. And they are made on sites big and small, by top designers and by amateurs.

The most common web design mistakes stem from the web designer’s inability to see the web as a medium that is much more in the control of the viewer than it is of the web designer. Designing websites in a way that will allow them to function well despite different choices than the norm on the part of a viewer is what separates out a good webdesigner from an average one.

There are so many different ways that people viewing the web can change their viewing environment, and we, as web designers, have to anticipate those changes and design the website to withstand whatever gets thrown at it and still give the viewer a good and usable experience. Three of the most common ways viewing environments can differ are:

• Default Font Size
• Screen Resolution
• Default Background Color

The most glaring error in Web Design is Font Sizing. Default font sizes can be changed, and for good reason. People who have vision issues often change the default font size in their browser or on their operating system so that they can read the text. But many, if not most, web designers do not take this into account, leaving the person viewing their websites with a broken and barely usable experience. Or, even worse, they set them in pixel sizes, which don’t allow fonts to be rescaled in IE, forcing those with vision problems to squint at text that is too small for them to read. Even web designers who should know better make this mistake. And this is not solely an “amateur” mistake. Websites of recognizable brand names are broken in this way. An example of this problem on a website for a top US Retail Chain– http://www.circuitcity.com. This website makes a further mistake in not being cross browser compatible, and only looking acceptable in IE. But regardless of which browser you use, if you kick the font size up even ONE notch, the website either breaks badly (everything but IE) OR the fonts don’t scale (IE). I find it interesting that http://www.target.com still has issues with this, even after being sued for a less than accessible website.

The second most common problem Web Designers make is assuming everyone has their background color set to the standard default color of white. In looking at websites I’ve designed on the machines that belong to friends and family, I can assure you that though it is rare for someone to change this setting, it is occasionally done. Out of approximately twenty machines I’ve tested on besides my own, I’ve found two that had this setting changed, which is 10% of my admittedly small sample. When the default background color setting is changed, then the website that does not have a background color set in the code is guaranteed to look awful. If you don’t believe me, set your default background color to something garish, such as fuscia. Then look at http://www.ebay.com or http://www.qvc.com. Pretty awful, huh? And if someone sets their default background to the same color as the website’s text, it’s even worse . . .

The third most common problem is a problem I call trying to stuff ten pounds of manure in a five pound bag. Whether it results in side scrolling for those who use smaller resolutions such as 800 x 600, or it results in such a busy layout with so much flashing and so many colors pulling the eye in too many directions at once, and/or there is so little whitespace in the layout that it’s hard for the eye to land on any one item, these websites are very difficult to read, especially if the individual viewing the site uses a non standard resolution or window size.

The most well designed websites take a viewer’s computer environment into account. The most well designed websites adjust gracefully in all browsers to different default font sizes, to various resolution and window sizes, and will set both background colors and font colors to assure good contrast and easy viewing for everyone, no matter what choices they’ve made in their default environment.

[tags]Web Design Mistakes, Website Design, Font Size, Resolution, Background Color[/tags]

Using WordPress as a CMS is a great way to get a small regional business online. AudioVisionsEtc.com owner, Mark Shader, runs a business selling and installing custom Audio and Video systems for the home and office in southeast Florida. Mark’s old site was a frontpage site that wasn’t doing the job he needed it to do– despite this market being a limited one, he was barely a blip on the screen when it came to the Search Engines. The solution? WordPress. Why? With the RSS, Ping, and other tools available, sites quickly get search engine attention for all new content added. Also, with the clean codebase that WordPress offers, Mark’s site is easy for the search engine spiders to parse, unlike the maze of bad code that FrontPage was producing.

With Mark’s site, using wordpress as a cms was key to making his site perform, yet provide him with a proper and professional web showcase for his business. A highly customized wordpress theme was developed, with many custom page templates that allow more functionality than an average wordpress site. Most of the content is similar in hierarchy and approach to a static site. But we’ve also made use of the bloggy bits of WordPress, and as Mark adds content the site will grow with keyphrase rich content about the Audio and Video installations he’s doing in and around Miami. And every time he adds content, he’ll be creating backlinks into his site, as all the update services are notified and they post links to his new content. This will also get his new articles spidered very quickly, as the spiders find the links into his new content.

Customizing the Page calls in the template to allow better hierarchy navigation, and adding a breadcrumb nav, took this site the step up it needed to allow easy usability, a clear navigation path, and a slick interface without a lot of clutter.

Mark is also making use of YouTube for his video promos, and he’s added links to his youtube profile and pages. To allow him to do this I added plugins that make it easy for him to post his youtube videos directly to his site, either in his blogposts or in his pages.

The Search Unleashed plugin was used on this site to ensure that all content would be spidered, since the site relies heavily on Pages.

Because the work Mark’s company does is custom and quite stunning, a photo gallery was needed to show off his work. NextGen Gallery was chosen as the most versatile. As you can see if you check the gallery out, it does a wonderful job of showcasing the audio and video installations that Mark’s company has completed. I also added a random photo generator in the upper right corner of the site to spotlight different installations Mark has done. He can add more images of the same pixel dimensions to that folder at any time and they will automatically be added into the photo rotation.

Do you have a small business website that is underperforming in the Search Engines? I can help. Use the contact form to tell me what you need.

[tags]Wordpress as a CMS, custom wordpress theme design, Custom WordPress Website Design, Small Business Web Design, Search Engine Friendly Web Design[/tags]

Promoting your business through video sites is a good thing. It’s the ultimate in Web 2.0, and if you’re good at it, use tags properly, and keep filesize/time limits firmly in mind, it can really help your website to take off. And we all know that YouTube videos can sometimes go viral, and really give your website a boost in traffic, providing you put a link to your website from your youtube profile and include your url on the end of your video, keep your SEO keyphrases in mind when creating tags, enable sharing, and do all the other things that will help in spreading your message using video.

The problem is that YouTube seems to be doing more purging of lower traffic videos these days. So you upload your video to YouTube, embed it in your blog, then find out a few weeks later that no one can see it. Should you not put things on YouTube? No, that’s not the answer, since if it DOES take off it can bring you a huge amount of traffic. But you should keep a watch on your videos and if a YouTube video of yours goes south, you should have an alternative video host to switch to.

Here is a list of alternatives to YouTube that all have embedding and can easily be added to your website in a way similar to youtube embeds.

• Revver.com
• Putfile.com
• Apnatube
• PhotoBucket

You can also self host your own video. There are WordPress plugins and also add ons for other popular web aps such as Movable Type, Drupal, Modx, Joomla and others, that allow you to upload and embed videos on your own site, which does give you more control. The one gotcha with doing it this way is that sometimes the bandwidth involved can max out your hosting account. That’s one of the reasons the video hosting sites have become popular, the other being the potential for traffic from the video hosting site to your website. These are upsides that don’t exist when you self host, but you also retain more control over the video, the quality, the length, and other things.

[tags]Video Hosting, Youtube Alternatives, Using Video to promote your website[/tags]

How COOL! I can check Google SERPs from different datacenters and see how I rank in each different world region for different keyphrases. This could be extremely useful for those who are doing international business and wish to localize different products to different areas or track the effectiveness of SEO campaigns by region.

I also noticed something else using this tool. Some of my long tail phrases that I’m just starting to work on optimizing for are very uneven, though the US SERP is consistently better than the others. With phrases that I’ve been ranking well on for a long time I see much less difference between areas, though there is some minor shift. So that means I can probably use this to track how my efforts are coming along for a long tail keyphrase in a more effective way now. I think levelling out the differences is as important for me as moving my site up in the serps, though sites of a regional nature tied to a brick and mortar business might not benefit from this the way I do.

There are also some other pretty cool tools, and all are granular down to the datacenter level. The PR checker shows you your google PR for a page from each datacenter, and also lets you check inurl, link, index site, and other search parameters per datacenter.

Enjoy!

[tags]SEO Tool, google localization tools, google datacenter tools[/tags]

I’ve been working on a Drupal Theme Design for a new site we’ll be launching probably within the next couple weeks, and with the new templating for Drupal version 6.+ there are many different places the css comes from, especially if you’re dealing with subthemes and multiple folders.

I had remembered a friend who templates Joomla a lot mentioning that he’d never find his way through the maze of files if it wasn’t for the Firebug extension for Firefox. I gotta tell you, this tool has saved me so damn much time I can’t begin to tell you. You simply open it, then you can drill down through the html to the element you need to style, and it will tell you ALL the dependencies in order, what file they’re in, and what line number in the file.

Most of my wordpress themes tend to only have one stylesheet and they average between 300 and 400 lines, so it’s never been a huge issue. But when you’re dealing with 5 or 6 stylesheets and some of them are in excess of 700 lines, and there are overrides and an order they load in, you HAVE to use firebug. I can’t imagine doing this Drupal template without it.

Some of my friends who write a lot of javascript and ajax goodies also swear by it for the same reasons. It has lots of debugging stuff too.

So if you’re working on some complicated templating, you might want to hook up with Firebug. You’ll be very glad you did.

[tags]Firebug, CSS Debugging, CSS dependencies, Multiple Stylesheets, Web Development tools[/tags]