BlogmyQuery – BMQ

For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineering’s analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.

To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal — big enough that some websites have started exploring new designs solutions for the old problem.

Is This You?

Gowalla’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. There’s also help for those of us who have forgotten our password or are new to the website. In other words, all of the most common log-in user-interface components are accounted for.

The sign-in form on Gowalla.

But Gowalla has taken the time to include a few more components to help people log in with more confidence if their first attempt hasn’t worked. If you attempt to sign in with a user name (or email address) and password that do not match, the website not only returns an error but returns the profile image and user name of the account you are trying to sign into as well:

A log-in error on Gowalla.

Including a profile picture provides instant visual confirmation: “Yes, this is my account, and I may have forgotten my password,“ or “No, this isn’t my account, so I must have entered the wrong user name or email address.� In either case, Gowalla provides a way to resolve the problem: “This isn’t me� or “I don’t know my password.�

The Q&A website Quora takes a similar approach, but it doesn’t wait until you are done trying to sign in before providing feedback. Quora’s log-in form immediately tells you if no account is associated with the email address you have entered, and it gives you the option to create a new account right then and there:

Quora instantly lets you know if there are no matching accounts for the email address you have entered.

If the address you have entered does match an account on Quora, then the account’s profile image and user name will appear to the right of the log-in form. This confirmation is similar to Gowalla’s but comes right away instead of after you’ve submitted the form.

If the email address you enter on Quora matches an account, you get visual confirmation instantly.

Instant Sign-In

Quora’s log-in form also includes an option to “Let me log in without a password on this browser.� Checked by default, this setting does just what it says: it eliminates the need for you to enter a password when re-logging into Quora. All you need to do to enter the website is click on your profile picture or name on the log-in screen.

Quora’s one-click log-in page.

To go back to the standard log-in screen, just click the “x� or “Log in as another user,� and then you can sign in the hard way: by entering your email address and password.

While one-click sign-in on Quora is convenient, it doesn’t really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.

“Single-sign-on� solutions such as Facebook, Twitter, OpenID and more have tried to tackle log-in issues by cutting down on the number of sign-in details that people need to remember across all of the websites that they use. With these services, one account will get you into many different websites.

A sampling of single-sign-on solutions.

Logging in this way is faster, too. When someone connects their Facebook or Twitter account to a website, they simply need to click the “Sign in with Facebook (or Twitter)� button to log in. Of course, they need to be signed into their Facebook or Twitter account in order for it to work with one click. But with 50% of Facebook’s 750 million active users logging into Facebook on any given day, the odds are good that one click is all it takes.

You can see this log-in solution in action on Gowalla (screenshot below). A Gowalla user who has connected their Facebook account needs only to click on the “Log in with Facebook� option in order to sign in — provided they are already signed into Facebook, of course. If they’re not signed into Facebook, they’ll need to do that first (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.

Gowalla provides an option to log in using your Facebook account.

New Log-In Problems

But with these new benefits come new problems — usually in the form of too many choices. When faced with multiple sign-in options on a website, people do one of the following:

1. They remember the service they used to sign up (or that they connected to their account), and they log in instantly. This is the best case scenario.
2. They assume they can sign in with any third-party service (for which they have an account), regardless of whether they have an account on the website they are trying to log into. The thought process for these folks goes something like this: “It says I can sign in with Facebook. I have a Facebook account. I should be able to sign in.�
3. They forget which service they used to sign up or if they used one at all, and thus hesitate or fail to log in.

To make matters worse, if someone picks the wrong provider, instead of signing in to the service they’re trying to use, they might end up signing up again, thereby creating a second account. While a website can do its best to match accounts from different services, there’s no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account definitively belong to the same person.

So, while third-party sign-in addresses some problems, it also creates a few new ones. In an attempt to solve some of these new sign-in issues, we’ve been experimenting with new log-in screen designs on Bagcheck.

Our most recent sign-in screen (below) is an attempt to reduce confusion and prevent the types of errors I have just described — admittedly, though, at the expense of one-click sign-in. In this design, people are required to enter their user name or email address to sign in. We use instant search results to match their input to an existing user on the website, so someone needs to type only the first few letters of their name to find their account quickly. This tends to be much faster than typing an entire email address. But because more than one person is likely to have the same name, we provide the ability to sign in with an email address as well.

Once someone selects their name or enters their email address, then their options for signing in are revealed. No sign-in actions are shown beforehand.

The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address.

True, in this design people can no longer sign in with one click, because the sign-in buttons are not visible by default. But this may be a trade-off worth making, for the following reasons:

• We keep people signed in until they explicitly sign out. So, hopefully people will rarely need to go through the sign-in process. Remember: the less people need to log in, the fewer sign-in problems you’ll have!
• The added amount of effort required to sign in is small: just start typing your name and select a search result, or enter your complete email address, and then click the sign-in button. It’s not one-click, but it’s not a lot of work either.
• Trying to sign in with an account provider that you have not set up on Bagcheck is no longer possible, because the log-in buttons don’t show up until after you have selected your name. This cuts down on duplicate accounts and confusion over which account you have signed up with or connected (especially on different browsers and computers where a cookie has not been set).

On mobile, however, these trade-offs may not be worth it. Logging into a website on a mobile device by typing is a lot more work than just tapping a button. So, in the Bagcheck mobile Web experience, we’ve kept the third-party sign-in buttons front and center, allowing people to log in with just one tap. It’s just another example of how the constraints and capabilities of different devices can influence design decisions.

The Bagcheck mobile Web experience keeps one-tap sign-in options visible.

Since launching this log-in experience on Bagcheck, we’ve gotten a lot of great feedback and ideas for improving the interactions. Many people have suggested using browser cookies to set a default sign-in option for returning visitors. While this might help people who return to the website using the same browser, we’ve seen many more sign-in issues when people use a different browser or computer. In these cases, a browser cookie won’t help.

Another common question is whether allowing anyone to search the list of Bagcheck users by name or email address reduces security. While this design does somewhat reduce the security of a Bagcheck account (compared to our previous log-in screen design), it’s no worse than many websites that let you sign in with your public user name, like Twitter.

And because all Bagcheck profile pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, we’ve seen a bit of increased concern over this same search capability being on the sign-in screen. So, if you’re thinking about trying this design, make sure your profile pages are public, and be aware that people may still be a bit sensitive about it.

We’ve All Got Email

Although signing into a service with one’s name may be too new for some people, logging in with an email address is common practice for most. Using a solution that brings together a lot of the ideas outlined in this article, Google’s Identity Toolkit and Account Chooser allow people to sign in across the Web using just their email address:

Google’s Identity Toolkit allows people to sign in with a number of email verification options.

When multiple accounts have been accessed in the same Web browser, each account is listed as a sign-in option, making account selection easier. If you want to try out this sign-in solution, you can opt in on Google’s website or implement it on your website with Google’s Toolkit.

Selecting from multiple accounts on Google’s experimental sign-in page.

The Little Things Matter, Too

The Bagcheck and Google examples we just looked at try to rethink log-in pages in big ways. But not all sign-in innovations need to be so comprehensive. Even small changes can have a big impact. For example, I mentioned earlier that inputting text precisely on mobile devices can be harder than on full keyboard computers. Coupled with obscured password fields, this can make logging into a website on a mobile device a challenge.

Facebook’s mobile Web experience tackles this in a small but useful way. If you enter an incorrect password when trying to sign in, the website will change the password field to plain text so that you can actually see your input. Facebook also offers an alternate way to log in, using your email address or phone number (screenshot below). It’s a small enhancement but one that can go a long way on mobile.

Facebook does a lot to help you log in on mobile.

It’s Not Over

As these examples illustrate, even the most common interactions on the Web (like logging in) could benefit from new ideas and design improvements. Not every idea I’ve walked through here will become part of all the log-in forms we encounter on the Web — chances are none of them will. But without trying, we’ll never know.

So, if you have some new ideas for signing in or any other Web interaction we’ve come to take for granted, try them out and let the rest of us know what you’ve learned!

Online Resources

• “Web Form Design: Filling in the Blanksâ€�
  Everything you need to know about designing effective and engaging Web forms.
• “Killing Sign-Up Formsâ€�
  Solutions for engaging people on websites without asking them to fill in a bunch of input fields.
• “Text Input on Mobile Is Hard, But…â€�
  … people enter text all the time on their mobile devices.
• “The Social Agent, Part 2: Connectâ€�
  Part of a Mozilla Labs concept series, on using the Web browser against your account provider online.
• Google’s Internet Identity Research
  Public information from Google on projects in the identity space.

(al)

© Luke Wroblewski for Smashing Magazine, 2011.

When auditing websites for accessibility I occasionally find elements that are incorrectly hidden with display:none. The most common example is probably skip links intended to help keyboard and screen reader users. The irony is that those well-intended skip links are made useless by display:none.

The pitfalls of using display:none have been widely known among accessibility-conscious web developers for many years (in Web terms). As I mentioned a couple of years ago in Hiding with CSS: Problems and solutions, setting an element’s display CSS property to none makes it completely invisible. It doesn’t generate a box, it doesn’t take up any place, it doesn’t affect the layout. display:none hides the element – and its descendants – visually, and it also hides the element from screen readers (most screen readers most of the time – see JAWS, Window-Eyes and display:none: Return to 2007 for more).

Read full post

Posted in Accessibility, CSS.

Copyright © Roger Johansson

An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.

Handling these typographic details on the Web brings new challenges and restrictions that need to be considered. Below are a few rules of thumb that will have you using typography more lucidly than ever before.

Setting Body Copy

Good typography comes down to communicating information, and the basis of information is good old-fashioned body copy  –  simple blocks of text. Here are a few ways to make your blocks of text nice and clean.

Indentation or Space After a Paragraph?

When signalling the end of a paragraph and the beginning of another, you can generally either indent or insert a space between the paragraphs. Doing both is redundant and creates awkward, irregular chunks of white space.

Indentation
Indent the first line of a new paragraph about 1 em (if your font size is 12px, then that would amount to 12 pixels). Indenting the opening paragraph of a new section would be redundant, because that paragraph would be the first in that page or section anyway.

Space after paragraph
A full line break of 1 em (like when you hit the “Return� key twice) is generally more than enough to signal a new paragraph. About 0.8 ems is sufficient.

Text set flush left (or ragged-right) creates an even texture and is easier to read. Because the Web allows for less typographic control, justified type usually creates rivers and big gaps in blocks of text.

Flush left (ragged-right)
In text set flush left, the lines will break naturally, resulting in a “ragged� right side of the column. This is generally considered easier to read because the eye can better distinguish one line from the next, because of the different line lengths. Additionally, studies have shown that readers score higher in comprehension and recall when text is flush left. Hyphenation should not be used with text that is flush left, because that would defeat the whole point of a ragged right.

Avoid justified type on the Web
Justified text is spaced out so that each line is of the same length. Because all lines have to be set at the same length, some variation in letter spacing (i.e. the space between letters), and word spacing (the space between words) is done to lengthen and shorten lines. This changes the overall texture of the body copy, making it less even.

High-end desktop publishing applications (such as Adobe InDesign) have sophisticated systems for justifying type so that it doesn’t produce “rivers� (large gaps in the text from too much word spacing). They use a combination of letter spacing, word spacing, hyphenation and glyph scaling (i.e. very slightly adjusting the width of individual letters) to produce an even texture in the body copy.

But there is no hyphenation control in CSS. Beyond JavaScript libraries that handle hyphenation and CSS3’s text-justify property, browsers don’t have very sophisticated measures for maintaining an even texture in blocks of text. This makes justified text on the Web highly susceptible to big holes and rivers in the body text.

Avoiding justified type on the Web is generally a good idea. At the optimal line length for reading (about 50 to 80 characters or 8 to 15 words), making lines of text all the same length, without hyphenation or subtle letter spacing, nearly always results in rivers.

One Space After a Period. Not Two.

Very few typographic debates match the intensity of whether there should be one or two spaces after a sentence.

This practice is a holdover from typographers of the Victorian era. The practice began when typewriters were introduced. Because early typewriters used monospaced fonts (meaning that the spaces between letters were always the same length), typists used two spaces to mimic the slightly wider spaces that typesetters were using after periods. Now that computers (and the fonts on them) are equipped with proportionally spaced (rather than monospaced) fonts, this practice is outdated, and it creates awkward breaks in the body text.

One space after a period is plenty to signal the end of a sentence. It also keeps the text block even.

For those who are still skeptical, consider this: the beginning of a new sentence is already indicated by a period, a full space and a capital letter. Adding yet another space merely pokes a hole in the body text and interrupts the flow of reading.

The typist may wish to continue using two spaces after a period, but the typographer should not.

Use Dashes Dashingly

Most fonts are equipped with at least two dashes: an en dash (–, –, which is the width of a lowercase “nâ€�) and an em dash (—, —, which is the width of a lowercase “mâ€�). Don’t confuse these with the hyphen (-), which isn’t a dash at all but a punctuation mark.

The Hyphen

Hyphens and dashes are confused to the point that they are now used almost interchangeably by some. Some fonts, such as Adobe Garamond Pro, retain hyphens in their original form; those hyphens look more like the diagonal stroke of a calligrapher’s pen than a straight horizontal line. You’ll also often see hyphens used as a replacement for a minus sign; however, a longer character is available in some fonts for this purpose.

Although the hyphen does look quite a bit like a dash or minus sign, it is a punctuation mark. It should be used primarily to hyphenate words in justified type. On the Web, this isn’t much of a concern because, as mentioned, there is no standard hyphenation control in browsers. The hyphen should also be used in compound modifiers (such as “fine-tuned�), to join digits in phone numbers, and in a few other rare cases (covered in detail on Wikipedia).

The En Dash and the Em Dash

In The Elements of Typographic Style – which is the unofficial bible of the modern typographer  –  Robert Bringhurst recommends that dashes in text should be the en dash flanked by two spaces. This is much less visually disruptive than using the em dash with no space—which is recommended in editorial style books such as The Chicago Manual of Style — because there is less tension between the dash and the characters on either side of it.

Why go against The Chicago Manual of Style in this case? The reason is that style manuals are concerned mostly with punctuation, not typography. An en dash surrounded by spaces achieves the same effect as an em dash with no spaces, but typographically it is less disruptive. This was a big debate between my editor and me when I was writing my book.

The practice of using two hyphens for a dash is a holdover from the days of typewriters. Besides being visually disruptive to smooth blocks of text, it is now unnecessary with the richer character sets that are available to typographers.

The en dash is also used to indicate ranges of numbers (such as “7–10 days�), although it isn’t flanked by spaces in this case.

Use Smart Quotes, Dummy

The quotation mark that is produced when you type ” on your computer is not a true quotation mark (unless your word processing or page layout program has automatic formatting). True quotes are sometimes called “smart quotes,â€� and the right one must be used according to whether you are opening or closing a quotation. To open a quotation, use “ (“), and to close a quotation, use â€� (”). For opening single quotes, use ‘ (‘), and for closing single quotes and apostrophes, use ’ (’). CMS’ such as WordPress usually either convert dumb quotes to smart quotes automatically or have plug-ins for the job.

Smart Quotes in Action

CNN uses dumb quotes, which look clunky and lifeless, while The New York Times uses smart quotes, which look clean and sophisticated:

Smart quotes are so sexy that their sinuous forms can be used as ornamentation, such as in this pull quote on Jason Santa Maria’s blog, which features smart quotes only in shadow form:

Quotation Marks Don’t Measure Up

The ” and ‘ on your keyboard are also often used to designate feet and inches (Steve Jobs is 6′ 2″). This, too, is technically incorrect. For feet, you should use ′ (′), and for inches, ″ (″). (Steve Jobs is, in fact, 6′ 2″.)

Note that many desktop publishing programs are so advanced that they automatically (and incorrectly) insert “smart� apostrophes and quotation marks in all of these situations. This can be changed in the program’s settings, but the quickest way around this is simply to copy and paste the correct mark from a “less sophisticated� text editor.

+1 For Proper Math Symbols

Sometimes in our haste, we use the wrong marks for math symbols. For example, as we learned above, a hyphen is not a minus sign (−, −). Additionally (no pun intended), neither an x nor an asterisk (*) is a multiplication symbol (×, ×).

Proper fractions not only add elegance to typography, but are more readily recognizable. Using a slash in your fractions (1/3) is not ½ (½) as cool as using the proper vulgar fraction (as it’s called).

Certain other symbols are harder to substitute with common characters, such as when you write 98¢ (¢) and 104° F (°). You might be tempted to just type these out as “centsâ€� and “degrees.â€�

There’s Always More With Ellipses

Sometimes, there’s more than meets the eye. Most of us type the ellipsis as three periods (…), but most fonts come equipped with their own character (…, …) that is slightly more spaced out. The Chicago Manual of Style would have you think that the proper ellipsis consists of periods separated by spaces (. . .), but any typographer knows that is too disruptive to body text. Some typographers prefer to set their own ellipses by using thin spaces ( ) between periods (. . .). But your judgment is best; pick the ellipsis treatment that makes your text block look most consistent (which will never be with full spaces between periods.)

Accent Marks And Other Diacritics Aren’t Passé

Sure, in the US you can work on your resume while sitting in a cafe, and it wouldn’t be much different than if you were working on your résumé in a café in France. No matter how naïve you are, sometimes using the proper diacritical mark is… critical. A diacritic is a mark placed near (usually above or below) a letter to change its sound. The most common diacritic in English is the acute (´) accent, which is used in a number of words borrowed from other languages and which is sometimes very important, such as for the sake of declaring your passion for saké.

The acute accent is often confused with the grave accent (`), which leans to the left and is readily available on US keyboards below the tilde (~). The grave accent is actually much less common in English than the acute accent. If you ever see one again, you might think you were having a déjà vu.

To insert an acute accent on Mac OS X, hold down Option while typing “e,� and then type the letter that you want to appear below the accent (so, if you want “é,� you’d be typing “e� twice). Play around with Option + u, i and ~, and a whole world of diacritics will open for you.

Ligatures Bring Letters Together

In the early days of printing, when type was set in lead, the lead slugs on which characters were set made it difficult to set certain character pairs close enough. For example, in the letter combination “fi,� the top terminal of the “f� stuck out so far that the letter couldn’t be set close enough to the “i� because of the dot on the “i.� Thus, many fonts (usually the classic ones, such as Adobe Garamond) have ligatures for certain pairings that actually meld the letterforms together. Some modern fonts, such as Helvetica, also have ligatures, but their effect is negligible.

Below, you can see that ligatures are needed in some fonts more than others. Notice how an “fi� ligature is more critical to clean typography in Adobe Garamond than it is in Helvetica. Because of this, different fonts come with different ligatures.

In addition to “fi,� ligatures are most commonly needed for the groupings “fl,� “ff,� “ffi� and “ffl.� Below you can see that Apple makes beautiful use of the “ffl� ligature in the type treatment of “iPod shuffle.�

Using Ligatures Practically

Obviously, typing in ligatures every time you need them is impractical. Even if you did, your content might not ultimately be displayed in a font that is equipped with the appropriate characters. Fortunately, plug-ins such as jQuery’s Ligature.js will automatically insert the most commonly supported ligatures where appropriate.

But, be careful: even if the proper characters are available, you might make it difficult for users to search for text on the page. Currently, Internet Explorer and WebKit-based browsers such as Chrome and Safari match ligatures to their corresponding letter pairs when the search command is used (for example, when a user searches for “fig� on the page), whereas Firefox does not.

CSS3′s font-variant-ligatures Property

CSS3’s font-variant-ligatures property displays the proper ligatures without interfering with the actual HTML code of the page, thus preserving full functionality of the search command in all browsers. In this case, while Internet Explorer, Chrome and Safari do not currently support this property, Firefox does.

So, if you apply ligatures at the content level, then your Firefox users won’t be able to use the search command for them. And if you use font-variant-ligatures, only your Firefox users will see the ligatures. Because of the spotty browser support for ligatures, ignoring ligatures altogether in the body copy would not be unreasonable. A lack of ligatures in big headlines and headings might be more obvious, though, so picking your preferred method of support there might be worthwhile.

Being Reasonable

Obviously, keeping track of and implementing some of these typographic details might seem pretty tedious. Fortunately, most Web frameworks and CMS’ have plug-ins that take care of them for you, and some of CSS3’s typography controls are at least beginning to be supported in browsers.

But as with all matters of design and production, economy comes into play. You may decide that implementing some of these details just isn’t worth the trouble. What’s important is at least knowing typographic etiquette, so that you can rely on it when it matters and make wise decisions that are appropriate for your project.

Other Resources

You may be interested in the following articles and related resources:

• How to Type
  Learn how to actually type these characters on your computer.
• The Elements of Typographic Style, Robert Bringhurst
  The Amazon ordering page for the unofficial bible of modern typographers. This book is full of great advice on any typographic detail you can imagine.
• The Elements of Typographic Style Applied to the Web
  An adaptation of Robert Bringhurst’s classic book for the Web.

This post is based upon a chapter from David’s upcoming book, Design for Hackers: Reverse-Engineering Beauty, which will be published in September 2011.

(al)

© David Kadavy for Smashing Magazine, 2011.

An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.

Handling these typographic details on the Web brings new challenges and restrictions that need to be considered. Below are a few rules of thumb that will have you using typography more lucidly than ever before.

Setting Body Copy

Good typography comes down to communicating information, and the basis of information is good old-fashioned body copy  –  simple blocks of text. Here are a few ways to make your blocks of text nice and clean.

Indentation or Space After a Paragraph?

When signalling the end of a paragraph and the beginning of another, you can generally either indent or insert a space between the paragraphs. Doing both is redundant and creates awkward, irregular chunks of white space.

Indentation
Indent the first line of a new paragraph about 1 em (if your font size is 12px, then that would amount to 12 pixels). Indenting the opening paragraph of a new section would be redundant, because that paragraph would be the first in that page or section anyway.

Space after paragraph
A full line break of 1 em (like when you hit the “Return� key twice) is generally more than enough to signal a new paragraph. About 0.8 ems is sufficient.

Text set flush left (or ragged-right) creates an even texture and is easier to read. Because the Web allows for less typographic control, justified type usually creates rivers and big gaps in blocks of text.

Flush left (ragged-right)
In text set flush left, the lines will break naturally, resulting in a “ragged� right side of the column. This is generally considered easier to read because the eye can better distinguish one line from the next, because of the different line lengths. Additionally, studies have shown that readers score higher in comprehension and recall when text is flush left. Hyphenation should not be used with text that is flush left, because that would defeat the whole point of a ragged right.

Avoid justified type on the Web
Justified text is spaced out so that each line is of the same length. Because all lines have to be set at the same length, some variation in letter spacing (i.e. the space between letters), and word spacing (the space between words) is done to lengthen and shorten lines. This changes the overall texture of the body copy, making it less even.

High-end desktop publishing applications (such as Adobe InDesign) have sophisticated systems for justifying type so that it doesn’t produce “rivers� (large gaps in the text from too much word spacing). They use a combination of letter spacing, word spacing, hyphenation and glyph scaling (i.e. very slightly adjusting the width of individual letters) to produce an even texture in the body copy.

But there is no hyphenation control in CSS. Beyond JavaScript libraries that handle hyphenation and CSS3’s text-justify property, browsers don’t have very sophisticated measures for maintaining an even texture in blocks of text. This makes justified text on the Web highly susceptible to big holes and rivers in the body text.

Avoiding justified type on the Web is generally a good idea. At the optimal line length for reading (about 50 to 80 characters or 8 to 15 words), making lines of text all the same length, without hyphenation or subtle letter spacing, nearly always results in rivers.

One Space After a Period. Not Two.

Very few typographic debates match the intensity of whether there should be one or two spaces after a sentence.

This practice is a holdover from typographers of the Victorian era. The practice began when typewriters were introduced. Because early typewriters used monospaced fonts (meaning that the spaces between letters were always the same length), typists used two spaces to mimic the slightly wider spaces that typesetters were using after periods. Now that computers (and the fonts on them) are equipped with proportionally spaced (rather than monospaced) fonts, this practice is outdated, and it creates awkward breaks in the body text.

One space after a period is plenty to signal the end of a sentence. It also keeps the text block even.

For those who are still skeptical, consider this: the beginning of a new sentence is already indicated by a period, a full space and a capital letter. Adding yet another space merely pokes a hole in the body text and interrupts the flow of reading.

The typist may wish to continue using two spaces after a period, but the typographer should not.

Use Dashes Dashingly

Most fonts are equipped with at least two dashes: an en dash (–, –, which is the width of a lowercase “nâ€�) and an em dash (—, —, which is the width of a lowercase “mâ€�). Don’t confuse these with the hyphen (-), which isn’t a dash at all but a punctuation mark.

The Hyphen

Hyphens and dashes are confused to the point that they are now used almost interchangeably by some. Some fonts, such as Adobe Garamond Pro, retain hyphens in their original form; those hyphens look more like the diagonal stroke of a calligrapher’s pen than a straight horizontal line. You’ll also often see hyphens used as a replacement for a minus sign; however, a longer character is available in some fonts for this purpose.

Although the hyphen does look quite a bit like a dash or minus sign, it is a punctuation mark. It should be used primarily to hyphenate words in justified type. On the Web, this isn’t much of a concern because, as mentioned, there is no standard hyphenation control in browsers. The hyphen should also be used in compound modifiers (such as “fine-tuned�), to join digits in phone numbers, and in a few other rare cases (covered in detail on Wikipedia).

The En Dash and the Em Dash

In The Elements of Typographic Style – which is the unofficial bible of the modern typographer  –  Robert Bringhurst recommends that dashes in text should be the en dash flanked by two spaces. This is much less visually disruptive than using the em dash with no space—which is recommended in editorial style books such as The Chicago Manual of Style — because there is less tension between the dash and the characters on either side of it.

Why go against The Chicago Manual of Style in this case? The reason is that style manuals are concerned mostly with punctuation, not typography. An en dash surrounded by spaces achieves the same effect as an em dash with no spaces, but typographically it is less disruptive. This was a big debate between my editor and me when I was writing my book.

The practice of using two hyphens for a dash is a holdover from the days of typewriters. Besides being visually disruptive to smooth blocks of text, it is now unnecessary with the richer character sets that are available to typographers.

The en dash is also used to indicate ranges of numbers (such as “7–10 days�), although it isn’t flanked by spaces in this case.

Use Smart Quotes, Dummy

The quotation mark that is produced when you type ” on your computer is not a true quotation mark (unless your word processing or page layout program has automatic formatting). True quotes are sometimes called “smart quotes,â€� and the right one must be used according to whether you are opening or closing a quotation. To open a quotation, use “ (“), and to close a quotation, use â€� (”). For opening single quotes, use ‘ (‘), and for closing single quotes and apostrophes, use ’ (’). CMS’ such as WordPress usually either convert dumb quotes to smart quotes automatically or have plug-ins for the job.

Smart Quotes in Action

CNN uses dumb quotes, which look clunky and lifeless, while The New York Times uses smart quotes, which look clean and sophisticated:

Smart quotes are so sexy that their sinuous forms can be used as ornamentation, such as in this pull quote on Jason Santa Maria’s blog, which features smart quotes only in shadow form:

Quotation Marks Don’t Measure Up

The ” and ‘ on your keyboard are also often used to designate feet and inches (Steve Jobs is 6′ 2″). This, too, is technically incorrect. For feet, you should use ′ (′), and for inches, ″ (″). (Steve Jobs is, in fact, 6′ 2″.)

Note that many desktop publishing programs are so advanced that they automatically (and incorrectly) insert “smart� apostrophes and quotation marks in all of these situations. This can be changed in the program’s settings, but the quickest way around this is simply to copy and paste the correct mark from a “less sophisticated� text editor.

+1 For Proper Math Symbols

Sometimes in our haste, we use the wrong marks for math symbols. For example, as we learned above, a hyphen is not a minus sign (−, −). Additionally (no pun intended), neither an x nor an asterisk (*) is a multiplication symbol (×, ×).

Proper fractions not only add elegance to typography, but are more readily recognizable. Using a slash in your fractions (1/3) is not ½ (½) as cool as using the proper vulgar fraction (as it’s called).

Certain other symbols are harder to substitute with common characters, such as when you write 98¢ (¢) and 104° F (°). You might be tempted to just type these out as “centsâ€� and “degrees.â€�

There’s Always More With Ellipses

Sometimes, there’s more than meets the eye. Most of us type the ellipsis as three periods (…), but most fonts come equipped with their own character (…, …) that is slightly more spaced out. The Chicago Manual of Style would have you think that the proper ellipsis consists of periods separated by spaces (. . .), but any typographer knows that is too disruptive to body text. Some typographers prefer to set their own ellipses by using thin spaces ( ) between periods (. . .). But your judgment is best; pick the ellipsis treatment that makes your text block look most consistent (which will never be with full spaces between periods.)

Accent Marks And Other Diacritics Aren’t Passé

Sure, in the US you can work on your resume while sitting in a cafe, and it wouldn’t be much different than if you were working on your résumé in a café in France. No matter how naïve you are, sometimes using the proper diacritical mark is… critical. A diacritic is a mark placed near (usually above or below) a letter to change its sound. The most common diacritic in English is the acute (´) accent, which is used in a number of words borrowed from other languages and which is sometimes very important, such as for the sake of declaring your passion for saké.

The acute accent is often confused with the grave accent (`), which leans to the left and is readily available on US keyboards below the tilde (~). The grave accent is actually much less common in English than the acute accent. If you ever see one again, you might think you were having a dèjá vu.

To insert an acute accent on Mac OS X, hold down Option while typing “e,� and then type the letter that you want to appear below the accent (so, if you want “é,� you’d be typing “e� twice). Play around with Option + u, i and ~, and a whole world of diacritics will open for you.

Ligatures Bring Letters Together

In the early days of printing, when type was set in lead, the lead slugs on which characters were set made it difficult to set certain character pairs close enough. For example, in the letter combination “fi,� the top terminal of the “f� stuck out so far that the letter couldn’t be set close enough to the “i� because of the dot on the “i.� Thus, many fonts (usually the classic ones, such as Adobe Garamond) have ligatures for certain pairings that actually meld the letterforms together. Some modern fonts, such as Helvetica, also have ligatures, but their effect is negligible.

Below, you can see that ligatures are needed in some fonts more than others. Notice how an “fi� ligature is more critical to clean typography in Adobe Garamond than it is in Helvetica. Because of this, different fonts come with different ligatures.

In addition to “fi,� ligatures are most commonly needed for the groupings “fl,� “ff,� “ffi� and “ffl.� Below you can see that Apple makes beautiful use of the “ffl� ligature in the type treatment of “iPod shuffle.�

Using Ligatures Practically

Obviously, typing in ligatures every time you need them is impractical. Even if you did, your content might not ultimately be displayed in a font that is equipped with the appropriate characters. Fortunately, plug-ins such as jQuery’s Ligature.js will automatically insert the most commonly supported ligatures where appropriate.

But, be careful: even if the proper characters are available, you might make it difficult for users to search for text on the page. Currently, Internet Explorer and WebKit-based browsers such as Chrome and Safari match ligatures to their corresponding letter pairs when the search command is used (for example, when a user searches for “fig� on the page), whereas Firefox does not.

CSS3′s font-variant-ligatures Property

CSS3’s font-variant-ligatures property displays the proper ligatures without interfering with the actual HTML code of the page, thus preserving full functionality of the search command in all browsers. In this case, while Internet Explorer, Chrome and Safari do not currently support this property, Firefox does.

So, if you apply ligatures at the content level, then your Firefox users won’t be able to use the search command for them. And if you use font-variant-ligatures, only your Firefox users will see the ligatures. Because of the spotty browser support for ligatures, ignoring ligatures altogether in the body copy would not be unreasonable. A lack of ligatures in big headlines and headings might be more obvious, though, so picking your preferred method of support there might be worthwhile.

Being Reasonable

Obviously, keeping track of and implementing some of these typographic details might seem pretty tedious. Fortunately, most Web frameworks and CMS’ have plug-ins that take care of them for you, and some of CSS3’s typography controls are at least beginning to be supported in browsers.

But as with all matters of design and production, economy comes into play. You may decide that implementing some of these details just isn’t worth the trouble. What’s important is at least knowing typographic etiquette, so that you can rely on it when it matters and make wise decisions that are appropriate for your project.

Other Resources

You may be interested in the following articles and related resources:

• How to Type
  Learn how to actually type these characters on your computer.
• The Elements of Typographic Style, Robert Bringhurst
  The Amazon ordering page for the unofficial bible of modern typographers. This book is full of great advice on any typographic detail you can imagine.
• The Elements of Typographic Style Applied to the Web
  An adaptation of Robert Bringhurst’s classic book for the Web.

This post is based upon a chapter from David’s upcoming book, Design for Hackers: Reverse-Engineering Beauty, which will be published in September 2011.

(al)

© David Kadavy for Smashing Magazine, 2011.

Not long ago, on our sister site Smashing, we had a post discussing the communities adoption of HTML5 and CSS3 before they have become standards, and during that dialog we stumbled across another point that needed a bit more diving into. It was proposed that client’s expectations are somewhat unrealistic when it comes to their websites looking the same across all browsers and systems. This is not only something that the client is more than likely not going to be too happy to hear, but as it turns out, this is also a topic that some of us in the design and development communities are uncomfortable broaching with our clients.

We believe that the client will not want to hear what we have to say or that they will see this as a positive, so we often refuse to speak such evil. Image Credit

For whatever reasons, some members of the community, who may believe in this idea themselves, find it nearly impossible to explain to the client so they make no attempts to. They simply spend countless hours and suffer through numerous headaches trying to appease this unreasonable and unnecessary client standard which is in point of fact, looked on as an impossibility within the community. So why is it that we have a hard time explaining this understood truism to clients? The answers to that question are nearly as numerous as the reasons themselves that a webpage cannot look the same. So we hope to handle this for you.

This post came about with a focus on our clients and getting them to understand this idea, so that we can use this article as a guide for when we need to explain this to them, or as a reference that we can direct our clients straight to for their own benefit. We have approached the post with two basic fronts to take on in this discussion. Why a site can not look the same across different browsers. And why a site should not look the same across multiple browsers. Both of which are important to understand as we move forward in this dynamic and ever-changing landscape.

The Reasons Why it Can Not

First we are going to look at a few of the reasons why a website simply can not look the same across multiple browsers, because at the core, these are really the ones that should matter the most. It would be one thing if we were misleading the client or fooling ourselves into accepting this idea when it actually were possible to achieve, but that just is not the case. And here is why…

Vendors and Standards

One of the main reasons that a site will have some variance comes down to the basics, the multiple vendors and the standards they adopt per each version they release. Given that there are so many different options for browser, each with their own set of out of the box specs, you have to expect that there will be elements and design accents that do not fully display or function the same way across the various machines it will be viewed on. That is just an unfortunate truth of the industry right now.

Instead of looking passed this roadblock at all of the potential and possibility that lies beyond it, we allow these vendors and slow standard adoption to stop us in our progress. Image Credit

Especially given the W3C’s slow process of implementing new standards, vendors are often reticent to dive right in and put these cutting edge techniques into full practice. Which is decidedly their choice, but it has been said that the more the design and development community push the vendors to move forward, the better our chances of getting these new standards put into practice will be. But we need our clients to be on board with us to allow for this growth, and we need to help them to understand this landscape we are working in. One where certain areas of consistency have to be sacrificed.

Plugins and Addons

Not only are there multiple vendors making different browsers for the online market, there are also a massive amount of plugins and addons that will not only enhance the experience for the user, it can effectively alter the look of the sites opened up within its tabs. This is something else that we have to consider when trying to achieve this uniformity of presentation across the vast spectrum of browser options.

One of the main areas where we see concern from clients on this tends to come from that handy little ad blocker plugin which prevents ads from displaying and often times stops pop-ups from showing up on the page as well. When clients are seeing this for the first time, without any kind of heads up or a warning from us, they are not always going to have the best of reactions. This is why it is important to explain to our clients the various ways that their site can be impacted, or even just that they can be impacted by said addons and plugins. This way they have an idea of what to expect.

Individual User Preferences

Not only can the different browsers and browser addons effect the way a site is rendered from machine to machine, but so can numerous other individual user preferences. This can be a wildcard that can have various impacts on the site’s presentation that most clients may not consider when they are planning the approach they want to take on their site. Most of us take our own experience for granted, believing that this is the same experience every user has when they venture out on the interwebs, and that goes the same for our clients. They may be operating under this same assumption and we need to point out how unrealistic and unreasonable this perspective is.

Standard and Widescreen Devices

Another factor that can have more minor impacts on the way the site looks in the browser, but impacts nonetheless, are the plethora of screen sizes from device to device and user to user. From standard to widescreen devices, the screen size can determine how much of your site is displayed at any given time. Controlled by the user, who can freely adjust their browser window to further relegate your site into a smaller viewable surface. Clients might forget to take these considerations into account when they are formulating their ideas to kick off the process.

Sometimes we forget that our setup is not always reflective of every users hardware and we forget that there is more than one kind of display device in use. Image Credit

They need to know about these possibilities and the impacts they could have on the site. For instance on a blog, some designs with sidebars have the sidebar move to beneath the main content area should the browser window be scaled down enough. This is not often something we think about letting the client know, but if they happen across it on their own they may become slightly disturbed with no context or understanding about said positioning adjustments. Though these may not be regular issues faced, these are just further examples of the small details that can impact a site’s presentation from browser to browser.

The Mobile Market Factor

If ever there has been an entire market that has opened up beyond expectations to completely flip this truism on its head and give us an easy example that helps to prove this rule, then the mobile market would be the one. This quickly growing market has taken the web to interesting new heights and altered the basic approaches that we have taken to designing and developing websites And the entire market exemplifies the point we are trying to get our clients to see. Especially in the wake of this unforeseen X factor.

Not only has the mobile web caused us to see this idea much more clearly, but it also allows for the idea to be more easily digested and embraced by our clients. Mobile devices have seen a much more scaled back approach to the web being taken on sites, not just with the appearance, but also with the usability of the overall experience. The way users interact with a site and relate to and receive the content is much different, and thus requires an approach that compliments this smaller, generally touch navigated presentation. Once clients can see and accept this variance, others might be easier to digest as well.

The Reasons Why it Should Not

Now that we have gone over a handful of the reasons why having a site look the same across multiple browsers and devices can not be done, we are going to go through a few reasons why we should not even make this attempt at a visual consistency that will not be achievable. Beyond just the fact that it is not possible, that is…

Usability Matters Most

First up we are going to talk about usability. The look is certainly important to any website, but the look is always trumped in importance by the overall usability of the site. That is just a given. We can have all the fancy design elements in our work that we want, but in the end, how it works is the more vital aspect that needs to be consistently looked after. That is how we should view these projects, focusing not on if they look the same in every browser, but that they basically function the same way in every browser.

We have to remember that the way it looks is not as vital as the way it works. Every cog should be firmly in place. Image Credit

This is the point that we should be stressing to our clients when we are trying to get them to accept and allow for this variance in the look of the site. That these minor differences in the form are not going to be the main focus of the user, and that is who should matter to the client. No, the users are going to be concerned mainly with the function, and so should we. In this case, the appearance of the site is completely secondary.

It is What Necessity Demands

Just as necessity is the key to innovation, it is also key in steering our design and development decisions, or rather it should be. In other words, necessity should always be the key to our motivation when we are designing or developing a project. And just as we discussed, with the mobile web explosion, it is necessary to have and allow for these variances in the sites that we build. Otherwise, we are relegated to a much more stagnant industry that refuses to grow because we are sacrificing innovation to achieve a uniformity that is unnecessary and unreasonable.

So long as we are operating under this principle of doing whatever is necessary to deliver the best possible solution for our client’s and their user’s needs, then we should have an easier time explaining to the client why these differences have to be allowed. There is no since in wasting valuable energy trying to pull off something that is not going to come together in that idealistically dreamy way, when we can clearly see it is not necessary. For it is impossible.

Every User Counts

Another reason that we should easily be able to get the client to see why this approach should not be attempted is because every user counts. In trying to achieve this universal presentation, there are often going to be compromises made that will inevitably slight one segment of the audience in favor of another. However, it does not have to be that way. We need to remember that every user’s experience matters, and they should be able to get just as much enjoyment and use from the site as everyone else.Even if that means helping them along to a better browser that will allow them to do so.

We want to keep each user in mind and try to find the best way to deliver a solid experience to them that we can. Image Credit

This is not always in the user’s control as they are not always using their own machine, however, as long as we provide them with a quality experience then letting them know it could be even easier and more enhanced via another choice of browser is not forcing their hand in any way. We have simply provided them with an alternate course of action in a friendly, unobtrusive manner that shows we care about the experience they had on the site and are looking for ways to give them more. If we hold back anything from a segment of the online audience because others are not caught up with them, then how is that giving every user the optimal site performance? It’s not.

The Hack Factor

Though it is done on a fairly large scale, having to include vendor specific hacks in your code in order to have the site rendered ‘properly’, which in this case just means the same as it does every where else, is not the best course of action. Instead having natural degradations of effects and elements is the more preferred and natural way to have the site coded and presented. Sacrificing this idea of having the site look the same across the board tends to call for a bit of hacked code, which if you or your clients are concerned with validation, may not work to your overall advantage.

A Sign of Being Behind the Times

Another consideration that needs to be made by the client is that if we have to hack, and slight our way to this visual synchronicity then the site may be compromised into a more dated, less than cutting edge style and feel. By not allowing for the pushing of envelopes for those users who can gain the full experience the site could seem like it is somewhat behind the times, at least in comparison to other competitors that your client is up against.

Clients tend to want to put forward an up to date, fresh face to the world. They want to remain relevant, not feel like a relic. Image Credit

Not saying that is how it will always be seen, but there may be instances where it does reflect poorly on the company and their ability to stay ahead of the game and on top of the markets they are operating in. Users are going to be more apt to put their trust in a brand that they view as able to keep up with the changes in technology. If your site gives the impression of being behind the times, then you might find that users are going to be moving on and looking for a company that they feel is more on the edge, not sluggishly bringing up the rear.

Never Fear: Benefits Made Clear

Now sometimes we find ourselves afraid of accepting this idea, believing that we are still somehow compromising the site, but never fear, we have singled out a couple of points to briefly retouch on below to make sure that we drive them home and perhaps help put your minds at ease helping you to see some of the benefits of this acceptance to point out to clients.

Still Connects with Consistency

Though the site may slightly change in appearance between browsers and devices you can still have that connection of consistency through other elements that are able to remain unchanged. So this approach does not sacrifice the consistency that we have all held up as a guiding principle in our work, it just comes at it from a different approach. One that keeps after what tends to matter most to your users, the usability.

Time and Money Saver

By accepting this path of variance the project can actually be offered a bit of a break on the time it takes to put together and test out. Which tends to translate into money saved on the client’s end, which is usually an easy sell. Without having to track down hacks and such to keep the site visually identical between browsers the project can progress more smoothly and in a more timely fashion.

Embracing Innovation

As previously mentioned, by compromising the site to keep up this universal appearance regardless of the browser it is displayed in can make the site feel less than innovative, and can thereby reflect poorly on the client’s business. So by allowing for this visually varied approach you can create a sense of embracing innovation, making the company seem more progressive and forward thinking to some of their users.

That’s a Wrap!

So that is a basic breakdown of the reasons why we can not and should not try to make a website appear the same across the vast spectrum of browsers that populate the market today. Hopefully it has given you some ideas on how to broach this subject with your clients, or allowed for a place that you can direct them to read up on this discussion for themselves. Go ahead and let us know what approach you have taken or would take with your own clients in the comment section below.

Consider Some of Our Previous Posts

• Why We Should Start Using CSS3 and HTML5 Today is the article that got this ball rolling in the first place.
• Cross-Browser Testing: A Detailed Review Of Tools And Services takes on the task of making cross-browser a hint easier. Also allows you to see some of the variance between browsers.

(rb)