Alta Vista Business Services Blog

When you hire a Web designer, how do you know they are going to optimize your site for Search Engine Optimization (SEO)? Sure, you can ask, "Do you optimize for SEO?" And they'll say, "Oh yes! Of course we do!" But how do you know they're going to do it, that they know how, if they know the latest SEO methods? What are the questions you should ask to be sure?

Below is a basic description of how SEO works. Ask your designer to explain to you what they're going to do for ORGANIC search results in search engines, such as Google and Yahoo. Get their description in writing, cross-check it against this description and see how close they come. If your Web Designer doesn't follow these general guidelines, find someone who does. There's more of course, such as how many keywords are optimal, proper alt tags for images, etc. but the following is just a guide for you to know if they know what they're doing.

SEO starts with choosing your target market, and the keywords your target would use in a search engine to find your products or services, a set of keywords for each page. After selecting those keywords, they must be built into the actual page name, which is the link, a.k.a URL, that shows up in the address bar, which matches closely to the Page Title (encoded on the back in the 'Title' tag), and also matches the properly tagged first header 'H1' on the page (The H1 is should be clearly visible at the top of the page contents as a heading to anyone looking at your page). And then further, the content of the page must contain, multiple times, the chosen keywords. They should be in sentences, detailed descriptions, and/or bullet points, and in various formats on your page. These keywords are then placed in a meta tag on the back side called “keywords.” If any of these items do not match one another, or are missing, then search engines will either lower the grade, or simply not index them.

So hopefully this explains how a Web site is built from the beginning with search optimization in mind. SEO should not be an afterthought. Whomever you choose to work on your project, they should work closely with you to make sure to get the right content, keywords, tags, headers, etc. so when searchers enter those terms, your site will be found in the search results for your target market.

Recently, I discovered a template that referred to the term "cufon." in the css and Javascript and was both mystified and intrigued. I did a definition search on Google and found nothing. A query to the linkedin.com group CSS Linked, to which I belong, and the answer was soon presented. In short, it is way to use Javascript to embed custom fonts in Web pages so you don't have to render text to images. I have to thank my fellow CSS Linked member, David Shuford, for providing the definition. David is an Independent Internet Professional in Boston area.

I read a while ago that the ability to expand your font options beyond the ridiculously limited Web-system font options was on the horizon. Well here it is. There are few terms that clearly define this process, but it is more commonly becoming known as "Cufon"-- or more correctly "Cufón."

References describing how this actually works, are pretty technical and acronym ridden. In an attempt to break it down in its simplist form, below are specific references to the documentation and process for use.

According to Github developer Simo Kinnunen (a.k.a. Sorccu) (https://github.com/sorccu/cufon/wiki/About), due to the complexity of achieving embedded fonts on Web pages, a generator is recommended and a Javascript must be rendered. Through Github.com, Sorccu not only provides the generator, but allows users to use the form and offers troubleshooting guidelines.

Another source for generating the appropriate code is http://typeface.neocracy.org/ which, ironically uses text rendered as images for headings.

CSS and Javascript

It is the Javascript that does the embedding, but using CSS to render the font stylishly that makes all this so appealing from a designer's perspective. The time it saves to allow the CSS to do the work across the site, rather than tediously create type and apply styles and save them as images saves time (I know, understatement!). Plus it looks amazing, professional, and consistent.

Things to be aware of

Not all fonts are free.

Font foundries are making more and more Web fonts available-- which is very cool, but like any other resource, if you don't own it, you have to make sure you get permission to use it. You can purchase fonts for the Web and pay as little as $10 for the right to use on Web sites. Myfonts.com has over 9000 Web fonts from which to choose.

Supporting Browsers.

Not every browser supports Webfonts. But here is a list of browsers that do: Firefox 3.5+, IE 5+, Opera 10+, Chrome 4+, Safari 3.1+, iOS Mobile Safari, Andriod 2.2+ and BlackBerry OS 6.

This is just the tip of the proverbial iceburg. I would love feedback on this topic from seasoned designers. Please use the comment form below.

There's something about designing for the Web that irritates me. You may have noticed, many Websites have HUGE headers. I'm the first to admit, I've created many a site with chunky headers. We've all heard the rule Form Follows Function. And I totally agree with that! Yet we (the design community) continue to design sites that might look smashing because they have huge, graphic headers, but the main content of each page is at and below the fold, which forces users to scroll down to read content. How functional is that?! Call me lazy, but I really don't like to scroll. Do I have to assume it is just a necessary evil and everyone just has to deal with it? Can we rethink this dilemma? As designers and content developers, I know we can do better.

The fact of the matter is it is really difficult to design for a horizontal layout. Maybe for a few reasons. Maybe we have looked at and designed for vertical pages on paper so long, that we can't get our heads around the horizontal screen we are now designing for. Now don't get me wrong, I don't think we need to be scrolling horizontally either. I'm talking about limiting the size of the header, and keeping content in smaller chunks to minimize scrolling. Is it better to click or to scroll?

I have noticed that sites developed in Flash tend to keep things in screen-size chunks. This is probably more difficult to achieve because it requires more links, and more condensed, less verbose content. In spite of all that, this might be the way to go for the future of more usable sites. I, for one, am going to attempt to develop HTML/CSS sites that follow this same rule. (I know... wish me luck!)

I would love some commentary from other designers on this subject.  Do you think it is important? Do you think we tend to over-design sites? Is it time to start thinking of better ways to use the screen space? If you have already achieved this, I'd love to see some examples. Please tell me your experiences and thoughts on this issue.