When the Web was younger, one needed to know a lot less to create a website. Many clients believed, and still do to some extent, that a Web design firm should do it all. One vendor, beginning to end, dealing with all the aspects of creating a website.

As website creation has matured, however, and end users and clients have become more savvy, they want more from their sites. Their websites need to look good, be well organized and do their tasks easily and efficiently. With the exponential growth of technological progress and new technologies developed for the Web, how is one firm supposed to keep up? This is where the specialist comes in.

Back in the dark ages, specialists were still used to fill various roles in the creation of a site, but it was all rather hush-hush. Now, as people and businesses are becoming more Web savvy, the realization that specialists are not only necessary, but in fact a good thing to have on a project, is coming to light.

As an analogy, let’s look at doctors. Most have the same fundamental knowledge background, but from there they branch off into specialty fields because, as a whole, there is too much medical knowledge for any one person to take on. If you injure your knee, would you want a general practitioner to take a shot at fixing it, or would you want a specialist who’s mended hundreds of knees before yours? I’d want a specialist.

Most people who design websites have the same fundamental understanding of how a site works, but these days, the creation of a highly functional and appealing website involves an abundance of specialized skills. Depending on the phase of the project, some of the specialties one might see are Requirements Gatherers (what does the site need to do?), Information Architects (you have content, but where should it live), Designers (make it appealing to the eye), Usability Experts (does a site do what a user expects and is it clear?), Developers (those that make it all work), Testers (does it really work?) and more.

So why shouldn’t someone looking for a website engage a series of specialists to create it? Sometimes it’s fear. With multiple specialists, you have more cooks in the kitchen and more chances to get burned, so it’s reasonable to worry about using multiple vendors. Working with multiple vendors means more communication, which can lead to confusion. Other times it’s a lack of understanding. Websites, even what seem to be simple ones, take a lot of work and skills to create, and a lot of people don’t grasp the complexities that are involved. With due diligence, one should be able to ferret out problems like this when interviewing firms. The most important thing is to keep clear and open channels of communication between all parties, during the entire life cycle of the project.

There are a number of other reasons why a client might have worries about using multiple specialists on a project. But, as the general populace becomes more educated about and comfortable with the Web, many of these reservations are disappearing. It’s becoming clearer every day that using multiple specialists for a Web project isn’t something to fear, but rather the most effective way to get the best website you can.

The Web is continually redefining the way people, business, and organizations access and distribute information. As companies are pushing for a stronger online presence, many print designers are being faced with the task of applying their print skills to the digital medium. After nearly a decade as a print designer, I decided to take the headlong plunge into the Web world myself and thought I’d share a few of my experiences and  “ah-ha” moments to help anyone considering a similar path.

When I first decided to make the switch, I was quickly overwhelmed and I was really not sure where to begin. In addition to feeling like I needed to learn what seemed like a million different coding languages, I unknowingly still had even more to learn about understanding the key differences between the media.

There was also a bit of an ego pill to swallow. It was humbling to watch our resident Web guru fly though code, correcting errors along the way in minutes or seconds, that had taken me hours to create, while going on about ‘box models’ and ‘style inheritance’ as he absentmindedly plowed through my creation. Huh? This humbling initial buy-in can be the make or break moment for a lot of people. It’s difficult to be in a position where after 10 years of professional experience, you feel like you’re back in your first year of school.

I’ll admit my first Web site was easily recognizable by most Web designers as a site that was done by a print designer. At first, I did not understand how they knew. I now know that print designers are notorious for designing “pretty” Web sites which load slowly, are not optimized for the search engines, don’t work on certain browser/operating system combination’s, and have numerous usability problems. The sites look nice, but they are often re-purposed print pieces that don’t take full advantage of the strengths of the Web.

To utilize the strengths of print and Web, it is important to grasp a few obvious (or not so obvious) differences between each medium.

• The Web is dynamic. Unlike print, the elements on a Web page can be interactive. Content, such as text, images, and form fields on a Web page can change in response to mouse or keyboard actions by using animations, mouse-over effects, pull down menus, etc. As obvious as this is to anyone that has used the Web, it is important to plan for these elements as you are designing a site. Also remember that just because you can do something does not always mean you should. The key to using interactive elements is not only knowing how to use them, but also knowing when to use them.

• A Web site is never “done.” This was another concept I had to wrap my head around. With a print piece, once it is printed it is done. You can’t change it unless you reprint it. With the speed at which the Web evolves it is necessary to continually plan for and adapt to change. A site plan you develop today may be significantly different than one you had a year ago, or even a few months ago.

• Lack of visual control. This was one of the hardest things for me to understand and embrace. When designing for print, the layout, fonts, line breaks, colors, page size, paper stock and every last detail was meticulously crafted to ensure that all the printed pieces looked exactly how I wanted. With a Web site, all of those constants become variables. Different screen sizes, browsers, operating systems, system fonts, and color and contrast settings, are just a few of the reasons why the same Web site could display differently on each user’s computer or mobile device.

Thinking back to my first Web site, to achieve the control that I wanted I thought it would be a good idea to do it all in Flash. Sure it gave me that print-like control, but in the end it was a bad idea for the overall purpose of the site. While Flash elements can be a great compliment to an HTML site, it’s usually not recommended that a site be entirely done in Flash for a variety of reasons, primarily Search Engine Optimization (SEO) purposes. That’s a whole different, larger discussion and you can read more here – so we’ll move on.

• Usability. Usability. Usability. Usability, not the design, often determines the success or failure of a Web site. While great content and a visually appealing design can give credibility to a site and its company or organization, ultimately that does not matter if the user can’t find what they are looking for. Create a site structure with a clear, self-explanatory navigation and interactive elements first, and then make it “pretty.”

At this point you may have that overwhelmed feeling I mentioned at the start of this article. Don’t worry; while there are certainly a lot of differences, there are also many similarities that can help make designing for the Web a little less intimidating.

• Good design is good design. The same fundamental design skills you have developed to effectively communicate a message through print can also be used to create a compelling and dynamic Web site. Good color use, balance, rhythm, negative space, typography, etc., are all still critical, there are just some different things to consider and rules to follow.

• Design process is similar. While the tools, file types, and delivery methods are different, the design process used to publish in print is very similar to the process of publishing for the Web. Just as you would never begin to design a print piece without knowing about the content, the size, the number of pages, or audience, you wouldn’t start designing a Web site unless you understood its purpose, structure, the kind of content, and the goals for what the site should accomplish.

• You don’t have to do it all. Just as there are various vendors for print, there are those for Web. Beyond the keystones of HTML and CSS, there are seemingly endless scripting languages, databases and other techno-jargon – enough to overwhelm anyone. But there’s no need to know how to do them, you just need to know what they are, and their capabilities – then find a specialist to create what you need. Understanding what is doable is more important than knowing how to do it.

As I carved out my own path for learning the Web, I determined I wanted to focus on the importance of usability, how Search Engine Optimization (SEO) works, and have a basic understanding on how to build Web sites using HTML and CSS using Web standards. I felt that this would be a great starting point and knowing these would help build a solid foundation for learning more complex aspects of the Web. I was lucky enough to have a very knowledgeable and patient co-worker that was there to answer any of my questions along the way, but barring that resource, here’s a few to help get you started.

Resources:

HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

By Christopher Murphy and Nicklas Persson

This book will teach you step-by-step how to build hand-crafted Web pages using XHTML and CSS. You will also learn about the history and evolution of Web standards and why they are important. A must-read for any beginner.

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2^nd Edition

By Steve Krug

The title of this book says it all. It’s a very quick read and gives a lot of common sense advice on creating usable designs for the Web.

Firebug

Firebug is a free plug-in that integrates with Firefox. It has numerous capabilities, but it is also a great learning tool as it allows the user to edit CSS, HTML, and JavaScript live on any Web page and immediately see the effects.

Lynda.com

Lynda.com is a subscription-based, online educational and training resource with a suite of step-by-step lessons on a wide variety of topics – from best practices for Photoshop for the Web, to nitty gritty code lessons. Most lessons are supplied with well-constructed example files, which is a great bonus.

The Need for Web Standards
To fully understand why Web standards were created in the first place, we’ll take a quick flashback to the nineties when the Internet and the Web became more mainstream. Early Web browsers did not support CSS (Cascading Style Sheets) well enough for developers to be able to use it to control the presentation of an HTML document.

This lack of CSS support, combined with the need to write browser-specific code, led to the abuse of HTML in any way possible to control the visual presentation of a web page. The only way to ensure proper display across all browsers was to write custom code targeting each individual browser and operating system, often doubling or even tripling the workload.

This inefficient and costly process led the way for standardizing the approach to Web development, and in 1998, the Web Standards Project (WaSP) was born. WaSP’s mission was (and still is) to gain support for the Web standards recommended by the World Wide Web Consortium (W3C).

What are Web Standards?
Most people have different views on what standards are and they are often characterized as being useful only to the blind or disabled. While accessibility for all users is an important part of the standards rationale, it is just one of the many aspects of a standards-based site. When a Web site is described as complying with Web standards, it usually means that it has valid or nearly valid HTML or XHTML, it uses CSS instead of tables for layout, and is properly structured and semantically marked up.

If you are a Web professional you probably understand all that geek talk. However, if you are not, and you have no idea what I just wrote, don’t worry. The important thing to take away from this article is the understanding of the short- and long-term benefits to your Web site by adhering to these standards.

The benefits of using Web Standards
• Cut costs: As browser vendors continue to embrace these standards, the need to write browser-specific markup has diminished, thus reducing the costs of development. A well-structured site is also much quicker to maintain and update.

• Improve your searchability: Standards-based sites are better optimized for search engines, such as Google, leading to better positions in search results.

• Avoid the “build, break, re-build” cycle: In the past, when a new browser was released, the site that you painstakingly built would have to be rebuilt to work properly. Standards-based sites ensure forward compatibility with new browser releases.

• Reduced bandwidth usage: The bandwidth needed for a standards-based page is significantly less, which results in faster loading times for visitors.

• Increased accessibility: When content is separated from presentation, screen readers and alternative browsing devices can better interpret the content.

• Simpler adaptation: A semantically marked up document can be easily adapted to print, mobile phones, and other handheld devices.

• Good publicity: Producing a standards-compliant site is increasingly becoming the benchmark of good development.

In a nutshell, using Web standards saves time and money while providing a better experience for visitors. Using Web standards and separating content from presentation brings a host of benefits for today and tomorrow. For more information and the most recent updates on these standards, visit Web Standards Project (WaSP) or the World Wide Web Consortium (W3C).

Links
There are three kinds of links we’ll discuss; inbound, outbound, and internal. When it comes to links, inbound links, or backlinks, are the most important since they are somewhat of a measure of the popularity of your site.

An inbound link is a link to your site from another site. In Googles own words: “The best way to ensure Google finds your site, is for your pages to be linked from lots of pages on other sites. Google’s robots jump from page to page on the Web via hyperlinks, so the more sites that link to you, the more likely it is that we’ll find you quickly.” Of course it can be difficult if not impossible for others to link to your content with any regularity or reliability.

Outbound links are links that start from your site and lead to another. It’s important to know that the quality of the sites you link to reflects on your site. If you link out to spamy or suspect sites, then that reflects negativly on your site and will lower your search position or even black-listed.

Internal links are links from one page to another page within the same Web site. These are another important part of your SEO plan for your site, as they will help ensure that a larger portion of your site is indexed. The search engine spiders arrive on your home page and then will start to work their way down the chain through links you have. If there are internal links, the spider will continue to mine information from the various sections of your site. So, the more robust an internal link schema you have, the bigger imprint on the search results you have the potential to make.

Metatags
Meta elements are HTML or XHTML elements used to provide information about a given Web page and are not obvious to a user visiting the site. Metatags are not nearly as important now as they were in years past. Originally, the meta tags where how search engines determined a page or sites relevance, but people began to use them for keyword stuffing and spamdexing. As a result, the search engines turned to looking at the actaul content of a page instead of realying on the meta tags so much. While they are not as important as they once were, they are still part of the SEO equation. There’s no guarantee that using meta elements in your Web pages will greatly improve your rankings, it’s still worthwhile to include them.

There are several meta attributes, but the two I wanted to mention are the meta description and the meta keywords. Below is the html code:
The keywords attribute: While most search engines give little, or no value to this meta element, its still worth the time to help emphasize your target keywords.

The description attribute: Unlike the keyword attribute, most major search engines support the description attribute. Many search engines, including Google, index and use the text within the element as the description text for display in search results.

Content
As we have mentioned in our previous posts, regular, relevant, and unique content is critical, not only to your readers, but to Search engines as well. The more frequently a site is updated the higher the probability search engine spiders will revisit the site sooner. For many sites this can be a challenge, but just having a news section on your site that is updated regularly is an easy place to start. Another way to get regularly updated is through RSS feeds.

Static URL vs. Dynamic URL
As mentioned in our Keyword placement article, the page URL is an effective place to use keywords. But in order to use them the URL needs to be “friendly.”

This is where it is important to understand the difference between static and dynamic URLs. A dynamic URL is created automatically by some script or with the help of the database and typically use characters like: ? = &. A dynamic URL may look like this: website.com/design.php?category=5&product=42.

On the other hand, a static URL is one that does not change and may look something like this website.com/design/portfolio.html. Although dynamic URLs can be crawled and indexed by search engines, static URLs are known to have a slight advantage for a number of reasons:

1. Static URLs typically rank better in search engines.
2. Search engines are known to index the content of dynamic pages much more slowly than that of static pages.
3. Static URLs look “friendlier” to end-users.

Google and other seach engines are making progress in determining which parameters can be removed from dynamic URLs, so if you currently have a site that generates dynamic URLs do not panic. Eliminating some of the parameters to make it look static would be a very time consuming effort and could cause more harm than good.

As you have probably gathered from reading this series of SEO articles, when it comes to optimizing your Web site for search engines, there is no one single, magic solution. It takes strategy, time, and patience to achieve high rankings. But once your process is in place, it’s really quite painless and as you can see from the examples we’ve shown, it can pay off significantly in a short amount of time.

There are several places where keywords and phrases are used most effectively to optimize any Web page. We’ll take a brief look at four of the most important elements, including title tags, header tags, content, and the page URL.

Title Tag
A title tag is what appears at the very top of a Web browser window, not to be mistaken for a header tag. This is arguably the most important on-page factor for search engine optimization. Whatever is written inside the <title> tag is the clickable link on the Search Engine Results Page (SERP). The title tag is also among the first set of words a search engine spider encounters when determining the type of content on the site. This may be one of the quickest and easiest ways to generate immediate and noticeable differences in your search engine rankings.

If you are working within the HTML code the TITLE tag will look like this: <title>Title of the document</title>. Most CMS systems automatically generate an appropriate title tag and an SEO friendly URL based on the content on the page.

Header Tags (<H1>, <H2>, etc.)
Placing your keywords within the headers is another critical place that carries a lot of importance.

If you are unfamiliar with HTML code, H1 indicates the most important heading on a page; usually it’s the topmost heading also. For example, the H1 heading of this post is “Keyword Placement for SEO.” More weight is given to keywords that appear within H1 tags, H2 tags get less, and so on down the chain.

Content
As you might expect, the search engines also scan your content for keywords. While the keywords in your body copy don’t have as much weight on their own as your title or headers – they do have an effect. Though keywords in your content don’t carry much weight individually in the search ranking, the search engines have very complex systems that increase your page rank even more when keywords in the various page elements match up.

Page URL
Your page URL is also part of this whole system. Ideally, the file name for the page will match up to your TITLE tag and H1 tag, along with some of the body copy. For example we can see our title, H1 and file name for this page working in concert.

Besides the basic placement of your keywords in those four page elements, there are a number of Dos and Don’ts that will help maximize your SEO return.

Do:
Optimize every page – Just like the cumulative effect of keywords in various elements on a single page, properly optimized pages across your site will improve its standings with the search engines.

Use accurate keywords for content – Write content that accurately reflects what is on your pages and keyword density will happen naturally.

Use synergy – If you use keywords properly in all your page elements, your search rank becomes greater than the sum of its parts – that concept is at the crux of SEO.

Keep the content flowing – Regular updates to your site content will result in more frequent visits from the search engine spiders.

Don’t:
Keyword stuff – Stuffing refers to a number of methods where one crams a page with all manner of keywords in an attempt to improve search position. In the SEO process of incorporating keywords into a page and a site, it is extremely important to remember that keywords can be overused and become detrimental to search engine ranking. Use keywords only as they are truly relevant to the subject matter and in a manner that makes sense to the average user.

Be scattered – Page elements, especially title header and body copy that seem unrelated will result in penalties from the search engines. Also no one will click on a link in Google if it is a collection of unrelated words.

Of course, this isn’t a comprehensive guide to all the elements of SEO, but we hope it will help those who are new to SEO get started on this simple but very powerful practice.

Related articles in Align:
• What is SEO
• How to Pick Keywords for SEO

At first you may think choosing a couple keywords to describe your site should be pretty easy, right? Well, yes and no. There are several factors to consider when selecting the most effective keywords for your site. To begin, it is important to understand that the most effective SEO strategy involves optimizing every page and not just your home page. When selecting keywords you can always start with more general keywords for your top-level pages and then be more specific on secondary pages. Optimizing every page is critical since they all generate traffic to your site.

When selecting keywords, you not only want to pick words that describe your content, you also want to think about words that would be used to describe your site. The Web is so densely populated with content that it is nearly impossible to obtain a top rating for a one-word search string, therefore optimizing your site using keywords, as well as specific key phrases is a much more effective approach.

Most searches are three words or more and when people search for answers, they often phrase their search terms as questions. Therefore, when thinking about your keywords and phrases think like your audience or potential customer and ask yourself “what search phrases will people most likely use to look for the content on this site?” or “what questions does this site answer?”

As we were selecting keywords for our own SEO strategy, our research made it apparent that it would not be wise to focus our keyword strategy on a broad subject like “graphic design” since the chances of users finding our site amongst over 65 million search results are slim. Instead, we used other, less competitive phrases that are most likely to be used by people trying to find us. Pairing “graphic design” with more specific phrases such as “association magazine redesign” significantly narrows down the search results and also provides a more accurate description of the services we provide.

If you are not sure where to start, or you to want refine your selected keywords and phrases, there are several helpful online resources to help, such as Google’s Keyword Tool. This tool lets you enter the URL of your Web site, or of any site related to your business, and suggests a list of relevant keywords based on the site’s content. It also shows statistics of the search popularity as well as the level of competition for the various keywords. Online tools like this are a great help, and I certainly recommend using them, but ultimately your own understanding of your pages and your audience should be the basis for determining your SEO strategy.

After you have brainstormed, researched, and selected your keywords, it’s time to incorporate them into your site. In the next post, we’ll look at how and where to use them, including placement within the title tags, header tags, URLs, and body copy.

Related articles in Align:
• What is SEO
• Keyword Placement for SEO

This is the first in a series of posts about SEO. Many of you reading this have probably at least heard of the term SEO. So what exactly is it? Is it just marketing a buzzword, or is it a worthwhile investment? In this post we’ll begin by briefly explaining what SEO is, and give a basic explanation on how it works. In the following posts, we’ll take a more in-depth look at how to implement a few SEO techniques.

SEO, which is an acronym for Search Engine Optimization, is the process of improving the placement or rank of a Web site in organic search results – not the ads. Typically, the higher the rank in search results, the more referral traffic you will gain from search engines.

It is important to understand what we mean when we say organic search results. The organic listings are the main listings you see when doing a search, while the paid links, or ads, typically run at the top or the side of your browser window. Not only are organic search results free, research has shown that consumer preference is placed on the organic search results rather than the paid links as people feel they carry a greater level of trust and authority. This is just another reason why SEO is critical to any online marketing strategy.

Search engines such as Google, Yahoo, and MSN drive the majority of Internet traffic, and to better explain how SEO works it is important to understand how these search engines interpret the information on a Web site. Most search engines use computer programs, commonly called “spiders,” to search and analyze content on the Web. The information gathered by these spiders is crosschecked for validity, indexed, and stored in a database. The search engines use this information to determine the most relevant results for each search request.

Essentially, SEO is an of understanding how the search engines work combined with the knowledge of what users might search for when looking for your site. We’ll look at a few SEO techniques and go into more detail in our next posts, including optimizing the text, title and meta tags, images, link building and some do’s and don’ts when it comes to SEO.

In the meantime, if you would like to continue the SEO discussion or you would like feedback on another topic, feel free to join our LinkedIn group.

Related articles in Align:
• How to Pick Keywords for SEO
• Keyword Placement for SEO

There are several benefits to using Delicious. If you use computers in multiple locations, say one at home and one at work, Delicious can store all your bookmarks in one place. Delicious users can conveniently access their entire bookmark collection through any Web browser on any computer. New users can import and tag their existing browser bookmarks, and at any time you have the option to export your stored bookmarks for safe-keeping, or to transfer them back into a browser.

Another key benefit of using Delicious is that all the bookmarks are taggable, meaning users can add keywords of their choice instead of choosing one folder in which to store a bookmark. These tags are then searchable within your own personal list, as well as the entire Delicious community. For example, say I wanted to look up bookmarks that were tagged with the word “airfare.” Not only can I search my own list of bookmarks with that tag, I can also search all user bookmarks that have used a similar tag.

So you may be saying, “why not just search those keywords in Google?” The key difference here, which has helped lead to its success, is that Delicious’ content and search results are based on user-generated URLs and tags and are not based on Google optimized sites. The happy side-effect of this collection of links is that it has become a valuable resource to see what is popular and trendy based on how people value information. For example, if 1,000 people save and tag the same bookmark, that’s a good sign that they find value in it.

So whether you want to tag and store your bookmarks, add value to a blog, or you prefer to casually search through the most recent or popular links, Delicious offers value for users on several levels. The interface is elegantly simple, it’s quick and easy to sign up and get started, and oh yeah did I mention, it’s free?

Check out the most recent Bates Creative Group Delicious bookmarks here.