Internet Explorer was the first browser to support @font-face, going all the way back to IE4. They still support it the same way they did then: Using a proprietary format called EOT, or Embedded Open Type. EOTs font have restrictions in place in order to try to solve the licensing problem, for example EOT files can be tied to a particular domain so that other sites cannot hotlink to your font files, or download them for their own use. They also have support for font subsetting, or including only the characters that you need in your page. This can drastically reduce file size, which is always important when designing anything that needs to be downloaded over the internet. EOT files are a solution to the licensing problem, but some people do not like the fact that they contain a form of DRM. There have been efforts to create a specific web font format that all browsers would support, and would solve the licensing problem, but like any new web standard, these initiatives would probably take a long time to be finalized and implemented in all browsers. Rather than waiting until then, you can actually use @font-face today with a bit of work. Below is a list of the font formats supported by various web browsers.

Step One: Obtain Your Font

Because of licensing concerns, you cannot simply embed any font on your website. Your best bet is to get a free font. There are lots of great free fonts out there, and lots of sites have lists of free fonts that you can use with @font-face. The site I like for getting free fonts is fontex.org . They have all kinds of fonts, and it is pretty likely that you’ll find one that suits your design there.

Free Google web fonts 

Step Two: Convert Your Font

Because of the diversity of formats supported by the popular browsers, you’ll need to create at least three font files in order to get support cross browser. First you need a TTF or OTF font for Firefox 3.5 and Safari. Fortunately, most of the free fonts that you will come across will be in one of these formats. Second you will need an EOT file for Internet Explorer. Microsoft has a tool called WEFT  that can be used to create EOT files, but it was created in Windows 98 days, and has an awful user interface, and may not even run on your computer. Luckily, a hacker has reverse engineered the EOT font format, and published a command line tool called ttf2eot . Now don’t fret about having to use the command line, because you don’t have to. There are a few online tools that have created graphical user interfaces for ttf2eot. The one that I’ve found works the best, is the Font Squirrel @font-face Kit Generator . As it’s name implies, it is a tool created specifically for creating fonts for @font-face, and it can generate a number of formats including EOT. All you need to do, is upload your font file to their service, select your output formats and hit download. A folder with all of your converted font files, and a demo page will be downloaded to your computer once Font Squirrel is done converting your fonts.

Step Four: The CSS

OK. We should now have all of the font types that you need to get cross browser support. Now, we just need to write the CSS to actually embed the fonts. Building on the work of Paul Irish and his bulletproof @font-face Syntax , here is the code:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'),
         local('Comfortaa'),
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg');
}

This code links to all of the different font formats that we have created, and will make the font work cross browser.

To use the font that you just declared in your CSS, you just need to reference it like a normal font. The name that you reference corrisponds to the font-family name that you specified in your @font-face declaration. Remember to always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font. For example:

h1, p {
    font-family: 'Comfortaa Regular', Helvetica, Arial, sans-serif;
}

Examining the Appearance

Great! You now have your font working in all browsers. Now how does it look? Well, that depends on what operating system you are using. On Mac OS X, the fonts will look pretty good. On older versions of Windows, however, they might not look so hot. This is because Microsoft’s font rendering engine does not antialias (smooth) the edges of the fonts it renders. This produces a terrible look, which was recentlycomplained about by the users of Boing-Boing , who said that the font used in their redesign looked “awful”. In Windows Vista, Microsoft enabled a feature that had been in XP but not enabled by default, calledClearType , which aims to make their font rendering look nicer. There is a way to enable the feature in Windows XP, but most users have not. Thus, you as the designer of your page need to make the decision about whether to use custom fonts. In my own testing, custom fonts at small font sizes looked just fine. At larger font sizes that you might use for large headings on your site, the fonts didn’t look so good. In general, the more curvy the font, the more jagged edges you will see. If you have a large proportion of users using IE on your site, you are better off using something like Cufon  for the large headings on your site, and @font-face for the smaller text. Some fonts will look just fine at larger font sizes – it depends on the font. So do some testing on older Windows computers before you put your site live, and make that decision. If you need to use Cufon, there is a great tutorial right here on Nettuts  on how to use it.

• A “Web strategist” who might be an owner-level person offering strategic guidance: $80,000 a year
• A “senior producer” who’s the account manager: $54,000 per year
• A “creative director” who leads the creative development: $80,000 per year
• An “art director ” who does the heavy design lifting; $61,000 per year
• A “Web designer” who puts the page together: $48,000 per year
• A “Web developer” who’s really the programmer who makes the form work and integrates it with the database: $60,000 per year
• A “copywriter” who writes the copy for the page: $65,000 per year.

Those numbers come from the AIGA, and the team seems like a reasonable mix to get the job done. The salaries seem low to me but represent median salaries across the country for these positions. Your mileage may vary.

How much do these people need to be billed out at to make a decent profit? If we assume the average reasonable billable time for people is 1,428 hours per year (the Tortorella article offers detail), agency overhead amounts to about 67 percent of salary (again, a reasonable number according to Tortorella), and a 25 percent profit is reasonable (an assumption, but a percentage many of us shoot for), then following billing rates make sense for the positions above:

• Web strategist: $107.56 per hour
• Senior producer: $49.85 per hour
• Creative director: $73.85 per hour
• Art director: $56.31 per hour
• Web designer: $44.31 per hour
• Web developer: $55.38 per hour
• Copywriter: $60.00 per hour

These numbers seem conservative, but they’re what we’ve got for this exercise. We’ll assume an average hourly rate of $63.89, just to keep things simple and conservative.

Now let’s look at the tasks necessary to get this single page completed. There’s the concept phase, when the page is planned. We need account management of the project, page design, page production/layout, copywriting for the page, inquiry form production, and the programming that goes into the form. Makes sense, right?

There’s not enough space here to go into all the details of individual tasks and hours, but let’s assume these are reasonable numbers for the tasks if you include client meetings, a couple revisions, and the usual back-and-forth that always takes place:

• 5 hours of creating the concept = $319.47
• 5 hours of account management = $319.47
• 6 hours of design = $383.36
• 7 hours of production/layout = $447.26
• 12 hours of copywriting = $766.72
• 7.5 hours of form production = $479.20
• 4 hours of form programming = $255.57
• 46.5 total hours x $63.89/hour = $2,971.05

There you go. Nearly $3,000 for a page and about nine times the number of hours the client assumed when they first heard about the project. Amazing, huh? You may quibble with some assumptions, but I’ve tried to be pretty conservative. The hourly rates are probably about half of what most companies I’ve encountered actually charge. Heck, when’s the last time you ran into a creative director at a midsized to large agency who only makes $80,000? If you have, please have him contact me. I may have a job for him.

The bottom line is Web development is expensive, involves lots of people, lots of management, and lots of back-and-forth with the client. Except in the rarest of cases, none of us ever builds just pages but complicated applications and Web presences that often involve hundreds of pages, databases, multimedia, tons of content, multiple forms, and lots and lots of client meetings and approvals. Unfortunately, few of us walk our clients through really understanding the process (and the hours) that make it all happen

The next time you encounter someone with sticker shock when handing him an estimate, don’t dismiss him. Walk him through what needs to be done and see if he still thinks that page can be whipped out in a couple of hours. It’s an educational opportunity that shouldn’t be missed.

By Sean Carton

How do these signals factor into ranking?

Let’s say I have a site, example.com, that offers users a variety of unique website templates and design tips. One of the strongest ranking factors is my site’s content. Additionally, perhaps my site is also linked from three sources — however, one inbound link is from a spammy site. As far as Google is concerned, we want only the two quality inbound links to contribute to the PageRank signal in our ranking.

Given the user’s query, over 200 signals (including the analysis of the site’s content and inbound links as mentioned above) are applied to return the most relevant results to the user.

So how can you engage more users and potentially increase merit-based inbound links?

Many webmasters have written about their success in growing their audience. We’ve compiled several ideas and resources that can improve the web for all users.

Create unique and compelling content on your site and the web in general

• Start a blog: make videos, do original research, and post interesting stuff on a regular basis. If you’re passionate about your site’s topic, there are lots of great avenues to engage more users.If you’re interested in blogging, see our Help Center for specific tips for bloggers.
• Teach readers new things, uncover new news, be entertaining or insightful, show your expertise, interview different personalities in your industry and highlight their interesting side. Make your site worthwhile.
• Participate thoughtfully in blogs and user reviews related to your topic of interest. Offer your knowledgeable perspective to the community.
• Provide a useful product or service. If visitors to your site get value from what you provide, they’re more likely to link to you.

For more actionable ideas, see one of my favorite interviews with Matt Cutts for no-cost tips to help increase your traffic. It’s a great primer for webmasters. (Even before this post, I forwarded the URL to many of my friends.

Pursue business development opportunities

Use Webmaster Tools for “Links > Pages with external links” to learn about others interested in your site. Expand the web community by figuring out who links to you and how they’re linking. You may have new audiences or demographics you didn’t realize were interested in your niche. For instance, if the webmasters for example.com noticed external links coming from art schools, they may start to engage with the art community — receiving new feedback and promoting their site and ideas.

Of course, be responsible when pursuing possible opportunities in this space. Don’t engage in mass link-begging; no one likes form letters, and few webmasters of quality sites are likely to respond positively to such solicitations. In general, many of the business development techniques that are successful in human relationships can also be reflected online for your site.

Now that you’ve read more information about internal links, outbound links, and inbound links (today’s post , we’ll see you in the blog comments! Thanks for joining us for links week.

Written by Maile Ohye, Developer Programs Tech Lead

Check your rank

Google have recently been working closely with Adobe to create a cleaner and more in-depth search algorithm that utilises Adobe’s Flash Player so that it can Index all the textual content and links in a Flash app (yes so that means flash menu’s will work! *gasps*). The immediate problems SEO’s have always had when it comes to flash menu’s in particular is that the site’s other pages don’t get indexed, since the menu doesn’t get indexed the links to the rest of the site won’t get indexed so in essence Google doesn’t know there is any more to the site than the homepage. But thanks to this advancement in the search Spiders website owners will now be able to keep their flashy shiny menu bars and boxes (although the images won’t be indexed, yet) but of course this hasn’t solved everyone’s problems. Unfortunately for people who have completely flash-driven sites you’re still unfortunately going to be kicking and screaming for website rankings, maybe not as much as you where before, but still screaming.

The main problem with completely flash driven sites is that flash is still one application, on one page, on one site; Google simply can’t determine links within a flash application. For example, if you have a flash site which has a menu with say, Home, About Us and Contact Us on it. If you click the About Us Link on the app the application will change its display to the ‘About Us’ page, you’ll also notice that the URL in your browser is still the same. This is essentially because in the eyes of the web you haven’t gone anywhere, all you’ve done is tell a program to change what it’s currently displaying.

This is what creates the problem for Google, the spider sees that page as a single entity the only difference is that Google will now read every piece of text that’s in that flash file and consider everything it finds the content of that sole page. Which means if you’ve got an enormous flash site with a lot of text then you’re going to have one seriously over-packed and unfocussed page which isn’t particularly good for SEO on it’s own unless you’re trying to rank for one of those unbearable ‘get rich quick’ schemes.

Summary, this is definitely going to make designers lives easier and ensure that people with flash navigation will actually be spidered properly which will benefit a lot of sites. I’m just hoping that these new advancements in flash-indexing continue and advise everyone to wait before going flash crazy.

(I decided to do a couple of searches for .swf files on Google and it seems to be working in a relatively ordered manner. Unfortunately people’s programs often haven’t got the best text to start off on such as ‘video title here’ and such but it’s good to see it working.)

Some of the necessary skills to design and build a website are:

•HTML knowledge – some basic knowledge is necessary but good web design software can help.
•Artistic ability – a good eye for color and generally good taste are necessary for a web designer to create an attractive web site.
•Graphic software expertise – some knowledge is necessary to produce attractive clean photos and site graphics. It is also needed to optimize the pictures to the smallest possible file size for quick loading.
•Navigation Expertise – Understanding the functionality of website navigation design and implementation is a critical skill.
•Programming – you could possibly need CGI, JavaScript or database programming to add interactive web pages or integrate it with an online database.
•Marketing and business experience – whether you are building a personal website, or a business website, there are some major business and marketing aspects that need to be taken into consideration right from the beginning deisgn stage of the website.

What if I Can’t Do All of That ?

If you don’t have either the time or the skills needed to build your own website, you can hire a professional to do all or part of it for you. A good place to find a professional web designer is one of the many freelance jobs websites available. These freelance job boards allow you to hire individuals with the expertise you need: web designers, programmers, SEO specialist, copywriters and more. It can be one person or an entire team of individuals. Alternately, you can hire a local web design firm. Freelancers are usually cheaper because many of them live in countries where there is a 5:1 ration in salaries. That means $1 in the US is the equivalent of $5 in their country. So, paying them $5 an hour is like paying someone in the US $25 an hour, which is the minimum price you can hire people with the necessary knowledge.

Content writers who are native English speakers charge from $0.05 per word and up. Non-native English speakers can be hired for around $0.02 per word. But if your website is in English, you probably want to hire a native English speaker to write your content.

Make sure you communicate to the web designer, web developer or copywriter you hire exactly what you need to achieve. A good website designer understands how to build internet marketing into the site design to make it search engine friendly.

What does outsourcing cost ?

For a simple five or six page website, expect to pay anywhere between $100 for just the web page design and $1,500 for the entire site with graphics and content. For a more complex interactive website you may pay from $500 for just the programming to $10,000 and up for the entire website.

There is all a cost in your time as well. You will need to manage the project: writing the project specification, spending time writing emails to the freelancer, doing some quality assurance testing, etc. In some cases you will find that developing a website in-house can be cheaper then outsourcing it.

Remember, it’s not always about the money. If you already have an established company brand, you probably want to seriously consider hiring a professional web designer to be certain that you maintain your brand and present it professionally on your website.

Summary

The decision whether to hire a professional web designer or to build the site yourself depends on what skills you have, how much time you can spare and really whether or not you want to do the work yourself.

About the Author:
Warren Baker is an Internet business consultant for WebDesigners123.

http://articles.webdesigners123.com/design_it_yourself_or_hire_pro.php

Ok, so you’ve decided to hire a professional web designer to build your website. You spent some time looking for the right person. Eventually you found the right web designer that you believe will design the most “remarkable”, “extraordinary” website the internet community has yet seen.

So now what? Explaining to the web designer the layout design you have in your mind can be a very frustrating process. You will find that putting the “picture” in your mind into words can be a difficult task. Actually in most cases this is the biggest hurdle between you and the final outcome. No matter how talented the web designer is, if you can not communicate with him properly, in his own professional language, he will not be able to use his talent to achieve your design.

There are two possible situations you may face:
1. You know what content you want on the website but have no clue how to present it to the user.
2. You know what content you want on the website, and you have the layout in your mind, but you don’t know how to implement it.

In both cases you will need to explain your thoughts to the web designer. Although most people who read those lines are probably thinking that being in the second situation is better then being in the first situation. However, real life experience shows the opposite to be true. Giving a web designer the complete freedom of action regarding the web design based solely on the website content is usually a smart thing to do. You will find that explaining to the web designer what the nature of your website is, whether it’s a product that you want to sell or a hobby item, is much easier then trying to explain to him the temperate of the color schema or an undefined shape that you would like to have in the website header.

Actually for both of the situations, I would suggest you use the same approach, but with a minor modification to each situation. If you know of a website that has all the features you want or need and/or a site that looks the way you want your site to look, be sure to give the site’s url to the web designer. Doing so will give him some idea of want you want. You will both be looking at the same thing but will actually look at it from a different angle. Therefore, it may be better to give him more than one website as an example. The more websites you find that can express your feelings and/or needs, the easier it will be for web designers to understand your intention without you having to use a single “technical” term. Chances are that you won’t find a single website that has all of the feature you want. After all, if such a website already exists there would be no place for your new web site to be born. Use several websites to express the different features you want. Spend as much time as necessary until you find just the right websites to provide examples of your needs. Doing research at this stage will definitely save you a lot of time later trying to point the web designer in the right direction.

Although you are the one who needs to express your self to the web designer, you must learn to listen to him as well. When he uses technical terms, ask for their meaning. Do not finish any part of the conversation unless you are absolutely sure that both sides are on the same page. Remember that when a web designer speaks about the temperature of a color, he is not talking about the next day’s forecast.

Remember, you hired a professional web designer because you want a professional looking website and you couldn’t do it yourself. So, trust the web designer’s judgment when they tell you something you want won’t work or isn’t the best way to accomplish your goals. After all, you are paying them for their expertise. Don’t try to tell them how to do their job.

It is OK to require that a web designer gets your approval each step of the way so you can tell them if one of your goals isn’t being met. Also, if you really don’t like how something looks and want it changed, tell them immediately. Don’t wait until everything is done and then decide you don’t like it.

A final word about cost

You have agreed on what needs to be done and the web designer has given you a price quote. Simple modifications and bug fixes are usually included in the price. However, other major changes or outright revisions may or may not be included. Make sure the agreement states what is included, what constitutes a revision rather than a fix, and how many changes you can make after delivery without incurring additional costs.

About the Author:
Warren Baker is an Internet business consultant for WebDesigners123.

A few weeks ago I received an email from a colleague asking me to check one of the website he had developed. He is a web designer and his client wanted a nice attractive flash header. The flash header was great. You can’t miss it at all. Some nice graphics elements were flying in while sound effects created just the right atmosphere. However, after starting to explore the website, the header became very annoying because every time you clicked on the website the header restarted. What was pleasant initially became very annoying very quickly, disturbing your concentration and making it difficult to read what was on the page.

He is not the first to create what I like to call – “annoying website design“. Many webmasters, especially new webmasters are totally “in love” with their ideas and tend to go overboard with their design in one way or another. It’s nice to have an attractive header, but is it really necessary to assault the visitor’s mind with it? In my opinion, absolutely not!

Webmasters sometimes forget that their website design should send a message to the visitor that should reflect the website topic and not the programmer’s skill level.

Is Your Website Design Annoying?

Well…. It’s not that hard to be annoying. However, some webmasters are much better than others at annoying their visitors. Check my top 5 list and decide for yourself whether you have been annoying your visitors.

1.Background music – Unless you are operating an online internet radio station or sell music CDs, why play a midi/wav file in the background continuously on every page?

2.Huge font size – If you are designing a website for people with a disability then you are doing the right thing, but if not then you are shouting. People don’t like it when someone shouts at them.

3.Small font size – Do you want to be heard? Keep a normal tone, don’t shout but “speak” in a reasonable volume.

4.Overlapping layers – Layers can be very useful up to the point. But not when they are being used to put an annoying message in the visitor’s face. Don’t try to force your visitor to read your messages. Try persuasion instead of brute force.

5.Popup windows – Even though popup windows are now blocked by many add on tools, webmasters keep using them. The annoying part of popups is sometimes we actually miss important information because of those anti popup tools. Haven’t you heard the old phrase “if you can’t beat him, join him”? Don’t use pop up windows. Put your important messages in a central place on your website.

Most likely each one of us has our own private top five lists. You probably have many more annoying design cases in mind. Well, you’re right, the list is much longer then that. I just wanted to describe some of the highlights in order to bring this important subject your attention.

Some of you are probably reading those lines and smiling while some others have a feeling a deja-vu. Keep in your mind that as a webmaster the last thing you want to do is put lots of effort into your website and then find out that your visitors hate it. It’s not a matter of taste, it’s more about being the same polite person we all try to be when we go to a party.

I tried to point out a few things that might be useful to some web designers and webmasters. I don’t know about you, but I’m going to send this article to my friend, hopefully he’ll send it to his client

About the Author:
Warren Baker is an Internet business consultant

Websites that make their customers work to read them are not the best way to get business. Minuscule fonts, text in colors that make it hard to see against the background color, and lines that are piled on top of each other are problems, but they’re easy to correct. Let’s jump right in and look at five easy fixes:

1. Format your text using CSS.
Cascading Style Sheets (CSS) are the way to go – use one style sheet and control how text looks on your entire site. Make a change to the style sheet and your whole site is updated. It makes life a lot simpler.

2. Make the font size big enough to read.
Consider your target audience. Even if they are a group of teenage girls looking for new shoes, it’s never a good idea to use tiny type. It doesn’t have to be enormous, but up to a point, larger type is better. 12-pt Verdana is better than 8-pt Verdana.

3. Make the text contrast with its background.
The more contrast, the better. Black-on-white or white-on-black are examples of the highest contrast you can get. Use colors if you like, but if you squint at the page and your text basically vanishes, there’s not enough contrast.

4. Give the lines room to breathe.
Don’t stack lines on top of each other. Use the line-spacing directive in CSS and give it some space; I’ll often set line-spacing to 140% of the height of a typical line.

5. Break text up into chunks.
No matter how good a writer you are, people don’t want to read endless pages of text. Break it up by using headlines that reflect the subject of the paragraph(s) to follow so people can scan down to the parts that really interest them, or use bulleted lists to change the pace of the writing and slow down the scanning.

And finally (not one of the 5 Easy Ways to Improve Legibility but still quite important) check your spelling. Nothing irritates me more on a web page than spelling errors – it simply makes you look like you don’t care enough to get it right. Use that ubiquitous spellcheck tool.

Making your website’s content more legible is easy. It doesn’t take a lot of time, mainly common sense. The payoff will be text that’s more readable, customers that stick around long enough to get your message, and improved credibility with your visitors.

Copyright 2006, Debbie Campbell
http://www.pageresource.com/zine/cc_5easyways.htm