Technically his name was Mark, and he didn’t really have a British accent, but the succeeding conversation was pretty much the same (sort of).

The fundamental rule of successful web design is to aim your design to your target audience, not yourself. There are many industry rules that offer the best practices to follow coupled with a bit of common sense to guide you through your web design journey.

There are three things in common for those websites that have stood the test of time:

• Proper themes for the target audience
• Unmistakably clear navigation
• Uncluttered design  

It’s not rocket science, but these few components do take some upfront planning and should not be taken lightly. Better website designs are completely subjective, but a bad design is…bad. The following is my checklist of what not to do:

• Excessive use of Flash: Improperly using a great deal of flash in your design is unwarranted and can detract people from the purpose of which the website was intended for. It is important to make sure that if you are using flash that it is used wisely.
• Lengthy pages: Pages that are too long are subconsciously interpreted as being too much work to read. It’s a better idea to break up content into several organized pages.
• Cluttered pages: Not every piece of information needs to be seen all at once to be valued. Too much information can become a distraction and some people will end up missing the point entirely.
• Redundant information: Make sure you give your website visitors a bit of credit. Offering convenient navigation is certainly one thing, but force-feeding them is a bit much.
• Abundance of attention getting devices: If everything is highlighted or marked in bold, then nothing will stand out.
• In case you need additional clarification visit: www.websitesthatsuck.com

Over the last couple of years Search Engine Marketing and Social Media have redesigned the way basic Internet marketing principles were handled. I am talking about the way a user (a human being, not a search engine) experiences and fundamentally views website pages and how they are organized and laid out. In the end, it really is what a website visitor does once they get to your website which is clearly based on what they see on the site.

At this point I would generally turn the discussion towards content, but there is something that is even more essential that should be addressed. That is Usability and Visual Appeal…

The top banner and navigation layout are used throughout your entire website, thus visitors will be seeing them on every page and using the navigation to surf through out the entire site.

• Think magazine, not flyer- Essentially, think somewhere in between. A web page layout is not the same as print layout, but obviously basic design rules still do apply. Magazines typically produce a more artsy look, where flyers tend to feature over sized fonts centered down the middle of the page. Effective layouts merge direct and simple ideas with the interest magazines invoke. Common professional styles can showcase wrap-around text, multiple columns and strategic (but limited) attention getting devices. You don’t want distractions you want style.
• Consider spacing -Save indenting paragraphs for your term paper, not for the web. Consider separating each paragraph with a double space instead. This makes everything much easier to read and separates individual points in areas that are manageable by your visitor. Sites that space each paragraph into blocks and have about 1.5 spacing makes for easier reading such as with the Huntington Beach Personal Injury Lawyers website.
• Wrapping text – When you wrap text around images, it can give a very professional “magazine-like” look to your page layout. To avoid a crowded feeling, do not allow the text to butt directly up to the image. Instead use “cell padding” around your image to create a small buffer area to allow it to breathe.
• White Space vs. Scrolling– It’s up to you to decide weather to utilize and uncluttered design or to minimize scrolling. Minimizing scrolling is a good thing to consider, but don’t jam all of your content into the top portion of your page just because it’s a good thing to do to optimize your site. A better solution is to aggressively edit your content down. Remember that visitor’s breeze through websites faster than you would imagine with a certain level of impatience. When it comes to the web, less is more. A great example of a popular site with minimal scrolling is healthy lifestyle Edamame, which doesn’t include much text. Instead, we let the graphics do all the talking.
• Texture and background images – It is never a good idea to use any type of background image or texture behind a body of text unless you have a really good reason to. It often can appear gimmicky and makes the text more difficult to read. Adding these things may also increase the loading time of your website, thus sending people past your page before they even got to see what was on it.
• Using Flash appropriately – Using animation on your webpage can house many advantages, but it can also be overused. A small amount of animation can add a certain amount of flair to help distinguish your brand or products, but more than often it can become a distraction. Distracting your visitor from your end goal is not something you should do.

Avoid testing the patience of your visitors with unnecessary eye candy. Logos and slogans in the banner of your homes page (or landing page) with minimal animation in the logos are fantastic for branding, but once someone has seen it there is no point in repeating it over and over. Repetitive movement can be similar to someone pacing back and forth in front of you while you are reading. A great example of simple flash animation can be found here at a glass and mirror company in Dallas where the flash animation ran once and that is it. It never happens again once the visitors dives deeper into the website.

Flash can serve it’s purpose if it is done right and serves its purpose. A good example of going above and beyond could be a website that promotes women’s lipstick products where the flash sequence shows how the product should be applies. Generally, anything that says “Enter Site” or  “Skip Intro” should probably not be there in the first place. It’s just another obstacle for the visitor to endure.  

Influencing search engines and Social Media channels are a key part of what we do for our clients, but once we get a visitor to your site it is up to you to entice them with a friendly and manageable website.

Chuck Bankoff is Director of Web Services for WSIeWorks, a full service Digital marketing firm in Orange County California.

Good website design is often a result of small eloquent touches, not necessarily an over the top, out of the box conceptual brainstorm (although I’m not opposed to a quirky approach to design for the right client).

I’m pretty demanding when it comes to the creative look and feel of our website designs, so we only hire the best and the brightest. Still, sometimes that creativity has to be harnessed.

The last thing I want to do is stifle the creative juices of my design staff, but at the end of the day we’re not filming an episode of “designers gone wild”, we aren’t designing websites for ourselves. Believe it or not, we aren’t even designing them for our clients. We’re designing websites for our clients’ clients.

Whenever we bring in a new designer to the team, I usually like to have a “philosophical orientation” to create the expectation of quality design standards. These are typically interactive sessions, but I thought you might like to see my outline:

Website Design Philosophy

I generally start with a list of attributes that I look for when evaluating my designer’s work:

1. Restrained use of soft shadows in the right place
2. Image Interaction
3. Color and shape balance
4. General composition
5. Appropriate design for the industry and the target market
6. Appropriate image selection (meaningful images with the right colors)
7. User friendly (and interesting) navigation
8. Easy to read text (appropriate font, size and spacing)

One surefire way to get the point across is to show actual examples as we explore the finer points of web design. The website we developed for CalPac online charter schools in California is a good example because my designer Adrian did a phenomenal job of tying in all the elements of good design into a package that showcases this online charter school while telling the compelling story to the students and parents of students.

Let’s take a closer look at some of the more subtle elements of design:

Soft Shadows: notice how the slight shadows around some of the basic shapes give them a 3-D feel as they seem to pull away for the page. The use of shadows is very common in web design, but I applaud Adrian’s restraint to not over use them…and in keeping the “spread” minimal so that there is just a subliminal hint of shadow instead of overstated “in your face” wide shadows. The watch-word here is “restraint”.

Image Wrapping: Actually the images don’t technically wrap around each other, but by placing one image on top of the other and allowing it to extend past the edge, it gives the appearance of wrapping behind the base image and enhancing that 3-D effect. Notice on the CalPac site how the navigation on the upper left, and the decorative ribbon on the lower right appear to wrap around the back. Clever and restrained use of image and shadow.

Color & Shape Balance: This is a little harder to explain. It’s also something that is difficult to teach.  It’s more something you have to feel… or sense. Everything on a page has what I call “visual weight”. Colors and shapes can draw your attention…not necessarily by themselves, but in conjunction with each other.

It is typically a good idea to stick with a primary pallet of colors and a secondary highlight color. In this case it’s various shades of blue and green while the photo selection brings in a variety of complimentary colors.  How colors and shapes interact? That’s the part you need to have a gut feeling for.

The other elements in my list are somewhat self explanatory, however there is one more bit of subtlety that I want to draw your attention to. That is the way Adrian treated the navigation. Hold your mouse over the navigation buttons on the Home page and any of the “Enroll Now” buttons. Notice how the colors gently reverse out, signifying that is the button you are interacting with at the moment. Did I mention small eloquent touches?

By the way, here is another article I wrote on my personal blog featuring Six Website Page Layout Tips you Absolutely need to Consider! That article focuses more on the layout aspect of a web page rather than the graphic design elements.

Kreative Webworks is a professional digital marketing agency in Orange County California since 1999.  Our website designers are always on top of their game, and throughout the year I will be showcasing and critiquing their work from our website development and digital marketing portfolio. Even if you don’t have the patience for my comments, you’ll probably enjoy our website designs.

Over the next few years mobile enabled websites will be as popular as, well… websites.

Currently about 1 in every 7 searches on the Internet are from a mobile device such as a Smartphone or iPad. By 2013 there will be more searches from mobile devices than from desktop devices. In fact 25% of Internet users around the world are “mobile only” right now, yet few websites are mobile enabled.

This is temporarily a huge advantage for mobile savvy businesses.

It’s temporary because over the next couple of years all serious businesses will be mobile enabled. What is now an advantage will become mandatory. So for now, why is there an advantage?

Search engines try to give the best user experience to their customers. Their customers are people like you and me who are searching for, well…whatever we are searching for. Search engines can detect the specific device the search is being conducted from, and are giving preference to mobile enabled websites over their non-mobile counterparts in the search results when searched from a mobile device.

The consumer of course is not going to dedicate much time to viewing miniature versions of full websites. They have no patience to make the text bigger and move it around the screen so they can read everything. They are not going to spend much time squinting at little buttons that are smaller than their fingertips as they try to zero in on them to navigate to the next page of tiny text and miniature graphics. 

Mobile consumers are looking for different information and a different experience than their desktop counterparts.

Just when you thought you got this website conversion thing just right, technology makes another adjustment to human behavior. Traditionally you want to lead your visitors down a “path” or a “sales funnel”. You want to control their experience, but make sure that any information that they may possible want is available on the site. This is true for mobile visitors as well, the difference is the information mobile searchers want is typically a lot less, and very specific.

Understand the mobile user may be on-the-go looking for directions, or knee deep in water looking for a plumber. Understand your customer, and give them EXACTLY what they are looking for... no more…no less.

The most sought after information mobile users look for? Company information, Destination information and Social Media.

OK, now that you understand why mobile website development is so important, and what consumers are looking for, you might want to look into creating a mobile friendly version of your company website. Depending on the complexity of the design and how basic the functions are (and they should be basic) you can generally have a custom mobile site retrofitted to your existing site for $500-$1000.