In this episode of Oturia.TV, we go over the three major approaches to mobile design and how to decide which one is best for the different types of businesses you might be designing for.

Today, the commercial and free fonts available to graphic designers number in the hundreds of thousands. While this rapid development has given us almost unlimited combinations for font pairings, the ability to implement most of these fonts into our designs has been limited to print mediums.

In website design, the typography we use is limited by the fonts installed on the devices accessing our designs.

While there are a number of options available for including custom fonts in your designs, understanding which fonts can be used and how they will be implemented is crucial in making sure your client’s design turns out as you had planned.

As web developers, it’s important that we do everything in our power to accurately reproduce the original designs that our clients have approved.

Now, you’re going to occasionally run into things that require modifications to the original designs, that’s unavoidable. However, when it comes to the fonts that you’re using in your mockups, there should be almost no reason we’re showing clients designs that have different typography than what the end product will have.

The key to making sure we’re designing mockups to look like the final website will look like is to have a good understanding of what fonts we can use, what types of styles we can apply to them and what technologies we can use to embed them on a website.

Legalities

The first and possibly most important thing to understand is that not all fonts are even legal to embed on a website. This is especially true with commercial fonts.

While you should always check the license of the fonts you’re using to be sure, three fairly large font providers that prohibit the free use of their fonts on the web are Adobe, Monotype and Linotype.

Most of the fonts available from those providers have paid, web font versions, but the license is usually only good for a single website.

Using them is going to drive up the cost of the design and may be difficult to justify to a customer when you could easily find a similar font that is free to use on the web.

Style:

Another important thing to remember when creating your mockup is that not all of the styling options you can use in design programs like Photoshop or Illustrator are things that can be translated onto the web.

Most of the styles like drop shadows, stroke, and pattern overlay, as well as anti-aliasing methods such as “crisp” and “strong” don’t have any way to be implemented using non-Flash web development techniques.

When styling your fonts in a design program, be sure to steer clear of styling methods that can’t be used on a website unless the text is going to be a part of an image rather than implemented as actual text on the site.

Methods for Implementing Web Fonts

The three most common methods we use to implement fonts on a website include a degrading font stack, a JavaScript program called “Cufon”, and a newer, more flexible font-replacement technology called “@font-face”.

Degrading Font Stack:

A degrading font stack is nothing more than declaring a series of fonts starting with the one you want to use in your design, and then listing out other, more common fonts to act as a fallback in the instance that the user’s device doesn’t have your font of choice.

For example, a common font-stack used for Helvetica looks a little like this:

font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

As you can see, the most desired font starts at the front of the font stack. Since Helvetica Neue Light is not installed on that many devices, the font stack slowly starts to degrade to “the next best thing”, ending ultimately with the least desirable, yet highly prominent web-safe font families.

Cufon Font Replacement:

Cufon is an interesting little program that takes a font and maps it out into a script. It then takes that script and replaces text on your website each time a page is loaded.

It sets the height of the actual text to zero, making it invisible to users. Then, taking into consideration your font styles, it replaces each word with an image that looks exactly like the font.

Now, I’m particularly a fan of this method because it’s easy to use and looks really, really good. Because the text is rendering as an image, it displays much smoother and more vibrant than many devices display text.

There are some downsides, though. First off, it does contribute to page load times, which are critical to the user experience. It also can really only handle small batches of text. I prefer using them for navigation menus or headers, since there’s usually a minimal amount of text being replaced in those areas.

Another thing that can be a problem with Cufon is really just a problem with the fonts themselves. Cufon can’t manufacture a glyph for a font family. If the font file doesn’t have the glyph, it can’t display it.

While most fonts are going to have a majority of the glyphs you might need, I’ve seen some that don’t even have basic glyphs such as hyphens or other forms of punctuation.

In the end, I would definitely recommend using Cufon for font replacement if we’re going to be using it for Navigation Menus or Page Titles on the site.

@font-face:

When it comes to implementing a site-wide font that’s going to be used in a majority of the content area, I would recommend @font-face. This technology is a reliable method for mass font replacement, but it’s also limited to use in more modern browsers.

@font-face has a minimal impact on page load times if you’re not using too many different fonts, and it’s also able to emulate almost all of the CSS styles that you would use on regular text.

When we implement @font-face typography, we also use them as a part of a degrading font stack so you get the benefits of displaying the exact font you want on modern browsers, and slowly degrading to other fonts depending on what’s installed on the device with older browsers viewing the site.

As far as the downsides of @font-face are concerned, it can really be difficult to judge the quality of the font-replacement until you’ve actually tested it on a site. Different browsers render these fonts differently, and some fonts look great at certain sizes but very rough at others.

You can’t really use your design program to determine what these special fonts are going to look like at different sizes, so the only way to be sure if a font is going to look good is to test it out on a webpage.

There are several free tools out there to help you do this, but we also offer this for free. If you’ve found a free, indie font you really like but aren’t sure what it’s going to look like rendered on the web, we can set up some tests for you to give you an idea of what it’s going to render like.

Conclusion:

With careful planning, you can implement truly amazing typography in your clients’ designs. Just be sure to always check your fonts’ licenses, avoid showing clients mockups with styled fonts and plan ahead for how you would like your fonts to display on the various devices that won’t be capable of displaying your custom fonts.

Hello, ladies and gentlemen. Today we’re going to be talking about helping your clients choose a good domain name for their new website.

Now, there are lots of resources out there for selecting a good domain name, but most of our clients (both graphic designers and agencies) are serving local businesses with a fixed geographic area they’re targeting. So today’s episode is going to cover domain name selection for these types of customers, local businesses.

First- Choose Your Company Name

This is always the best option. However, due to the fact that there are no standards for registering non-trademarked business names from state to state, there can sometimes be several other companies operating with the same business name. Here are some examples of ideal domain names, using our own company as an example:

• www.Oturia.com – This domain name is ideal, as it is short, and not easily confused with another domain name. But let’s pretend that there is a hot dog company in New York by the same name, and they’ve already registered this domain. Our next best option would be…
• www.OturiaDesign.com – This domain name is still short and memorable, and also helps a little to explain what it is that we do. Another option might be…
• www.OturiaWebDesign.com – This is borderline on length, and would probably be our last attempt at registering our company name.

Next-Choose Your Business Type & Location

This is our second choice for a domain name, but not because it’s any lesser in quality. In fact, for some businesses, this might be a better option.

Some examples of this type of domain format would be:

• www.SpringfieldDentist.com – The key to this type of combination is length and complexity. If your city name is too long, or sometimes mistyped because of its awkward spelling, don’t use it.
• www.MichiganBeverage.com – If your business is something with statewide appeal, it might be okay to use the state name. Be reasonable when deciding on whether or not your business truly serves a statewide audience. Being a popular video rental store with dreams of dominating the state’s new release market is not an ideal candidate for the use of a state name in your domain.

Last – Choose Your Business Name & Location

This is our last choice for domain names for local businesses. This is still a really great option, especially if your city has a commonly used abbreviation (i.e. KC for Kansas City). If you do this, try to put your abbreviations at the very beginning or end of the domain name. Here are a few examples of this type of setup:

• www.OturiaIndy.com – This is a great alternative to securing a domain name with your company name it.
• www.OturiaofIndy.com – This also might work if your business name isn’t too generic (like Mike’s).

Do’s & Don’t of Domain Name Selection

The above ideas should be flexible enough to get you a great domain name that’s easy to promote. Here are some guidelines for local businesses when searching for a domain name.

• Only Choose Dot Com Domains – Unless you are a non-profit looking for a .org domain name, stay away from EVERYTHING else. A lot of people will argue with this, but you’ll thank yourself later for sticking to your guns. It’s okay to own the .net version of a domain name, but all of your main traffic should be driven towards the .com version of your domain name.
• Don’t Abbreviate Inner Parts of Your Domain – This is just plain confusing and very difficult to promote. If your company name is too long, don’t try to squeeze it in by adding only the first letter certain words. (i.e. Oturia Travel & Hospitality Center as www.OturiaTHCenter.com).
• Don’t Put LLC In Your Domain – While Inc., Corp. and several other business titles are usually acceptable, stay away from using your limited liability status in the domain name. Even though they are a completely legal and reputable form of business, people don’t tend to view them as such.
• Keep Your Domain As Short As Possible – There are very few 1 word domain names left, and not many more 2 word domains. People are getting more accustomed to seeing and typing longer domains, but you still want to try to keep it to 3 or fewer words whenever possible.
• Don’t Use Hyphens or Numbers In Your Domain – This is one of the easiest ways to lose traffic to another website, or make marketing your site too difficult.
• Don’t Steal, Infringe or Try to Copy – Aside from the overall lack of ethical behavior behind trying to copy someone else or piggyback off of someone else’s brand recognition, it can get you in a lot of trouble or cost you your domain name later down the road. If you’re not sure about whether or not someone has a trademark on the domain you want to use, check the online US Online Trademark Database.

Selecting a domain name is an important first step to getting your client’s new website ready to go love. If you have questions about the best domain name for your business, please feel free to leave us a comment below.

Hello, ladies and gentlemen. Today we’re going to discuss having conversations with your clients about a topic almost guaranteed to come up during the web design process: search engine optimization.

Now, we’re not going to be covering the intricacies involved in actually implementing a good SEO program, as we’ll be covering that in other episodes. Today we’re going to be talking about having a conversation with your clients about SEO so that they have a better understanding of how it actually works.

Today, we’ll be talking about the two types of customers that want SEO services included in their web design, dispelling common myths your clients might have heard about SEO, and setting good expectations with your clients about how SEO will impact their sites rankings.

Typically, your clients are going to fall into one of two categories in regards to their knowledge of SEO. The first are those that have fallen prey to a lot of the myths and misconceptions about how SEO works, and often want to try a lot of time-wasting (and sometimes anti-productive) techniques that aren’t likely to help their rankings.

The second category are those that know very little at all about SEO, but want to know how you can “make them show up at the top when someone searches”. This group of clients aren’t usually geared up to implement a lot of bad practices, which is good, but they do tend to underestimate the complexity of SEO and how long it takes to really have an impact on their site.

Very rarely will you have clients who both understand what is involved in a good SEO program and have reasonable expectations of how it will benefit them. That being said, today we’re going to talk about discussing SEO with the former two groups of clients.

Clients Who Have Misconceptions About How SEO Works

This is often the more difficult of the two groups. These clients have some basic understanding of how search engines work, and sometimes have absorbed a lot of bad info on the topic.

Some of the most common things you hear from this group include:

Keyword stuffing. This is when someone believes that they need to include a bunch of single keywords in their meta keyword section, or more likely stuffed at the bottom of the site in obscure text. They may suggest the keywords be hidden (hint: big no-no) or believe that they need to stuff them in their page titles or content area.

Location stuffing. Sometimes a client may serve a specific geographic area, such as Indianapolis. They may believe they need to list out all of the surrounding cities and suburbs to rank well for them.

While there is some merit to both of the above concerns, the reality is that if SEO were that simple, everyone would rank #1.

SEO involves about 50% of the things you do on your site ( e.g. use of longtail keywords, good site structure) and 50% things you do on other websites (e.g. work to build back links to your site).

Search engines like Google are looking for a natural writing style and, believe it or not, are often prone to penalizing sites who stuff too many keywords into their content. With a good SEO program in place, Google will likely know where you are geographically, and will serve your content up to local searchers if you’re following best practices for writing content.

Search engines are constantly grading your site with over 200 criteria, some so complex your clients may never understand. Some of the consistent things Google looks for is natural writing style, lots of thematic content, relevancy in your site with specific searches and links pointing to your site from other websites. The harder you’re working at “SEOing” your content, the more likely search engines are going to pick up on the fact that you’re providing a less than quality experience to their customers, which are the searchers.

There are no magic SEO beans, there can’t be. If there were, then the model would be broken and search engines would be filled with crappy sites ranking for every semi-profitable keyword. Its about quality content, and if your client suggests such tactics, just ask them how they feel that impacts the quality of their content. Does someone want to have every page stuffed with keywords that take away from the content, or do they want to be able to read naturally written content about the products or services your client offers?

Clients that Don’t Understand SEO at All

This type of client knows that it’s important to rank well for their primary keywords, but they often don’t understand some of the more important concepts about how searching works and how search engines deliver their results.

The first thing that’s important for them to understand is what people are actually searching for. For example, no one goes to Google and types in “dentist”. What people are actually searching for are things like “pediatric dentist”, “emergency dentist” and “cosmetic dentist”.

Often times these are only the first search phrases people try. People are likely to search 2-3 different phrases before being happy with the results, and might end up looking for very specific things like “pediatric dentist Birmingham”.

Targeting the right search phrases is important when trying to optimize your site for the search engines.

The second thing that this type of customer tends to not understand is the competitive nature of search engine rankings. For instance, you might be one of only two dentists in your whole town. So, logically, ranking well should be a piece of cake. However, you’re still dealing with millions of other sites about dentistry, aggregator sites that contain directories of local dentists, and informational sites like Wikipedia.

Being in a larger market makes things much more difficult. If you were one of 30 dentists in a city, a basic do-it-yourself SEO program is not likely to ever be enough. In instances like this, it’s definitely important to be upfront with your client about their need to seek specialized SEO services, preferably from a local company that understands the market and region that they’re serving.

The last thing that this type of customer will tend to struggle with is how long it will take for them to see improvements in their rankings. This part is especially true of new sites.

For an existing website that’s just undergoing a redesign, it will be easier for you improvements to be detected and graded by Google. In fact, you may see immediate improvements in your rankings within 1-4 weeks.

For brand-new sites, however, it can take some time to rank well for competitive search phrases due to a number of filters in Google’s algorithm that targets newly registered and launched websites. These filters, while meant to prevent web spam, can often leave your clients in a position where they may not rank competitively for anywhere between 6 months to a year.

In the end, it’s important to relay to them that improving rankings takes time, and that patience is going to be their best bet when waiting for search engines to index their content and rank it against the other results that display for their keyword phrases.

Conclusion

There are a lot of things you can do to help your site’s rankings, but none of them are tricks or shortcuts. When you’re talking with your clients about SEO, be sure to explain that to them, and explain that the most important things for them to be focusing on with you are creating a beautiful, easy to navigate site and writing compelling, thematic content for their website and the search engines will reward you for it.