Effective signup process

Online community best practices: Effective signup process

This article focuses on providing new members with an effective join/signup process. Although some of these principles may seem obvious, I’ve gone through plenty of membership signup forms that still suck. So hence the post.

4 elements of an effective online community signup process

1. Easy to use web form design

As Luke Wroblewski put it in Web Form Design in the Wild, Part II, “Forms control the gates of membership.” Never take form design with a grain of salt. Filling out web forms requires the highest level of user commitment and are the most complex UI elements of a website.

Although people kill time browsing the Web, they don’t kill that time by looking for the next web form to fill out. In fact, you and I, as well as every other user out there in the world avoid web forms like the plague. So if your signup form is complicated then go ahead and call it quits. Complex forms are the bane of conversion.

Here are a few quick tips to make your web forms easier to use:

  • Make form fields and labels align vertically, not horizontally
  • Make form field size relative to the expected input length
  • If it must be a long form, break it into logical sections (a quick card sort can help do that)
  • Show an example of expected input
  • Don’t force the user to follow formats (like xxx-xxx-xxxx). Format input after submission programmatically
  • Make the call to action, or submit button, very easy to find
  • Avoid CAPTCHA by using better data validation. Deleting a few spam accounts is better than pissing users off from the start

2. Lazy registration

Lazy registration is a relatively new concept to the scene, made possible by increasing levels of interactivity on the Web. What is lazy registration? While guests use the features available to them, their behaviors and preferences are stored in cookies. When guests finally register because your online community website kicks ass, some of the information is already filled out from the cookies.

An example of lazy registration is if a guest posts a comment and inputs their name and email address, that information is stored in a cookie. When he signups because he wants a profile and access to member-only benefits, the signup form will draw that information from cookies, saving users valuable time and keystrokes.

3. Partial commitment

Partial commitment is a persuasion strategy as old as dirt. It’s the reason why you’re more likely to keep hearing “yes” if a person has been responding with “yes.” It’s the reason why that tricky car salesman asks you to take a test drive. Commitment in little chunks at a time simply works. While some of these tricks are unethical exploitations, getting partial commitment to increase online community signups on the web is not only an effective sales technique, it’s good for users, too.

The benefit to users is somewhat related to the idea of progressive disclosure in that users only need what they need in each moment to complete a task because any more is overwhelming. In terms of online community commitment, users don’t want to spend time writing a biography to join your online community. They want to do the minimum required to start playing. They’ll give you more information as they find another benefit they want to unlock.

If you’re thinking, “I’ll give them a complete form, but mark only a few fields as required,” you should know that users tend to fill out all fields and ignore requirements. Just give them the bare minimum fields required to sign up initially, and all other fields available to fill out at their leisure.

4. Build confidence

As with any commitment, people need confidence in their decision. When submitting personal information over the web, users need to be confident that their information is protected and respected.

The most important thing is to address their concern for privacy, which is usually done through a privacy policy. Most privacy policies are failures because they are stuffed down into the footer—a place where users never look when filling out forms—and they are full of legal jargon gobbledygook. When has legal jargon gobbledygook ever made you feel comforted?

Good privacy policies are short, written in plain speak, and very easy to find—like a link at the top of the form. Give the link to your privacy policy a teaser, such as “We have a privacy policy to keep your information private. [link to privacy policy].”

Other elements of building user confidence include

  • Well designed UI
  • Consistent branding from page to page
  • A secure form (use a lock icon above the form, don’t rely on the https in the address bar to tell the story)
  • Pull quotes from current members
  • Reinforcement of membership benefits

Bonus tip: Confirmation

Although you’ve led your new members through an effective signup process, your followup/confirmation e-mail is just as important. Followup e-mails play key roles in the signup process:

  • Users feel confident that they successfully completed the process
  • Users have a record of their username and password (because they’ll forget it almost certainly)
  • Users are reminded of their account later as they browse their inbox
  • Followups are great opportunities to progressively “sale” additional benefits of membership. Provide them with ideas of what they can begin doing

Conclusion

Your signup form may be the most crucial part of your online community. You should be doing everything you can to insure an easy signup process that makes the user feel safe.

 

Know Your Typefaces!

Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces

Dawn Shaikh* - User Experience Researcher (Seattle/Kirkland UX Team)

Summary. This article presents results from a study investigating the personality of typefaces. Participants were asked to rate 40 typefaces (from serif, sans serif, display, and handwriting classes) using semantic differential scales. Responses are shown by typeface class and individual typeface using scaled scores. These results are helpful to practitioners when deciding which typeface to use for online text.

Introduction

While there has been quite a bit of research on the perception of printed type, there has not been a thorough investigation into the perception of onscreen type. This article presents the results from an investigation of the perceived personality of 40 onscreen typefaces (10 from serif, sans serif, display, and handwriting classes). The results presented here are from the responses of 379 participants who completed an online survey using semantic differentials. The semantic differential provides participants with a sample of nonsense text and a set of bipolar adjectives on a scale that has varying points of intensity. Each used a 7-point scale which allowed participants to judge both direction and intensity of their responses (Osgood & colleagues, 1957). Figure 1 shows a sample.

Figure1

Figure 1. Examples of text sample, semantic scales, and legibility question.

The responses reduced down to three factors to describe the typefaces: Evaluative, Potency, and Activity.

  • Potency reflects typefaces that are seen as having strength, power, or force.
  • Evaluative reflects typefaces that are viewed as having value, worth, and importance.
  • Activity reflects typefaces that are considered to be full of energy, movement, and action.

The factors were correlated; Potency and Activity were positively correlated, and Potency and Evaluative were negatively correlated. Table 1 shows the typefaces evaluated by class. Clicking on the typeface name, or class, displays the corresponding scale results. Figure 2 shows the results by typeface class. The scale results are helpful to practitioners as they decide which typeface to use for online content. It is important to present online text in a typeface that is consistent with the meaning of the text. For example, a designer would not want to present content that is "strong" in meaning in a Scripted typeface. Likewise, a Display typeface would not be a good choice for content that conveys "high value" or "beauty".

Table 1. Typefaces evaluated using semantic differential scales.

Serif Sans Serif Display Script/Handwriting
Calisto Arial Agency Bradley Hand
Cambria Berlin Sans Bauhaus 93 Brush Script
Centaur Calibri Chiller French Script
Courier New Century Gothic Broadway Gigi
Georgia Consolas Curlz Informal Roman
High Tower Text Corbel Impact Kristen
Lucida Bright Lucida Console Juice Lucida Handwriting
Perpetua Incised 901 Lt BT Papyrus Viner Hand
Poor Richard Trebuchet Playbill Monotype Corsiva
Times New Roman Verdana Tempus Sans Vivaldi

 

Comparison of all classes

Figure 2. Results by typeface class.

 

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

[Back to Table 1]

*Note: This article presents a small portion of findings from Dawn Shaikh's dissertation investigating the perceptions of typeface personality. Please contact Dr. Shaikh for more information.

REFERENCES

Osgood, C. E., Suci, G. J., & Tannenbaum, P. H. (1957). The measurement of meaning. Urbana, IL: University of Illinois Press.

 

 

Article PDF

Print Article

E-mail the Usability News Article

Previous

Next


Related Articles:

SUBSCRIBE to Usability News!

Usability News RSS

AOL's new branding trades iconic running man for goldfish | Technology | guardian.co.uk

aol new logo

The new brand logo comes with a changing background and replaces the letters AOL with Aol. – complete with a period

paidcontent-s.jpg

AOL just released its new branding look—one consistent typography showing "Aol" with different literally hundreds of "reveals" from various artists. We're only seeing a snapshot; the new identity fully debuts when AOL rings the bell to open the New York Stock Exchange Dec. 10. (Images here and after the jump with the release.) For Running Man devotees, AOL CEO Tim Armstrong assures paidContent the icon, which turned 13 this year, isn't having his number retired. "The running man is going to be around the brand. He's a huge part of the culture ... We're setting the running man loose." He says the figure will be popping up in some surprising places over the next couple of years. More from that interview.

An ad industry insider who looked at these first images tells us: "Using lowercase letters for 'Aol.' is too subtle a change to make a real impact on consumers, who may associate the company with the dial-up service. It's just a step. The different backgrounds are the same thing: they haven't made up their minds about what AOL is and what AOL isn't—and what it ultimately stands for." Stuart Elliot talked to the creatives at Omnicom's Wolff Olins who describe it as "all the things the Internet is"—and to Redscout's Jonah Disend, who thinks the AOL brand should be dissolved.

Google Image Swirl - Clustering Similar Images

Back in 2001, to give people a new, quicker way to find images, we launched Image Search. When you do a search for [eiffel tower] you'll find an array of images of the tower in the daytime, in black and white, at sunset and more. With Similar Images, which recently graduated from Google Labs, you can click "Find similar images" to narrow your search to, say, pictures of the Eiffel Tower lit up at night. Today, we've launched an experimental feature in Labs called Google Image Swirl, which builds on new computer vision research to cluster similar images into representative groups in a fun, exploratory interface.

For example, if you search on Image Swirl for [washington], you'll see 12 image thumbnails including President Washington, the Washington Monument, a map of Washington D.C. and the Capitol Building:


Once you find the group of images you're interested in, you can click on the thumbnail and a cluster of images will "swirl" into view. For example, here's what you'll see if you click the image of the Washington Monument:


You can then further explore additional sub-groups within any cluster. The interface may look familiar to those of you who have tried Google's Wonder Wheel available in the Search Options panel, which enables you to explore related search queries.

15 Simple Warning Signs of a Bad Project (and how to think positively)

yield-sign

Here’s the deal. Designers should not accept every project that crosses their eyes. For five years, I was stuck in the mentality that every potential project was a chariot of gold ready to bring me unimaginable riches.

Wrong. I discovered through a series of poor projects that accepting everything is not a profitable strategy. I began to understand and value the concept of opportunity cost. Let’s say I’m working on a low paying project that, while bringing in some money, eats up all my time and leaves me exhausted at the end of the day. What else could I have done with my time? Could I have worked on a more rewarding project? Or perhaps hunted for more profitable business? I will never know.

This is not a foreign concept to most veteran designers. As you grow, you must become more selective about how you spend your time. But how can you screen potential projects to eliminate the problem ones as quickly as possible?

I’ve developed a set of internal heuristics that I run each new project through as a test. Keep in mind that sometimes a project with a small budget or a client with a demeaning attitude is not necessarily a deal breaker. You have to use your judgment and analyze your own opportunity cost. What else could you be working on?

When writing this post, I realized that most clients are actually good and that you should maintain a positive outlook in your project screening process. With that thought, I decided to amend my post to include a way to think positively about each warning sign.

1. They have a “small” budget

The most obvious warning sign. Anyone who declares outright that their budget is “small” or “limited” is a person without real conviction to a solid web project. Maybe they really don’t have the money. Unfortunately, your time is valuable and must be compensated fairly.

lightbulbThink positive: Are they a non-profit? Is there a reason why they can’t afford an extravagant web presence? Some organizations with a good or interesting cause might be worth reaching out to. Perhaps you can arrange a trade of services or a sponsorship. Sponsoring non-profits and donating time can be an incredible way of attracting new business (people like people who give).

2. They’re price shopping

They claim you’re one of three companies they’re looking at for a quote. They waste your time with numerous emails and questions when in reality they’re just fishing for prices. This is a classic budget shopper who will drain you for everything you have.

lightbulbThink positive: Perhaps there’s something you can do to help you stand out from the rest. Suggest unique solutions to the client and help them understand your mode of thinking. The client may actually be stuck making a tough decision between several local firms. Help convince them that you’re the right choice.

3. They require spec work

This is the most outrageous warning sign that every designer has encountered. A prospect who demands a mock-up or design to be submitted with a proposal is a prospect not worth dealing with. They essentially want you to work for the job, which can be extremely risky and time consuming. Your portfolio should speak for itself.

lightbulbThink positive: Does the prospect understand what they’re asking for? Try explaining that they’re essentially asking you to work for free. Compare this to the prospect’s line of work. Would they ever submit work without a guarantee of getting paid? This might help them to rethink their proposal requirements.

4. They want to establish sort of ownership deal

Thanks to the dot com bubble, people seem to have left that mess with the thought that ownership equates to value. If you’re approached by someone who has no money but the next “killer” idea, be cautious. They’ll want you to work for a percentage of ownership. If you accept, you’ll waste the next six months of your life working toward a pipe dream.

lightbulbThink positive: What can I say? There really is nothing positive about this. In fact, I would advise anyone to avoid these propositions at all costs. However, should someone you know very well approach you with this scenario, it may be worth your attention to at least see what the opportunity is.

5. They’re hard to get a hold of

If you’re trying to work out a proposal or deal for someone who doesn’t answer questions or never gets back to you, this is a sign of their behavior during the project. This is the exact behavior that causes projects to drag on forever and eat into your valuable time as you try to spur the client into action.

lightbulbThink positive: Analyze your own communication method. Are you emailing someone who clearly is more receptive to a phone call? If so, pick up the phone. People can become hard to reach if you’re not using the proper channel.

6. They’re rude or inconsiderate

You pick up the phone to speak with a new prospect and they bark commands at you. Or, you receive an email littered with curt and arrogant statements. No one wants to put up with that, especially during a prolonged project period.

lightbulbThink positive: Is there a reason why they’re treating you in this fashion? They could have had a bad day or perhaps they aren’t adept at using a certain communication method. For the prospect who writes seemingly offensive emails, try giving them a call. They might be the nicest person in the world who’s just absent-minded when it comes to email.

7. They want you to rip off some other site

I’ve learned that some people will become overly fixated on the design of another site and will outright ask you to copy it. Not only is this wrong, it should be completely avoided. You can’t include it in your portfolio and you might even get into copyright infringement territory.

lightbulbThink positive: Explain the consequences of copying another site to the client. They might not realize that other people will notice. Most people want to avoid embarrassing situations; help the prospect to do that. Furthermore, try to identify what parts of the design the prospect liked and assure them of your skills.

8. They need the site done in a week

We’ve all heard this one before. They need a super extraordinary web site built in less than a week and they need you working on it around the clock. Avoid.

lightbulbThink positive: Do they have the dollars to back up this extreme time condition? If they’re willing to pay for expedition, it might be worth it. Otherwise, explain that the timeframe is not feasible under their budget constraints.

9. They have multiple hoops to jump through

Do some proposal processes seem like a circus show with you jumping through all the hoops? This test of will can be very time intense and draining. There might be committees to weave through, multiple layers of bureaucracy or numerous channels of acceptance to reach.

lightbulbThink positive: Is the pay off worth the show you have to put on? Many of the bigger web design deals go through an extended proposal process since it’s usually for a larger organization. Keep your head up and work through the muck if you think you have a good shot.

10. They keep picking apart your proposal

The proposal nitpickers will literally highlight every nook and cranny of your proposal and ask questions ad nauseam. These prospects are a concern because their nitpicky behavior is indicative of how they’ll act during the project.

lightbulbThink positive: Take an honest look at your proposal. Is it too vague or undefined? Are the questions and nitpicks valid? Just because the prospect is shooting holes all over your proposal doesn’t mean they’ll turn out to be a bad client. They might just want to protect themselves.

11. They want you to buy a template

Templates are everywhere on the web. They are so easy to obtain that some prospects will pick out a design and ask you to adapt it to their organization. I think this is sort of like what tracing is to art. You might end up with something that looks good, but you didn’t really create it. Templates also have a tendency to ooze of that cookie-cutter feel.

lightbulbThink positive: If the prospect is adamant about using a template, then make sure the compensation is enough to justify the project. Remember, you probably won’t be able to use this project as an example for other prospects since you’ll just be tweaking an existing design. These projects can also be nice fillers between more intense projects.

12. They have no content or marketing materials

These prospects literally have nothing about their company in writing. No web copy, very little brochure copy and nothing in the works. They might think you can adapt their tiny brochure to the web, but we all know that doesn’t work. Getting content out of them will be a hassle and the project will drag on forever.

lightbulbThink positive: This is a great opportunity to hook up with a copywriter to extend those services to the prospect. In all likelihood, the prospect doesn’t understand the importance of good web copy. Help them to realize its importance and build copywriting into the proposal (or provide a separate quote from a copywriter you trust).

13. They keep getting cold feet

Have you ever had a prospect one pen motion away from closing a deal only to have them back out? They get cold feet because they’re questioning their own decisions. It’s hard to get anything done because their indecisiveness leads to more questions and concessions on your end.

lightbulbThink positive: Try to get into the shoes of the prospect and understand what their fears are. Is it the price, scope, project requirements or something else? Most of the times, the prospect just needs an expert to help guide them in their decision-making process, especially if they’re not accustomed to web design work.

14. They continue changing the scope

You have a solid proposal ready to go and the prospect seems excited by it. You hand it off to them only to get it back with a completely new scope for the project. What may have started as a simple blog all of a sudden has exploded into the prospect wanting to have a custom community blogging system. The big problem with these prospects is that when they do become clients, they’ll likely be big scope creep offenders.

lightbulbThink positive: Just like the prospect that gets cold feet, this one is indecisive. They have so many thoughts swimming around in their mind that they can’t make a decision about what they want their web site to do. This is where you need to employ your expertise to help nail down a single vision. Some clients are just dreamers who need to be brought back down to reality for a brief moment.

15. They marginalize your job

There will be some prospects that just don’t respect the web design profession. They’ll demean it and make statements along the lines of, “I could do this myself, but I don’t have the time.” The problem is web design is not a simple profession and involves a lot of hard work. If the prospect cannot respect this then how can you expect to be treated during the project phase?

lightbulbThink positive: Maybe the prospect only seems condescending because they are in fact knowledgeable of web design. If so, try getting their input on how they want the project to proceed. And make certain that you both understand clearly what your role is in the project.

Do you have some warnings signs of your own? If so, I’d like to hear about them. Please feel free to share them in the comments area!

http://8iaeh.th8.us" title="Post to Twitter">Post to Twitter

http://8iaeh.th8.us" title="Post to Twitter">Tweet This Post to Delicious

Delicious Post to StumbleUpon

Stumble This Post

Form Design And The Fallacy Of The Required Field | Usability Counts | User Experience, Social Media

Usability

Form Design And The Fallacy Of The Required Field

requiredfields

I was on a mailing list today, and this came across:

“Use red asterisks — they’re the standard for showing required fields.”

Standards are wonderful, but if I asked my mom with is the international symbol for a required field, she would look at me like I was on drugs (not much different than today, but still).

This was something even the great Jared Spool mentioned at an event as gospel, and showed an example in his PowerPoint (which I still haven’t received, but that’s another blog post). He was explaining how another client had used asterisks to show optional fields.

Here’s a few truths about form design that I’ve discovered in my time by testing actual users.

Most forms are hard to read.

requiredfieldplacement

Does anyone find it interesting the note for required fields is after the fields?

There have been a few books and web posts, but for the most part, web form design hasn’t changed that much since 1996. Form fields are left on a white background with a grey line around them (some sites, like this WordPress blog software I’m using, has a lighter grey line around the form fields for design purposes).

On some sites, form fields are in columns so they’re next to each other so the user really has to work at it.

Given eight form fields, users will fill out all eight.

I’ve run countless tests, and the result in most of them is users will try to fill out every single form field. This includes  the second address field we all know so well even if they don’t have a second address.

Form fields are one of those things that users expect to fill out every single field, because they don’t want to have to figure out error messages when they are wrong. Because they have been trained that most web forms are ineffective, they do as much work as possible (bad solution number 1) or walk away (worse solution number 2), leaving either a frustrated user, a lost sale, or both.

The red asterisk, and even the explanation text that reads “Required fields are marked as (*)? No one’s going to read it.

It’s usually at the top of the form, in line, and all users skip it right to dig in. Users rarely read instruction text, and because most form design is so poorly thought out, users rush through it to make it as painless as possible. Users need visual cues next to the field or at the field they are working on, not 300 pixels (at least) away.

Additionally, the Required Field line is usually small and hard to read (read: Designers License), so in the grand scheme of watching users browse the site, they skip right over it.

A solutions to the required field paradox

disneyshopping

Disney Shopping

This was a solution we used at Disney Shopping: the word Optional was placed to the right of the field, and required fields were colored yellow so users could spot them.

I’m using this particular design pattern on other sites because at Disney Shopping and a few other sites I’ve worked on, this is the design pattern I’ve enforced. It’s simple, doesn’t interfere with the form because error messages are usually below the form field, and it’s easy to scan for it.

Why am I enforcing it?

Because changing it from the asterisk to this example, form completions are up, across the board. We’ve tested it, and it works.

20 Do’s and Don’ts Web Typography

20 Do’s and Don’ts of Effective Web Typography

In a previous article here on Web Design Ledger, I broke down 20 do’s and don’ts of effective web design and today I would like to keep up with that topic and go over 20 do’s and don’ts of effective web typography. It’s an important part of designing for the web, yet it’s often overlooked (even by me previously). Below are the 20 do’s and don’ts and in the comments section, you’re free to let us know of any of the items we might have missed.

DO NOT use too many different font faces on the page

You may have 1,000+ fonts downloaded on your computer, but when they’re being displayed all on the screen at the same time, you’re not going to have many people impressed. Not only will this cause your website visitors to have a hard time reading, it’s also going to just make you look tacky.

web typography

DO NOT switch from serif and sans serif fonts multiple times

Sticking with the theme from above, switching from Serif and Sans Serif fonts multiple times per page will do you more harm than good. Readibility is the #1 thing you need to be worried about with your website, because no matter how “cool” it looks, if the visitor can’t read whats on the page easily, they’re going to leave.

web typography

DO NOT ignore planning for font increase by the viewer

Older audiences will adjust the font size view on their screens in their internet browsers settings, so no matter what font you default the text at, it might not be showing this way for the visitor. This can cause errors if you aren’t taking larger fonts into account for headers and other various items which might break the design if they break into two lines.

DO NOT use Sans Serif fonts for large bodies of text

Sans Serif fonts are great for the clean, uniform look – but when you’re putting together large bodies of text (10+ lines), switching your fonts to a serif font will allow for better readability as the curves and shapes help guide the eyes better than the straight, uniform lines of the Sans Serif fonts.

web typography

DO NOT overuse font replaces like Cufón and siFr

Cufón and SiFR are just two of the various ways you can replace text in your browser to give off a more custom look, but use it wisely. Using the font replacement for the entire web page is going to be a bit overload and will distract the visitor from the actual reason you’re typing on the page in the first place – you want them to be able to read it. I would advise to generally stick with headings and calls to action for your font replacements and leave the major bodies of text as regular, web safe fonts.

DO NOT overdo the emphasis in your text

A good writer will be able to emphasize the words they want without using bold, italics or underlines. If you’re text is littered with tons of strong and italics and underlines, you might want to rethink what you’re doing. Utilizing the codes to emphesize specific items wisely will make things look – and read – thousands of times better.

DO NOT forget to utilize font stacks in your css codes

When I’m building websites, I tend to like using helvetica for the text of specific items. I realized early on that not a lot of people will have purchased helvetica, so the font won’t display properly on their page if I simple use “font: helvetica;” in my css, so I read up on font stacks and use them religiously now. Basically, it gives you the option to use any font you want, and also allows for back ups in case the visitor doesn’t have the specific font you give first. An example would be like this: “font: Helvetica, Arial, sans-serif”, which basically says that you want the page to display helvetica for the text, and if thats not available on the visitors computer, you want the page to use arial – and if for some reason that isn’t available, it gives a generica sans-serif font.

DO NOT type in all caps – use text-transform when you need it

So, lets just say that you want your headings to all be capitalized – how do you do it? DO YOU EXCESSIVELY TYPE IN ALL CAPS? There are a few problems with that. First, it’s annoying. Second, it’s not easy to edit them out later on if you redesign your site and do not want all caps anymore. So what do you do? Utilize the text-transform css code. Here’s an example.

text-transform: uppercase;

DO NOT forget to use accent characters when needed

Typing words like Cufón numerous times on the page without the accent characters will make you look sloppy and uneducated. Yes, it’s true. So utilizing the accent characters will allow you to display the words properly (it’s really polite to do so) and it also is a lot easier than you’d think. You can get a full list of accent characters by visiting this article from w3.org.

web typography

DO NOT – I repeat – DO NOT use comic sans or papyrus on anything!

This is actually a rule across all forms of design that use typography – web, print, ect. Never – I repeat – never use comic sans or papyrus on anything. It’s tacky and deserves to be lumped in with IE6 – and we all know how bad people hate IE6, right?

web typography

DO use line height to your advantage

Relying on the default line height for your text will bite you in the ass in the long run because it’s honestly just not enough room between lines and will not allow you to work with a proper baseline grid (more on that below). I tend to keep my line height 5-6 px larger than the font size I choose – so if my font size is set to 13px, I will make the line-height 18px.

DO use the proper text colors on the page background

The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.

web typography

DO use web safe fonts as often as possible

When you’re building your font stacks, make sure you’re using the web safe fonts as much as possible. The fonts that are installed on both PC and MAC can be found by reading this article on ampsoft.net. When you have a knowledge of what web safe fonts are out there, you can better prepare your website for the break down from your original fonts to the fonts that are most common and would be used if the visitor didn’t have your font installed.

DO use a proper hierarchy for your pages

Utilizing a great hierarchy for your web pages will allow your visitors to quickly scan your content and find the most important items. Nothing is worse than getting to a page and having to spend 30-60 seconds looking for the content and finding out what it’s even about. Use proper title tags for the most important sections and smaller title tags for less important sections. You can also use different colors and spacing to vary the hierarchy for your pages.

web typography

DO make use of a baseline grid

A consistent vertical grid will help readability for your web page and also increase the visual appeal of the overall design. Proportion and balance shouldn’t be broken by font sizes, so sticking to a proper vertical baseline grid will allow your page to flow naturally from top to bottom as well as from left to right. Acheiving this effect is as simple as these few lines of code below. Notice that the line height for the text is the same size as the margin for the bottom of the paragraph blocks of text (you should also keep this in mind for header tags as well as images).

body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
}

p { margin: 0 0 18px 0; }

DO utilize white space as much as possible

Keeping up with the above do, utilizing white space in your design will help your pages readability. It will allow your page to breathe and give your visitors eyes a rest. Don’t believe me? check out the image below and let me know which item you think is best for readability.

web typography

DO keep the use of centered text to a minimum

Centering text is good for one line or maybe a speech bubble in your design, but requiring your visitors to read large blocks of text will cause their eyes to drift and not follow line by line as easily as if the text were aligned to the left or right.

web typography

DO use shade variations to help areas stand out more

When designing your next site, keep this in mind – if your body text is black and your sidebar text is a medium gray color, your content will visually stand out and be read faster than the sidebar items. The same goes for blockquotes and other non-essential items that you do not want to take away from the attention of your main content areas.

DO make sure you know about, and use, proper letter spacing for titles

This is an item I didn’t think about very often – until recently. If you are utilizing the text-transform css code I wrote about above, you’re going to notice that the text might be a bit hard to read. Utilizing the letter-spacing property in your css will help curve that problem. There is an example below but please know that the letter spacing is relative to your fonts default letter spacing so it might work differently for various fonts and font sizes.

h1 { text-transform:uppercase; letter-spacing: 1.25em }

DO make use of a typographic scale in your css codes

Using a proper typographic scale will allow your page to be read easily by the visitor and will allow you to keep the hierarchy in tact that we spoke about above because if your main text is 12 pixels, then the blockquote and paragraph fonts will be 125% larger by using the 1.25em code in your css. If you properly use a typographic scale, it will actually look like a flieght of stairs – like the image below.

web typography

body { font-size: 12px; }
h1 { font-size: 5.0em; }
h2 { font-size: 4.0em; }
h3 { font-size: 3.0em; }
h4 { font-size: 2.0em; }
blockquote { font-size: 1.5em; }
p { font-size: 1.25em; }
input { font-size: 1.0em; }
small { font-size: 0.75em; }

Anything I missed?

Let me know in the comments. I’m ready to learn from you all and I hope you learned a thing or two from me today as well. Thanks for taking the time to read my article and don’t forget to share it with friends through email and social networks if you enjoyed it.

About the Author

Mike SmithMike Smith is a blogger who writes about social media and marketing and he’s a blog designer at Guerrilla.

Related Posts

Here's some other articles that you will definitely find useful.

10 Useful Text Enhancing Plugins for WordPress

14 Best Online Typography Tools for Web Designers

33 Epic Works of Typography Art

14 Most Impressive Photoshop Typography Effects

12 CSS Tools and Tutorials for Beautiful Web Typography

9 Starter Themes to Create Your Custom Themes.

9 Starter Wordpress Themes

Posted in ResourcesOct 08, 08 | 10:12 pm

Mubashar Iqbal

These days everyone and their mother seems to have a blog. A popular choice to run a blog is Wordpress, it powers this blog and a few others that I run.

A good way to make your blog stand out from the crowd is with a custom theme. Developing themes for Wordpress is pretty simple, if you know HTML/CSS and PHP, but nobody wants to start from scratch each time they develop a theme, these Starter Themes provide a simple canvas on which you can create your custom themes.

Starkers

Released by Elliot Jay Stocks and recently upgraded for Wordpress 2.6.2, Starkers provides a very basic starting point, no formatting what so ever.
Download Link

Starter from WPCandy

Unlike the other themes here, Starter is not intended to be used out of the box, rather provide a basic template to start developing your theme.
Download Link

Whiteboard

It is designed to speed up the process of designing and coding a Wordpress theme by eliminating the time spent on Wordpress’ back-end PHP that is used in every theme.

Whiteboard is clean, noted, and compact (only 104 KB in size). It includes all the standard PHP tags and PHP files needed for a Wordpress theme – plus a few extras.

Download Link

Wordpress Naked

The aim with Naked is that a developer with an XHTML template that they’ve already developed can very quickly apply it to this no-frills theme with the minimum of fuss and research.

Download Link

Sandbox
The Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.

Preview
Download Link

Refueled : Blank Wordpress Themes
Available in a number of configuration, http://refueled.net/downloads/blank2L.zip">2 and http://refueled.net/downloads/blank3.zip">3 columns, with left and right sidebars.

Vorlage

Templates without design. HTML only if it is absolutly necessary for you. But full of comments to explain the functions.

Download Link

Cutline

an incredibly powerful, flexible theme that runs on our favorite blogging software. It’s free; it’s awesome; and it was built with your success in mind.

Demo
Download Link

Blank Theme (Premium: single license $79.95)

This theme is ideal for those who want to highly customize the Essence layout, or simply want a clean, sharp look.

Buy Link

Your Personal Brand Is Not Scalable | Six Pixels of Separation - Marketing and Communications Blog - By Mitch Joel at Twist Image

How are you going to outsource or pass-on some of the conversations and opportunities that will come your way as more and more people follow, friend and connect to you?

The answer is simple: you can't. And, because you can't, it's time we all started to admit that we are going to let people down, and that this is going to cause a major rift in how people connect in online social networks, who they follow and how "real" the relationships really are. Seth Godin recently tackled this in a Blog post entitled, Dunbar's Number isn't just a number, it's the law. Some people loved his thoughts, others disagreed (welcome to the conversation!). His point:

"Dunbar postulated that the typical human being can only have 150 friends. One hundred fifty people in the tribe. After that, we just aren't cognitively organized to handle and track new people easily... Some people online are trying to flout Dunbar's number, to become connected and actual friends with tens of thousands of people at once. And guess what? It doesn't scale. You might be able to stretch to 200 or 400, but no, you can't effectively engage at a tribal level with a thousand people. You get the politician's glassy-eyed gaze or the celebrity's empty stare. And then the nature of the relationship is changed. I can tell when this happens. I'm guessing you can too."

Your Personal Brand is not scalable.

Here's a true story: recently there have been many interesting marketing/Social Media opportunities brought to my attention due to the launch of the book, Six Pixels of Separation. In this process, I have been privy to seeing how some of the people who have major online followings work. All of them (including me) struggle to maintain their online ties. In fact, in one instance during a marketing opportunity, one of the individuals with a major following came out and said, "unless I am being paid, I simply don't have the time to commit to this." In "normal" circumstances this is fine, but here's what's really happening: this individual got the fame, popularity and attention because of their community. Now, when that community asks for help, they simply don't have the bandwidth unless there is a dollar amount attached to it.

It's plain to see where this leading.

On the last episode of Media Hacks (which is also episode #176 of the Six Pixels of Separation Podcast), Julien Smith (co-author of Trust Agents) and I discussed the challenge that businesses have when building community. We both arrived at the same conclusion: you can't build a community when you need it. You have to be building a community long before you need it (so that it's there for you when you need it). That concept becomes even more complex for individuals because...

Community and relationships are not about transactions, they are about interactions. Interactions take time and there's only so much time in the day.

In the end, the number may not be 150 and it may not even be 1500, but real interactions between real human beings take time. So, unless you have a staff, team and crew - and it's known from the outset that your involvement will be limited - be very careful about how you build your online community and who you connect with. If it's just a game of numbers - much like many of the bigger corporations who engage in Social Media - you are going to quickly start to let people down. And those are the exact people who "put you there" in the first place.

Any ideas on how to make a Personal Brand more scalable?

By Mitch Joel