BlogmyQuery – BMQ

Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin. But don’t be baffled — and don’t despair. While there are no easy-to-follow rules on how best to choose a typeface, there are many tried-and-true principles you can quickly learn and apply to make an appropriate typeface choice. If you work systematically through the options below, you’ll have a winning typeface choice in no time. Let’s get started.

What Is Your Goal?

The first thing you have to do in order to choose a typeface is form a strong impression in your mind about how you want your audience to react to the text. This is your goal, and it will guide the process. You might provide this impression, or it might be dictated to you by your client, or it may be determined by your audience. Whatever the case, your choice of typeface needs to strike a good combination of both legibility and readability, while remaining appropriate for the audience and the message. Each of these characteristics requires some degree of independent consideration. As you may already know from experience, it’s easy to go about this the wrong way and get overwhelmed. This problem can be compounded as a design evolves.

Perhaps the hardest part of breaking down the typeface selection process is understanding which parts are more subjective and which parts are more objective. After reading and digesting your client’s text, it is easier to start with the objective aspects of typeface selection because they — by default — make subjective decisions for us. There are no fixed positions on the spectrum from subjective to objective. However, we know that legibility is more easily quantifiable than a mood. Let’s start with the two most objective attributes — legibility and readability.

Legibility

It may seem at first glance that legibility and readability are the same thing, but they are not. Legibility refers to the design of the typeface, as in the width of the strokes, whether or not it has serifs, the presence of novel type design elements etc. It is easy to tell one letterform from another in a legible typeface. For instance, decorative typefaces have low legibility because they are primarily meant to be seen at a glance, rather than read at length. Conversely, typefaces designed for novels or newspapers have very high legibility. You need to design a specific, overall legibility based on the function of the text.

Consider this example where the left block of text is set in Tobin Tax, a decorative serif typeface. Compare it to the same text set in Sabon, a classic and highly-legible serif typeface. Where does your typeface choice fall between these two extremes?

Quick tips for great legibility:

• Choose typefaces with conventional letterforms.
  Letterforms composed of unique shapes, artistic deformations, excessive ornamentation or other novel design elements cause the reader to have to process what they are looking at first, instead of just taking in the message. Novelty always comes at the cost of immediate comprehension.
• Choose typefaces with generous spacing.
  Tight tracking causes the eye to fill in visual gaps between the various shapes that make up different letterforms, thus slowing down the time it takes to both recognize letterforms and word and sentence structures. Generous spacing allows the eyes to proceed as fast as the cognitive skills of the reader will permit.
• Choose typefaces with a tall x-height.
  A “shortâ€� x-height decreases legibility of certain letters. The apertures, or openings, of similar lowercase letters like “c” and “e” are distinguished with greater ease if the x-height is generous.

  Please notice: The x-height shouldn’t be “high�. The font size, weight and width must just be chosen according to the x-height of the font. Sure, at first glance one typeface with a larger x-height might look more legible than another, but the the latter is just set too small (or too bold or too condended). In addition, a large x-height only helps a few letters like e, s, a (with double-storey shape). Other characters (with descenders, diacritical marks) suffer from a larger x-height. (Thanks to Ralf Herrmann for clarification!)

Readability

How your typeface is set, combined with the basic legibility of the typeface, yields a certain level of readability. Readability is the dynamic interaction of the type style, size, tracking, leading, color and other properties all combined into one overall impression. They add up to a certain typographic style which has a quantifiable degree of readability. For instance, you could use a style that has an intentionally low readability that is part of the message. Or you could focus on designing a high readability because your message is complicated, and you don’t want your type style to hinder the audiences’ understanding in any way. In most cases, communication comes before style, so resolve readability first.

Let’s take our previous example of Sabon and alter the readability. On the left, we have taken the text and decreased the font size, altered the tracking and leading, lightened the color, and set the block to full justification. It’s now a mess with unattractive text rivers. On the right, we’ve left the unaltered for an obvious comparison. Changing several independent factors, as you can see, can add up to quite a difference.

Quick tips for great readability:

• Choose typefaces that were designed for the purpose you are using them for (display fonts for headlines, body copy typefaces for body copy, etc.).
  Choosing a font designed for display purposes, like headlines or posters, means that it will not function very well as a body text typeface where larger quantities of text will be read. Conversely, a typeface designed for extended reading loses its impact in relation to how large it is blown up.
• Align text to “right ragged” for comfortable word spacing online to avoid “rivers”.
  “Force-justified” text, or hyphenless justification, always creates ugly rivers and awkward spacing which causes the reader to lose the natural flow of the text as the eye has to make various leaps and jumps to complete words and sentences. Currently, there is no proper native support for hyphenation in CSS, but you could use Hyphenator.js for a proper client-side hyphenation online.
• Make sure your line height is greater than the point size of your typeface for multi-line texts.
  It’s difficult for the eye to track across a line of text and stay “on track” if the lines above and below it are too close to it. Our eyes are easily confused especially when wrapping from the end of one line of text to another. How many times have you read the same line of text twice on generously-spaced lines of text? Probably once — of course if the content is easy to understand as well. Don’t make your readers work harder than they have to.

With the two most subjective factors out of the way, let’s move on to appropriateness.

Aspects of Appropriateness

Some typefaces are more suitable for a design task than others. Appropriateness is something you can learn by both experience with a typeface, and by other attributes of the typeface, including its history and original purpose. Here are four attributes of a typeface you can consider.

Design Intent

It’s very helpful to consider the design intent of the typeface. Many popular typefaces have detailed write-ups and reviews, so it’s really inexcusable to not know at least something about your choice. If a typeface was designed for signage, like Cooper Black, it probably isn’t going to work well set as the body copy of a book. That might be an obvious example, but don’t miss the subtleties in your own choices. Again, it only takes a few seconds to look something up, or flip open a decent typography book to get some basic facts, and you’ll be wiser for it.

Aesthetics

Your typeface should conform to the aesthetics expected by the audience for which the design is intended. For instance, if you are designing a piece for a bank, setting their logo or the text for an ad campaign in Souvenir might be a little too light hearted and free-spirited — not qualities one would want to associate with people who manage your money. However, the stately and stable-minded Bembo might be a better choice for this situation. The more you match the gist of the typeface to the gist of your topic, the easier success will come.

In this example, we’ve created two combinations of typefaces. The first one, Lithos and Souvenir, create an aesthetic more suited to a children’s museum than a bank. The second combination is composed of Clarendon and Bembo, which fits the topic like a well-tailored banker’s suit.

Quick tip for judging aesthetics:

• Look at a typeface and write down several words the typeface “says” to you about itself, and then compare that to what your design objective for the typeface is. Do they correlate? Be convinced, after this analysis, that you have the right typeface choice. If you are not sure, it would be best to not proceed.

Mood

As you read through these factors, you’ll realize that they overlap a little. Mood, for instance is a dynamic synthesis of what you get when you consider the aesthetics of a typeface together with the readability you’ve designed into your piece, along with, of course, the perceived meaning of the text itself. For instance, with one typeface and one text you can evoke a mood of excitement or panic. The typeface itself first evokes a strong reaction, but the readability of the design and the text itself can take communication to another level.

On the example below, notice how the implied meaning of the phrase “kick back and relaxâ€� is dramatically changed by altering the typeface and readability. Mood is very powerful, and it’s a good idea to have a second set of eyes reviewing your work to make sure you don’t send the wrong message. This demonstrates that matching the basic personality of the typeface, and its readability, to the intended emotional response of the message is a sure-fire recipe for success.

Quick tip for pinpointing mood:

• Think of the exact opposite of the mood you want to create and look at your work on a given design thus far. If you can’t come up with an opposite mood, it might mean you have not created a strong impression of the right mood. Remember, the opposite of neutral is neutral.

Personal Choice

Many times, a typeface just strikes you for some reason as appropriate. Your right brain knows it but your left brain can’t understand why. If you can make it work based on that alone, go for it. You would of course do well to get informed about the typefaces in your arsenal, especially if you keep using them over and over. You may discover that your use of a typeface has nothing to do with its original intent, but it can still look great.

For instance, you might like OCR-A on the cover an album design, though OCR-A was designed specifically for optical scanners so that computers can recognize the words through software. So what if computers are supposed to read it? If it fits the design intent of your project and you can pull it off, do it. Just do it well or choose another typeface.

Quick tip about personal choice

• Trust your gut but make sure you can quantify, in typographic terms, aspects of your choice so that you can defend your design decisions armed with intelligent answers. You may also find that a defense of  even your most subjective choice goes a long way if it’s clear you did think it out and have a reasonable rationale.
• Come up with your type selection quality scale.
  You might want to consider creating your personal checklist with type selection details which you can then consider and apply in your typographic choices. This would help quantify your decisions and make them comparable.

A Few Technical Considerations

Don’t overlook the obvious. For instance, if your design job is going to include work using a lot of numbers, you’ll want to make sure you choose a typeface that has the kinds of numbers you want to use. Some typefaces use Old Style, or lowercase numbers. Other typefaces use Lining, or uppercase numbers.

You might be persuaded that large spreadsheets of numbers for technical work are easier to read with lining style numbers because they don’t use the lowercase descenders and are more even on the eye when used in large quantities. But if your design features a lot of up-and-close with over-sized numbers, the Old Style numbers might be infinitely more pleasant. Again, the mood you want to convey plays a role in this choice: Old Style numbers look… old. That could be good in the right context but not so good in the wrong one.

To add to this list, you might consider if a typeface has a full set of ligatures and if it contains true small cap characters. Missing ligatures can look unattractive at large sizes. Fake small caps usually look odd because stroke widths aren’t compensated for. In short, it’s best to choose a typeface that is as complete as possible. And if you choose a free typeface, you’ll find that it is often these critical “extras” that are missing. Make sure that the free typefaces have exactly the features you need for your design and that they are licenced for the work you are doing.

Tips for Choosing a Typeface

Let’s pull it all together with some pragmatic ways to get your typeface choice made. You might want to try these tips, which many designers use to their advantage in one way or another. Be the beneficiary of their wisdom and experience.

1. Plan Your Hierarchy

First, make sure you have a good grasp of the content and typographic hierarchy your design job will dictate. You may realize, after a thorough analysis, you need five fonts (not typefaces) to cover your various heading, sub-headings and call-outs. Can your typeface provide enough variation with bolds, italics and small caps? Or do you need two typefaces to create more distinction in the hierarchy? Three? Use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces. Consider this example of a bad and a good hierarchy using the same text. Notice the role white space plays in the hierarchy, too. Use as many levels as you need as long as there is distinction and clear purpose in your choices.

2. Consider What Others Have Done Already

You’ll find that the designers before you have already figured out ways to use the typefaces you are considering, so you don’t need to reinvent the wheel. Look around, and carefully consider what others have done already. The site Fonts In Use, for example, features typographic choices made by professional designers in various industries. And don’t dismiss familiarity when you come across it in other designers’ work. Often times “boringâ€� and “familiarâ€� are your best friends when it comes to choosing type. There are good reasons some typefaces get used a lot for certain purposes — they just work, and work really well.

3. Experiment the Easy Way

Here are some tips to help you experiment quickly and thoughtfully with your typeface choices:

• Set up style sheets whether you are designing for the Web or print, which speeds up the flow of ideas because they are easy to swap out. You could also use Web Font Specimen for this purpose.
• Play with the hierarchy by changing the size of different elements to create and release tension.
• Judge the results and change something, but only change one thing at a time.
• Get a second or third opinion. You might have missed the obvious.

4. Avoid Anachronisms

For instance, if you don’t know the particular history of typeface, you could end up using it in a way that makes you look a little silly. What if you picked Trajan to illustrate the title graphics of an article about ancient Greece? That would be an unintended anachronism since Greece pre-dates Rome, and Trajan was a Roman emperor. The typeface Trajan is taken from “Trajan’s Columnâ€�, which is a monument to a military victory around the year 100 A.D. Just having to answer “Trajanâ€� to the question “What font did you set the cover of this book about Ancient Greece in?â€� will make you squirm just a little. It pays to double check. And sometimes it pays to be neutral by choosing something safe for an academic topic, like Arno.

5. Avoid Trite Correlations

If you apply this rule rigorously, you are unequivocally guaranteed to retire from your design career as Typographer Emeritus. Let’s just examine this principle by example and let the lessons teach themselves:

• Don’t use Papyrus just because your topic is “ancientâ€� in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all)
• Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all)
• Don’t use Lithos just because your topic is about Greek restaurants.
• Don’t use Futura just because your topic deals with “the futureâ€�.

Does this leave room for typefaces with built-in “effectsâ€�? Yes, indeed. Just don’t do something so blatantly obvious it took you less than one second to think of it. The tell tale sign you are making a trite correlation is that you have a collection of decorative fonts you frequently peruse in your font manager while pining away for a topic to shoehorn them into. If you have not avoided these kinds of trite correlations in the past, it’s OK. Don’t live in the past, but don’t do it again.

6. Consider an Extended Type Family

If your project is ongoing and diverse, it would be wise to consider investing in a quality extended type family upfront. Why not kill all the birds you can find with one stone? When you choose an extended type family, you get the benefits of having had the type designer do more use-case scenarios than you will likely ever be faced with. Extended type families usually have serif and sans serif versions, along with multiple weights, full sets of special characters and ligatures etc., which ensure that you’ll be able to find the right solution for just about every typographic challenge you could imagine. An extended type family will also give you a very uniform, orderly mood and aesthetic, which may or may not be what you want.

7. Stick With the Classic Combinations

When you are stuck, go with the tried and true, especially if your deadline is tight. If you choose a neutral serif and sans serif combination, you might lose a little “edgeâ€�, but at least the integrity of your design and message won’t suffer. When is the last time you called on Caslon or Univers and regretted it? Face it: you’ll never get ITC Avant Garde Gothic and Trebuchet MS to cooperate. Instead, consult well respected typography-related resources. See what professional designers agree on. It’s likely you already have some of the classics you’ll find referenced. Perhaps those same fonts are complete and are of high quality, which makes choosing them in a pinch that much easier. You will fail them before they fail you.

8. Use a Limited Palette

You’ll find many opinions on this, but it’s also not a bad idea to consider a limited palette of typefaces you like best from lists of the most popular type of all time. They are the most popular for a reason. Some designers have gone a whole career using less than twenty typefaces most of the time. For instance, you could use the FontShop’s 100 Best Typefaces (in German, also available as a PDF) as a reference. To that list, you should try to add a few newer, and not just classic, typefaces. While you are at it, consider adding one or two unique but highly-versatile modern typefaces from independent foundries, and not just the larger established ones that might be more familiar.

In this example, we’ve combined Bembo with various fonts from Haptic Pro, a typeface family originally designed 2008 by Henning Hartmut Skibbe. Something old and something new, and you can go a long way with a style all your own:

Final Tip: Break The Rules

Break the rules but only after you can name some of them. Knowing the basics described in this article will help you make intelligent choices about what rules to break and how to break them. You might have to go through ninety-nine bad ideas to get to that one great idea, but the process is fun. Remember: knowledge of type gives you the power to express yourself more creatively with it. To “push the envelope�, as the cliché goes, you first need to know what and where the edges are.

Further Resources

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

• The non-typographer’s guide to practical typeface selection by Cameron Moll
• On Choosing Type: First Principles by John Boardley / I Love Typography
• Choosing & Using Type by Daniel Will-Harris (old but excellent article).
• Technical Web Typography: Guidelines and Techniques by Harry Roberts
• “What Font Should I Use?â€�: Five Principles for Choosing and Using Typefaces by Dan Mayer
• Best Practices of Combining Typefaces by Douglas Bonneville

© Douglas Bonneville for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Fonts, leading, line-height, sans-serif, serif, typefaces, typography

In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module – flexbox – to center an element horizontally and vertically.

I’ll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of – rather big – caveats, to make you aware of them upfront:

• Flexbox is currently only supported natively by Gecko (Firefox) and WebKit (Safari, Chrome) browsers. For Opera and IE you can try Flexie, a JavaScript workaround. I’ve only had a quick look at it and can’t say how well it works.
• The flexible box layout specification will change to use other property names among other things. See Differences in Flexbox drafts and the Editor’s draft of the Flexible Box Layout Module for details. In other words what you see here will not be the exact way to do flexible box layouts in the future.

Read full post

Posted in CSS.

As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it’s remarkable to observe how quickly we’ve developed and honed our craft over all these years.

However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren’t related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.

In fact, there are many issues that require a thorough, profound discussion within our industry, yet they are not properly discussed for one reason or the other. This article is based on my recent, often unrelated, observations of our community. It features my personal opinion on the problems we need to tackle and conversations we need to start to ensure its healthy evolution.

Where Did The Community Spirit Go?

I was very lucky to have experienced the development of the Web design community from its early days on. As a passionate newcomer to the industry, I was captivated by the sense of enthusiasm that seemed to be flourishing everywhere and spurring everyone. It was a strong and genuine feeling that was sparkled among dozens of sites and magazines and fueled by the motivation of experienced and non-experienced designers. The community was reasonably small and therefore very welcoming and supportive, so everybody was perfectly fine with asking lengthy questions and providing detailed answers.

I clearly remember in-depth discussions with hundreds of meaningful, engaged comments, in which designers would thoroughly analyze the techniques presented and suggest improvements or alternatives. I remember having experienced print and digital designers writing articles and teaching inexperienced designers the obscure details of and practical tips about the new craft. I remember vivid debates spreading from one site to another, connecting designers and building professional relationships in the community.

These discussions still take place today. There are many more designers and developers out there encouraging these discussions. The remarkable work of people like Paul Boag, Dan Mall, Jeffrey Zeldman, Francisco Inchauste, Chris Coyier, Simon Collison, Andy Clarke, Paul Irish, Chris Heilmann, Jeffrey Way, Trent Walton and many others is a vivid manifestation of the tremendous care and dedication of designers and developers to our industry. There are literally thousands of talented folks out there who are writing articles and releasing wonderful new tools and resources for all of us to use. That’s great. That’s great because all of these contributions bring our community much further.

However, every now and again I can’t help but realize that the number of active contributors with knowledge and experience hasn’t increased proportionally to the overall magnitude of our growing community. Way too often I find it extremely difficult to find meaningful debates spanning over the whole community — debates that would create a strong echo and prompt us all to revise, extend or adjust our practices and hence become better professionals.

The recent hashbang debate is an excellent example of community-wide discussions that our community could use.

Way too often do I come to the conclusion that this remarkable, inspiring enthusiasm we once had is now gone. What remained are stranded cliques of passionate designers who lead design discussions privately and separately, often unnoticed by the vast majority of the community.

The tragic irony is that although we are probably one of the most connected professional communities out there, it seems that we are increasingly not connecting. It’s not that we’ve become just a bit too comfortable with the processes we’ve developed over the years nor that we don’t care about improving our design and coding skills. In dialogue with our readers and colleagues at conferences or even online, I’ve become confident that this development has entirely different roots.

Finding Time to Contribute

Since there is so much going on the Web these days, it seems only reasonable that many of us might experience difficulties finding time to actively engage in professional discussions. Personally, I am just as guilty as the next guy, as I find it extremely difficult to read more than 5–7 design pieces a day — not to mention commenting on any of them. I’m trying to challenge myself to be more responsive and engaging. Sometimes it works, sometimes it doesn’t, but I have firmly committed to this change and maybe — just maybe — so could you.

I believe that the lack of time is one of the reasons for our changed behavior online. Our emails have become shorter, and so are our blog posts and comments. Our interest has become much more difficult to enrapture, and so we’ve become more passive and less critical. We way too easily consume and accept ideas, designs, concepts out there, sometimes without even questioning their validity and correctness. Instead of debating, we agree; instead of criticizing, we accept — or simply click away and ignore the discussion altogether. And this is the reason why many conversations in the community do not get a critical mass of interest.

Web design discussions on Quora and StackExchange sites are wonderful examples of websites that we have already started using to exchange ideas, ask questions and conduct valuable design discussions.

The worrying part is that the number of the less experienced active contributors has increased exponentially. Due to that, I am afraid that the community is not led in the right direction. The true leaders — professional, knowledgeable designers and coders — are busy. Busy with their work or perhaps they feel that it’s no longer worthwhile for them to spend much time contributing. I hope this attitude can change. We need more professionals to find time to contribute and help to teach others. After all, so many of us are self-taught. And where would we be today without the contributions of others?

We need more meaningful and helpful discussions within our community. Finding time is difficult, but we don’t have to jump into writing or commenting with both feet. An occasional comment, tweet, reply or short blog post about whatever it is we’ve learned or thought would already help; it might just as well invoke thought-provoking discussions by other members of the community. As artisans of the Web, we love to discuss things that are important to us — be it design, coding, writing or anything else. We might have no time for profound writing, but we certainly have enough time to suggest an idea and encourage our friends to join in the discussions. Taking just a couple of minutes every day to think about the craft we love will bring us further and accumulate the wisdom within our community.

Francisco Inchauste summarized this point nicely in one of our recent conversations: “Everyone has a perspective and experience to share. Without more perspectives, we’ll become limited in our growth. The community is only as strong as our weakest people. To improve, we need to lift others up by helping to educate and guide.”

We Need to Curate Valuable, Meaningful Resources

Probably the easiest way to jump into design discussions would be by observing and replying to the tweets marked with the hashtag #design. Well, that’s what I thought before adding the #design column on my Tweetdeck a couple of weeks ago. After a couple of days of occasional scanning of tweets in that stream, I did find a couple of interesting discussions; however, more often than not I stumbled upon loud, inaccurate and promotional tweets which led to tutorials, freebies or inspirational websites.

Don’t get me wrong: I have nothing against these resources per se, but I don’t quite understand why we, multi-talented, versatile craftsmen of the Web, are restricting the use of such a powerful medium as Twitter primarily to these resources. Why don’t we use it for meaningful discussions as well? Have we somehow become blindfolded by pure eye-candy or tremendous technological opportunities we have now with jQuery, CSS3 and HTML5? We are experimenting with visual and interactive enhancements in our tutorials and our designs, yet we tend to forget about the fundamentals of our work — our design principles, the quality of our processes and the integrity of our creations. We could all benefit from writing and talking about the ways we work, the decisions we make and the solutions we come up with.

Just compare finding a jQuery slideshow plugin against finding a practical resource on UX design patterns. Or finding a social media icon set against finding detailed case-studies written by experienced designers. Valuable, useful resources are becoming rarities and unfortunately many of them just do not get the attention they well deserve.

We need to support and curate the creators of thought-provoking and valuable resources and help them maintain and support these resources. We need to support them because they are the ones that raise questions and seek for answers; they are the ones that support the maturity of our profession; they are the ones that are not afraid to question status quo and encourage experimentation, sharing and innovation — the so needed attributes of our exploding industry.

HTML5 Boilerplate is a remarkable example of a cooperation of dozens of Web designers who share their thoughts and insights to create something useful for all of us to use. Unfortunately, many useful projects on Github do not manage to get such strong community-wide support.

We can use our communication channels wisely and invite our colleagues and friends to join in the discussions, sharing opinions and spreading the word about those of us who truly dedicate their time and effort to produce useful, valuable resources. I am certain that by doing so, we’ll be able to unleash the remarkable potential for a strong and supportive exchange of ideas and expertise.

The emerging conferences like Fronteers, Brooklyn Beta and New Adventures in Web Design show very well which benefits a strong community has: it is inspiring, helpful, forward-thinking, challenging. I will never forget the moment when I was sitting among the attendees during one of the conference’s talks and my neighbor turned to her colleague and whispered, almost mindlessly: “I feel that these talks are going to change my views of design forever”. I’d love to experience this feeling in our online discussions, too.

Community-Wide Discussions and Polls

There is so much content out there so that our focus is distributed among dozens of resources and discussions every day; it’s not easy to see how exactly we could lead large community-wide discussions. A blog’s audience is usually limited by its RSS-subscribers, random visitors and social reach of the blog owner. Spreading the word in social circles outside this audience might work to some extent, but it usually won’t help reach the vast majority of the community, especially if the blog is relatively small or obscure.

We need to have some sort of a mechanism that would connect like-minded designers and developers which are not already connected via other media. Twitter’s hashtags are a good example of ways how we are already trying to solidify exchange of ideas and thoughts. But we can make it better.

So what if we had a consistent standard in place? We could strengthen these exchanges through hashtags by developing and having the community adapt some common tags to use en mass. For instance, #design_type, #design_layout, #design_js and others. We could even conduct community-wide polls (#design_poll) that could be easily recognized and retweeted by users with smaller as well as larger followship, thus spreading the word and strengthening the active participation within the community. We could have a website tracking these hashtags, presenting the most popular discussions and filtering spam and other malicious activities.

The same mechanism could be used for supporting valuable design resources and their creators as well as passionate designers who write insightful articles or produce useful resources. When elaborated properly, this approach will make it easier for us to connect and participate in large, community-wide discussions. These discussions might even spread beyond the limits of our community, providing a different perspective on our conversations by professionals from other industries.

So What Exactly Should We Be Discussing?

As Web designers, we’ve come a long way. We’ve shaped a new, strong industry and developed professional design processes. We also have learned a lot on our journey — be it some bits of psychology, copywriting, marketing or other related disciplines. If you think about it, that’s already a massive achievement, and so we have a damn good reason to be proud of what we have contributed to all these years altogether.

However, like in any other industry, we need to permanently revise our practices, innovate and improve our design processes. In fact, there are a number of things that might need to be extended and reconsidered. Let’s cover the not-so-obvious ones.

Our Professional Vocabulary

As mentioned above, when it comes to Web design, there are always so many different disciplines and professions involved, that it is becoming increasingly difficult to make sure that everybody involved is on the same page in terms of vocabulary used in our discussions.

Misunderstandings between designers, developers and stakeholders are the running joke in our community. And there is a reason behind it: the vocabulary we are using has dramatically evolved over years — it was primarily expanded, sometimes with abbreviations and concept titles which are counter-intuitive or misleading. We have applied terms from print design to Web design; we have coined new terms for new concepts and methodologies; we have introduced terms that might have become outdated today (think of the outdated floppy disk symbol for the “Save” icon). The result is a quite sloppy and inconsistent vocabulary — we often have various terms describing one concept, or one term describing various concepts.

Unsuck It explains terrible business jargon in plain words. Hopefully, we won’t need something like this for the design community as well.

For instance, there are design attributes that we call ‘responsive’, ‘adaptive’ or ‘flexible’, but what exactly do we mean when we apply them? Different designers might even have a different idea on what they mean with the word “design”; is it visual design, design as a concept or maybe UX design? And what is UX exactly anyway? The same problem occurs when we discuss terms such as “HTML5″, “page”, “fold”, “navigation” and others. Just imagine how devastating the results would be if any other professional industry, e.g. medicine, wouldn’t have a common vocabulary for its technical terms?

At the New Adventures in Web Design Conference last month, Dan Rubin talked about this very issue, saying that the industry as a whole needs a common grammar and vocabulary. He asserts that the ones we have now, were perhaps somewhat hastily chosen. And that with some careful thought and planning, we can design a much more accurate vocabulary to help avoid the confusion which can stem from the existing one.

We could use more precise and intuitive terms which would be based on certain concepts that are familiar to us and other professionals. As Dan noticed, “responsive design”, coined by Ethan Marcotte, is an excellent example of such a term. It derived from the concept of “responsive architecture” which explores how physical spaces can respond to the presence of people passing through them. So instead of creating unchanging spaces that define a particular experience, they create spaces in which inhabitants and structure can — and should — mutually influence each other.

Applied to Web design, it means that we could treat our designs (very much like these spaces) as facets of the same experience. The concept can be easily explained and understood. It’s not too technical, it’s not too abstract and it’s not chosen randomly. It is rational, visual and memorable which are all excellent qualities for a term describing a new design approach.

Perhaps we could create a standardized design language which would accumulate our vocabulary and provide us and our stakeholders with a consistent and unambiguous terminology for our discussions. Finding a common vocabulary is a challenging task and it’s an ongoing process that would need permanent revisions and updates.

Our Design and Coding Practices

Actually, we need to refine more than our design vocabulary: our design and coding practices require regular revisions as well. Faced with new design requirements in our regular work, we keep conquering design problems and exploring appropriate solutions for them. These activities are the driving force behind learning; they heavily influence the decisions we make once we approach similar design problems in the future. This is what makes us experienced professionals.

Method and Craft is an excellent website where professional designers and developers are sharing tips about their workflow and design processes. This is a goldmine for newcomers to the industry.

We learn something new every single day. We discover a new CSS trick or a new UX tweak. An obscure Photoshop technique or a beautiful font pairing. Our convenient coding techniques are gradually dating as browsers become more capable and so we discover that certain browser hacks are no longer necessary. We find new ways of how certain common conventions could or should be adjusted. All these small things we discover in our daily routine help us improve our skills and workflow. Actively exchanging thoughts and methodologies with your colleagues will mutually benefit and improve the overall design and coding practices.

We shouldn’t be afraid of asking challenging questions or posing bold statements. If you feel that we should all stop using CAPTCHAs, then say so and explain your rationale behind the argument. If you think that there is a way to reinvent scrollbar, say so and explain how exactly you imagine this technique to work and why it’s better. And if you are struggling with a personal problem and would like to hear how the community members managed to solve it, say it, too — it’s very likely that other members of the community have had similar problems and will be glad to join the discussion and help out.

Our Professional Ethics

Saying “no” can be extremely difficult sometimes, especially when personal or financial incentives are at play. However, as professionals, we owe it to ourselves and to our projects to not get enticed by offers and suggestions that do not wholeheartedly coincide with our intentions and objectives. The former can bring temporary benefits, but if applied consistently, the latter will bring long-term benefits.

We need to become more aware of the ethics that we should be following while designing, coding, writing, editing and publishing on the Web. The times when soulless copy-pasted press releases were used “as-is” across online publications are long gone, so let’s stop doing that. Cheap generic stock photos neither visualize nor support the article, so let’s stop using them, too. Professional publications often use “nofollow” attribute to block link-droppers from gaining Google’s link juice; and most users will not click on links titled “Milestone Professional Web Design Agency”, so let’s stop doing it as well. There are many similar examples which we can use to adapt, and optimize our online behavior accordingly.

The website Ethics and Web Design is a valuable resource which covers the fundamentals of professional ethics in our industry.

As content creators, we often depend on advertising, and that’s sometimes the necessary evil that we need to accept to be able to monetize our dedicated writing efforts. And there is nothing wrong about it. However, we need to set clear limits to how the advertising can and how it cannot be presented on our websites. For example, text link advertising and sponsored posts should always be clearly marked as such. We should have a strict separation between content and advertising. Each of us could design a set of personal principles for his or her websites (publishing policy), publish these rules online and stick to them no matter what. This way the readers will respect you and appreciate the simple fact that you are strongly committed to quality work.

We could benefit from being more critical about our content and the way we present it online. It means paying more attention to copy, consistency of our writing style, quality of images and image captions, design of code snippets etc. These details give our writing a different tone; they empower our thoughts and make the content more trustworthy and reliable. Why don’t we make our work more challenging by trying to make every article we publish at least a tiny bit better than the previous one? We could try not to just “put stuff out there”, but curate our delicate ramblings, making sure that every published article has the highest level of quality that we can afford for it. A style guide can be helpful in this case, especially for larger websites.

Photoshop Etiquette Manifesto is a website listing helpful and subtle suggestions to organize your Photoshop documents — making the transfer of them less painful.

In Web design it means to stop using anti-patterns — design patterns which are created specifically to trick our users. Instead, we should respect and advocate for our audience and protect their interests. Think about building loyal, honest, authentic user base for your own project or your client’s brand and think about the quality of relationships you create with each user.

Not only should our designs be usable for our visitors, but also our code should be maintainable for developers. Just like with content, you could come up with your set of standards which you’d like to follow in your work, make it public and stick to it. Make it your final checklist item before you hit that “Publish” or “Commit” button. That’s what will make people look up to you and respect your work.

Bottom line: we should strive for responsible Web design that not only embraces best design and coding practices, but also respects our publishing policies, protects the interests of our users and supports the professional work of our colleagues.

Our View of Web Design Trends

As professionals who care about producing beautiful, top-notch products for the Web, we love to explore innovative design and coding techniques. We love to take them apart and put them together again, learning about their potential during the process. We love to discuss them with our colleagues and keep them in mind for upcoming projects. The more other designers use these techniques, the more important they become to us. Among ourselves, we start to respectfully call them trends.

Nevertheless, trends can be dangerous and misleading beasts. They give us an exciting feeling of having a valuable insight that most of our colleagues don’t have yet. We feel fortunate to have discovered one early enough to use it effectively before it becomes common practice. Trends are precursors of the “next big thing,� and so we pay attention to them.

I can’t help but think that trends seem to be spectacularly overrated in our industry. Often they are regarded as bulletproof solutions, respected and universally accepted for the simple reason that they are innovative and widely used (think of drop shadows or text shadows, for example). I believe that we tend to adopt trends too quickly, often getting carried away by their originality rather than understanding their purpose. This should not be the case. Trends are not a panacea for all of the problems we encounter, and often they don’t even provide an optimal solution for the situation in which they were used in the first place.

Not to say that trends are unimportant, though. They are important, especially when they foster innovation and make us reconsider our design decisions. They can challenge us to be more effective and more thoughtful in our designs. Yet they inevitably fail in one particular regard.

We can learn a lot simply by examining obscure websites out there, such as Mospromstroy, the website of an industrial construction company in Moscow. The code is far from optimal, but the website itself reveals some interesting design decisions.

One thing I’ve learned to love over the last year is thoroughly examining unfamiliar foreign websites; Russian and Korean websites, to be specific. I feel inspired and empowered just going through them, creating wireframes from them, exploring their interaction patterns and analyzing the source code. I love wondering about the decisions that the designers must have made and the rationales behind those decisions. However, I can only speculate about them; ultimately, I cannot know the context in which these decisions were made.

This lack of context is the main reason why design trends should be approached cautiously. If we don’t know why a certain technique was used, then we need to properly test and validate it before applying it into our own designs. This is the part of the process that I find is often missing in discussions about trends.

We should observe and analyze trends but not consider them as finished “off the shelf� solutions. Instead of following them, we should be confronting them, improving on them and replacing them with our own. Adding elements to our designs merely for the sake of visual or functional interest is counter-productive. We should rather aim for designs that serve their purpose independent of volatile trends. Why not focus on approaching trends responsibly; building on them when they add meaning to a design and ignoring them when they do not fit the contextual scope of the design problem. This would make our websites original, well-formed and timeless.

Learning From The Past

While trends tell us what designers are doing now, we could expand our skills by drawing on our heritage, too. As designers, we are essentially problem-solvers. We analyze existing problems, learn the given objectives and requirements and then start searching for meaningful solutions. However, initially, it is not a clever visual nor technical approach that we are looking for. We are looking for an idea.

At this stage, what helps us most is our experience and creative thinking. And this is exactly where our rich history of visual communication is particularly useful. By studying lessons from the past, we can better understand how ideas and techniques have emerged and evolved over time. We can learn what approaches other professionals have taken to solve the problems facing them — problems that we still might be struggling with today or will in the near future.

Websites like Design Is History, Smart History and Graphics Atlas are all excellent resources on the history of graphic design, visual communication and the evolution of design processes. We can learn a lot about our craft by exploring them thoroughly.

Andy Clarke’s talk at the New Adventures in Web Design conference was intriguing and pointed out the need for designers to learn about the importance of storytelling in Web design. Andy shared a unique perspective in his presentation, saying that we can shape how users not only interact with content, but consume it in general. He drew a comparison to comic books and Western movies from the 1960s, which used various techniques to dictate the pace of how their information was consumed — be it through a stretch of silence in a movie or the shapes of panels in comic strips.

We could use this technique in our designs to keep readers in the grip of our content just a little longer. Instead of letting users not have to think, we could do the opposite and engage as well as intrigue them (a good example would be of the Ben the Bodyguard website).

Ben The Bodyguard keeps you on the site longer than you expect.

We shouldn’t hesitate to apply concepts from other time periods or other media into our designs. The concepts actually don’t even have to be design-related. Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.

Next time you’re looking for an idea, pick up that book you’ve always enjoyed reading and read it with a different perspective. Then, search for any unusual points of view that might be worth bringing to the forefront in your next project. Once you’ve found one, grasp this moment, as this is the very second when a unique, innovative design is born.

In Conclusion

As our industry matures, so will our practices and the quality of our work. We may have successfully solved many important problems in our short history, yet there is still much to be done. Writing and talking about the ways we work, the decisions we make and the solutions we come up with will benefit each of us. We could explore the connections between our discipline and other established industries as well as revise and reinforce our professional vocabulary and our ethics.

Perhaps we could all dedicate 10 to 15 minutes of our time to the community every day. We could (and should) make this a firm personal commitment and encourage each other to take part. Find some time to leave a meaningful comment, support a valuable resource, write a short article about what you’ve learned. All of these contributions matter and will prompt meaningful and inspiring discussions. For starters, we could start raising awareness of our commitments by using the hash tag #wdcommunity.

I strongly believe that if we keep doing this every single day, we’ll wake up one day marvelling at how remarkable our community has become. I, for one, am eagerly looking forward to this day.

Huge thanks to Francisco Inchauste, Chris Shiflett, Nishant Kothary, Paul Scrivens, Andy Clarke, Dan Rubin and others for their valuable contributions and suggestions for this article.

© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: community, ethics, hashtags, professionals

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well.

Starting with special characters

There is a plethora of glyphs out there that we could use instead of images to create custom markers. This should improve:

• performance (there is no HTTP request)
• usability (these characters will grow or shrink according to user’s settings)
• maintenance (no sprite to create, no asset to deal with)
• accessibility (see further below).

Example:

The markers (♠, ♣, ♥, ♦) in the list above are created via the following rules:

HTML:

<ul class="glyphs">
	<li class="one">performance</li>
	<li class="two">usability</li>
	<li class="three red">maintenance </li>
	<li class="four red">accessibility</li>
</ul>

CSS:

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);
}
.one:before {
        content: "\2660"; /* â™  */
}
.two {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);
}
.two:before {
        content: "\2663"; /* ♣ */
}
.three {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);
}
.three:before {
        content: "\2665"; /* ♥ */
}
.four {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);
}
.four:before {
        content: "\2666"; /* ♦ */
} 

.red b,
.red:before {
  color: red;
}

How does this work?

• The value of the content property must be an escaped reference to the hexadecimal Unicode character value (for IE, we use HTML entities).
• Internet Explorer 6/7 do not support ::before nor :before, so the characters are plugged via CSS expressions.
• IE8 does not support ::before, but does support the single colon notation
• Please notice that putting aside browser support, “there’s no difference between :before and ::before, or between :after and ::after. The single colon syntax (e.g. :before or :first-child) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.”
• In IE, characters are wrapped in <b> elements, so we have a means to target and style them (you may rather want to rely on a class name for that).

Note that the CSS expressions we use here are not as bad as the ones generally used to mimic min-width and the like. These are only evaluated once, which should result in a small performance hit.

Displaying Images Via Pseudo-Elements

The main advantage of using a pseudo-element for the sole purpose of displaying an image is that it allows designers to crop a sprite. Actually, this is nothing new, and many websites are already using extra (aka "junk") markup to achieve this. For example, Yahoo! Search uses empty <s> and Facebook uses empty <i> tags for this purpose. Going this route allows for the creation of compact CSS sprites, without empty space between the images within the sprite.

The two examples below do not use extra markup and they both share the same sprite:

The two images below — which are the second icon in the sprite — are generated using each technique, respectively.

Nicolas Gallagher’s method

Styling the pseudo-element with a background image:

#first:before {
    content: "";
    float: left;
    width: 15px;
    height: 15px;
    margin: 4px 5px 0 0;
    background: url(sprite.png) -15px 0;
}

The new url() / clip method

Using the content property to insert the sprite which is then cropped with clip:

#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

In case you wonder why I use position: absolute in the above rule, it is because the clip property only applies to absolutely positioned elements.

The New Technique: How Does It Work?

• Instead of styling the pseudo-element with a background, we use it to insert an image (via content).
• Using the clip property, we crop this image to only display the part we want to show. It means that there is no need to add empty space in the image to avoid other parts to show as well (usually used as background image of larger elements).
• We offset clip values by using the left and/or top properties.

With a non-cropping technique, images in sprites would have to start from the right hand side or left hand side to accommodate RTL/LTR contexts (background-position: [left]|[right] [vertical value]). Another limitation is creating sprites with images showing next to each other (because other images could be displayed as well). But when cropping sprites, these issues are not in play, so all images can be tucked together.

For an example, see figure below:

Advantages of this method over existing techniques

Styled to print
Unlike background images, these images are printed with the document (they are sent to the printer).

Styled to be accessible
Unlike background images, these images will not disappear in MS Windows’ high contrast mode or with high-contrast styles sheets.

Styled to work in IE lt 8
This method works in Internet Explorer 6 and 7 as well.

Note that data URI scheme could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.

Styling links with pseudo-elements

Nicolas Gallager shows plenty of cool stuff one can do with pseudo-elements. The only thing I’d add here is the use of ::after to style links à la "read more" and the like, for example:

Read more

CSS:

.more:after {
        white-space:nowrap;
        content: " \00BB"; /* » */
}
.more {
        white-space:nowrap;
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

A word about accessibility

You should assume that generated content is read by screen-readers, and since there is no mechanism to offer alternative text for images plugged via the content property, we should make sure those images are purely decorative because screen-reader users would not have access to that information.

Further reading

You might want to take a look at the following related resources:

• CSS3 module: Lists – The ::marker pseudo-element
• Generated content, automatic numbering, and lists
• The clip property
• Colour Contrast and CSS Sprite Maps
• High Contrast Proof CSS Sprites

Credits: Icons by FatCow Web Hosting [CC-BY-3.0-us], via Wikimedia Commons

© Thierry Koblentz for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, elements, lists, pseudo, sprites

Regardless of the final platform — desktop, tablet, mobile — most designers start their explorations on paper. Depending on the designer’s preference, the paper may be bound or unbound, lined or unlined, smooth or ridged. And while the materials may differ, the goal is the same: to quickly explore a variety of concepts.

The designer’s sketching tools haven’t changed much over the years, but the role of sketches has evolved. Instead of rushing to convert them to a more polished form, designers now often share early sketches with clients. Their roughness suggests that the designs aren’t “done,� which encourages feedback and facilitates collaboration.

While interest in sketches has increased, sharing them with team members is still challenging. Most sketchbooks are too small to invite everyone to huddle around and look at. Besides, teams are often distributed around the world, so a digital format is essential. Scanning produces high-quality images but is often a hassle because scanners are typically a shared office resource. Photographing with a smartphone or digital camera works fine if the lighting conditions are just right.

What would really benefit designers is the digital equivalent of a sketchpad and pencil. Sure, Wacom tablets have been around for a long time, but they tie designers down to the laptop or desktop computer. Personally, one of my favorite things about sketching is being able to walk away from my desk. No email. No Twitter. No distractions.

When the iPad came out, it seemed like it would address designers’ sketching woes, but the early styluses and applications were disappointing. One year later, there are far more tools to choose from, but they still have a long way to go.

In this article, I’ll share my personal evaluation of touchscreen tablets as design tools, specifically for early UI sketches and storyboards. To help guide the evaluation, I created a few pen and paper sketches for comparison. Then, I tried to recreate these sketches using a sketching application and a variety of styluses. As you’ll see, the current devices, apps and styluses all have a number of weaknesses. If you’re like me, you may want to stick with your old notebook and pencil a while longer.

iPad with stylus beside a 9 × 12 sketchbook with pen.

The Devices Reviewed

Touchscreen tablets hold much promise as design tools, but several limitations should be pointed out.

First, the screen real estate doesn’t come close to a typical 9 × 12 sketchpad. The diagonal length of the iPad is 9.7 inches (246.4 millimeters), the XOOM is 10.1 inches (256.5 mm), the Touchpad is 9.7 inches (246.4 mm), the Playbook is 7 inches (177.8 mm), and the LG G-Slate is 8.9 inches (226.1 mm).

Secondly, these capacitive screens can’t sense pressure, which makes it impossible to incorporate common sketching techniques such as shading into a design.

Lastly, none of the latest tablets can produce ballpoint precision, no matter what the application or stylus. This is a technical limitation: the low-resolution sensor panels can’t detect a stylus’ input if it falls between adjacent capacitive elements; hence the large tips on most styluses.

Touchscreen technologies are rapidly evolving to minimize these last two limitations.

The Applications

The XOOM, Touchpad and Playbook haven’t released sketching apps yet, so this evaluation was limited to Apple’s App Store, which contains dozens and dozens of drawing apps.

Because most preliminary UI sketches are drawn freehand, I eliminated template-heavy apps such as OmniGraffle and Freeform. Next, I ruled out apps like SketchBook Pro, since their broad feature set is more appropriate for full-color drawings and paintings.

My final list included Adobe Ideas and Penultimate. If your sketches have limited text, you may want to use Adobe Ideas because the app has stroke smoothing as well as a full-screen view. On the other hand, if you plan to include a lot of annotations and UI text, then I recommend Penultimate for its ease of use and ability to handle sketching and writing equally well. The one big downside with Penultimate is the lack of a full-screen view. To see Penultimate in action, I’ve prepared a video for you towards the end of this article.

Penultimate Notebook view.

The Styluses Reviewed

Choosing the right application is important, but what really differentiated my touchscreen sketching experiences were the styluses themselves.

Eight popular styluses: BoxWave, Griffin, iClooly, Pogo, Dagi, AluPen, Hard Candy, Stylus Socks.

In deciding which one to buy, here are some questions to consider and ask yourself:

1. What Types of Tasks Will You Be Performing?

Most styluses on the market — Griffin, BoxWave, AluPen, Hard Candy — have a rubber tip. Other materials you’ll come across are capacitive fabric (on the Stylus Socks), foam (Pogo), plastic (Dagi) and metal (iClooly). In my experience, the rubber-tipped ones work well for sketching and text, whereas the rest tend to work well for either one or the other. For example, the Stylus Socks is great for sketching, and Dagi seems better for cursive writing. Unfortunately, the Pogo foam tip didn’t work well for either task.

2. How Does It Feel in Your Hand?

The styluses vary in weight, finish and length. For example, the aluminum Pogo is quite light at 0.6 ounces, whereas the chrome Hard Candy is the heaviest at 4.2 ounces. The other styluses weigh slightly more than the Pogo, similar to a good-quality ballpoint pen. Similarly, the grip varies from stylus to stylus; the Griffin is smooth, the AluPen is textured like a chunky pencil, and the Stylus Socks is tapered like a paintbrush. The weight and grip that feel most comfortable are generally a matter of preference.

3. How Do You Want to Carry the Stylus?

This is a minor detail but it can be a deal-breaker for some people.  If you want to attach the stylus to your tablet, then it’s worth noting that the Griffin, BoxWave, Dagi and Pogo all have a clip. The Stylus Socks, Hard Candy and AluPen styluses don’t have any contraption to attach them to a tablet, although the AluPen does have a nice case. A few of the styluses also have a pen at one end; it’s optional on the BoxCase but built into the Hard Candy.

Having tried out these eight styluses, I recommend the Griffin and BoxWave for their superior sketching and writing and because they “just feel right� in my hand. Although they were better than the others, they still weren’t ideal for UI text. I often found myself incorporating dashes instead of descriptive text because the results were not optimal. If your sketches have limited text, then the Stylus Socks and AluPen are strong alternatives. To see how these four styluses work with PenUltimate on the iPad, watch the video below:

Looking Ahead

Even though there are many weaknesses across the board (with the devices, applications and styluses), touchscreen tablets still hold promise as a design tool. The following changes would improve their effectiveness:

• Increased precision
  Whether it comes from the device, the stylus, the software or some combination of the three, far greater precision is needed by the designer. And achieving this precision shouldn’t require unnaturally slow sketching or tedious zooming.
• A stylus for every occasion
  In theory, having one magic stylus would be convenient, but why not have different styluses for different creative tasks? Various lengths, grips and tips could be offered, as done for paper sketching.
• Alternative tablet sizes
  Current tablet dimensions would suffice for one or two small UI sketches. But larger tablets would be invaluable for more involved sketches like storyboards. Current costs make this prohibitive for most people, but eventually the prices will come down.

Some of these ideas might not be far off. Products are evolving from their first generation, plus there are opportunities for better hardware integration between tablets and styluses. For example, Apple filed a stylus patent back in 2008 that included accelerometers that can transmit more precise positional information to the iPad. Developments like these will surely inspire additional tablet innovation in the months and years to come.

References

• iPad’s technical specifications
• XOOM’s technical specifications
• TouchPad’s technical specifications
• PlayBook’s technical specifications
• “Apple Takes Huge Steps Towards a Graphics Pen for iPadâ€�

Products Coming Soon

• NoteSlate
• MORE/REAL Stylus Cap

(vf) (ik)

© Suzanne Ginsburg for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: business, tools