IMPRINT
Imprint © 2013 Smashing Media GmbH, Freiburg, Germany ISBN: 978-3-94454016-0 Cover Design: Ricardo Gimenes PR & Press: Stephan Poppe eBook Strategy and Editing: Vitaly Friedman Technical Editing: Cosima Mielke Planning and Quality Control: Vitaly Friedman, Iris Lješnjanin Tools: Elja Friedman. Syntax Highlighting: Prism by Lea Verou. Idea & Concept: Smashing Media GmbH
Preface Over the past few years, our eBook collection has grown steadily. With more than 50 eBooks already available and counting, we made the decision half a year ago to bundle all of this valuable content into one big lovely package: The Smashing Library1. As a humble gift to you, dear reader, we have now put together this Editor’s Choice eBook. It’s a little Smashing Library treat, featuring some of the most memorable and useful articles that have been published on Smashing Magazine in the last few years — all of them carefully selected and thoroughly edited. Ranging from heavily discussed topics such as responsive Web design, to ideas on UX, to trusty mainstays like nifty Photoshop tricks, to hands-on business advice and design inspiration, this eBook is a potpourri as diverse as your work as a Web designer. We hope you enjoy reading it as much as we do editing and creating each and every eBook page that finds a home in our Smashing Library. — Cosima Mielke, Smashing eBook Producer
1. http://smashed.by/library
2
TABLE OF CONTENTS Designing For The Reading Experience ............................................................. 4 Logical Breakpoints For Your Responsive Design ........................................ 24 Sketching A New Mobile Web............................................................................. 35 Towards A Retina Web ........................................................................................... 47 Avoiding The Pitfalls Of Free ............................................................................... 63 Why User Experience Cannot Be Designed.................................................... 75 Building Something That Your Users Will Actually Want To Buy......... 85 “But The Client Wants IE 6 Support!”................................................................ 93 Passive Income Strategies For Web Designers..............................................98 Mastering Photoshop: Unknown Tricks and Time-Savers....................... 113 The Art Of Film Title Design Throughout Cinema History......................133 Teach Them How To Hit The Ground Running And Faceplant At The Same Time?................................................................................................................155 About The Authors ................................................................................................. 162
3
DESIGNING FOR THE READING EXPERIENCE
Designing For The Reading Experience BY MARKO DUGONJIĆ ❧
With the rise of Web fonts as well as affordable hosted Web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and Web design. At the same time, for far too many designers, the main concern about typography today seems to be aesthetic in nature. The problem is, we tend to use typography and lettering as two interchangeable terms, which they are not2. A quick look at the “typography” tag on Dribbble3 reveals this trend. The allure of well-executed lettering — and, boy, I could spend hours just looking at lettering portfolios! — can affect the way we view typefaces, because both typography and lettering share common visual concepts. If we seek only the next most Beautiful Typeface™ all the time, this habit alone can drive us away from the functional role of typefaces and their advantages as versatile, reusable and flexible design systems. Moreover, we are often eager to try the latest OpenType feature, prettify our copy with discretionary ligatures4, slap on partially executed CSS hyphenation, and then stare at our masterpiece in awe, unaware that anyone other than a typography geek couldn’t care less. Of course, reality hits right at the moment that the text has to be read and understood by normal people on a variety of devices, from the latest Retina laptops to 72-DPI cathode-ray-tube monitors with Windows XP to a range of sci-fi smartphones that can measure your blood pressure. “Good typography does not look nice to please type nerds. Primarily, well set type reads well.” — Oliver Reichenstein Most articles on the Web are optimized for instant ingestion— does “reverse pyramid” sound familiar? Fast exchange of information is in the Internet’s nature and fits a reader’s short attention span. People visit websites and applications because they primarily seek information; rarely do they seek typographic pleasure. Don’t get me wrong: I love ty2. http://www.smashingmagazine.com/2013/01/17/understanding-difference-betweentype-and-lettering/ 3. http://dribbble.com/tags/typography 4. http://opentype.info/blog/2012/11/20/whats-a-ligature/
4
pographically creative headlines and decks that grab my attention— but at the same time, we can’t neglect the need for overall balance and legibility in body copy. Let’s start!
First Things First: Project Research Seamlessly digesting written matter is possible only when the typography is well thought out and legibility is facilitated by a considered reading experience. As in other fields of design, before doing anything else we should conduct some research. In developing the habit of research, we will not only discover valuable data, but also develop our ability to quickly jump into the reader’s shoes, shifting focus from our worst enemy — our own ego (which I play tug-of-war with all the time). As you are most likely aware, the main components of a digital experience are content, context and the user5. You probably address all three in almost every design project. But if we focus exclusively on typography within each of these components, then we’d find a handful of assessment methods and some considerations that would be useful to take into account and that would ultimately improve the overall reading experience. CONTENT The best way to start a typographic design project is by reading the content. Seriously, every designer is intelligent enough to evaluate who this content is for and what it should be communicating. But apart from rating the quality of the content and listing its structural elements, we can also gauge comprehensibility, reading time, purpose and, finally, lifespan. Cover All Typographic Elements Upon reading the content, think about the structures or elements you have encountered and list them. Use the list as a starting point for a simple style guide. Apart from the normal paragraphs, headings and editorial accessories, you’ll find other —often overseen —elements, such as areas of emphasis, quotations, emphases within quotations and, very important these days, data tables and figure captions. Your perfect font should have enough family members to cover all of these elements. In plain hypertextese, make sure to cover all HTML elements. At this point, you could even create sample HTML and CSS files containing all of the required elements and rules and save it as Project-Typogra-
5. http://semanticstudios.com/publications/semantics/000029.php
5
DESIGNING FOR THE READING EXPERIENCE
phy.html . As you can probably guess, this file will be the foundation of
the project’s typographic system and will come in handy when you start designing responsive breakpoints. Gauge Reading Time Reading rates6 range anywhere from under 100 words per minute to a few thousand; most adults read between 200 and 250 words per minute. We can calculate the reading time for any given text quite easily by dividing the number of words by 250. If sample content for your project is available, simply throw it into a local installation of your favorite CMS and run it through a simple script to estimate reading time7. Depending on the situation, estimating reading time can help us determine the spacing within paragraphs and establish just the right rhythm and reading pace. If the reading time is long, we could break the text into smaller parts or simply introduce a pull quote at a strategic point, where it would double as a milestone. Assess Readability and Reading Ease Many readability tests provide an estimate of the school grade needed by the reader to understand the text, and knowing such parameters is useful. For example, if the matter is complex, you could probably introduce some editorial devices to keep the reader on track, or accommodate a greater number of footnotes with their own set of accessories. Furthermore, when you are collaborating with a copywriter to tweak content and typography, these tools will make it easier to track differences between versions. One such test is the Automated Readability Index8 (ARI). ARI focuses on the number of characters, words and sentences, thereby making it useful for real-time monitoring. The Flesch–Kincaid Grade Level9 test, on the other hand, focuses on syllables rather than characters, thus making it somewhat more processor-intensive for real-time assessments. Another valuable test is Flesch Reading Ease10. It is calculated according to words, sentences and syllables; the resulting score helps you determine the level of complexity of content. Most major languages have their own version11. Although this tool is new to some of us in 6. 7. 8. 9. 10. 11.
6
http://en.wikipedia.org/wiki/Reading_speed#Reading_rate http://briancray.com/posts/estimated-reading-time-web-design/ http://en.wikipedia.org/wiki/Automated_Readability_Index http://en.wikipedia.org/wiki/Flesch-Kincaid_Readability_Test http://en.wikipedia.org/wiki/Flesch-Kincaid_readability_test#Flesch_Reading_Ease www.ideosity.com/ourblog/post/ideosphere-blog/2010/01/14/readability-tests-and-formulas
Web design, textbook publishers and government agencies have been using it for years to gauge the complexity of learning materials for different grade levels. Calculating the reading ease score manually for each piece of content would be an obvious sign of masochism, so I suggest checking out the handy Article Readability Stats12, a PHP script that we at Creative Nights13 developed for our own projects. Content Strategy, Information Architecture and Microcopy If we step out of typography for a moment into the field of content strategy14 (the discipline of planning and governing content and of defining editorial processes) and information architecture15 (the discipline of organizing and describing content), we can anticipate some potential issues. Thinking about the content’s lifecycle protects us from the urge to typeset according to the latest trend. The next time an article is republished, we can prevent the editor’s rage from seeing leftover styles that weren’t removed in preparation for a redesign. Category labels —typically defined by an information architect— can make the Web designer’s life miserable, because the space in a navigation bar or column is limited. I’d bet that at some point in their career, every Web designer has tried to rename or shorten category names in order to fit the available space. Of course, we could always reduce the font size or choose a condensed type, but if all else fails, we talk to the information architect to find a solution on their end. Apart from articles, we must also typeset form labels, instructional copy, small print, interactive elements (such as buttons and links) and other text that clarifies tasks. All of this tiny copy is referred to as microcopy16, and it is a fundamental ingredient in effective interaction design. CONTEXT With recent developments in Web standards, designers are now building websites that are getting closer and closer to the ideal of “One Web17,” accessible to everyone and everywhere. Even though achieving such universality with all types of projects is difficult, we know that
12. 13. 14. 15. 16. 17.
http://www.maratz.com/blog/archives/2012/07/26/article-readability-stats-with-php/ http://creativenights.com/ http://alistapart.com/article/thedisciplineofcontentstrategy http://books.google.hr/books?id=2d2Ry2hZc2MC http://stuffandnonsense.co.uk/blog/about/microcopy http://adactio.com/journal/1716/
7
DESIGNING FOR THE READING EXPERIENCE
mobile doesn’t just mean browsing the Web on a smartphone while on the go. We also know that tablets are used to give presentations, to check Twitter during breakfast or to read articles while sitting on the toilet (anyone who neglects this fact doesn’t understand the needs of users). The screen real estate of the coming generation of laptops puts a 96-DPI 30-inch desktop monitor to shame. We admire the Web’s universality, but at the same time we should be aware of the diversity of users and devices. Software Concerns Users on Windows systems with the ClearType rendering engine benefit from well-hinted fonts. The trouble is that hinting is a time-consuming process, and not all typefaces for the Web are fully polished yet. Therefore, additional testing in Windows browsers should form part of your regular routine.
These screenshots of Verdana, Proxima Nova, Arial, Adelle Sans and Georgia at 16 pixels (except for Proxima, set at 18 pixels) were taken on Firefox 18 on Windows 7. Proxima and Adelle are rendered as Web fonts, and the others are the usual suspects that come preinstalled on most OS’. The top five lines were taken with ClearType turned off.
Also, keep in mind that each Web font service might deliver slightly different fonts. A font might yield good results when delivered through one service but look barely adequate when delivered through another. I’ll speculate that the reason for such differences, if any, is primarily a lack of time invested —that is, a lack of the time needed to properly hint a font, as well as a scarcity of font-hinting experts.
8
Luckily for us, Web font service vendors are continually improving the quality of fonts, and eventually everyone’s fonts will be spruced up. Because a lot of work goes into maintaining proper fonts, I encourage you to buy fonts and to subscribe to paid Web hosting plans, which (among other things) will speed up the hinting efforts of font foundries. The greater the demand, the faster the process. If supporting Windows users is mission critical for your project, then consider manually hinted typefaces, such as TheSans Office18 from LucasFonts (these guys are known for their obsession with hinting) or the numerous other typefaces designed for Microsoft Office applications (their names will usually contain “Com,” “Offc” or “Office”). If selecting a specialized typeface for an audience with older Windows systems is not worth the trouble, then just stick with the tried and tested Arial, Georgia or Verdana. For more in-depth information about font rendering, read “A Closer Look at Font Rendering19” by Tim Ahrens. Hardware Concerns A problem we are facing across the industry is the diversity of pixel densities; as a result, typography is not spared either. One interesting solution is to embed graded fonts for different densities, just as print designers use graded fonts20 to more precisely control the effects of ink on paper. Read more about this approach in Oliver Reichenstein’s article “New Site With Responsive Typography21.”
18. 19. 20. 21.
http://www.lucasfonts.com/fonts/thesans/thesans-office/features/ http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ http://typophile.com/node/81483 http://informationarchitects.net/blog/responsive-typography/
9
DESIGNING FOR THE READING EXPERIENCE
Glyphs are rendered differently even on devices from the same manufacturer. Shown here is Adelle set at 16 pixels as rendered on an iPhone 3G, iPad 3 and iPhone 4S, enlarged in Photoshop, from a Web page screenshot.
Another example is typesetting for screen billboards and TV screens, which often require thicker weights and more weight contrast. In such cases, you would skip two weights on a scale and combine the regular style with the extra bold. Previewing such designs on your desktop or Retina laptop is not enough. As with designing for mobile, we have to test on real hardware. The Interface Type Hardware and software aspects aside, context also refers to the type of interface. For instance, on content-driven news portals, magazines, novels and textbooks in a digital setting, strings of sentences should have a clear structure, directly connected to each other and that form a linear reading path. Topics on content-driven websites are usually diverse (even on niche websites), and a story needs to be introduced clearly in order for the reader to understand it. (Remember the editorial devices from above?) On the other hand, information in Web applications is straightforward, usually bare-bones and factual, with easily comparable items or data, most often constrained to a certain timeframe. Unlike sentences in linear text, bits can be read and comprehended in isolation and are, therefore, open to the reader’s interpretation. We can safely assume that the user will jump randomly, in a non-linear fashion, from one bit of information to another. With Web applications, the context of content is mostly predictable. Some typical use cases are checking sales figures; analyzing website statistics in tables, diagrams and charts; editing date- and time-related
10
notes; and, in the case of Web mail, checking whether you are the lucky winner in the Nigerian Royal Lottery. THE USER On the Internet, everyone is our target customer, especially if we are building a multilingual system. If a button has just enough room for “Return” in English, then “Retour” in French, “Zurück” in German, “Povratak” in Croatian and “Visszatérés” in Hungarian might not fit. Accessibility Concerns Dyslexia is an impairment to a person’s ability to read. For instance, a dyslexic brain sees characters as images and rotates and mirrors letters. As a result, a lowercase two-story “a” with a weak tail might appear the same to a dyslexic person as an italic “e.” In addition, most characters in geometric typefaces are hard for people with dyslexia to read because of similarities in form and shape. The mirrored “p” might look the same as a “q,” and a rotated “n” might look the same as a “u.” This doesn’t mean we should immediately switch to specialized typefaces, but being aware of such conditions is a part of the Web designer’s literacy. To complicate matters, dyslexia occurs with another learning disability, attention deficit disorder, in about every fourth case.
Added gravity keeps the letters in place. Shown here are Futura and Open Dyslexic.
Font smoothing on the screen is possible thanks to red, green and blue subpixels. Unfortunately, for a small percentage of the male population, some typefaces appear sharper or blurrier, lighter or fatter than for the rest of us, simply because the red subpixel isn’t distinctive enough. With free tools such as Color Oracle22, seeing how your typeface of choice performs for the color-vision impaired is easy. 22. http://colororacle.org/
11
DESIGNING FOR THE READING EXPERIENCE
Those with color-vision impairments perceive anti-aliased letters differently.
Selecting A Typeface For Function Over Form Contrary to popular belief, having an eye for the perfect typeface is not an innate gift. Sure, talent will give you an initial advantage, but that will take you only so far. Train yourself to learn about the project at hand, and insight into suitable typefaces will come, thus helping you narrow the pool to a few appropriate candidates. A little digression. Many tutorials and how-to’s have been written about choosing the appropriate typeface based on atmosphere and on look and feel. Designing atmosphere, evoking emotions and visually distinguishing a brand from its competitors is the responsibility of the graphic and UI designers. A typographic designer, or typesetter, takes a different angle, starting with the utilitarian needs and goals of the project, and developing from there. Both aspects are often required for a successful, well-rounded project. Because these goals are so different, we have to be leery of suggesting font combinations and using less-than-specific adjectives such as “beautiful” and even the less-dramatic “nice” without providing context. A typeface can only be judged in the context of a particular situation. If a typeface is observed in isolation, then we must evaluate it at a strictly technical level. When I see Comic Sans used on an invitation to a kindergarden party, the first thing I’ll do (of course) is roll my eyes. But at some point, I have to be honest and admit that it’s appropriate to the audience— my kids and their friends — as long as I don’t encourage them to use it 12
everywhere. But if I saw Comic Sans on a company memo, I’d probably go postal23. SERIF VS. SANS: WHO STARTED IT? Many beginners have a hard time choosing between serif and sansserif typefaces. As always, it depends on the situation, but it should never be a matter of the typographer or client’s personal taste. There is no difference in legibility between the two24, especially in this era of highdensity screens. Sometimes a project allows us to cut corners, and if we do our homework and learn about the content, we can make informed decisions. For example, if we are presenting vertically oriented data (for example, a table of exchange rates or a list of product prices), then it would probably be better to use a typeface without serifs, which usually adds a horizontal emphasis. On the other hand, because serifs encourage horizontal flow along the line of text, they are more suitable for a set of linear thoughts or where vertical space is scarce. We all know it, but we often forget to step back and see the bigger picture in a project. For instance, I like the reasoning of Vitaly Friedman and Elliot Jay Stocks in their decision to go with a sans serif for Smashing Magazine’s body text. Upon taking a bird’s-eye view and observing the page’s layout and interface as a whole, they concluded: “Because there’s a lot going on visually on Smashing Magazine— screenshots, buttons and noisy ads—a sans-serif felt like a more sensible, uncluttered route for body copy.” — Vitaly Friedman and Elliot Jay Stocks LETTER LEGIBILITY Another important test of legibility is how different each glyph is from the other glyphs in a single typeface. Designers use pangrams25, or short test strings, to evaluate and compare typefaces; for examples, the famous “The quick brown fox jumps over the lazy dog,” “Handgloves” and “Hamburgefonstiv.” The text “aegh! iIl1 0O,” devised by designer Jon Tan, goes a little further. It is a good way both to get a sense of a typeface and to check the distinctness of the “i,” “I,” “l” and “1” and of the “0” and “O.”
23. http://www.urbandictionary.com/define.php?term=go+postal 24. http://asserttrue.blogspot.se/2013/01/the-serif-readability-myth.html 25. http://en.wikipedia.org/wiki/Pangram
13
DESIGNING FOR THE READING EXPERIENCE
We can extend such strings even further and include italics, small caps and numerals. For example, we could extend the string with an italic “e,” just to make sure it’s not too similar to a rotated lowercase “a,” especially at smaller sizes where character detail can get lost.
Try to avoid ambiguous letterforms. Top to bottom: League Gothic, Gill Sans, Myriad Pro, Neue Helvetica.
FOREIGN AFFAIRS Support for international visitors is a must. If you are about to set the whole website in a language that you are not familiar with (say, Arabic or Vietnamese), then you’ll probably need a one-on-one lesson with a local typographer. But most Web designers will build user profiles for their international audience, and we have to make sure that all characters are supported and that the typeface works in languages less common than English and Spanish. Each language has a particular critical combination or two. It’s not uncommon to see a character sequence of “gy” in Hungarian or “ij” in Ijekavian dialects in some South Slavic languages, not to mention digraphs26 (“ch,” “dž,” “ij,” “lj” and “ty”) and trigraphs27 (“dzs” and “sch”), which are usually represented with two and three separate glyphs, respectively. As a curiosity, in the Italian alphabet28, the letters “k,” “j,” “w,” “x” and “y” are used only for words adopted from other languages, and
26. http://en.wikipedia.org/wiki/Digraph_(orthography)#Digraphs_versus_letters 27. http://en.wikipedia.org/wiki/Trigraph_(orthography) 28. http://en.wikipedia.org/wiki/Italian_alphabet
14
some of them are used strictly colloquially —for instance, “k” as an emphasized “c”— or so I heard when I cut a guy off in traffic the last time I was in Italy. But I digress. The slightly reduced alphabet results in frequent letter combinations such as “cc,” “ll,” “tt” and “zz” next to—or surrounded by — “o” or “i.” You can already guess that these combinations can make for some awkward spacing. In southeast Europe, family names often end with “č” or “ć,” and no one likes when a letter in their first or last name is stripped of a diacritic or, even worse, rendered in a fallback typeface. Danish and Norwegian, for example, use “ø,” and German uses “ß” — and those are still only within the Latin alphabet.
Know the characters and combinations in your target language.
In order to cover the extended Latin alphabet, we obviously have to choose a typeface that covers all Central European characters (i.e. use paid fonts). But in cases of the aforementioned letter combinations in less common languages, it wouldn’t hurt to consider typeface candidates that support those particular languages, because at the time of writing, kerning is still not possible with CSS (no pun intended). WE READ FAMILIAR TYPEFACES BEST, BUT WE LEARN BETTER WITH UNFAMILIAR ONES. People are believed to read best in familiar typefaces29 (PDF, 11.5 MB). Even experts — namely, Zuzana Licko and Erik Spiekermann —say that 15
DESIGNING FOR THE READING EXPERIENCE
we read best in what we read most. Learn about the history of the typeface you’re considering and compare it to the usual suspects for the target audience. Skolar30, a typeface by David Brezina, was designed for scholarly and multilingual publications, where people are used to seeing Times New Roman. Skolar is fresh and modern, yet similar enough in features and appearance to Times New Roman to be easily adopted by this user group. It’s a safe bet and a good option to begin with, but by all means do experiment and try alternatives that might appeal to your target audience.
Skolar as a replacement for Times and Times New Roman? Can you spot the difference between the two Times’?
A recent study by Connor Diemand-Yauman, Daniel M. Oppenheimer and Erikka B. Vaughan on the “Effects of Disfluency on Educational Outcomes31” (PDF, 1.3 MB) found that information rendered in hard-toread fonts was more easily remembered than information rendered in fonts deemed easier to read. The study showed that deeper processing stimulated by disfluency led to improved memory performance. This doesn’t mean we should automatically select the strangest typeface on the planet, but considering an alternative to a popular typeface does make sense. DISPLAY TYPEFACES IN THE RESPONSIVE ERA Condensed gothics and grotesques as well as specialized decorative typefaces are being rediscovered on the Web. They add style and 29. http://www.usability.gov/pdfs/chapter11.pdf 30. http://www.type-together.com/Skolar 31. http://smashed.by/disfluency
16
weight, functioning especially well as attention-grabbers in mastheads and as anchors in lengthy text. Stylistic suggestions are beyond the scope of this chapter, because headlines on the Web are often written to conform to SEO best practices in order to attract more visitors, which is a somewhat different function from headlines in print material. However, let’s look at a potential pitfall in setting headlines in a condensed typeface on the Web, where the context is never static. If changes in screen orientation and aspect ratio are neglected, then a multi-word headline set in a “skyline� typeface (i.e. a tall condensed sans serif) might work with landscape-oriented and desktop-sized breakpoints; at the same time, it might occupy too much vertical space on a smartphone in portrait orientation, especially if the original singleline headline is pushed onto a second line. Merely reducing the font size to fit the element could help, but the result might not be as legible as the text on a desktop screen. The opposite also applies. If we are designing mobile first, then a big bold headline that works perfectly on a tiny screen might be too loud if literally transposed to desktop sizes. An extended companion to a condensed typeface set at a smaller font size could provide a better match where vertical space comes at a premium. When the extended typeface is too tiny, the condensed partner could step in.
17
DESIGNING FOR THE READING EXPERIENCE
This headline, set in the League Gothic on a single line, is barely legible on mobile. Set on multiple lines, the headline occupies too much vertical space.
18
Nimbus Sans Condensed and Nimbus Sans Extended in action.
Combining Typefaces Typefaces are combined to create tension and to generate interest in a design. In most cases, however, once the reader is pulled in, favoring order and structure of composition over the beauty of letterforms will improve the flow of reading, especially on low-resolution screens, where subtleties and details of typographic accessories are not immediately evident. Consider this piece of advice as a last attempt to talk you out of combining very different fonts, unless absolutely necessary. As a rule of thumb and in order to avoid a complete typographic disaster, combine typefaces with matching x-heights. Comparing x19
DESIGNING FOR THE READING EXPERIENCE
heights at the same font size is a litmus test to see whether words set in different types can coexist. Always keep in mind that typesetting for the Web should be bulletproof and future-proof. That being said, maintaining typographic harmony is not the easiest task if elements sitting on the same baseline need different letter sizes as compensation for mismatching x-heights.
Aller combined with Minion Pro, Georgia and Adelle. Notice how Minion Pro and Georgia call for additional adjustments to line height.
A SAFE BET APPROACH The easiest solution to combining typefaces is to follow type relationships and your own common sense. A typeface that is a member of a bigger system can be combined with other family members along any of the axes (such as weight, width and cut), so being able to use typefaces from the same type family will come as a relief. Look for extended families or super-families that have more than a few basic styles (including regular, italic, bold and bold italic). Extended families include everything from thin to black weights and sometimes multiple widths, while super-families, also referred to as type systems, additionally contain sans-serif and serif companions, text and display cuts and sometimes graded fonts. Don’t worry too much about exact classifications, because categories are not always consistent from foundry to foundry. Plus, the boundary between extended families and super-families is not always clear. For example, some collections include sans-serif and serif in multiple weights but not multiple widths. Remember, though, that most type families have only a limited number of basic styles, while only a few dozen are versatile enough to cover all typographic needs. (A few dozen out of the hundreds of thousands of typefaces in existence today is a
20
tiny fraction.) If you have trouble combining typefaces, versatile collections are always a good option to begin with.
JAF Bernino Sans has multiple weights and widths. The grayed-out letters are fake italics, also referred to as slanted romans. Some browsers are capable of distorting fonts into a slanted shape on the fly with CSS, but pseudo-italics are considered a typographical crime.
Typefaces designed by the same designer are often a smart combination, because proportions, shapes, strokes and angles will share the same DNA. Note the typefaces designed by Jos Buivenga, Veronika Burian, Matthew Carter, Nikola Đurek, Adrian Frutiger, Jose Scaglione, Mark Simonson and Erik Spiekermann, to name just a few of my heroes, and try to spot each designer’s signature. As a last resort, combine typefaces from the same foundry, because a foundry will normally offer typefaces that can be combined. A smart designer subscribes to typography-related newsletters and, consequently, gets exposed to a significant number of proven and reusable combinations, as suggested by the experienced designers and typographers who work at foundries. As a bonus, your newsletter folder will become a nice reference archive over time. If you still want to experiment on your own, create enough contrast between typefaces to achieve a comfortable balance. Avoid typefaces with competing characters, which would create too much noise and distract the reader. If two typefaces are too similar, though, the reader might get irritated just because they can’t clearly see the differences. Combining two neighboring weights (such as regular and semibold or bold and extra bold) shouldn’t become a habit unless you absolutely know what you’re doing. 21
DESIGNING FOR THE READING EXPERIENCE
As with cooking, start by preparing simple edible meals. Then, after you’ve gotten some experience in not poisoning people, you can safely put the cookbook on the shelf and start experimenting with exotic spices and your own routines. If you are dying for some practical examples, here are a few handy articles: • “Best Practices of Combining Typefaces32,” Douglas Bonneville • “‘What Font Should I Use?’: Five Principles for Choosing and Using Typefaces33,” Dan Mayer • “How to Choose a Typeface34,” Douglas Bonneville
Editorial Accessories Display and decorative typefaces are appropriate for short text snippets, such as headlines and pull quotes, because they set the tone and atmosphere and break up long copy (remember the reading-time assessment from above?). Text typefaces are utilitarian and suitable for long reading. Reading can get boring after a while, particularly on an attention-hostile technology such as an Internet-connected computer. “Designers like even grayness, which is the worst thing for a reader.” — Erik Spiekermann Insert an occasional break with a heading or pull quote, to nudge the reader along. Pull quotes that highlight important facts from the text would benefit from a display typeface. Because headings are a part of the main text, they are best set with a variation of the primary typeface (small caps, for instance). As stated, this is more of a safe bet than a rule set in stone.
We Have A Responsibility Two important factors should influence your decisions. First, if they don’t like your typographic choice, a reader can change it via the customization options built into the application or device. And if they do that, they will usually change it to something more generic, thus ruining your typesetting altogether. Back in the day, when we combined ab32. http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/ 33. http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principlesfor-choosing-and-using-typefaces/ 34. http://www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/
22
solute units for line heights with relative units for letters in Internet Explorer (or so I’ve heard), even a slight increase in letter size would bring chaos to the page. Secondly, the absence of a fold or any physical boundaries of the page is both a curse and a blessing. On the positive side, the space for content on the screen is virtually infinite. On the negative side, designing a balanced layout becomes more difficult because, in most cases, it won’t be seen all at once from top to bottom. This is why editorial accessories are valuable features that can help us design a better reading experience. Once the user scrolls further down the page, we can’t expect them to run a marathon all the way to the end. When designing for everyone, we shouldn’t assume anything. We ought to accept that our typographic designs will be seen on various hardware devices, in a range of pixel densities. We have to make sure our text is as legible as possible when seen in the virtually limitless combination of variables such as space, time, cognition, social conditions and physical conditions. The days of hard and fast rules are gone, and our responsibility is to learn everything we possibly can about a project in order to make informed decisions and establish a solid design concept. ❧
23
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
Logical Breakpoints For Your Responsive Design BY VASILIS VAN GEMERT ❧
There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks. This sounds much better. But it still leaves us with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.
What Do The Books Say? According to Robert Bringhurst35, “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” And Josef Müller-Brockmann36 writes that, “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” A few variables determine the exact number of characters or words, but this is the basic theory: If you start with a small screen and you grow it, every time the width of the main content grows wider than either 75 characters or 10 words, something should happen. Simply said, these are your breakpoints.
Variables That Define The Ideal Measure Many variables define an ideal measure. For instance, the German language has longer words than English, which could very well result in a wider column. Yes, you read that correctly: you could have different grids based on the languages for international websites. Font, font size, contrast ratio with the background, leading, kerning, type of text, etc. — all of these could result in different lengths of line. Most importantly, the insights and experience of the designer are a major influence on the measure. You might very well decide that a
35. http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style 36. http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450
24
measure between 75 and 90 characters is ideal. But I am not a designer, and I’m not a typographer, so I’ll just stick to the theory that I find in the books I read. Talented people who know what they’re doing are, of course, invited to play with the theory.
I created this simple international measure slider37 to give you an idea of how wide a measure can be. (Yes, I know, it’s weird.) This little tool looks only at language and font family, but you’ll see that these two variables alone can lead to some extreme results. Just compare German or Polish with English or, even better, German set in Verdana with English set in Georgia. The difference is huge: 10 German words set in Verdana can be 38.5 ems wide, while 10 English words set in Georgia are just 22 ems wide. In most default browser settings, that would be 616 pixels versus 352 pixels. You see, these two simple factors should have a major impact on the grid. A good measure is essential for articles. I know that the Web is not just articles. You could very well be working on a Web app with very little text to read. But even then, starting with the measure when defining breakpoints might be a good idea.
37. http://nerd.vasilis.nl/code/measure-help/
25
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
Our Example As an example, I’ll be using a simple blog post. It’s a structured but simple article, with some common semantic elements in it. These elements are not necessary to define the breakpoints, but I think they might help; typography can be a logical starting point. I’ve left out the header and logo —let’s concentrate on the content first. Of course, if you open this unstyled article38 in a browser, it will look ugly. There is no styling except for the default styling that the browser uses for the elements in the article. The text is as wide as the browser, which is probably too wide on a desktop. This could very well be what someone on IE 6 sees —a somewhat accessible article with rudimentary styling. By adding just some basic typographic styling and a max-width attribute, the article immediately looks much better39. This page can now serve as a starting point to define all of the different responsive grids. This single column probably needs some adjustment for small screens40, and on wider screens41 we should probably add some columns, either to make things prettier or to show more information such as navigation or asides.
38. 39. 40. 41.
26
http://nerd.vasilis.nl/code/smashing/typo-grid/step1.html http://nerd.vasilis.nl/code/smashing/typo-grid/step2.html http://smashed.by/scrollbars-small http://smashed.by/scrollbars-wide
Large view.
Logical Breakpoints I never paid attention in maths class before dropping out of high school a long time ago, so I’ll stick to a very simple grid that even I understand. Smarter people could probably use these same ideas for more complex grid systems. This chapter is about defining breakpoints; what you do with them is entirely up to you. SMALL SCREENS I’ll start with the small screen. One theory of Oliver Reichenstein42, a theory I really like, is that font size doesn’t depend on screen size; it depends on the distance between our eyes and the device we’re using. We tend to hold our phones closer to our head than our laptops, so this might warrant smaller fonts. The other theory of Robert Bringhurst, as explained above, is that an ideal measure should probably not be smaller than 45 characters. In our case, where we use a 16-pixel Georgia as the default font size, this would result in a slightly smaller font size. Both theories are fine, and they both tell us to reduce the font size on small screens. So, all of the code we’d need for small screens is this: @media (max-width: 22em) { body { font-size: .9em; padding: 0 1.5em;
42. http://informationarchitects.net/blog/responsive-typography-the-basics/
27
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
} }
This says that whenever the measure is smaller than 45 characters (according to our tool), show a smaller font size. I also reduced the padding on the body to create a bit more space for the content. See the example right here43.
BIG SCREENS Sometimes, a single column is enough. Content-focused websites, such as blogs, could very well do with a one-column layout. But multiple columns on big screens are actually a good idea in many situations. You might want to show some navigation, or perhaps you’ve found some widgets that actually make sense. You could very well choose to show these next to the main content. But you could do other things as well. For instance, right at the point where there is room for an extra column, we could play with the layout of our article. I added a 33%-wide column44 to the left, filled with the heading and the first paragraph of the article. Other elements, such as block quotes and images, could fill this gap as well. The code gets a bit more complex here. And this is definitely not the only way, or the most maintainable way, to create a layout like this. But this is how I did it. @media (min-width: 34em) { body {
43. http://nerd.vasilis.nl/code/smashing/typo-grid/step3.html 44. http://nerd.vasilis.nl/code/smashing/typo-grid/step4.html
28
max-width: 51em; }
article { width: 66.66666%; margin: 0 0 0 33.333333%; }
h1, h1 + p { margin: 1em 0 1em -50%; }
/* And some font-size adjustments */ }
When the screen is wider than 34 ems (30 ems for the content and 4 ems for the margin), the maximum width of the body is increased to 51 ems: 34 + (34 ÷ 2). The article should now be two thirds of the total width, and the new column on the left should be one third. The h1 and p right after it should have a negative margin of one half the width of the content. This is where I really cursed myself for not paying attention in maths class!
EVEN BIGGER SCREENS We could add a third column, and a fourth and a fifth. We could also decide that we’re done. It all depends on the content. We could use that space to show some images or some relevant content. It’s really up to you and depends on the thing you’re creating. In our case, we could
29
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
show the footnote to the right45 of the content. Now, stop laughing! I told you, I am not a designer! Here is the code for that work of art: @media (min-width: 51em) { body { max-width: 68em; }
article { width: 50%; margin: 0 25%; position: relative; }
h1, h1 + p { margin: 1em 0 1em -50%; }
.sidenote { position: absolute; right: -50%; width: calc(50% - 2em); font-size: .9em; } }
The article is now 50% wide and has 25% of margin to the left and to the right. The side note is placed 50% to the right, outside of the content. It is 50% wide, minus 2 ems for good looks. The code for the h1 and p did not change. Note that calc does not yet work in all browsers46, so a fallback is needed. The real code for the width bit looks like this: width: 45%; width: -webkit-calc(50% - 2em); width: -moz-calc(50% - 2em); width: -ms-calc(50% - 2em); width: -o-calc(50% - 2em); width: calc(50% - 2em);
Yes, I know that not all of these prefixes are necessary, but I prefer to use them all, always. The other option is to remember by heart which
45. http://nerd.vasilis.nl/code/smashing/typo-grid/step5.html 46. http://caniuse.com/#feat=calc
30
CSS feature is supported by which browser, with or without prefixes. If I understand the cascade correctly, this is perfectly harmless. And besides, it looks good. I can clearly see that cool stuff is going on in this part of my style sheet by the pattern that it generates. So, this is it. Here we have a responsive website, based on font size and measure47. The breakpoints are based on a logical unit, not on some random units like the screen sizes of devices that are in vogue right now. This scales — into the future and in the browsers of your users. Because everything is based on font size, it all responds to the preferences of the person visiting your website. The layout does not break when the font size of the browser is increased. On the contrary.
Breakpoints are not based on some random units like the screen sizes of devices.
47. http://nerd.vasilis.nl/code/smashing/typo-grid/step5.html
31
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
Technically When we started with responsive design a few years ago, we created a desktop website first and then added media queries for smaller screens, overwriting the styles for the desktop version. We found out that that’s not the right way to work. We all know by now that the best way to set up CSS is by starting with a small screen first. After all, growing is easy —trees grow, babies grow —and shrinking is hard. Ever tried to compress a car? It’s possible to a certain extent, but also very hard. In most cases, starting with a small screen is a logical thing to do. As we make things bigger, we only need to add some media queries every now and then to adjust the layout for bigger screens. But I think it’s not really about small screens — it’s about defaults. DEFAULTS FIRST The first thing we need to define is not necessarily the styles for a small screen, but the defaults: the styles that are used throughout the website, regardless of screen size. These are things like the relationships between font sizes, white space and brand-related styles like borders and backgrounds. These styles should not be inside a media query because they are used everywhere. What we want to define in media queries are the exceptions (like a smaller font size) or additions (like grids) to these basic styles. This could very well mean that we have to use a media query for small screens only if a certain element behaves differently. When you think about it, this happens a lot: page headers, navigation and other complex components are often radically different on small screens. It makes sense to put the code for these components in a @media (maxwidth) query, as I did in the example, because it’s an exception to the default.
Some Final Details The example I showed you is very basic, and I did not explain many details. Two of them are rather important, so I’ll add them here. One is about using ems for media queries, and the other is about breakpoints. BREAK RANGES There has been some discussion lately about the term “breakpoints.” Mark Boulton48 and Ben Callahan think49 we should call them “opti48. http://www.markboulton.co.uk/journal/theinbetween
32
mization points,” and Jeremy Keith distinguishes between breakpoints and “tweakpoints.”50 In this chapter, I’ve been focusing on breakpoints— i.e. major changes in the layout when the content asks for more or less space. And now I introduce yet another term: break ranges. We use the term “breakpoints” for media queries that make the layout completely different. We tend to use them as direct changes: when a layout reaches its maximum width, we immediately switch to the next layout. Waiting a while and adding some white space first before switching is often better. For instance, the switch between the one- and two-column layouts results in a rather small main column. Instead of switching at the exact moment that the content reaches its maximum width, we could just wait a while, as I did here51. This is a very simple trick to never break the layout. EMS IN MEDIA QUERIES Using ems in media queries can be weird. You might assume that they respond to the font size specified in the CSS, but they don’t. They react to the font size of the browser that the visitor is using. This is actually logical when you think about it. If they reacted to the font size in the CSS, you could actually disable a media query from within a media query by increasing the font size. This piece of code would create an endless loop: html { font-size: 100%; }
@media (min-width: 20em) { html { font-size: 200%; } }
If the media query reacted to the font size defined in the style sheet, then what would happen as we slowly increased the width of the browser? As soon as the screen got wider than 20 ems, the font size would grow twice as big. This means that the width of the page would now be 10 ems, which would mean that the browser should now ignore the media query. This would result in the smaller font size, which
49. http://seesparkbox.com/foundry/there_is_no_breakpoint 50. http://adactio.com/journal/6044/ 51. http://nerd.vasilis.nl/code/smashing/typo-grid/step6.html
33
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
would immediately trigger the media query again. That’s an endless loop. But it’s logical not only from a technical perspective, but from the user’s perspective: If the user prefers a bigger font, then the layout would always be optimized in a way that’s relative to the font size. And that’s what we’ve been doing here all along. At the same time, it can also become a pretty big mess for people like me who should have paid attention in high school: The ems that the media query uses could have a completely different size than the ems inside it. This is complex. If you want to learn more about this, definitely read Lyza Gardner’s classic article on the subject, “The Ems Have It: Proportional Media Queries FTW!52.” One thing that really bugs me is that we need a silly tool to estimate the number of characters on a line. WebKit has only now implemented the “ch” unit into its nightly builds; it will probably take some time before we can actively use it. One ch is the actual width of the 0 (zero) of the font in use. It sounds like an incredibly useful unit for responsive design, but I’m not sure how it will work with media queries. We’ll see.
Conclusion In an ideal situation, the different grids for the various screen sizes would be defined by the content alone. There are, of course, situations in which other elements, such as banners, would more heavily define the width of the content. Even in these situations, readability theory might help; you could increase or decrease the font size of the body copy in order to stay within the margins of an ideal line width. Just don’t make the text too small — people want to read it. Fortunately, in most other situations, classic typographic theory can help you determine the right breakpoints for your responsive website. You could even go so far as to create different layouts for different languages. When you’re working on large international websites, this might actually be a good idea. Most importantly, use the theory in this chapter to better design your content for all different screen sizes, on both current and future gadgets. The example I’ve shown uses a very simple grid, but in combination with more complex grids53, this theory can help to create wonderful, and logical, websites. ❧
52. http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ 53. https://gridsetapp.com/
34
Sketching A New Mobile Web BY DENNIS KARDYS ❧
The mobile Web has gotten a bum rap. It spends most of its time either in the shadow of the desktop or playing the role of the native app’s frumpy friend. Luckily, we’ve got the tools to change that. Progressive enhancement, mobile-first and responsive design can help lead us towards a more unified, future-friendly Web. That’s the good news. The bad news? These tools are worthless if you don’t have license to use them. What’s holding us back, in many cases, is our clients and the conceptual models they cling to. If our clients are to embrace the potential of the mobile Web, then we need to get them thinking beyond desktops and apps.
The Promise Of The Mobile Web Is a Tough Sell Let’s face it: designing responsively takes longer and costs more. When we introduce different screen sizes, resolutions and device capabilities, there’s a lot more to design. We’ve got more layouts to wireframe, different gestural interactions to consider, and a broad range of functional capabilities to support. All of this packs on significant testing time as well. Still, time and expense can be justified, especially when compared to the cost of trying to retrofit device-specific optimizations onto your design. You can make rational arguments to justify longer timelines, and most companies can find additional resources when they want to. There’s an obstacle much bigger than time or cost: it’s the obstacle of change.
Change Is Hard Changing the way we do things is hard. Breaking from convention is scary. As humans, we’re naturally averse to this. Saying, “Got no time, got no money” is much, much easier than investing in a forward-thinking strategy that requires a fundamental shift in our notion of what a website is. We’re battling against stereotypes that we’ve collectively created for the Web. Ask someone to envision a website, and they’ll picture a 960-pixel-wide layout, comfortably nested in their desktop browser window. Ask them to envision a mobile website, and they’re
35
SKETCHING A NEW MOBILE WEB
bound to think of apps. They’ll picture a simple task-based interface with limited content, minimal navigation and elegant transitions. Desktop and mobile: two entirely different beasts.
We continue to fracture the Web every time we prompt users to choose a path: desktop or mobile website.
EXPECTATIONS ARE PROJECT BAGGAGE We need to wean ourselves and our clients off the baggage that these expectations introduce into projects. We need to abandon outdated conventions. That’s easier said than done, so let’s attack the problem head on. Below, I’ll share the methods we use to change the way people think of the mobile Web; if you have other or different methods, let’s hear about them. How do we get ourselves and our clients to let go of the conceptual models they cling to? RATIONAL APPEAL IS EFFECTIVE (UNTIL IT’S NOT) Begin by creating a compelling business case for a more responsive approach to the Web. Bombard your stakeholders with mobile statistics54, research and real use cases. If they seem to be hung up on creating mini-websites with arbitrary portions of content, then discuss the fragmentation of screen sizes. Focus specifically on that murky area between large smartphones and small tablets. Challenge them to define at exactly which screen size the interface should turn on its head and snatch the content from users’ reach. If you’re able to build a strong case, you should have a room full of people who see the light and are
54. http://cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
36
amenable to this new approach. Until they’re not… until later when they seem to have relapsed into their old ways. Rational arguments for adaptive design will get you only so far because: 1. You are asking people to discard a conventional system that they’re familiar and comfortable with; 2. The concept remains abstract, creating a gap between theory and reality. If a client can’t envision how their website will adapt across a range of screen sizes, then they’ll have trouble committing to this approach. In the wake of uncertainty, people will retreat to the security of convention. If you want to lead clients to a new way of thinking, collaborative sketching can help shape the path.
When guiding clients down an unconventional path, the first steps are always easy. How do you keep them moving forward, and stop them from turning back halfway?
USE SKETCHING AS A FORM OF EXORCISM Expectations of a design start to form the moment team members begin to envision the project. As planning and discussion go on, the mental images that take shape become more defined. This can lead to situations in which you find yourself designing for what’s in the client’s head, instead of designing for the project’s goals and users’ needs. In order to get people to accept new ideas, you need to exorcise the old ones. This is where sketching comes in. We often think of sketching as a way 37
SKETCHING A NEW MOBILE WEB
to generate and communicate ideas, but we can also think of it as a weapon to dismantle them. The goal of sketching here isn’t to produce drawings that inform the final design. We are not replacing the UX process. The goal is to drive out those stubborn, thorny ideas and make room for new ones.
Developing A Workshop Plan The steps outlined below reflect our current process. Although each one has value independently, consider how they work in combination to guide the group’s thinking along an intended path. Try to continually approach the design from different angles, alternating between techniques that require the group to focus (convergent thinking) and those that require the group to explore (divergent thinking). As you do so,
38
conflicting ideas may emerge. Embrace these points of dissonance, because they can be key to breaking stubborn mental models. The current process of our design workshop is this: 1. Set up, define objectives Prioritize the goals that everyone is working toward. Establish the rules and the criteria through which ideas will be discussed and evaluated. 2. Stick-figure comic strips Set some context that exists beyond the screen. Give people a world to design within. 3. Mobile-first Ask the group to focus on information hierarchy and user goals. Get the small-screen ideas (especially those thorny app-centered ones) out of people’s minds and onto paper. 4. 6-up templates Introduce conflict. There is likely a gap between what the group just drew for mobile and what it’s been envisioning for the “desktop” website — explore these incongruities. Purge as many ideas as you can from the minds of the participants. 5. Concept sketches Collaboratively reconstruct ideas into new models that work regardless of screen size or device.
Set Up DEFINE THE WEBSITE’S BUSINESS OBJECTIVES AND USERS’ NEEDS Stakeholder group Time: 30 to 60 minutes. 1. Establish and prioritize objectives. Before any drawing happens, we try to set some parameters. We begin by establishing the website’s objectives, all of which we make sure can be tied back to the organization’s broader goals. Steering clear of anything that describes particular features or functionality is important. “Quick links” and “Rotating slideshow” are not objectives. We list as many objectives as we can on a whiteboard or large sheet of paper, assigning a priority to each one.
39
SKETCHING A NEW MOBILE WEB
2. Define audiences and user needs. Next to that, we create a new list of user needs. This information should really be drawn from actual user research and interviews. Worst case scenario, if you are not able to get any, you could draw on your clients’ understanding of the target audience and what they perceive their needs to be. Start by identifying the primary user group and listing the tasks they will need to complete on the website. If you’re having trouble coming up with a list of actionable tasks, think about questions these audience types might have when coming to the website. What is motivating them to come in the first place, and what information would be most valuable to them? After brainstorming the needs of your primary target audience, move on to any key secondary audiences. 3. Brainstorm mobile opportunities. Now that you have created a list of website objectives and user needs, it’s time to start planting the mobile seed. When we approach this, our goal is to start shifting people away from the mindset that mobile needs to be an add-on or a website-lite experience. I’ll challenge the group to think about what opportunities are created when a user is not tethered to a desk. What if they’re on a couch, at work or standing around somewhere? How do the capabilities of different types of devices open up possibilities for interacting with content that didn’t exist before? The goal here is to generate a lot of different ideas, even if some of them are implausible. Get people pumped up by the possibility of adding to rather than subtracting from the website. This exercise is not meant to be exhaustive, so we try not to spend more than an hour total on it.
Start Sketching With the set-up out of the way, it’s time to start sketching. These sketching exercises seem to change a bit from time to time and depending on the dynamic and size of the group we’re working with. Counting people on both sides, we try to limit the workshops to around 10 people or just under. This allows everyone a chance to work individually, but the group is also big enough that you can break into small teams. The more clout the group has, the better. Sketches should be simple and, more importantly, fun. Which brings us to our first exercise: stick-figure comic strips.
40
STICK-FIGURE COMIC STRIPS Teams of two or three Time: 30 minutes plus discussion. Stick-figure comics are simple to do. Break your group into teams of two. Give each team a piece of paper filled with square panels, and ask them to draw a crude comic that depicts a member of the target audience coming to the website and ultimately completing a task. We used this technique most recently when working with Marian University in Wisconsin. To give our burgeoning comic artists a little more direction, we specified, “Begin your comic strip with a character who is representative of your target audience. Your character’s story does not begin on your website. Think of a place where the story begins. What motivates them to visit your website, and what actions do they take when they get there? What device are they using?” In the university workshop, one team described the story of a teen who is attached to his friends and home town and doesn’t want to move away for school. He loves sports but doesn’t quite have the level of talent to play at a larger university. He’s excited to see that this university offers sports and has great student residences. He’ll be able to experience campus life while being just a short drive from home. The sketches showed the protagonist coming to the website with a purpose and interacting with different pages.
Drawing comics can be a fun way to imagine new use cases, whimsical though they may be.
41
SKETCHING A NEW MOBILE WEB
These storyboard-type comics are great because they make people turn lists of needs and objectives into narratives. Layers of abstraction peel away as participants relate detailed accounts of how they envision individuals using the website. This also moves conversation in the right direction, getting your stakeholders excited about how the website plays a role that extends beyond the screen and into people’s lives. 3-UP MOBILE-FIRST TEMPLATES Solo sketching Time: 30 minutes plus discussion. We’ve got people thinking in the right direction: stories about people using the website. Then we’ll start to focus on the website’s interface. I’ll point to the whiteboard, filled with scribbles and notes about users and objectives, and remark that including all of that on one page wouldn’t work. After a brief refresher on the mobile-first approach, we hand out 3-up mobile templates to every person in the room and then establish which key page(s) to focus on. The challenge for this exercise is to “Assume that your user is using a device with a small screen. There is not a lot of room for complex interactivity, and you have limited space to present your content. What do you show on this page? Focus on the priority of content and the actions you want to encourage.” With this and the other sketching exercises, keep everyone focused on the adaptability of the content, not the container. Whereas the brainstorming and storyboards encouraged everyone to think big and to explore a wide range of ideas, this exercise is designed to rein in those ideas. The narrow page templates require people to focus and draw only the most important ideas and page elements. Many of the sketches will still look like apps at this point. This is a natural starting point and to be expected. Once sketching is complete, ask each participant to explain their ideas to the rest of the group.
42
Mobile templates challenge participants to focus on important content and actions.
6-UP RESPONSIVE TEMPLATES Solo sketch Time: 30 minutes (no discussion) If we could get through the entire sketching and design process without relapsing to age-old conventions, that would be great. But although we’ve come up with a lot of new ideas so far, we haven’t really done anything to get rid of those sleeper agents — those notions of “what a website should be” ingrained so deeply that they are bound to reemerge. In the 6-up sketching exercise, we’ll ask each team member to take their original ideas from the 3-up mobile sketches and think about how to adapt them to different screen sizes. If new page elements are introduced, they should be justifiable and tie directly back to the user goals or website objectives established earlier. We’ve modified the traditional 6-up exercise slightly so that there’s an inconsistency between the proportions of the six panels; the boxes are still small, so that drawings stay crude. What I like about this exercise is that it encourages participants to move beyond their initial ideas and grasp for new ones. This is where you’ll see people desperately try to work in some sort of horizontal navigation bar or sliding image rotator. They are trying to reconcile their impulse to include these standard elements with the goals and stories that the group has already worked on. Of all the exercises, this one seems to give people the most challenge. 43
SKETCHING A NEW MOBILE WEB
The 6-up template encourages people to move beyond their initial ideas and push for new ones. It can get pretty messy.
About 10 minutes in, after most people have sketched the low-hanging fruit ideas, I’ll often walk around and hand out Mental Notes (see below) to inspire participants to begin thinking about intent and the behavior they would like to encourage. When the sketching time is complete, we move directly into the concept sketches, without any group discussion. 1-UP CONCEPT SKETCHES Teams of two or three Time: 30 minutes plus discussion. If the exercises have gone well so far, people will be in a state of utter confusion. The website they were originally able to picture so clearly should now be a big cloudy mess — and that’s great! This is right where you want them. It’s like the part of spring cleaning when the house is messier than it was to begin with. In the wake of this confusion, you can begin to rebuild. Get people back into teams and have them work together on each other’s ideas. Have each team develop a single concept that represents an adaptive solution. When finished, post a large blank sheet of paper on the wall and have each team pin their drawings to it and present their concept to the group. Ask them to describe the evolution of their design. Walk through your own as well, which ideally will have also evolved beyond your original ideas. Use the paper backdrop to 44
add notes about which ideas resonate with people or to flag parts that might require rethinking. You can then roll up the whole sketchboard55 and bring it back to your team.
Concept sketches should reflect an evolution in thinking as the initial 3-up mobile sketches are adapted and modified to take into account different-sized canvases.
TIPS FOR GROUP SKETCHING • Pack a bag with pens, markers, pencils, paper and any other supplies you might need. • Show examples of everything. • If you are a Picasso, then intentionally drawing crudely might not be a bad idea. Make people feel like they can do it just as well. • Play music, because silence is awkward and it shouldn’t feel like you’re conducting a test. Chutes Too Narrow by The Shins and The Kinks are the Village Green Preservation Society are two pretty solid go-to albums. • Introduce Mental Notes. I like to allow people to draw from a deck of Mental Notes and promise “prizes and glory” to people who can incorporate the given principles into their design.
55. http://www.youtube.com/watch?v=iVFTBj_BYy0
45
SKETCHING A NEW MOBILE WEB
• No sketch is bad. The quality of the drawing doesn’t matter —drawing is thinking. Praise ideas and encourage exploration. • When forming teams, don’t pair up Bert and Ernie; they will only enable each other. Pair up people who don’t typically work side by side. • Some people won’t want to participate in the drawing. Offer to draw for them, or let them just participate in the dialogue. • Minimize the amount of time that elapses between sketching and delivering wireframes, designs or whatever is next in your process. The longer the span of time, the more time it gives for people to relapse.
Finishing Up By the end of the workshop, everyone will feel creatively exhausted, every possible idea drained out of them. The concepts presented at the end of the day will lack the stamp of individual ownership, since everyone has had a hand in shaping them. While these sketches might not directly inform the final design, people will know that they’ve been able to contribute. More importantly, you’ll have removed the layers of abstraction that surround adaptive, device-agnostic solutions. Something that was once hard to envision has now been made much more attainable. You’ve hopefully also purged those thorny ideas buried in your clients’ heads that seem to resurface at the most inopportune moments. Collaborative sketching can help people make the leap to understanding the real potential of mobile to extend, not limit, how we interact with the Web. Fueled by possibility, they might even become advocates for more future-friendly56 approaches in their organizations. If you’ve ever been crushed by seeing a project not live up to its potential, you’ll recognize the importance of this. There is no secret way to change what people believe or to overcome the conceptual models they cling to. We’ll always battle against stubborn personalities and decisions that seem to be driven by fear rather than strategy. Hopefully, you’ll find that incorporating collaborative sketching workshops into your client work helps you win more battles and build a more accessible Web.
56. http://futurefriend.ly/
46
Towards A Retina Web BY REDA LEMEDEN ❧
With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina” Web in 2010, we had to wait for the thirdgeneration iPad to fully realize how fuzzy and outdated our Web graphics and content images are. In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industrywide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using. Before diving into the nitty gritty, let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities.
Device Pixels
A device pixel (or physical pixel) is the tiniest physical unit in a display. Each and every pixel sets its own color and brightness as instructed by the operating system, while the imperceptible distance between these tiny dots takes care of tricking the eye into perceiving the full image. 47
TOWARDS A RETINA WEB
“Screen density” refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI). Apple has coined the marketing term “Retina” for its double-density displays, claiming that the human eye can no longer distinguish individual pixels on the screen from a “natural” viewing distance.
CSS Pixels
A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on Web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs). On standard-density displays, 1 CSS pixel corresponds to 1 device pixel. <div height="200" width="300"></div>
This would use 200 × 300 device pixels to be drawn on screen. On a Retina display, the same div would use 400 × 600 device pixels in order to keep the same physical size, resulting in four times more pixels, as shown in the figure below.
48
On a Retina display, four times as many device pixels are on the same physical surface.
The ratio between device pixels and CSS pixels can be obtained using the following media query and its vendor-specific equivalents: device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { â&#x20AC;Ś }
Or you can use their future-proof siblings: device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { â&#x20AC;Ś }
In Javascript, window.devicePixelRatio can be used to obtain the same ratio, although browser support is still relatively limited. Both of these techniques will be discussed in depth later in this chapter.
49
TOWARDS A RETINA WEB
Bitmap Pixels
A bitmap pixel is the smallest unit of data in a raster image (PNG, JPG, GIF, etc). Each pixel contains information on how it is to be displayed, including its position in the imageâ&#x20AC;&#x2122;s coordinate system and its color. Some image formats can store additional per-pixel data, such as opacity (which is the alpha channel). Beside its raster resolution, an image on the Web has an abstract size, defined in CSS pixels. The browser squeezes or stretches the image based on its CSS height or width during the rendering process. When a raster image is displayed at full size on a standard-density display, 1 bitmap pixel corresponds to 1 device pixel, resulting in a fullfidelity representation. Because a bitmap pixel canâ&#x20AC;&#x2122;t be further divided, it gets multiplied by four on Retina displays to preserve the same physical size of the image, losing detail along the way.
Each bitmap pixel gets multiplied by four to fill the same physical surface on a Retina display.
50
The Tool Chest Even though we are still in the early stages of this major shift, several approaches to optimizing Web graphics for Retina displays have sprung up, and more are popping up as we speak. Each method makes some degree of compromise between performance, ease of implementation and cross-browser support. As such, choosing a tool should be done case by case, taking into account both quantitative and qualitative factors.
HTML And CSS Sizing The most straightforward way to serve Retina-ready Web graphics is to halve the size of your raster assets using CSS or HTML, either manually or programatically. For instance, to serve a 200 × 300-pixel image (remember, those are CSS pixels), you would upload an image with a bitmap resolution of 400 × 600 pixels to your server, then shrink it by exactly 50% using CSS properties or HTML attributes. On a standardresolution display, the result would be an image rendered with four times fewer pixels than its full bitmap size —a process commonly referred to as downsampling.
A CSS-sized image gets its dimensions halved during the rendering process.
Because the same image would use four times as many physical pixels on a Retina screen, every physical pixel ends up matching exactly 1 bitmap pixel, allowing the image to render at full fidelity once again.
51
TOWARDS A RETINA WEB
CSS-sized images regain their full-detail glory on Retina displays.
There are several ways to achieve this: USING HTML The easiest way to apply CSS sizing would be by using the width and height attributes of the img tag: <img src="example@2x.png" width="200" height="300" />
Please note that, even though specifying height is optional, it allows the browser to reserve the space required for the image before loading it. This prevents the page layout from changing as the image loads. What to use it for? Single-page websites with few content images. USING JAVASCRIPT The same result can also be obtained using Javascript by targeting all Retina-ready content images in the document and halving their sizes. With the help of jQuery, this would look like this: $(window).load(function() { var images = $('img'); images.each(function(i) { $(this).width($(this).width() / 2); }); });
What to use it for? Websites with few content images. USING CSS (SCSS) If you want to keep all of the presentation code in your CSS files, then the most common technique involves setting the image as the background of another HTML element, usually a div , then specifying its background-size property. You could either set explicit width and 52
height values for the background image or use the contain value if the dimensions of the HTML element are already specified. It is worth noting that the background-size property is not supported in IE 7 or 8. .image { background-image: url(example@2x.png); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }
You could also target a :before or :after pseudo-element instead: .image-container:before { background-image: url(example@2x.png); background-size: 200px 300px; content:''; display: block; height: 300px; width: 200px; }
This technique works just as well with CSS sprites, as long as the background-position is specified relatively to the CSS size (200 Ă&#x2014; 300 pixels in this case): .icon { background-image: url(example@2x.png); background-size: 200px 300px; height: 25px; width: 25px;
&.trash { background-position: 25px 0; }
&.edit { background-position: 25px 25px; } }
When using image sprites, consider any OS-specific limitations57.
53
TOWARDS A RETINA WEB
What to use it for? Websites that make limited use of the background-image property, such as those that rely on a single-image sprite. HTML AND CSS SIZING: PROS • Easy to implement • Cross-browser compatible HTML AND CSS SIZING: CONS • Non-Retina devices have to download larger assets. • Downsampled images might lose some of their sharpness on standarddensity screens, depending on the algorithm used. • The background-size property is not supported in IE 7 or 8.
Querying Pixel Density
Perhaps the most popular way to serve Retina-ready graphics on the Web is by querying the device for its pixel density and then serving assets accordingly. This can be done using either CSS or JavaScript.
57. http://duncandavidson.com/blog/2012/03/webkit_retina_bug/
54
USING CSS MEDIA QUERIES As of this writing, almost every major browser vendor has implemented a prefixed variant of device-pixel-ratio and its two siblings, mindevice-pixel-ratio and max-device-pixel-ratio . These media queries can be used in conjunction with the background-image property to serve Retina-ready assets to high-density devices: .icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; }
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url(example@2x.png); } }
By using a ratio of 1.5 instead of 2, you can target other non-Apple devices with the same query. What to use it for? Any website or app that uses the background-image property for graphic assets. Not suitable for content images. CSS QUERYING: PROS • Devices download only those assets that target them. • Cross-browser compatible • Pixel-precise control CSS QUERYING: CONS • Tedious to implement, especially on large websites. • Displaying content images as backgrounds of other HTML elements is semantically incorrect.
55
TOWARDS A RETINA WEB
USING JAVASCRIPT The pixel density of the screen can be queried in Javascript using window.devicePixelRatio , which reports the same value as its CSS counterpart. Once a higher-density screen is identified, you can replace every inline image with its Retina counterpart: $(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img');
images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } });
Retina.js58 is a Javascript plugin that implements roughly the same technique as described above, with some additional features, such as skipping external images and skipping internal images with no @2x counterparts. Lastly, it is worth noting that devicePixelRatio is not entirely cross-browser compatible59. What to use it for? Any website with content images, such as landing pages and blogs. JAVASCRIPT QUERYING: PROS • Easy to implement • Non-Retina devices do not download large assets. • Pixel-precise control JAVASCRIPT QUERYING: CONS • Retina devices have to download both standard- and high-resolution images.
58. http://retinajs.com 59. http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html#link2
56
• The image-swapping effect is visible on Retina devices. • Does not work on some popular browsers (such as IE and Firefox).
Scalable Vector Graphics
Regardless of the method used, raster images remain inherently constrained by their bitmap resolution; they were never meant to be infinitely scalable. This is where vector graphics have the advantage, being a future-proof way to “Retinize” your Web graphics. As of this writing, the vector XML-based SVG format has crossbrowser support60 of more than 70% and can be used in several ways on the Web. SVG images can be easily created in and exported from a number of vector-graphic editors, such as Adobe Illustrator and free alternatives such as Inkscape61. As far as Web design goes, the most straightforward way to use SVG assets is with the HTML img tag or with the CSS background-image and content:url() properties. <img src="example.svg" width="200" height="300" />
In the example above, a single SVG image can be used as a universal asset, scaling infinitely up or down as required. This not only saves precious bandwidth (most SVG files tend to be smaller in size than standard-resolution PNGs), but also makes your graphic assets much easier to maintain. The same would apply if used in CSS:
60. http://caniuse.com/#search=svg 61. http://inkscape.org/
57
TOWARDS A RETINA WEB
/* Using background-image */
.image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; }
/* Using content:url() */
.image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }
If you have to support IE 7 or 8 or Android 2.x, then you will need a fallback solution that swaps SVG images with their PNG counterparts. This can be easily done with Modernizr62: .image { background-image: url(example.png); background-size: 200px 300px; }
.svg { .image { background-image: url(example.svg); } }
For best cross-browser results and to avoid some rasterization headaches63 in Firefox and Opera, make each SVG image at least the size of its parent HTML element. In HTML, you can implement a similar fallback solution by adding a custom data attribute to your img tag: <img src="example.svg" data-png-fallback="example.png" />
Then, handle the rest with jQuery and Modernizr:
62. http://modernizr.com/docs/#features-misc 63. http://dbushell.com/2012/03/11/svg-all-fun-and-games/
58
$(document).ready(function(){ if(!Modernizr.svg) { var images = $('img[data-png-fallback]'); images.each(function(i) { $(this).attr('src', $(this).data('png-fallback')); }); } });
This HTML and JavaScript route, however, would not prevent browsers with no SVG support from downloading the SVG assets. What to use it for? Any website or app. Suitable for icons, logos and simple vector illustrations. SVG: PROS • One universal asset for all devices • Easy to maintain • Future-proof: infinitely scalable vector graphics SVG: CONS • No pixel precision due to anti-aliasing • Unsuitable for complex graphics due to large file sizes • No native support in IE 7 and 8 or early Android versions
Icon Fonts
59
TOWARDS A RETINA WEB
Popularized by Twitter’s Bootstrap64, the technique of using @fontface with icon-based fonts has garnered a following of its own as a resolution-independent alternative to bitmap icons. The technique consists of using a custom Web font that replaces the alphabet with monochrome glyphs, which can be styled using CSS, just like any other text on the website. There is no shortage65 of comprehensive, good-quality icon fonts that would cover most of your needs. That being said, importing a large font in half a dozen formats only to use a small subset of the icons is a bad idea. Consider building your own custom font with free tools such as Fontello66, Font Builder67 or even Inkscape68. The most common way to use icon fonts on websites is by assigning an .icon or .glyph class to a particular HTML element— most often a <span> or an <i> — and then using the letter corresponding to the desired icon as its content: <span class="icon">a</span>
After having imported your custom font using @font-face , you would declare it: .icon { font-family: 'My Icon Font'; }
Another technique consists of using the :before pseudo-element and the content property, with a unique class for each icon: <span class="glyph-heart"></span>
[class^="glyph-"]:before { font-family: 'My Icon Font'; } .glyph-heart:before { content: 'h'; }
64. 65. 66. 67. 68.
60
http://twitter.github.com/bootstrap/ http://www.delicious.com/stacks/view/SC3hpq http://fontello.com/ https://github.com/fontello/font-builder http://www.Webdesignerdepot.com/2012/01/how-to-make-your-own-icon-Webfont/
What to use it for? Websites or apps with a high number of icons, and for rapid prototyping. ICON FONTS: PROS • Future-proof: infinitely scalable glyphs • Cross-browser compatible • More flexible than graphic assets: can be used in placeholder text and other form elements, etc. ICON FONTS: CONS • No pixel precision due to subpixel anti-aliasing • Hard to maintain: changing a single icon requires regenerating the whole font. • Relies on semantically incorrect markup (unless used with :before or :after pseudo-elements).
Favicons Favicons are getting their fair share of attention, being increasingly used outside of browser chrome as an iconic representation of our websites and apps. To make your favicons Retina-ready, export an .ico file in both 16- and 32-pixel versions. If you are using a Mac, you can create your own .ico files with Apple’s Icon Composer (included in the Graphic Tools in Xcode69) or with Icon Slate70, a paid third-party application.
A Glimpse Of The Future Besides the techniques covered above, several other efforts are being made independently by organizations and individuals alike, not the least of which is Apple’s own -Webkit-image-set , introduced71 last spring. This proposal allows for72 multiple variants of the same image to be provided in one CSS declaration:
69. 70. 71. 72.
https://developer.apple.com/downloads/ http://itunes.apple.com/us/app/icon-slate/id439697913?mt=12 http://trac.Webkit.org/changeset/111637 http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
61
TOWARDS A RETINA WEB
.image { background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x); background-size: 200px 300px; }
This technique does not, however, cover images inside img tags, and it is Webkit-only as of this writing. Another notable effort is Scott Jehl’s Picturefill73, an HTML and Javascript solution that makes heavy use of data attributes and media queries to serve different images in different media contexts. <div data-picture> <div data-src="example.png"></div> <div data-src="example@2x.png" data-media="(min-device-pixel-ratio: 1.5)"></div>
<!-- Fallback content for non-JS browsers --> <noscript> <img src="example.png" > </noscript> </div>
Even if the markup puts you off, it is a good cross-browser solution to consider if you are dealing with few content images. Last but not least, the ambitious picture element proposal74 aims to bring responsive images to the Web using a markup-only approach for multiple image sources, coupled with media queries that route each device to the right asset. CLOSING WORDS Like other major shifts75 the Web is currently undergoing, attaining resolution independence will be a long journey. As Web designers and developers, either we can sit down and wait passively for a convention to be standardized, or we can immediately start offering a pleasurable viewing experience to our users. Let’s get to work. ❧
73. https://github.com/scottjehl/picturefill 74. http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal 75. http://robots.thoughtbot.com/post/23288959017/designing-for-touch
62
Avoiding The Pitfalls Of Free BY DMITRY FADEYEV ❧
Misaligned interests create tension in the design process that can lead to bad, and potentially unethical, design decisions, that result in inferior products. In this chapter I will examine how the desire to build a large audience by giving away your products and services free of charge can cause conflicts of interest, which in turn can lead to dubious compromises in the design process that limit the full potential of your work. The recently launched Twitter competitor, App.net76, which has raised over $800,000 in the first month of fund-raising/pre-sales, has started its life as a simple premise: Twitter doesn’t work because the interests of the company and its users, along with the developers creating apps for its platform, are not aligned. They’re not aligned because as a free product Twitter doesn’t make money from its everyday users and developers, and thus does not hold any obligation towards them. Like most other free Web services, Twitter is building its business model on advertising, the advertiser becoming the customer, and its users, bluntly put, the product. While it is possible that the interests of the multiple parties you are trying to satisfy with your product or service overlap, it is likely that there are also differences in what they want. In those cases where the interests vary, the product designer will have to pick the party whose interests will take precedence in their design decisions. For example, if you build an audience of users through a free product and then go on to sell advertising, there may arise a conflict of interests on the issue of privacy. The advertiser benefits from knowing more about the users, while some users may wish to keep their information to themselves. The two conflicting interests force the designer to pick a side, either to push for more information sharing in order to make the most out of advertising, or to take a stand on the privacy of their users while losing the potential for more advertising revenue. If they decide to give away user information without their permission they will also be giving away their users’ trust, along with their own integrity.
76. http://www.app.net
63
AVOIDING THE PITFALLS OF FREE
Nothing Is Free All work requires compensation, whether monetary or otherwise. Sometimes we choose to work for free, in regards to money, but that choice is always based on some other form of compensation. When we give someone a gift, we receive emotional compensation in return because the action of giving a gift satisfies our desire to please someone we care about. We may give a gift to somebody we do not know, but this also works the same way, providing us with emotional nourishment that satisfies a compassionate soul. Sometimes we create work for ourselves, that is, we work on something because we enjoy the creative process itself, the work being its own goal. In those cases, the process, together with the end product, are our compensation. An artist may work on a painting for its own sake, the work being its own reward, but they will not work for free when commissioned to produce a piece for somebody else, unless of course they have the desire to present the work as a gift, in which case they must know the person they are working for well enough and care about them enough to feel that the emotional reward outweighs the toil. When this is not the case, when they do not wish to give away their work as a gift, they will seek monetary compensation, for even though they may enjoy the process of creation itself, the act of giving away their finished work and their time — and thus, a little of their life —requires fair compensation.
The designer’s dilemma lies often in the difficult choice between monetary payment and satisfaction of a job well done. Image by Opensourceway77.
Developers of today’s free Web apps and sites do not know their users well enough in order to give away their work as a gift. The bond be77. http://www.flickr.com/photos/opensourceway/4862920379/sizes/m/in/photostream/
64
tween them and the recipient is not so strong as to generate enough desire in their hearts to wish to give away their work for free. One exception to this is the open source movement, in which case the work is given away as a gift, though the compensation has less to do with the recipient than with the intended function of the work. Open source software is first and foremost created to satisfy a certain goal that the developer has, and the fulfillment of this goal is reward enough for them. They then release their work into the world and may derive further benefit, like patches to the software and prestige for themselves, but this further benefit is only an extra, only the icing for the cake which has already been eaten. In a few cases the software takes off and grows at a rapid pace, but the initial compensation has already been paid in giving the developer what they wanted when they first set off to create it. Contrast this with free products and services that are not open source. Those products are given away free of charge, but they are not given away free from the makerâ&#x20AC;&#x2122;s desire for compensation. Since compensation does not come from the users it is sought elsewhere.
Advertising: A Gateway To Conflict Of Interests Typically, this path leads to advertising. If the users arenâ&#x20AC;&#x2122;t going to pay for their product, the advertiser will pay for the users. The product developer begins to introduce ads and other forms of sponsorship deals. This creates a conflict of interests. On one hand, the product serves a specific purpose for the user, on the other, an ulterior motive is introduced in the form of advertising, which in turn uses the product as a means to sell something else, the product itself being relegated to the status of a promotional vehicle. The focus of the product is split in two: 1. it must work to perform a certain function for the user, and 2. it must get the user to click on an ad. While it is possible to keep these two goals separate, in many situations they are not mutually exclusive, which forces the designer to pick sides and make compromises. Some product designers and developers proceed to mask this conflict of interests by pretending that the two goals donâ&#x20AC;&#x2122;t actually point in different directions, and that their primary focus is always on making the best product possible, which in turn brings them more users, and thus more advertising money, the latter being the outcome of the former.
65
AVOIDING THE PITFALLS OF FREE
This stance is taken for two reasons. First, telling users that they are the product is not going to go well with them, and neither will admitting that you are compromising design decisions that improve the product to the advantage of the user for design decisions that only benefit the advertisers. Second, this viewpoint may even be a subconscious reaction to the inner dilemma that the product designer has to face when they are forced to pick between two or more conflicting interests. A good designer does not want to compromise their integrity. They want to make the best product they can, which means a product that best serves its primary purpose, that is, its function for its users, so they try to resolve the conflict with a different explanation.
Since Twitter relies on advertising, it had to make quite unpopular decisions recently. The company limited access, enforcing display requirements, and forming guidelines for what sort of apps they want (and don’t want) to see on the platform.
But this doesn’t work. You can pretend the conflict of interests isn’t there but that will not make it disappear. For example, Twitter recently began to push back on developers who make apps for their platform by limiting access78, enforcing display requirements79, and forming guidelines80 for what sort of apps they want to see on the platform, and what sort of apps they don’t. Apps that are seen to compete with Twitter’s main offering, i.e. consumer micro-blogging, are discouraged.
78. http://techcrunch.com/2012/07/26/no-api-for-you-twitter-shuts-off-find-friends-featurefor-instagram/ 79. https://dev.twitter.com/terms/display-requirements 80. https://dev.twitter.com/blog/changes-coming-to-twitter-api
66
Twitter’s initial goal was the creation of a simple micro-blogging service, which they’ve allowed to evolve into different forms to suit its many uses. But now, having to face the reality of needing to make the service pay, they turn to advertising, and in turn are forced to enact much greater control over how the user interacts with their product in order to reshape the service into a viable advertising channel. Now, there is nothing wrong with Twitter taking the advertising route to make money. That’s not the issue. What’s wrong is the situation in which they find themselves, having to strike a compromise between the needs of the advertiser and the needs of the many developers of Twitter apps who have helped get the service to where it is today. Twitter does not technically owe anything to those developers, but to push them aside when you’ve reaped the rewards of their labor is not a decent thing to do. The roots of the problem are unclear commitments, which have been there from the very beginning. If the developers paid for the service, Twitter could work without hesitation on delivering them the best platform and API for their apps. Without this commitment, the various parties work together on a foggy perception of aligned interests, only to later find themselves in trouble when they discover that their interests aren’t so aligned after all. Then we have the problems with privacy breaches that pop up all the time with services like Facebook and Google (Wikipedia has whole pages dedicated to listing criticisms of the two companies, here’s one for Facebook81, and one for Google82). Once again, these companies don’t make money selling a service to the end user, they make money from selling advertising. This creates a conflict where the product developer has to decide whether to focus on satisfying the needs of the user, or making the service more lucrative to advertisers by sometimes breaching the privacy of their users. The issue would not exist if people paid for their search service or for their social network, which would remove the advertiser from the equation and let the company focus solely on delivering the best product for the user, but as this isn’t the case, we are left in a situation where the interests of one party are compromised for the interests of another. There are also the really obvious dishonest design decisions used in social games like that of Zynga, whose interests lie in promoting the product in order to pull in more users rather than actually making a good product. For example, they have a dialog prompt with only one button83 that says “Okay”. The dialog asks the user whether they will
81. http://en.wikipedia.org/wiki/Criticism_of_Facebook 82. http://en.wikipedia.org/wiki/Criticism_of_Google 83. http://flirtatiouslabs.com/post/31401127751/zynga-game-virus-farmville-2
67
AVOIDING THE PITFALLS OF FREE
give the app greater access to their Facebook timeline, i.e. let it make posts on the user’s behalf, but there is no option to close the dialog, only to agree with it. Upon clicking the button, the actual Facebook permission box pops up which lets the user decide whether or not they wish to give these permissions to the app, but because the previous box has already conditioned them to agree, they are more likely to simply click “Okay” again in order to proceed, rather than stop to make a conscious decision.
A manipulative Zynga84 prompt. The two buttons, “Accept” and “Cancel”, are about sharing a message with your friends, but the wording makes it seem as if they are to do with accepting the reward itself.
On the one hand, the designer is tasked with creating an informative dialog box meant to help the user make a rational decision, on the other, they are tasked with creating a dialog box which will manipulate the user into acceptance, and because they are not committed to delivering the best service they can for the user, they pick the latter. The interesting thing with Zynga is that they actually do make money from their users, but they do so only from the small percentage85 who pay, not from the whole user base. This means that to make money they have to capture masses of users, like dropping large fishing nets into the ocean
84. http://zynga.com/ 85. http://www.reuters.com/article/2011/12/08/us-zynga-ipo-idUSTRE7B724U20111208
68
to catch the few “whales” (the term used in the industry for large spenders) along with a pile of bycatch. Lastly, consider all the online blogs and magazines that cram their pages with ads leaving no room for the content, and also the content itself, which takes the ever more sensationalist nature by the day, its only purpose being to bring in more page views, not to enlighten readers. For example, The Huffington Post split tests headlines86 to arrive at the one that brings in the most hits, thereby trading the experience and judgement of the author for the impulses of the masses. Because the reader is not the one paying, these sites hold little loyalty towards them, leading to design decisions that optimize for page views and ad clicks rather than for the creation of the best possible reading experience. Such sites also like to introduce design tricks like pagination, the goal of which is to once again boost page views, while they try unsuccessfully to convince us that clicking multiple times on a set of small page links somehow leads to a better user experience. The conflict of interests that arises naturally in free products derails the designer’s core goal of making a great product, that is, a product that aims to fulfill its primary purpose of satisfying the user as best as possible. Loyalty to multiple parties with disparate goals is impossible, which leads to friction in design decisions and in the soul of the designer, forcing them to make dubious compromises in their work. Each small compromise doesn’t seem like a big deal, a little manipulative form box here, a tiny breach of privacy there, but remember that the final product is the sum of its parts, and so in the end, the multitude of small compromises add up into a substantial whole.
If Compromise Isn’t An Option, Free Is Not A Solution A compromise is a concession on the part of all the parties involved, not just some, and you cannot compromise on principles without destroying them altogether. For example, there can be no compromise between truth and falsehood for you cannot make something just a little less true. In the same way, surrendering your users’ privacy or manipulating them into taking an action for your own gain is to surrender your honesty, and in turn, a part of the moral foundation upon which your work is built. Whenever you feel a tension in making a design decision that you think is caused by a conflict of interest, ask yourself exactly what com-
86. http://www.mondaynote.com/2012/07/08/transfer-of-value/
69
AVOIDING THE PITFALLS OF FREE
promise you’re asked to make. Are you asked to make a fair concession between one party and another from which both will derive benefit, or are you asked to take something from your users without their permission, or make them do something they have not agreed to do? Are you asked to make a decision that will compromise the integrity of your work? Faced with this dilemma, what do you do? The answer is simple, and is the very thing you should have been doing all along: charge money for your products. By selling your work instead of giving it away for free your interests and those of your customers — who are no longer just users— are aligned: they provide you with the compensation for your work, not some outside party, leaving you free to focus on delivering the best product, for them. This is not only moral in that you no longer have to compromise the interests of one party for those of another, it is also a much simpler solution. You make a product and sell it directly to the customer, no need for other parties, nor conflicting interests, nor dubious design decisions.
App.net87 proclaims ad-free social networking in their banner. Because the membership fees are placed right next to it, the user never wonders where the catch is.
It works, too. A great example is the App.net88 project which I’ve mentioned at the start of the chapter. Its creator, Dalton Caldwell, wasn’t satisfied with the way Twitter was treating its developers, so he set off to create his own micro-messaging service, with the difference being
87. https://join.app.net/ 88. http://www.app.net
70
that this service would be paid for at the outset by its users and developers. Caldwell set a minimum of $500,000 for his fundraising month during which people could sign up for a year of service to a product that didn’t yet exist. In just a month he raised over $800,000 and has launched an alpha version of the service. His critics have been saying that nobody would ever pay for a Twitter-like service, but clearly there is enough value there for some to sign up for a paid alternative. It is far too early to judge the future of the venture, but the initial fundraising success shows that people are prepared to pay for services they care about, even with the presence of free, established alternatives.
Charging For Online Content Works On December 10th 2011, the stand-up comedian Louis C.K. decided to release his full-length special Live at the Beacon Theater on his website as a DRM-free download for $5. Two weeks later, sales from this self-published special exceeded $1 million89. The download was DRM-free, meaning that people could easily pirate it, but given the fairness of the price and the package that route just wasn’t worth it. Yes, not everyone can re-create the success of Louis C.K., but that’s not the point. Of course to drive product sales you need to generate enough excitement and interest — that’s the job of marketing. The point is that selling digital goods on the Web is possible, and, when you have something people genuinely want, can be very lucrative. The success of Louis C.K. has since inspired other comedians90, namely Aziz Anasari and Jim Gaffigan, to adopt a similar distribution model. Last year, The New York Times put up a paywall around its online articles. The paywall allowed visitors to read 10 articles a month free of charge, but required a paid subscription for subsequent access. The implementation of the wall was very porous, meaning that it was very easy to get past it with a variety of simple steps, and so many critics believed that people wouldn’t be fooled into a paid subscription. Just four months after the implementation of the paywall, 224,000 readers91 have already signed up to the paid subscription, not far short of the company’s goal of reaching 300,000 subscribers within a year. Combined with sign-ups through other channels, such as Kindle and Nook subscriptions, the total of digital subscribers rose to around 400,000. Al-
89. https://buy.louisck.net/news/another-statement-from-louis-c-k 90. http://www.forbes.com/sites/ryanholiday/2012/05/01/inside-the-reddit-ama-theinterview-revolution-that-has-everyone-talking/ 91. http://nymag.com/news/media/new-york-times-2011-8/
71
AVOIDING THE PITFALLS OF FREE
though this number still makes up a small portion of the newspaper’s revenues, it highlights healthy growth and proves that charging for online content can work, even in the face of everyone else giving theirs away for free.
The New York Times92 paywall prompt. Even though there are simple tricks to get past it, many people still prefer to pay for their content.
Other newspapers like The Wall Street Journal and The Economist successfully use the same model by keeping most of their content accessible only to paid subscribers. When you charge your readers for content, you no longer need to run after page views by creating sensationalist work, nor does your website need to try and squeeze ever more page loads out of each visitor through design tricks like pagination. Once your readers have subscribed and paid, they’re going to read what you have to say no matter how attention grabbing or plain your headlines are, freeing your authors and journalists to focus on creating work that enlightens your readers, not shallow content designed to spread. For an example of design related publishing consider the success of Nathan Barry and Sacha Grief, whose two eBooks combined have made them $39,00093 worth of revenue — and are still selling. Bloggers like to give away their experience for free, and while this is great for the readers, it doesn’t help pay the author’s bills. Some put up a few ads on their site, but unless they consistently generate a lot of traffic, the revenue 92. http://www.nytimes.com/ 93. http://sachagreif.com/how-nathan-barry-and-i-sold-39k-worth-of-ebooks/
72
generated by the ads won’t amount to much. Instead of chasing after advertising pennies, why not package your experience into a book? If your audience is tech savvy, you won’t even need to print the book —just offer a DRM-free eBook package that your readers will be able to consume on any device of their choice. The success of Barry and Grief shows that people are ready and willing to pay for good content, you just have to give them the opportunity to do so. As for an example of well implemented advertising, consider The DECK94 ad network, which includes some of the top tech sites around the Web like the Signal vs. Noise blog from 37signals, Dribbble, Instapaper, A List Apart and many more. The ad network uses a very unobtrusive 120 × 90 pixel banner, with a sentence or two of text underneath. Its small size shows respect for the end user by keeping advertising within strict limits. It’s a subtle way to advertise which has inspired other networks to offer the same format, such as AdPacks from BuySellAds. This small format won’t work for everyone —most of the sites that use The DECK rely on other sources of revenue —but it is a good way to deliver a cleaner experience for the user while still providing an advertising channel.
Summing Up Free products themselves are not the problem. We give gifts all the time and the giving of them to the people we care about is reward enough for us. The problem is the giving away of free products and services while still expecting compensation. If the compensation does not come directly from the user, the developer proceeds to extract it by other means, which usually involves bringing in other parties to the table, leading to a conflict of interests. When the interests of the user and the product maker are not aligned, not only do you get a neglect in the feature set, but a product of a wholly different nature. The conflict is not just external, it exists inside the mind of the designer, and a battle is fought every time they are put into a situation where they have to limit their full creative potential by compromising the interests of the user. It doesn’t have to be this way. People will pay for design and content created to serve them, not to exploit them. People have paid for centuries, and they will continue paying for goods and services that give them value. Instead of picking the path of free design, take the road of moral design — design firmly based on the moral values that guide your life and your work. By turning your users into your customers you eliminate the conflict of interests and thus free your mind to work fully 94. http://decknetwork.net
73
AVOIDING THE PITFALLS OF FREE
on the problem at hand, and any compromises that you make will be real and fair compromises, that is, design judgements that improve your product by taking it in the direction you want it to go, not dubious choices that surrender your values, limit your creativity and cripple your work. â?§
74
Why User Experience Cannot Be Designed BY HELGE FREDHEIM ❧
A lot of designers seem to be talking about user experience (UX) these days. We’re supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly. Furthermore, many designers seem to have a firm (and often unrealistic) belief in how they can craft the user experience of their product. However, UX depends not only on how something is designed, but also other aspects. In this chapter, I will try to clarify why UX cannot be designed.
Heterogeneous Interpretations of UX I recently visited the elegant website of a design agency. The website looked great, and the agency has been showcased several times. I am sure it delivers high-quality products. But when it presents its UX work, the agency talks about UX as if it were equal to information architecture (IA): site maps, wireframes and all that. This may not be fundamentally wrong, but it narrows UX to something less than what it really is. The perception might not be representative of our industry, but it illustrates that UX is perceived in different ways and that it is sometimes used as a buzzword for usability (for more, see Hans-Christian Jetter and Jens Gerken’s article “A simplified model of user experience for practical application95”). But UX is not only about human-computer interaction (HCI), usability or IA, albeit usability probably is the most important factor that shapes UX. Some research indicates that perceptions of UX are different. Still, everyone tends to agree that UX takes a broader approach to communication between computer and human than traditional HCI (see Effie Lai-Chong Law et al’s article “Understanding, scoping and defining user experience: a survey approach96”). Whereas HCI is concerned with task solution, final goals and achievements, UX goes beyond these. UX takes other aspects into consideration as well, such as emotional, hedonic,
95. http://www.inf.uni-konstanz.de/gk/people/member/abstract.html?JeGe06 96. http://portal.acm.org/citation.cfm?id=1518813
75
WHY USER EXPERIENCE CANNOT BE DESIGNED
aesthetic, affective and experiential variables. Usability in general can be measured, but many of the other variables integral to UX are not as easy to measure.
Hassenzahl’s Model Of UX
Hassenzahl’s “Model of User Experience”.
Several models of UX have been suggested, some of which are based on Hassenzahl’s model97. This model assumes that each user assigns some attributes to a product or service when using it. As we will see, these attributes are different for each individual user. UX is the consequences of these attributes plus the situation in which the product is used. The attributes can all be grouped into four main categories: manipulation, identification, stimulation and evocation. These categories can, on a higher level, be grouped into pragmatic and hedonic attributes. Whereas the pragmatic attributes relate to the practical usage and functions of the product, the hedonic attributes relate to the user’s psychological well-being. Understanding the divide can help us to understand how to design products with respect to UX, and the split also clarifies why UX itself cannot be designed.
97. http://smashed.by/hassenzahl
76
MANIPULATION
Hassenzahl explains the hedonic and pragmatic qualities with a hammer metaphor. The pragmatic qualities are the function and a way for us to use that function. However, a hammer can also have hedonic qualities; for instance, if it is used to communicate professionalism or to elicit memories. (Image: Velo Steve98)
In this model, the pragmatic attributes relate to manipulation of the software. Essentially, manipulation is about the core functionalities of a product and the ways to use those functions. Typically, we relate these attributes to usability. A consequence of pragmatic qualities is satisfaction. Satisfaction emerges if a user uses a product or service to achieve certain goals and the product or service fulfills those goals. Examples of attributes that are typically assigned to websites (and software in general) are “supporting,” “useful,” “clear” and “controllable.” The purpose of a product should be clear, and the user should understand how to use it. To this end, manipulation is often considered the most important attribute that contributes to the UX. IDENTIFICATION Although manipulation is important, a product can have other functions as well. The first of these is called identification. Think about it: many of the items connected to you right now could probably be used to get an idea of who you are and what you care about, even though some of them would be more important or descriptive than others. The secondary function of an object is to communicate your identity to oth-
98. http://www.flickr.com/photos/juniorvelo/4490511204/
77
WHY USER EXPERIENCE CANNOT BE DESIGNED
ers. Therefore, to fulfill this function, objects need to enable users to express themselves. The growth of social media can be explained by this identification function. Previously, we used personal websites to tell the world about our hobbies and pets. Now, we use social media. Facebook, blogs and many other online services help us to communicate who we are and what we do; the products are designed to support this identification need. MySpace, for example, takes advantage of this identification function; it allows users to customize their profiles in order to express themselves. WordPress and other platforms let bloggers select themes and express themselves through content, just as users do through status updates on Facebook, Twitter and all the other social platforms out there. STIMULATION
Gmail notifies users when they forget to attach a file to an email.
The Pareto principle99, also known as the 80-20 rule, states that 80% of the available resources are typically used by 20% of the operations100. It has been suggested, therefore, that in traditional usability engineering, features should have to fight to be included101, because the vast majority of them are rarely used anyway. This is necessarily not the case with UX, because rarely used functions can fill a hedonic function called stimulation. Rarely used functions can stimulate the user and satisfy the human urge for personal development and more skills. Certain objects could help us in doing so by providing insights and surprises.
99. http://en.wikipedia.org/wiki/Pareto_principle 100. http://en.wikipedia.org/wiki/Optimization_(computer_science)#Bottlenecks 101. http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/
78
From this perspective, unused functions should not be dropped from software merely because they are used once in a blue moon. If they are kept, they could one day be discovered by a user and give them a surprise and positive user experience. As a result, the user might think “What a brilliant application this is!” and love it even more. In fact, this is exactly what I thought (and found myself tweeting102) when Gmail notified me that I had forgotten to attach the file I’d mentioned in an email. If you do a Twitter search for “gmail attachment103,” you’ll probably find many others104 who105 feel106 the107 same108. Furthermore, I think “Pretty cool!” when YouTube enhances its presence by modifying its logo on Super Bowl Sunday (or Valentine’s Day). I also discovered something new when MailChimp’s monkey whispered, “Psst, Helge, I heard a rumor…” and linked me to a Bananarama song109 on YouTube. There are many examples, but the best “stimulating” functions are probably those that are unexpected but still welcome (like the Gmail notification). EVOCATION
Souvenirs tend to have weak manipulative qualities, but they can be evocative when they elicit memories. (Image: meddygarnet110)
102. 103. 104. 105. 106. 107. 108. 109. 110.
http://twitter.com/#!/helgefredheim/status/11469201860460544 http://twitter.com/#!/search/gmail%20attachment http://twitter.com/#!/JavaSTL/status/35398659679985664 http://twitter.com/#!/TwittyTracie/status/35252557043474432 http://twitter.com/#!/c_wolf/status/35210659595558912 http://twitter.com/#!/meifern_c/status/35210362295029760 http://twitter.com/#!/tweetneal/status/35013688117174274 http://www.youtube.com/watch?v=IddaRTuYRW4 http://www.flickr.com/photos/meddygarnet/4418221737/
79
WHY USER EXPERIENCE CANNOT BE DESIGNED
The fourth function that a product can have, according to Hassenzahl’s model111, is evocation, which is about recalling the past through memory. We enjoy talking and thinking about the good old days (even yesterday), and we want objects to help us with this. Even weird, dusty and practically useless souvenirs (with weak manipulative qualities) have evocative function because they help us to recall the past. In design, we can certainly give a website a vintage look and feel to remind us of our childhood, high school or the ’60s… or the ’30s. But even websites with a modern and minimalist design can have evocative attributes. For instance, don’t Facebook and Flickr (by way of their users and your friends) provide you with a huge number of pictures from the past, some of which are highly evocative?
Thus, UX Cannot Be Designed
The MailChimp monkey’s words will probably appeal to some users more than others.
Having said all this, why is it argued that UX cannot be designed? It’s because UX depends not only on the product itself, but on the user and the situation in which they use the product. YOU CANNOT DESIGN THE USER Users are different. Some are able to easily use a website to perform their task. Others simply are not. The stimulation that a product provides depends on the individual user’s experience with similar products. Users compare websites and have different expectations. Furthermore, they have different goals, and so they use what you have made in different modes. Think about it: when judging the food and service at a restaurant, you will always compare what you experience to other restaurants you have been to. They have shaped your experience. Your companions compare it to their previous experiences, which are certainly different
111. http://smashed.by/hassenzahl
80
from yours. The same goes for software, websites and apps. Evocative qualities vary even more, simply because all users have a unique history and unique memories. YOU CANNOT DESIGN THE SITUATION UX also depends on the context in which the product is used. A situation goes beyond what can be designed. It can determine why a product is being used, and it can shape a user’s expectations. On some occasions, you may want to explore and take advantage of the wealth of features in WordPress. In other situations, the same functions may make things too complex for you. On some occasions, you may find it totally cool that the MailChimp monkey tells you randomly that, “It’s five o’clock somewhere,” but in other cases it would feel entirely weird and annoying, because you are using the application in a different mode. Furthermore, UX evolves over time. The first time a user tries an application, they may be confused by it and have a slightly negative experience. Later, when they get used to it and discover its wealth of features and potential and learn how to handle it, they might get emotionally attached to it, and the UX would become more positive.
We Can Design For UX
Are roller coasters fun, thrilling and exciting or just breathtakingly scary? It’s hard to tell. (Image: foilman112)
112. http://www.flickr.com/photos/foilman/2762577980/
81
WHY USER EXPERIENCE CANNOT BE DESIGNED
Many designers label themselves “UX designers.” This implies great confidence in the capabilities of the designer; it suggests that the user experience can be designed. But as explained, we cannot do this. Instead, we can design for UX. We can design the product or service, and we can have a certain kind of user experience in mind when we design it. However, there is no guarantee that our product will be appreciated the way we want it to be (again, see Hassenzahl). We can shape neither our users’ expectations nor the situation in which they use what we have designed. It is certainly possible to have a fairly good idea of the potential ways a user will judge what we make, as Oliver Reichenstein points out113. Movies, rhetoric and branding demonstrate as much: they predict certain experiences, and they often achieve their goals, too. However, a thrilling movie is probably more thrilling in the theater than at home, because the physical environment (i.e. the situation that shapes the UX) is different. In the same way, the effectiveness of an advertisement will always depend on the context in which it is consumed and the critical sense and knowledge of the consumer (i.e. the user’s prior experience). The commercials are designed to elicit certain experiences, but their level of success does not depend solely on the commercials themselves. The difference between designing UX and designing for UX is subtle but important. It can help us understand and remind us of our limitations. It can help us think of how we want the UX to be. It has been suggested, for instance, that UX is the sum of certain factors, such as fun, emotion, usability, motivation, co-experience, user involvement and user engagement (for more, see Marianna Obrist et al’s article “Evaluating user-generated content creation across contexts and cultures”). In turn, we must address some of these factors when we design for UX, depending on how we want our product to be perceived. If we want an application to be fun, then we need to add some features that will entertain; a joke, a challenging quiz, a funny video, a competitive aspect or something else. We should keep in mind, however, that, as designers, we can never really predict that the application will be perceived as fun by the user. Users have different standards, and sometimes they aren’t even willing to be entertained.
113. http://www.informationarchitects.jp/en/can-experience-be-designed/
82
Extra Credit: How To Design For UX
Peter Morville’s “Facets of User Experience.” (Image: Semantic Studios114)
UNDERSTAND UX If we want to design for UX, then we need to understand what UX is all about. For example, knowing which variables make users judge a product might be advantageous, and Hassenzahl’s UX model is one such model for this. Other models have been suggested as well, such as Peter Morville’s “seven facets of user experience115.” Here, UX is split into useful, usable, desirable, findable, accessible, credible and valuable. As you may have noticed, these facets fit Hassenzahl’s model pretty well: useful, usable, findable, credible and accessible could all be considered as pragmatic (i.e. utilitarian and usability-related) qualities, while desirable and valuable would qualify as hedonic (well-being-related) qualities. As mentioned, UX has also been viewed as the sum of particular factors. Other models have been suggested as well, some of which are linked to at the end of this chapter. UNDERSTAND USERS Following this, we need to understand our users. Traditional methods are certainly applicable, such as user research with surveys, interviews
114. http://semanticstudios.com/publications/semantics/000029.php 115. http://semanticstudios.com/publications/semantics/000029.php
83
WHY USER EXPERIENCE CANNOT BE DESIGNED
and observation. Also, personas have been suggested as a means of designing for UX, as have UX patterns. Smashing Magazine has already presented a round-up of methods116. EXCEED EXPECTATIONS Finally, give users what they want— and a little more. In addition to enabling users to use your service effectively and efficiently, make them also think, “Wow, this application is genius.” Exceed their expectations desirably. If you do so, they will use your website or app not because they have to but because they want to. ❧
Other Resources To learn more about UX, you may want to read the following: • What Is User Experience Design? Overview, Tools and Resources117 A useful introduction to UX, along with suggested techniques and helpful tools for designing for UX. • 8 Must-See UX Diagrams118 An excellent collection of visualizations of the concepts and fragments of UX. • Retro and Vintage in Modern Web Design119 An extensive showcase of inspiring websites that are graphically designed to elicit memories. • UX Myths120 A website dedicated to debunking misconceptions about UX. • The Thing and I: Understanding the Relationship Between a User and a Product121 Freely available extracts from Marc Hassenzahl’s article on the UX model referred to in this chapter.
116. http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-designoverview-tools-and-resources/ 117. http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-designoverview-tools-and-resources/ 118. http://www.uxbooth.com/blog/8-must-see-ux-diagrams/ 119. http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/ 120. http://uxmyths.com/ 121. http://smashed.by/hassenzahl
84
Building Something That Your Users Will Actually Want To Buy BY AUSTIN GUNTER ❧
How do you make sure all the software products you spend time building are something that your customers will actually want to buy? It’s one thing to spend a few weeks coding your next big idea. But are you sure that you have an audience of customers that want what you’ve built? The last thing you want is to create something, invest in Adwords, only have your potential customers arrive non-plussed, and then navigate away, never to return again. Before you ever start coding, it’s essential that you “pop up” from the keyboard, and learn what your customers actually want to use and will pay for. That’s the hard part: learning what your customers want to pay for.
85
BUILDING SOMETHING THAT YOUR USERS WILL ACTUALLY WANT TO BUY
The cool part: There’s actually a process you can go through to 1) target a specific customer-set, and 2) learn how to design a product that will solve their problem, and 3) become close to habit-forming. Here’s an obvious example. When you use Instagram, there is actually a process you go through each time you take an artistic smartphone picture (an action millions of people want to take every day) and share it with your friends that is habit-forming. Instagram, as well as Facebook, are classic examples of products that fulfill a key customer need, sharing their lives with as many people possible, and are also habit-forming. Those apps have a habit-forming process based on deep insight into the needs of their users baked into their design. The process is called the Desire Engine, dubbed thus by Nir Eyal122. It’s the little thing that gets people to open Facebook over and over again throughout the day, or pull out their phones to take a photo with Instagram. If you get this engine started, you’ll see spikes in your readership, and spikes in your engagement on your websites. You can model the habit-forming process, and problem solving qualities of those apps in order to build the most effective products possible. You might even create habit-forming products. Rather, you might create products that become a valuable part of your users’ lives. Now, I don’t want to oversell the idea. I’m not going to write 2,000 words that show you how to suddenly go start the next Facebook. There’s only one Mark Zuckerberg. No, what I am saying is that there is a process to evaluate how your audience or your customers are going to respond to what you create with them in mind. In fact, it’s as simple as asking your customers a handful of questions to discover if your product has the keys to start your customers’ Desire Engine.
The Desire Engine First, I’ve got to explain the 4 Steps of the Desire Engine. 1. The Trigger, 2. The Action, 3. The Commitment, 4. Variable Rewards.
122. http://nirandfar.com
86
Then, I’ll go through a process of customer development you can use to evaluate how habit-forming your product is. In plain English, the Desire Engine is a repeatable cycle of four steps that most habit-forming products send us through over and over again. THE TRIGGER This is either an external trigger, a man is prompted by his wife to buy a book, or an internal trigger, the same man decides that he needs to learn mobile development, so he buys books on mobile development. Internal triggers are almost always stronger than external triggers. It’s just like in the movie Inception —an idea or action only takes root when the individual believes they came up with it independent of external influence. When you build software, your goal is to associate your product with an internal trigger that happens often (once a year isn’t usually enough). THE ACTION This is a combination of motivation and ability. Increase the motivation to use your product, and you’ll increase the action you want: using your product. Additionally, when you increase users’ ability to use it, reduce the friction to use your product (think, reducing the steps to purchase, for example), and you’ll increase the desired actions. Amazon’s “order with one click” is a brilliant way to reduce friction between potential customers and the desire action: making purchases. Less friction means less motivation is required to complete the process. Less motivation is key because the strength of motivation is tied to the strength of feelings customers have for your product, and how motivated they are to “buy.” The stronger the motivation, the more likely they’re coming back to use the product. But motivation can be fickle. Much better to adapt your product for the quickest use possible, like Amazon has. The difference between having to re-enter credit card information each time we make a purchase, and being able to impulsively click “buy” is worth billions of dollars each year. But motivation can also increase over time, and that is a goal. Typically, your product starts out with an extrinsic motivator, but habitforming products find a way to move from extrinsic motivations to intrinsic ones. The first time I used Facebook, as a senior in high school, it was because a girl told me I had to get on it. Now, I’m not quite sure why I am so committed that I open Facebook several times a day. I just do. On a core level, it satisfies a need that I have to socialize with my peers.
87
BUILDING SOMETHING THAT YOUR USERS WILL ACTUALLY WANT TO BUY
THE COMMITMENT How much skin does your user have in your game? With Facebook, we spend hours building our profiles, and regardless of what a vocal minority may claim, our commitment to Facebook is (often) greater than newer social networks like App.net or Google+. We’re less invested in those networks, which we have spent little (or no) time on. But we’ve spent hundreds and thousands of hours building our Facebook profiles. We’re committed to them, simply based on how much time we’ve spent. To earn greater commitment means you need to ask your users for something like time or personal information or to send in a photo each time they use the app. With each action, they become more invested in the product and their commitment grows. Without that investment, they won’t be committed to what you’ve built. VARIABLE REWARD Remember in school reading about the experiment where rats push a lever and get a food pellet? When the food pellet is distributed randomly, as opposed to being dispensed every single time the lever is pressed, the rats learn to press the lever constantly. If the lever dispenses a food pellet every time, the rats soon lose interest because they know they can always come back to the lever. It’s not variable, so it’s not habitforming. Humans are the same way. When the reward for a given action is constant, but the frequency varies, we come back over and over again. Have you ever said, “Just 5 more minutes…” when you were playing a game? Or have you ever watched someone spend 8 hours in front of a slot machine waiting to hit the jackpot? That was variable reward in action. Think about the Facebook News Feed. Your friends are constantly sharing new bits of info about themselves via photos, or videos, or status updates, or “Gangam Style” parodies. You never really know what you’ll see. The content they share is the reward, and the novelty is what makes it variable. You’re not always delighted by what you see, and that’s part of the point. That’s great Austin. Now how do I actually use this? Right. Let’s actually lay out the process that I learned to put the Desire Engine in place to perform customer development before helping to launch products in our company. It’s a personal example on how to use the Desire Engine as a way to improve your products before you release them. 88
We could start by making a list of potential customers. You’re going to interview them about your product. If you can find some of them in your town, take them to coffee one by one. Otherwise, you’ll want to create an eight to ten question survey for people to answer over email. You can use around 10 questions, but beyond that you’re asking too much.
Steps To A Campaign Of Customer Development 1. Start with defining the audience or target “user profile” for what you’ll be testing, 2. Make a list of 30 to 50 people who fit the user profile, 3. Send a polite email to them to see if they would like to give you feedback on a new project, 4. Email your list of eight to ten questions to the folks who respond in the affirmative, 5. Make a spreadsheet with the answers, 6. Analyze for patterns of positive versus negative feedback, 7. Decide how to implement your feedback. DEFINING YOUR AUDIENCE In 2012, we released a version control feature at WP Engine123, where we integrated Git with WordPress hosting124. Before we deployed Git to all our customers, we beta tested the feature with a significant number of customers to get feedback and test for bugs. Git is a relatively technical feature that end-users may not ever come in contact with. Based on the nature of the product, we knew our audience had to be highly technical in order to give us meaningful feedback. Previous experience using version control was also a huge factor. Before you make your list of people, ask yourself what sort of person would make the most out of what you’re building. Are they highly technical, or not? Are they used to paying for products like yours? What is their background?
123. http://git.wpengine.com 124. http://wpengine.com
89
BUILDING SOMETHING THAT YOUR USERS WILL ACTUALLY WANT TO BUY
WRITING YOUR EMAIL Send a short, somewhat general email to your list. You’ll get dramatically better results if you personalize each one with their name and a bit of identifying info in the first sentence. Hi <Name>, Based on your work with <insert your product area>, you may be interested in a new feature that we’re developing. We’ve put together something that we believe will make you more productive and possibly save you time developing websites, and are looking for a few good beta testers. I have a short list of questions that you can answer and provide valuable feedback for our product. If you’re down, let me know and I’ll send them over! Thanks in advance! — Austin Make sure you send a reminder email a few days after you’ve set your beta users up. Since it’s a new thing, they may need prompting to revisit the website. HOW TO ASK YOUR QUESTIONS I like to ask about two questions per element of the Desire Engine, meaning eight total questions. Trigger Questions Effective trigger questions will reveal whether folks are driven to use your product by either an internal or an external motivation. But, to set your expectations, your users probably won’t be internally motivated to use your product immediately. It’s too new. Instead, look for potential things that you could elicit in your users to strengthen the internal motivation. This could include timing, like when does your product fit into their schedule? How does your product help them achieve something very personal to them at the right time? Does your product alleviate a fear they have? Your questions should discover how closely linked your product is to those triggers: • “When would you use a product like this?” • “When you used the product, when was it most useful for you?” • “How much of a reminder did you need in order to use the product after a few times?” 90
The best way for your product to become a part of someone’s life is to align the product with something that already matters to them. Asking Action Questions The goal here is more concrete. You want to figure out how hard it was to use your product, including number of clicks, how intuitive your product is and the results they get when they use it: • “How hard was it to use the product for the first time?” • “Did you have to search on Google for anything before it worked?” • “Did the product do what you expected it to?” • “What did you expect from the product?” • “How were your expectations met (or not met) by the product?” Finding out how you met (or didn’t) meet expectations, and discovering how to exceed the expectations will help you design a product people want to come back to. If the first few uses are memorable, they’ll come back. If they weren’t memorable, the questions will help you learn why not. Asking about Commitment Are your users committed to your product, or will they drift away, pulled by distraction or a better execution of the same idea? Commitment means they have skin in the game and are willing to invest further. Money is one way to measure commitment. If you ask, “Would you pay $XX for this?”, your customers will tell you volumes about their commitment. • “Would you recommend this to your friends?” • “What was the part you hated the most about the product? What stood out as the biggest positives?” • “If this product were free would you use it? Would you pay $10 per month for it?” Variable Reward Variable rewards correspond to your ability to modulate your customer’s experience with your product. My favorite example of this is messages the MailChimp monkey sends you when you log in. It’s a 91
BUILDING SOMETHING THAT YOUR USERS WILL ACTUALLY WANT TO BUY
simple little feature, an afterthought, but it’s a huge part of their branding. You never know what the monkey is going to say to you when you log in, but I always wonder what he’ll say when I log in. Users experience delight when they get a link from the monkey to a random Vimeo page. They log back in just to see what the link is on a particular day. Discovering variable rewards is an iterative process. The goal with your questions is to discover what your customer expects and what they want to achieve with your product. With MailChimp, they expect an app to create and send newsletters. The Monkey and his messages take the dry process of writing a newsletter and inject a bit of random fun into the product. • “What did you expect from using the product?” • “How did the product live up to your expectations?” • “When you had finished, did you achieve what you intended to?” • “Was the user experience boring?” THE SPREADSHEET This is the part where you have made your survey, sent it off and now have an inbox full of answers to your questions. Stick them in a Google doc, compare them and evaluate how your product needs to evolve. Is it too complicated to use, or is it super easy? Does your audience get why they need what you’ve built, or are they confused about the purpose behind it? Are they willing to pay for it? If they aren’t, you may not have a good business model. What did they love, and what did they hate? From here, you take the feedback and apply it to the product evolution. You make the final call here, and once you’re done, it’s time to release it into the wild. Good luck. ❧
92
“But The Client Wants IE 6 Support!” BY LEA VEROU ❧
Frequently, when I discuss CSS3 with other developers, the issue of stubborn clients comes up. They tell me that even though they personally don’t think a website should look the same in all browsers and they’re eager to try all of these new techniques, their clients insist that their website should look the same, so the developers are stuck with the same Web development techniques that we used five to ten years ago. Their clients just don’t “get” graceful degradation. Is this really the issue? Are our clients incapable of understanding these things? Is the problem that our clients don’t “get” the Web and need to be educated? I don’t think so. We got ourselves into this. We are the ones who caused this problem for our industry. We are the ones giving ourselves this trouble and making our profession less creative and enjoyable than it could be. It’s entirely our fault and no one else’s.
Wait, What? If we choose to make a website pixel-perfect in Internet Explorer 6 to 8, then we are doing up to 100% more work. No matter how many frameworks, polyfills and other scripts we use to ease our pain, we will always be doing at least 30% more work for those browsers. How many of us actually charge 30-100% extra for this work? I haven’t heard of many who do. Clients get this kind of extra work for free, so of course they will say that they want IE 6 support. If I was a client, maybe I’d say so, too, especially if I didn’t know how these technologies work. They won’t care about our extra time if we don’t care enough ourselves to charge for it accordingly. Of course, faster download times and better SEO are compelling arguments, but let’s face it: one of the biggest advantages of the new CSS features and new JavaScript APIs is the huge chunk of development time they save us, including making maintenance easier and quicker. As long as that doesn’t translate to reduced costs, clients will not care. And that’s perfectly understandable and natural.
93
“BUT THE CLIENT WANTS IE 6 SUPPORT!”
Money always wins the argument. (Image: HikingArtist125)
I don’t do much client work these days, but every time I’ve taken on a client project in my career, I’ve always presented options for browser support to my client. They want pixel perfection in IE 7? It will cost them more. They want IE 6 support? It will cost double. I explain to them that this is because I will have to do double as much work for this browser. I’ve never had a single client opt to pay more to fully support older browsers. If it doesn’t come free, you’d be surprised at how many don’t care about it as much as you think. But even if they do, at least I will have enough motivation to do it without hating them, my job, browser makers and the universe. It’s fairer for everyone, including me.
“They’ll Just Go To Another Professional Who Doesn’t Charge Extra” Whatever you do, don’t let the client think that you are charging extra for doing the same work as another professional. Not only will that look bad, but it’s also inaccurate. Explain to them that you just want to give them options and not decide on your own which browsers to support and charge for accordingly, without ever involving them in the process and letting them have a say about it.
125. http://www.flickr.com/photos/hikingartist/5727283114/sizes/m/in/photostream/
94
How Much More? You might have noticed that I implied above that supporting old Internet Explorers requires 30 to 100% more time. That’s a huge range, isn’t it? Actually, it should be even wider. I remember a case of a client coming to me with a CSS challenge that his developers weren’t able to solve. Making something that worked in modern browsers took me half an hour, then an hour to make it work in IE 8, and then three(!) more hours to get it to work in IE 7. Who knows how much longer it would’ve taken if I had to support IE 6, too! And that wasn’t the only occasion when it took me very little time to build a prototype that works in modern browsers and then a grossly disproportionate amount of extra time to make it work the same way in old Internet Explorers. If you’ve been in the field for more than a year, I’m sure this has happened to you, too. On the other hand, if you don’t use any modern technology and you stick to CSS 2.1, then I guess you would only have to face the old IE bugs, which would take some extra time but not double. Or, if you used a ton of frameworks and polyfills, you would still have to spend some time making them work together and debugging potential conflicts, but still not double the time. 30% was an estimate for cases like those. As you can see, the range is huge and depends on a number of different factors, including but not limited to the following: • You How modern are your development techniques? The more cutting-edge they are, then the more effort you will need to put into making good fallbacks or coming up with alternative techniques for old Internet Explorers (but less effort to make the original prototype) • The project If it’s a brochure website, the main thing that will need extra effort in order to work in old IEs is the styling. If it’s a Web application, it gets way trickier (and more time-consuming). • Level of support Supporting a browser is not black and white, either no support or full support. How good your fallbacks need to be will greatly determine how much extra time you have to spend on them. So, I’m sorry but I can’t tell you how much extra you will need to charge to support old Internet Explorers. You’ll have to decide yourself, case by case, taking all relevant factors into consideration.
95
“BUT THE CLIENT WANTS IE 6 SUPPORT!”
“But What If They Just Want To Pay For Firefox?” Of course, there is a baseline of browser support that I won’t go below, even if the client doesn’t want to pay for it. We have a responsibility to ourselves and to the Web to follow the principle of universality126. Even if a client wants to pay only for Firefox support, for example, my responsibility is to ensure that the website is still functional in the other browsers. Even if they are not willing to pay for mobile support, my responsibility as a Web developer is to at least add some media queries and make it decent there. Even if they don’t care about accessibility, my responsibility is to make the website somewhat accessible. These things don’t take up much time anyway, and they should be factored into even your lowest price.
So, What To Do With Old IEs? So, what do I do for those wise clients who don’t want to pay for support of old Internet Explorers? Usually, I try to keep graceful degradation in mind and provide decent fallbacks for old browsers, so that at least the content is accessible in them. But in cases of really naughty browsers, like IE 6 and 7, sometimes even graceful degradation doesn’t work very well. Then, what I usually do is split my CSS into three files: • base.css Fonts, basic colors, etc. • screen.css Everything specific to the screen. Most of the CSS goes here. • print.css Print-specific styles, such as for hiding contact forms, etc. Then, I just don’t serve screen.css to IE 7 and below. They get something like a print style sheet, without the hidden elements. It’s not very pretty, and it’s not modern, but at least they get the content. The same could be done with JavaScript. Check whether an API is present before using it, or simply don’t serve those script files to old Internet Explorers. If you’ve coded your JavaScript properly and it’s unobtrusive and all, then old browsers won’t get that extra functionality, but they won’t get JavaScript errors and broken functionality either. All of those require minimal effort on your part.
126. http://www.w3.org/People/Berners-Lee/UU.html
96
“Does That Mean I Always Have To Charge Less For Using Modern Stuff?” While discussing my point of view with another developer, he asked me, “So, you’re saying that I shouldn’t charge more if I use responsive design and add a bunch of media queries?” Absolutely not! I’m not saying we should feel sorry for being cutting-edge or punish ourselves for that with less income! What I’m barely advocating is the commonsense idea of charging more for more hours of work. If you code some JavaScript that does the same thing that media queries do, then of course you should charge more for the JavaScript, because it will take you more time. But if you weren’t going to do anything like that, and the media queries were icing on the cake, then of course you should charge them more than you would for a non-responsive version of the website.
Conclusion We may love what we do, but we certainly don’t love catering to the whims of old browsers. We do a lot of extra work to hide their incompetence, and that work needs to be compensated for properly. You don’t have to work for free, especially on something you don’t like doing. Explain the situation to your clients and they’ll understand how it goes, I promise. After all, “extra work = higher costs” is an established rule in every industry. The concept is not hard to grasp, and it makes the benefit of modern Web technologies much more tangible for technologically unsavvy clients. ❧
97
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
Passive Income Strategies For Web Designers BY SACHA GREIF ❧
Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant deadlines eventually started to wear me down. As a result, in the past couple of years I’ve been focusing more and more on personal projects, and thinking about ways to make money from them. I’ve sold themes and templates127 and written an eBook128, and I’m now focusing on launching my own job board for designers129. In a previous article for Smashing Magazine, I compared various ways to sell software products online130. What I’ll do in this chapter is not just compare ways in which freelance designers can earn passive income, but speak about my own experience in exploring these avenues. And, yes, that will include telling you how much money I’ve made! Disclaimer: This chapter is about my own personal experience. Just because I have, for example, never made much money from ads does not mean you can’t. So, please take this as a “Here’s what I did,” not as a “Here’s what you should do.”
Themes I was lucky enough to join ThemeForest131 (the biggest themes and template marketplace on the Web) in January 2009, shortly after it launched. ThemeForest seemed like the perfect way for an unknown, inexperienced designer to make money: no need for a fancy degree or years of experience —just design something cool and the market will reward you. In fact, that’s exactly what happened. Top designers132 now gross six-figure annual incomes solely from selling themes, and some do so despite being relative unknowns in the rest of the design world. 127. 128. 129. 130.
http://themeforest.net/user/SachaG http://sachagreif.com/ebook http://folyo.me/ http://www.smashingmagazine.com/2012/03/29/selling-digital-goods-online-ecommerce-services-compared/ 131. http://themeforest.net/ 132. http://themeforest.net/user/OrmanClark/
98
So, what was the result of my own venture into theme-making? Overall, it was very positive. First, it helped me launch my design career, because my first couple of freelance clients were all people who contacted me after seeing my templates. It was also lucrative: in June 2010, my best month ever, I made $1,248. For a year after that, having not even launched new themes, my existing ones still made me around $200 a month, with minimal effort on my part.
The high point of my ThemeForest career.
Altogether, Iâ&#x20AC;&#x2122;ve earned around $12,675 from ThemeForest in two and a half years; nothing to scoff at, especially because I completely stopped supporting my themes about a year ago. So, if selling themes is so great, why did I design the last one more than two years ago? There are a couple reasons for this, the main one being that the market drastically changed, and customer expectations changed with it. Designing a good-looking theme isnâ&#x20AC;&#x2122;t enough anymore. If you want your theme to be competitive, you need to support shortcodes, build a custom back end and design multiple layouts, not to mention provide excellent support and build a documentation website. In other words, in the span of a couple years, building themes went from something that you could do on the side to being a full-time job. Because I didnâ&#x20AC;&#x2122;t want to become a WordPress guru and spend all of my time creating themes, I decided to put theme design aside.
99
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
My most successful theme.
Theme design, then, is one of the best ways a designer can earn passive income, but it’s also one of the hardest. By the way, another important factor to consider is that theme design makes sense only if you’re in it for the long run and can reinvest the time you spend on a theme into subsequent ones (by reusing bits of code, streamlining the process, building a mailing list, etc.). Pros: • Very lucrative if you’re successful. • No need for experience or education, as long as you have the right skills. • No need to be famous or have a big following. Cons: • Requires a lot of HTML and CSS coding, and probably familiarity with WordPress or another CMS. • Providing good support is time-consuming. • You will probably need to launch more than one theme before the venture becomes more profitable than regular freelance work.
Icons And Vectors Note: I have never released any icon packs, brushes or vector resources, so I asked Vincent Le Moign133 of Webalys134 for his thoughts on this market. 100
“I started to create passive income by accident. In 10 years of freelancing, I’ve created a small stock of vector graphic elements that I’ve been using repeatedly for interface design. At first, it was just a few Illustrator files, where I pasted GUI elements, such as buttons and icons, to reuse in future projects. “In June 2010, I decided to make it comprehensive and consistent, and then release it for free. Inspired by Web application frameworks such as Ruby on Rails, the User Interface Design Framework135 was based on the concept of modularity, productivity and fast wireframing.”
Statistics from the launch of the User Interface Design Framework. Large preview136.
“It took me a few weeks to create it, without making any money on it, but the feedback was impressive: in two months, 52,000 unique visitors, more than 1,000 tweets, dozen of blog posts. Even the godfather of Web design, Jeffrey Zeldman, reviewed it137. I was high on a cloud! “Looking at it now, I have no idea why I invested so much time doing it— probably because of passion, and I felt the urge to fill a gap: this kind of tool was missing. I didn’t make any conscious plan, but this is how my new career started. Seeing this steady traffic, I thought I could build a premium version on top of it. A few months later, I launched a commercial pack filled with 750 vector icons138. Then the magic happened.”
133. 134. 135. 136.
https://twitter.com/webalys http://www.webalys.com/ http://www.webalys.com/design-interface-application-framework.php http://media.smashingmagazine.com/wp-content/uploads/2012/08/fb69d3fb48c4aecbe68b8895a38e710f.png 137. http://www.zeldman.com/2010/07/24/ui-design-framework-for-web-designers/ 138. http://www.webalys.com/minicons/index.html
101
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
The Minicons icon pack.
“Money started to add up in my PayPal account. I remember checking my inbox compulsively to see if the latest emails announced sales. It wasn’t a lot of sales yet, just a few hundreds dollars, but it showed me the way: that making a living from passive income was possible. In the past two years, the sales gradually went up and reached the point where I could stop working for customers and spend 100% of my time on my own products. In 2011, I launched one more resource: a vintage vector ornaments pack139, which was successful, too. Having two different products guaranteed a more regular income flow. “I currently earn a few thousands dollars each month from sales. My income is the same as what it was when I was a freelancer, but I have the satisfaction of developing my own products. But designing quality content is not enough to make sales. I actually spend most of my time on other tasks: • Creating the sales pages, writing the text, polishing the product websites. • Setting up the e-commerce solution. In two years I’ve wasted a lot of time building the sales process. I switched e-commerce solutions four times until I found the perfect one (DPD140 —almost unknown but highly recommended). • Advertising and promoting. I spent a lot of time and money finding the best sources of traffic.
139. http://www.vectorian.net/index.html 140. http://getdpd.com/
102
• Improving marketing and SEO, and setting up and learning how to use products such as MailChimp, Google Analytics, GetClicky, SEOmoz, Curebit. • Optimizing the conversion rate by setting up A/B tests with Google Optimizer. • To be honest, I don’t provide a lot of support (a few minutes a day), but I commit to responding as soon as possible. And I spent a lot of time writing the documentation (with screenshots) to avoid answering the same questions over and over again. “So if you’re considering creating premium resources, the answer is yes, you can live off of it. But your creativity and designs skills are not the keys elements of success. You’ll need to invest a lot of time in learning and practicing all areas of business: marketing, promotion, copywriting, SEO, analytics, etc. “Actually, this is the beauty of launching your own products: you will become a better designer not by creating better graphics, but because you will have a full view of the business and will master a full range of skills. You will see your customer with new eyes and focus on the efficiency of your designs more than their outer beauty. And believe me, your customer will love that and will pay you more if you increase their sales. “On the downside, the market is becoming highly competitive. The same shift that is taking place with templates is happening in my market. Competition is becoming fierce, and not a week goes by without a few more icon packs getting released. I mean, which designer hasn’t launched their own set by now? “I’ve counted more than 50 competitors who sell icons, and the number and quality is improving constantly.”
103
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
A sample of the Vectorian vector pack.
“Also, the growing trend of discounted bundles (like on Dealotto and MightyDeals), where you get a ton of resources for a few bucks, risks drying up the market. I’m still not sure if this will convince more designers to add these resources in their workflow, thus expanding the market, or stop them from buying these packs at the current prices. “This tougher competition has forced me to spend months this year doubling the number of my icons, from 750 to 1500, and adding variations for different software, such as PowerPoint and Keynote. Also, I’ve improved my other product, the vector ornaments, and paid another freelancer to fix a few problems. And I recently paid a great calligrapher to create a logo for Vectorian and improve the branding. Expenses and time investment are going up. “Another problem: I don’t think my designs are as creative or as good as before. I’m so focused on creating the content, marketing it and thinking like a business owner that I sometimes have less passion for design and less creativity.” Pros: • You already have the skills to create the content. • If you use marketplaces such as iStockphoto and GraphicRiver, you don’t need to build a website or promote your products. • Almost no support is required (if you write good documentation). • You will expand your skills and become more business-oriented. • You don’t need to write in English (this was a big advantage for me because I’m French and a poor English writer). 104
Cons: • It’s time-consuming. • The expectations of quality and quantity are rising. And more and more free content is becoming available. • The market is competitive; you need not only great content, but great marketing.
Advertising I can still remember when Carbon141 first accepted one of my websites into its advertising network. I was overjoyed! At last, I would be able to dip into the river of money that flows into Internet advertising! Of course, I didn’t expect to earn a salary from ads alone, but I thought it might be a nice supplement —say, a couple of hundred dollars a month. If you’ve ever run any kind of ads on a website, you know what’s coming: my first payment must’ve been for something like $5. So, yes, Internet ads are no fun — unless you bring in a massive amount of traffic (or if you plaster your website with a massive number of ads).
My first ever ad spot.
Since then, I’ve joined Fusion Ads142 for my blog143 and joined Yoggrt144 for The Toolbox145 (both ad networks belong to BuySellAds146). To give
141. 142. 143. 144.
http://carbonads.net/ http://fusionads.net/ http://sachagreif.com/ http://yoggrt.com/
105
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
you some numbers, The Toolbox gets about 20,000 uniques a month, which is not huge but still decent. This converts to $30 to 60 per month. My blog is a little more successful (probably due to the higher clickthrough rate), and I’ve succeeded in pulling in $100 or $200 in extremely good months when a couple of my posts went viral. But the average has been around $50 to $100. Altogether, the total from advertising comes in at around $600 over six months. So, as far as I’m concerned, ads are a good way to pay for a meal to celebrate the weekend, but not much more unless you decide to become a full-time blogger. Pros: • Does not require any work. • Joining a respected ad network will give your website cachet. Cons: • Pays for a meal, if you’re lucky. • Did I mention that you probably won’t earn anything?
Books Writing an eBook (or plain old book) might seem relatively easy. After all, we all know how to write, right? In fact, I’d say that actually writing the book is not the hardest part. Sure, developing a good writing style takes years of practice, but the truth is that people will forgive clumsy writing if you have something valuable to say. No, the real work in writing eBooks is in what comes before and after the writing. Before writing the first word, you need to come up with a good topic and, more importantly, develop the skills necessary to make you an authority on the topic. Simply compiling existing knowledge might work for a blog post, but it won’t fly when you ask people to hand out their hard-earned cash. Consider writing an eBook only if you have a couple of years of experience under your belt and feel ready to distill it into a book. And please don’t make the mistake of thinking it’s over once you’re done writing. That’s actually when the real battle begins: selling your book.
145. http://www.thetoolbox.cc/ 146. http://buysellads.com/
106
My eBook’s landing page.
How will people find out about your book? What reason will they have to buy it? Why should they buy yours instead of competing books? These are the kinds of questions you’ll have to face. If you want to rest your chances on a personal website, take a page from Jarrod Drysdale’s book (pun intended), Bootstrapping Design147. Drysdale not only set up a website for his book, but also used a mailing list before and after the launch to promote it by sending out sample chapters and asking his audience various questions. I did my best to promote my eBook by setting up a landing page, writing guest posts148 about it and holding giveaways149. Another good strategy is to target a niche. This is what I did by focusing specifically on user interface design for startups, and Matthew Butterick also did it with his Typography for Lawyers150 book. Last but not least, I strongly recommend partnering up with websites such as AppSumo151 and Hyperink152 to open up distributions channels for your book and to create new revenue streams.
147. http://bootstrappingdesign.com/ 148. http://blog.asmartbear.com/perfect-pricing.html 149. http://theindustry.cc/2012/04/05/the-greif-has-launched-his-ebook-step-by-step-ui-design/ 150. http://www.typographyforlawyers.com/ 151. http://appsumo.com/ 152. http://hyperink.com/
107
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
Sales started strong but have slowed to a couple per week.
Writing an eBook turned out to be great for me. I had a great launch, making about $8,000 in the first two weeks alone. Since then, sales have slowed considerably, but I did manage to make another $6,000 in the four months since the launch. In my case, the key to earning more was partnering up with AppSumo and Dealotto, which both brought in a couple of thousand dollars in extra revenue after the initial boost from the launch faded away. Pros: • Almost no support needed. • No technical skills required. Cons: • You need to have something to say. • A lot of promotion is required. • The market is competitive and crowded. • Sales will quickly dry out after launch.
Software As A Service Building a business requires a ton of work and commitment, but unlike freelance design or, say, mowing lawns, building a software-based service of some kind takes away the 1:1 relationship between your efforts and your income. Some services charge only once, as is the case with 108
job boards such as Authentic Jobs153 and my own Folyo. But, of course, the cash cow of passive income is subscription services because they enable you to anticipate your cash flow and build a steady income stream. The obvious challenge in building a software service is that it requires technical skill, which you might not have if you’ve got a design background. It’s not the end of the world, though. You could find a cofounder, outsource the project or even learn the skills yourself. And you don’t need to go all out right away. When I speak with non-technical founders, I often notice that a preliminary version of their idea could very well have been achieved with a simple WordPress blog. If you explore a little deeper, you’ll realize that opportunities for monetization are everywhere. For example, WordPress has numerous membership subscription plugins154. Even MailChimp155 lets you charge for newsletter subscriptions. By thinking outside the box and combining existing services, even a moderately technical person can get a minimum viable product156 out the door. I launched Folyo (a website that helps startups find great, vetted freelance designers) about a year ago:
Folyo, a private job board for freelance design projects.
For the first couple months, I ran it as a simple newsletter of job offers, with a Wufoo157 form for submitting projects. There was no back end, no database and no user accounts! This was enough to validate the con153. 154. 155. 156. 157.
http://authenticjobs.com/ http://s2member.com/ http://mailchimp.com/ http://en.wikipedia.org/wiki/Minimum_viable_product http://wufoo.com/
109
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
cept and to motivate me to build a real app. So, I found a Ruby on Rails developer through a Hacker News jobs thread158 and paid him about $3,000 to create a working app (a process I cover in more detail on my blog159). Meanwhile, I had been learning Ruby on Rails myself, so I’ve since taken on part of the development myself, outsourcing the remainder to a friend in exchange for some design work. Was it worth it? While I have no doubt I would be earning more if I was focusing on freelance work rather than Folyo, I’m still very happy that I decided to launch my own project. I currently make about $1,000 a month from Folyo, which is good enough for one person with minimal costs after one year. More importantly, each day spent working on Folyo makes it a little better and increases the website’s value (unlike with client work, where working on one project doesn’t help you with the next). Of course, when I’m working on Folyo, I do very little actual designing. In fact, my time breaks down something like this: • Email and support: 20% • Blogging: 20% • Coding: 40% • Miscellaneous tasks: 10% • Design: 10% So, if you’re thinking of launching your own service, consider that it probably means spending much less time designing. Pros: • Theoretically, it can be lucrative and even get you bought out by Google or Facebook. • The work is very motivating. • You have the freedom to build anything you want. Cons: • You will need to step way outside of your comfort zone.
158. http://hnhiring.me/ 159. http://sachagreif.com/what-i-learned-bootstrapping-folyo-in-2011/
110
• The chance of failure is high. • At the end of the day, relatively little designing is involved.
Lessons Learned What did I learn from all this? And what would I do differently if I could start over? Well, one thing I realized is the importance of building a network. You need to find a way to get connected, whether it’s by becoming a famous designer, writing a blog, building a Twitter following or, ideally, doing all that and more. Of course, a lot of great designers focus simply on doing a great job and don’t concern themselves too much with the rest. But maybe these designers went to a great art school and kept in touch with their classmates. Or maybe they attend design meetups regularly. One way or another, you can bet that most successful designers maintain a network, even if they don’t realize it. Blogs and Twitter are simply the digital equivalent of this. Making it entirely on your own is very hard, so the earlier you start cultivating these relationships, the better. Related to this, have a strong identity. Try to stand out from the crowd, and make sure people know who you are. You can achieve this by cultivating your own style, being involved in high-profile or viral projects or, what I think is the best way, launching your own projects.
Visual Idiot’s humor at work.
111
PASSIVE INCOME STRATEGIES FOR WEB DESIGNERS
If you want to see how it’s done, look no further than Visual Idiot160, who converted his great design skills and weird sense of humor into a job at GoSquared161, despite no one on the Internet even knowing his real name. This may sound obvious, but the reality is that projects that help build your network or identity are not often the most lucrative ones (actually, they usually don’t make you any money). So, it’s tempting to take that high-paying contract to design a pharmaceutical company’s intranet, rather than spend a couple days building a silly JavaScript that replaces stuff with pictures of cats. But guess what? Nobody outside of Big Pharma will ever see that intranet’s beautifully crafted pixels, but that cat website might go viral and lead to thousands of people suddenly becoming aware of your existence. To summarize, the main lesson I’ve learned over the last couple of years is to have a long-term view and invest in yourself, not chase a quick buck. The plan is rather simple, then: build a network, cultivate a strong identity to ensure the network knows who you are, and then come up with a product you can market to it. Of course, each step usually takes a couple years. I said it was simple; I didn’t say it was easy! ❧
160. http://visualidiot.com/ 161. https://www.gosquared.com/
112
Mastering Photoshop: Unknown Tricks and Time-Savers BY TOM GIANNATTASIO ❧
We all have shortcuts that are essential to our daily workflow. A majority of them are staples such as Copy ( Command + C ) and Paste ( Command + V ), but occasionally we stumble upon a shortcut we wish we’d learned years ago. Suddenly, this simple shortcut has streamlined our process and shaved quite a bit of time off our day. Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the “Keyboard Shortcuts” menu, and some of them don’t even have equivalent menu options. Please note that all of the shortcuts listed below assume that you are using Photoshop CS4 on OS X. They will work on the Windows platform by converting as follows: Command → Control and Option → Alt .
Layers SELECTION Sifting through nests of layer sets to find the layer you need quickly becomes tiresome. Luckily, there are a number of ways to select layers more intuitively. Using the Move tool ( V ), you can Command + click on the canvas to select the uppermost layer with pixel data located directly 113
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
below the mouse. If your layers are grouped within layer sets, this action may have selected the entire folder. You can change this behavior to select the actual layer by using the Auto-select drop-down in the Move toolâ&#x20AC;&#x2122;s property bar.
Changing auto-select behavior.
There will be times when you want to select a layer that is located below a number of other layers. By right-clicking with the Move tool, youâ&#x20AC;&#x2122;ll bring up a contextual menu containing a list of all layers located below the cursor. If your layers are properly named, you should be able to quickly select the layer you need. By holding Shift while using either of the selection methods above, you can select multiple layers. After selecting multiple layers, you can link the layers together by rightclicking and selecting Link Layers.
Right-clicking to display all layers beneath the cursor.
The keyboard can also be used to select layers. Pressing Option + [ or Option + ] selects the layer below or above the current layer, respectively. Pressing Option + < selects the bottommost layer, and Option + > selects the uppermost. Option + Shift + < selects all layers between the current layer and the bottommost layer, and Option + Shift + > selects all layers between the current and uppermost.
114
SORTING Sorting layers with the mouse can be clumsy and slow. A few shortcuts speeds up the organizing. Command + [ and Command + ] moves the selected layer up or down one position in the stack. If multiple layers are selected, theyâ&#x20AC;&#x2122;ll move relative to the uppermost or bottommost layer. Pressing Command + Shift + [ or Command + Shift + ] brings the selected layer to the top or bottom of its current layer group. If the layer is already at the top or bottom of the layer group, it jumps to the top or bottom of the parent layer group.
115
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
VIEWING the eye icon of a layer is a commonly known way to hide or show all other layers. There is also a way to expand and collapse layer groups: by Command + clicking the arrow next to the layer group, you can close or expand all other layer groups; this does not work on nested layer groups. Alternatively, right-clicking the arrow gives you a menu to perform the same actions; but this will work on nested layer groups. Option + clicking
DUPLICATING There are a number of ways to duplicate data from one layer to another. Duplicating an entire layer is as simple as pressing Command + J . If a selection is active, you can use the same shortcut ( Command + J ) to create a new layer based on the selected area of the original layer. Pressing Command + Shift + J with a selection creates a new layer while cutting the data from the original layer. Holding Option while pressing one of the arrow keys allows you to duplicate the current layer and nudge it by 1 pixel. Holding Shift and Option nudges the new layer by 10 pixels.
116
Duplicating data from multiple layers can also be done more quickly using some keyboard commands. Using Command + Shift + C with an active selection copies the data contained within it to the clipboard. You can then paste it to a new layer ( Command + Option + Shift + N , Command + V ). If youâ&#x20AC;&#x2122;d like to create a flattened copy of the entire document, use the shortcut Command + Option + Shift + E : a composite of all visible layers will be added as a new layer to the top of your layer stack.
117
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
Brushes SHAPE AND SIZE Being able to quickly adjust the brush tool is crucial to getting a swift workflow. Many know about using [ and ] to decrease and increase the brush’s diameter, as well as Shift + [ and Shift + ] to decrease and increase the brush’s hardness. However, CS4 introduced an even more intuitive way to do this. By holding Control + Option and dragging on the canvas, you can change the brush’s diameter with a visual aid. Control + Command + Option and dragging gives you control of the brush’s hardness.
The on-canvas drag makes brush adjustments more intuitive.
If you would like to completely change the brush shape to a different preset, press < or > to cycle through them and Shift + < or Shift + > to select the first or last brush. Right-clicking inside the canvas also displays a condensed menu of brushes.
118
119
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
OPACITY, FLOW AND MODE The opacity of the brush tool can be quickly tweaked using the number keys: 3 = 30%; 3 + 5 = 35%; 0 + 3 = 3%; 0 = 100%. Holding Shift when inputting the numbers sets the flow of the tool. Note that if Airbrush mode is on, these two shortcuts swap (i.e. holding Shift controls opacity instead of flow). You can toggle Airbrush mode on and off using Option + Shift + P . The same numeric input method can be used to determine the opacity of a layer when the Move tool ( V ) is active; pressing Shift allows you to alter the Fill of the layer.
Quick Fill Instead of selecting the Fill tool ( G ), you can quickly bring up the Fill menu using Shift + F5 . Even better, bypass the menu entirely using Option + Backspace to fill with the foreground color or Command + Backspace to fill with the background color. These keyboard commands can also be used to quickly set the color of a type or shape layer. 120
To preserve transparency when filling, you could first lock the transparency of the layer by pressing / and then fill, but thereâ&#x20AC;&#x2122;s an easier way. Pressing Option + Shift + Backspace or Command + Shift + Backspace fills with the foreground or background color while preserving transparency.
Pressing Command + Shift + Backspace to preserve transparency while filling.
121
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
Blending Modes You can cycle through blending modes or jump to a specific one by using just the keyboard. By pressing Option + Shift + (+) or Option + Shift + (-) , you can cycle forward or backward through available modes. Alternatively, you can set a specific mode using the shortcuts below.
122
123
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
Typesetting Setting type is a delicate and time-consuming process, but shortcuts speed it up. First off, hiding the inversed block that is created by selecting text is extremely beneficial. Command + H allows you to toggle the visibility of both the highlight and baseline stroke, making it easier to see the final result. When finished editing your text, you can commit changes by pressing Enter on the numeric keypad or Command + Return . Pressing Esc discards changes.
VARIANTS There are six shortcuts for changing the font variant, but they should be used with caution. If the appropriate variant or character does not exist within the currently selected font family, Photoshop creates a faux variant. These fake variants are frowned upon within the typosphere and are extremely easy to spot. So, if you use these shortcuts, make sure that Photoshop has selected an actual variant and not faked it. Now, onto the shortcuts:
124
JUSTIFICATION To set the justification, use one of the commands below. Note that a selection must be made within the target paragraph for these to work.
125
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
SPACING AND SIZING Properly sizing and spacing type is a tedious task, but Photoshop does provide some handy — albeit broad— shortcuts. Unfortunately, there is no way to fine-tune the increments by which they adjust. Note that these shortcuts will work only if a text selection is made; selecting a type layer is not enough. To change the type size by increments of 2, press either Command + Shift + < or > . To bump the increment up to 10 points, use Command + Option + Shift + < or > . Leading can also be modified by 2 or 10 point increments using Option + Up or Down arrow or by Command + Option + Up or Down arrow .
126
The arrow keys can also be used to adjust kerning and tracking. Pressing Option + Left or Right either kerns or tracks 20 units depending on whether or not a type selection is active (i.e. if the cursor is between two characters, kerning is applied; if multiple characters are selected, then tracking is adjusted). The increment can also be changed to 100 units using Command + Option + Left or Right arrow . Finally, the base127
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
line can be shifted by 2 or 10 points using Option + Shift + Up or Down arrow or Command + Option + Shift + Up or Down arrow , respectively.
128
RESETS Sometimes, we have to return to the defaults. Below are some shortcuts to get you back on track.
Menus Hidden within many of Photoshop’s menus are a number of shortcuts that make adjustments faster and easier. Just about every menu — whether for Adjustment, Filter or anything else— allows you to revert to the original settings; by simply holding Option, the Cancel button will turn into a Reset button. Depending on the menu, holding Option might even change some of the other buttons (e.g. the Done button in the “Save for Web and Devices” menu will change to Remember). Certain menus, such as the Filter Gallery, also allow you to hold Command to turn the Cancel button into a Default button.
129
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
Using modifier keys to uncover in-menu options.
SPRING-LOADED COMMANDS By default, most menus transform the cursor into the Hand tool or Move tool. These tools can be used on the canvas while the menu is open to pan the document or to adjust settings, such as the Angle and Distance settings for a Drop Shadow. More tools, however, are available via spring-loaded shortcuts. The zoom tools can be accessed using either Command (to zoom in) and Option (to zoom out) or Command + Space (to zoom in) and Command + Option + Space (to zoom out). The hand tool can also be accessed by holding the space bar.
Holding Command + Spacebar to access the zoom tool within the Blending options.
ADJUSTMENT MENUS AND LAYERS The Curves adjustment, like most other adjustments, contains some handy shortcuts. Similar to how you can cycle through the Channels in a document, you can cycle through the adjustmentâ&#x20AC;&#x2122;s channels using Option + 2, 3, 4, 5 , etc. You can also cycle through the points on the 130
actual curves using - and = . With a point selected, you can nudge the points in increments of 2 in any direction using the arrow keys. Holding Shift in conjunction with the arrow keys moves the point by 16 units. When working with an adjustment menu, you can toggle the Preview option on and off by pressing P. Adjustment layers donâ&#x20AC;&#x2122;t have a Preview option, but you can temporarily disable it by pressing and holding \ .
131
MASTERING PHOTOSHOP: UNKNOWN TRICKS AND TIME-SAVERS
Summary Hopefully, reading this has taught you a few new tricks and uncovered for you some of the more obscure options within Photoshop. While memorizing shortcuts can be a chore, integrating them into your daily workflow saves you an incredible amount of time. ❧ RELATED ARTICLES • Photoshop Secret Shortcuts162 • John Nack on Adobe: Shortcut Changes in PS CS4163 • Adobe Photoshop Keyboard Shortcuts164 • Photoshop Keyboard Shortcuts165 • Adobe Photoshop CS3 Keyboard Shortcuts166
162. 163. 164. 165. 166.
132
http://www.webdesignerwall.com/tutorials/photoshop-secret-shortcuts/ http://blogs.adobe.com/jnack/2008/10/shortcut_changes_in_cs4.html http://morris-photographics.com/photoshop/shortcuts http://www.photoshopsupport.com/tutorials/jennifer/keyboard-shortcuts.html http://www.keyxl.com/aaac987/148/Adobe-Photoshop-CS3-keyboard-shortcuts.htm
The Art Of Film Title Design Throughout Cinema History BY JULIA MAY ❧
Have you ever thought of what makes you remember a certain movie or TV show? Of course, it’s the story being told, you’ll say. But what about movies such as Goldfinger, Seven and Snatch? What’s the first thing that comes to mind? We are pretty sure their opening title sequences stick out for many of you. Today we’ll take a closer look at that short space of time between the moment the lights go down and the first scene of a film, the part that so often sets our expectations of a movie, that sequence that speaks to our creative side: the art of the film title. We’ll look at the evolution of title design and some particularly interesting titles from various periods in the history of cinema and animation. Film titles can be great fun. In them we see the bond between the art of filmmaking and graphic design — and perhaps visual culture as a whole. They have always served a greater purpose than themselves: to move the overarching story forward. Whether you are a motion graphic designer, a digital artist or a connoisseur of design, we hope you are inspired by these film titles and the ideas they suggest to your own creative endeavors. At the end of this post, you’ll find a listing of relevant typefaces and Web resources. For this chapter, we reached out to David Peters, a San Franciscobased designer and media historian who, more than a decade ago, began a project called “Design Films” to research the subject. David generously contributed to this chapter.
Titles In Silent Film Words and lettering played an enormous role in films of the silent era. Film titles made their appearance in the earliest silent films, along with letter cards (or inter-titles), which provided context. These cards were the responsibility of the lettering artist, who collaborated with the scriptwriter and director to create narrative continuity so that audiences could follow what they were seeing. Distinct from these inter-titles was the film’s main title, a vehicle of particular concern to film producers because of the legal, copyright and marketing information this footage had to bear. 133
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
Here is the main title from D.W. Griffith’s “Intolerance” (1916), which many reviewers and historians consider the greatest film of the silent era. Note that variations of the director’s name are featured in five ways:
Film titles and letter cards had to provide essential information to the viewer. For reasons such as ease of production and clarity, artists favored mono-stroke letterforms or characters with small serifs. White lettering on a black background is another characteristic of this era, because titles simply looked better this way when projected with live-action B&W film. The following inter-titles are typical of silent movies. A shot from the comedy “The New Janitor” (1914) featuring Charlie Chaplin is on the right, and the silent western “West of Hot Dog167” (1924) is on the left:
167. http://www.archive.org/details/westofhotdog
134
In addition to hiring lettering artists, the biggest film studios began to employ typesetters in the production of title cards. Among the fonts often adopted for titles and inter-title cards were Pastel (BB&S, 1892), National Old Style (ATF, 1916) and Photoplay (Samuel Welo’s Studio, 1927). Regardless of the method followed, we see the emergence of typography that seeks to match letterforms with the subject matter and even the zeitgeist — including typefaces inspired by art movements such as art nouveau, art deco and expressionism — as well as the commercial vocabulary of packaging design and advertising. The main title from the American release of “The Cabinet of Dr. Calligari” (1920) is much less expressive than the title from the influential original German film:
The sans-serif title (for a later restored version) of the classic horror film “Nosferatu” contrasts with the art-nouveau treatment of the film’s promotional poster of the time. The font, Berthold Herold Reklameschrift BQ (digitized version168) was created by German typesetter Heinz Hoffman in 1904. You can see the original German version of the title still from Nosferatu here169.
168. http://new.myfonts.com/fonts/berthold/herold-reklameschrift-bq/ 169. http://www.annyas.com/screenshots/updates/nosferatu-eine-symphonie-desgrauens-1922/
135
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
Animation effects like the ones you see in rotoscopes actually pre-date film. But the power of filmmaking was enormous, and it tempted thousands, including many artists, to try their hand at this new medium. One of the earliest known title animations is seen in the work of J. Stuart Blackton. “Humorous Phases of Funny Faces” (1906) —video on YouTube170 — was directed by J. Stuart Blackton, who many consider to be the father of American animation. Not only is it one of the first animated films, it is among the first to feature an animated opening title, making it a precursor of the modern title sequence:
Other important early filmmakers such as Emil Cohl and Winsor McCay were accomplished draftsmen who dedicated years of their lives to 170. http://www.youtube.com/watch?v=8dRe85cNXwg
136
discovering the dramatic potential and practical techniques of animation. Their focus was more on character development and story visualization than on title animation per se. So, while we see innumerable novelties in main titles and inter-titles during this period, the big innovations of title animation and motion typography don’t really emerge until well after the Second World War.
The Silence Is Broken As movies grew more popular, their titles evolved. Movie producers invested considerable sums in film production and sometimes resorted to fixing a dog of a film by rewriting the inter-titles. For a time, “film doctor” Ralph Spence171 (1890–1949) was the highest-paid title writer in the industry, earning $10,000 a picture for his one-liners. During the 1920s and ’30s, European cinema was deeply influenced by modernism, and aspects of this visual sensibility were brought to the US by filmmakers who were fleeing the Nazis. Meanwhile, the studio systems operating in Europe and Hollywood also delighted in creating titles that featured vernacular graphic novelties. As much as possible, they liked to convey the tone of a movie through the “dressage” of its main title. Thus, blackletter fonts in the opening credits were used to evoke horror, ribbons and flowery lettering suggested love, and typography that would have been used on “Wanted” posters connoted a western flick. Here is a title still from the oldest surviving feature-length animated film “The Adventures of Prince Achmed” (Die Abenteuer des Prinzen Achmed) by German animator Lotte Reiniger:
171. http://ralphhspence.wordpress.com/
137
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
And here is the opening title in the talkie “B” Western “Outlaws of Boulder Pass172”:
Hollywood animation studios, including Warner Brothers and MGM, did give some license to their artists to indulge in title antics. But one can also see that life for the titling crew at Disney was strained by the weight of its foreign-language versions and that film exports rarely encouraged innovation in titling.
172. http://www.archive.org/details/outlaws_of_boulder_pass
138
The first Mickey Mouse cartoon, circa 1929, features both Mickey and Minnie, but its main title, “Plane Crazy,” is lackluster:
Over time, the very appearance of white-on-black title lettering became a visual trope, recurring as it does in practically every Woody Allen film. Allen relies on the device primarily to build a visual identity, although its economy is a practical advantage, too. Allen uses the Windsor font for most of his films, as illustrated below in “Annie Hall” (1977). Read more173 about typography in Allen’s films and also an interesting story about how the renowned director chose this typeface:
The incorporation of audio into movies — making them “talkies”— didn’t revolutionize how film titles were handled, at least not
173. http://kitblog.com/2007/12/woody_allens_typography.html
139
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
immediately. However, we do see one avant-garde animator and painter of German origin, Oskar Fischinger, give serious thought to the relationship between visual effects and music. Fischinger’s practice of subordinating the visual rhythm to the audio was repeated often in motion graphics and title design. The concept of score visualization first conceived by Oskar Fischinger in his film “Studies” anticipates the effects created by Saul Bass in “The Man With the Golden Arm” (1955) and later by Susan Bradley in “Monsters, Inc” (2001):
140
The (True) Birth Of The Title Sequence Breakthrough ideas in titling, such as timing the typography to interact with metaphorical imagery or to create its own world, were largely innovations that came from outsiders to the Hollywood studio system. Figures such as Saul Bass, Pablo Ferro, Maurice Binder and Richard Williams arrived on the scene in the 1950s, at a time when the studios were starting to flounder in their fight with TV. At that time, independent filmmakers made commercial headway by doing things differently, spreading utterly fresh ideas about the possibilities of title sequences. This is the era in which the discipline of film title sequence design was actually born. Maurice Binder worked on the title designs of 14 films about Agent 007, including the first episode, “Dr. No” (1962). Binder created the famous gun-barrel sequence, which became a signature for the Bond series:
If there were a hall of fame for film title design, Stephen Frankfurt’s sequence for the 1962 film “To Kill A Mocking Bird” (below, upper row) would have a seat of honor. Cameron Crowe referenced it in “Almost Famous” (lower row):
141
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
Experimentation on the fringes, where title sequences really thrive, have led to all kinds of innovation in what a title can be and how it can serve the story and the director’s intent. Perceptive directors like Otto Preminger, Alfred Hitchcock, Blake Edwards and Stanley Donen embraced these innovators and gave them the reign to surprise audiences from the opening shots. The Bond films, the Pink Panther series, Barbarella: the sequences for such films became enticing and often sexy popular amusements. By the mid-1960s the top title designers were celebrities in their own right, people who could be relied on to deal with the messy business of credits with playful panache. Here is a still from the Saul Bass174’ title sequence for “North by Northwest,” his first project with director Alfred Hitchcock:
A great draftsman and visual storyteller, Saul Bass ran the gamut of techniques for his title sequences: montage, live action, cut-out paper animation, typography in motion, to name a few. Whatever technique he used, Bass summarized the film as a metaphor that often shone with 174. http://notcoming.com/features/saul/
142
creativity. (In January 2010, David Peters, Kai Christmann and Dav Rauch, all of Design Films, gave two presentations on the work of Saul Bass at the 12th Future Film Festival175 in Bologna, Italy.) In an interview, Kyle Cooper listed three opening sequences that made a big impression on him. Saul Bass’ title sequence for the 1962 film “Walk on the Wild Side” (watch on MySpace176) was among them:
It could be argued that typography lost importance in this era of title design. The imagery behind the credits received a lot more attention. Still, the interplay of typography and images was by no means ignored. Popular trends of the 1950s were using three-dimensional lettering and embedding type in physical artifacts such as embroidery and signage. In contrast, Saul Bass often approached the lettering of a main title as he would a logo, making it function as the core element in a full marketing campaign. While the variety of solutions increased considerably, their anchor was always the relationship of on-screen typography to the movie itself. The power of minimalism is shown in the opening sequence for Ridley Scott’s “Alien”177 (1979). Credit for this design goes to Richard Greenberg, with creative direction from Stephen Frankfurt:
175. http://www.futurefilmfestival.org/intl/festival/2010/xii-ed-reportage/ 176. http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=12366607 177. http://www.dailymotion.com/video/xc9u6n_alien-opening-titles_shortfilms
143
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
The main title for the French film classic “Le Dernier Metro” (1980), directed by Francois Truffaut, is austere and modern but has a generic quality not so different from a Woody Allen title:
The Digital Era, And Modern Trends In Film Title Design Every sphere of contemporary life— and especially the film business— has been affected by computers. For designers, creating film titles meant participating in the apprenticeship tradition— learning by doing, on the job; that continued unabated into the mid-1990s. At that time, dynamic openers by Kyle Cooper and others showed what the next generation of design-educated, film-literate, tech-savvy creatives could do. That apprenticeship tradition has largely been overshadowed by the rise of popular technology, the Internet-enabled archiving of 144
everything and the plethora of schools that propagate countless design disciplines. Most significantly, we see designers working like filmmakers and filmmakers working like designers. The revolutionary title sequence for “Se7en” (1995) by Kyle Cooper was named by New York Times Magazine as “one of the most important design innovations of the 1990s”:
A consequence of this digital era seems to be that modern title design will forever rely on progressive technologies. Yet, in one of his interviews, Kyle Cooper states that while the power of computer graphics is obvious, he still likes experimenting with live action, because there is something special about the imperfection of making things by hand. While Cooper was working on the sequence for “Darkness Falls” (2003), some glass he was using suddenly split, and the crack cut across the eyes of a girl in an old picture. The incident added suspense to the effect:
145
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
In his title sequence for the 2005 crime-comedy “Kiss Kiss Bang Bang” (watch on YouTube178), designer Danny Yount made use of Saul Bassstyle graphics to recreate the atmosphere of 1960s detective stories:
The potential of digital graphics and typography has attracted some of the most creative minds to motion design. Pixar and Disney have reserved crucial parts in the branding of their films for the title sequences. Using animated characters to introduce viewers to the story became a popular trend. Such talented graphic designers as Susan Bradley (“Toy Story,” “Monsters, Inc.,” “WALL-E,” “Ratatouille”), Jaimi Caliri (Lemony Snicket’s “A Series of Unfortunate Events”), Dave Nalle (“Corpse Bride”), Michael Riley (“The Back-Up Plan,” “Kung Fu Panda”) and Michael Curtis (“Brother Bear”) use all manner of tools to test different approaches to designing titles. One thing these individuals have in common is a drive to find a strong metaphor and tell an exciting story with their sequences. For the end sequence of “Ratatouille”, Susan Bradley (read an interview with her179) drew the typography, inspired by the slab-serif typeface Rockwell180. For the opening titles, she used a hand-drawn cursive intended to evoke Paris.
178. http://www.youtube.com/watch?v=_bpP9sI72bM&feature=player_embedded 179. http://www.thunderchunky.co.uk/articles/pixar-titles-and-type-with-susan-bradley/ 180. http://en.wikipedia.org/wiki/Rockwell_(typeface)
146
The title sequence for “Thank You for Smoking” (2005) is a modern manifesto on typographic style in title design. The idea for using cigarette packaging for the opening sequence was suggested by the film’s director, Jason Reitman, and implemented by Shadowplay Studios181. Typographica goes through the trouble of pointing out the fonts182 in the sequence:
In the title sequence for “Up in the Air” (2009), the designers at Shadowplay Studios rely on aerial photography:
181. http://www.shadowplaystudio.com/ 182. http://typographica.org/2006/on-typography/font-spotting-the-thank-you-for-smokingtitles/
147
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
The title sequence for the 2009 adaptation of the comic book “Watchmen” drew a loud response from the public. It creates an alternate history, depicting the involvement of superheroes in all major events of post-World War II America. The sequence was shot by the film’s director Zach Snyder, while credit for the title’s integration goes to yU+Co:
Conclusion Throughout the history of cinema, film titles have evolved with the film industry, as well as with social trends and fashion movements. But the measure of a title design’s quality is the same now as it was in the silent era. Whatever function they perform, titles remain an essential part of film. Granted, in recent years the business of film titling has been terribly strained by the control of producers over commissions and their persistence in demanding speculative work as the price of admission. Creatively speaking, though, as filmmaking consolidates into the most powerful international cultural phenomenon of the 21st century, ingenuity in titling is a certainty. As designers have always known, the 148
opening moments can make a deeply satisfying contribution to any film.
Typography Resources Below youâ&#x20AC;&#x2122;ll find links to some downloadable typefaces that were used in or inspired by film titles from cinema history. Please read the legacy notes before downloading. HPHLS Vintage Prop Fonts183 An amazing collection of revived vintage fonts, many of which were used in early cinema. Among them are faces based on the National Old Style, Colwell Handletter and Post Monotone no. 2. Only some fonts can be downloaded for free, although the entire collection is available on CD at an affordable price.
Silentina184 The Silentina font family is a great modern take on typography from silent film inter-titles. Designed by Ray Larabie in 2004. Hitchcock185 Hitchcock was created by designer Matt Terich as an homage to the lettering style of the iconic Saul Bass. The font is available as a free download, and youâ&#x20AC;&#x2122;ll find a selection of other typefaces in the same vein. Waltograph186 Waltograph was created by Justin Callaghan in an attempt to capture the spirit of the familiar Walt Disney signage.
183. http://www.cthulhulives.org/toybox/propdocs/propfonts.html 184. http://new.myfonts.com/fonts/typodermic/silentina/ 185. http://typographica.org/2007/on-typography/saul-bass-website-and-hitchcock-font-areback/ 186. http://www.1001fonts.com/font_details.html?font_id=2272
149
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
The Disney Font List187 On MickeyAvenue.com, Justin Callaghan shares a definitive list of typefaces seen in Walt Disney movies and places. Meyer 2188 Meyer 2, originally drawn in 1926 as one of the five fonts cut by linotype to Louis B. Meyerâ&#x20AC;&#x2122;s personal specifications, was revived in 1994 by type designer David Berlow.
ITC Korinna189 The Korinna font family has an art nouveau heritage and looks similar to the Pastel font, which was often used for title cards in silent films.
187. http://mickeyavenue.com/fonts/disney-fonts-list/disneymade 188. http://www.fontbureau.com/fonts/MeyerTwo/ 189. http://www.itcfonts.com/Fonts/Classics/Korinna.htm
150
Futura Extra Bold190 Stanley Kubrickâ&#x20AC;&#x2122;s favorite typeface.
Gisele191 This font looks similar to the one used by Winsor McCay for his 1914 animation Gertie the Dinosaur.
190. http://www.myfonts.com/search/futura/fonts/ 191. http://new.myfonts.com/fonts/t26/gisele/
151
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
CCMR Mamoulian Blather192 A font that recalls the typography in the title of the 1924 animated movie Felix Dopes It Out.
That’s All Folks193 Here’s a cheerful Looney Tunes-inspired font family called That’s All Folks.
192. http://new.myfonts.com/fonts/comicraft/mr-mamoulian/blather/ 193. http://new.myfonts.com/fonts/comicraft/thats-all-folks/
152
Coolvetica194 Coolvetica looks like the sans-serif typeface in the title sequence for â&#x20AC;&#x153;Catch Me If You Canâ&#x20AC;? (2002).
194. http://new.myfonts.com/fonts/larabie/coolvetica/
153
THE ART OF FILM TITLE DESIGN THROUGHOUT CINEMA HISTORY
Resources And Reference Material • The Art of the Title Sequence195 A comprehensive and authoritative resource on film and television title design from around the world. Plenty of excellent designs and material available. • Forget the Film, Watch the Titles196 One of the first online resources dedicated to film title design. You’ll find a lot of amazing examples, reviews and interviews with the experts. • Title Design Project197 In this showcase gallery are title sequences from both classic and recent movies. • Movie Title Stills Collection198 A large and diverse collection of film title stills from between 1920 to the present. • Taking Credit: Film Title Sequences, 1955–1965199 An essay by a London-based writer and curator with an interest in graphic design, Emily King. • Letters of Introduction: Film Credits and City Scapes200 This essay covers the textuality of film credit sequences and their relationship to the expressiveness of urban life. CREDITS I’d like to thank David Peters, who kindly agreed to contribute content as well as references to this chapter. David is the founder and director of DESIGN FILMS201, a team of creatives committed to researching, collecting and presenting film programs about design, typography and film history. David is also a principal and design strategist at the communication design firm EXBROOK202. ❧
195. 196. 197. 198. 199. 200. 201. 202.
154
http://www.artofthetitle.com/ http://www.watchthetitles.com/ http://www.titledesignproject.com/ http://www.annyas.com/screenshots/ http://smashed.by/film-titles http://strawresearch.mcgill.ca/LettersofIntroduction.pdf http://www.designfilms.org http://www.exbrook.com/
Teach Them How To Hit The Ground Running And Faceplant At The Same Time? BY CHRISTIAN HEILMANN ❧
In December 2011, a tutorial on how to “Create A Christmas Wish List With PHP”203 was published on Smashing Magazine’s Coding section that frustrated me. It frustrated me as it was incredibly easy to predict the comment reactions it caused. It also frustrated me as it was a classic example of a tutorial resulting in very happy readers who will go out and cause a lot of terrible things on the Web unless they understand that this was meant as a “beginner tutorial”. A lot of the bad feedback was about security —something we shouldn’t take lightly. It frustrated me mostly because it all happened on Smashing Magazine, a well-respected online publication that is read by many beginners (especially in back-end technologies) and one that is dedicated to quality content with an advisory board (one of which is me) meaning that every article gets reviewed by experts before it is published. This one slipped by in the rush of the holidays, and it was updated a couple of hours after it was published, i.e. the editors added an editor’s note and addressed some important missing points. I am happy that it was published in its original form as it inspired me to point out some things that I see happening in online magazines a lot lately. The predictable outcome of this kind of tutorial is: • Seasoned developers will find issues with the code and claim that it should not be done that way. • Other people will disagree and tell the old men to stop telling young kids to get off their lawn. • Real beginners will chime in and say that they are very happy about the article and getting the feeling that things are not as complex as they seem to be. • A lot of fanboys will mention technology XYZ that makes this much easier. 203. http://coding.smashingmagazine.com/2011/12/22/create-a-christmas-wish-list-with-php/
155
TEACH THEM HOW TO HIT THE GROUND RUNNING AND FACEPLANT AT THE SAME TIME?
• The author will add more disclaimers about the nature of the code within the article with some edits and add warning messages about its viability in the wild — saying that this is just demo code.
Quick Wins Full Of Traps “Quick tutorials for beginners” are killing our craft. Instead of pointing to existing documentation and keeping it up to date (in the case of the wiki-based docs out there) every new developer turned to an author wanting the fame for themselves. And a lot of online magazines cater to these to achieve “new” content and thus visitors. We measure our success by the number of hits, the traffic, the comments and retweets. And to get all of that, we want to become known as someone who wrote that “very simple article that allowed me to do that complex thing in a matter of minutes”.
Image credit: Opensourceway204.
Instead of teaching the underlying technology, we tend to show a quick, beautiful implementation and put a lot of effort into it. We teach a “create something amazing in 5 minutes” and hope people will care enough afterwards and look at learning the underlying technologies. We aim to whet their appetite whilst giving them full solutions. The reason is that this is exactly what we wished we had had when we learned that thing in the first place. Sadly, this is not how teaching and learning works.
204. http://www.flickr.com/photos/opensourceway/5538035618/
156
Road Safety Begins In A Classroom At this moment, let me go back in time a bit. Growing up in a small village having a driving license and subsequently a car was a vital part of your social life and also your work options. Therefore, I couldn’t wait to get mine. Now, what you want to do is to learn driving. You want to get into the car, go vroom-vroom and be off. The reality of getting a driving license though (at least in Germany where there are no speed limits on the motorway and therefore it is taken very seriously) is that you spend quite a lot of evenings in a boring classroom before you get behind the wheel. You learn about the code of the street, the different signs and what to do in all kind of situations in a car. You even learn about the different parts of the car and what they do. The reason is that it scales better —you need to learn all that stuff and it is much easier to pack 40 students in a room to teach the basics before you try to make up a schedule where all of them can drive out on the road. As a driving school, instead of 40 cars you can get by with 5. And students who already know what they should not do and where things are in a car are less likely to crash them. EDUCATORS LEARNING FROM BAD EXPERIENCES? This is frustrating and annoying, the same way learning things at school without being told what they are good for is surely annoying. On the Web, we want to be different. We want to make learning fun and we are tempted to put in as much as possible for beginners so they can get past the basics very quickly and build the awesome of tomorrow instead. The author actually mentions that in the comments: “I think teaching people to do things is very complicated, doubly so over the internet. If I were teaching a university class I would take a very different approach.” Yes, teaching is hard. That’s why not every gifted developer is also good at explaining or a good trainer. While it is a very good idea in our heads to give people quick solutions with real results instead of step-by-step basics, we forget how we actually got there. Once we reached the level in a skill to be educators in it, we went through a lot of trial and error using the skill. By avoiding this, we strip others of the chance to learn a skill on their own terms and with their own obstacles to overcome.
157
TEACH THEM HOW TO HIT THE GROUND RUNNING AND FACEPLANT AT THE SAME TIME?
HOW ABOUT WRITING BEGINNER TUTORIALS COVERING BEGINNER TASKS? So, I think it is safe to assume that there are two needs/aims battling when we want to write a beginner tutorial, i.e. we want to teach people good practices and we want to get them as far as possible with the least effort. A lot of times these don’t go well together. jQuery is a poster child of great “new” Web development. “Write less, achieve more” is the mantra and I love that we have it. jQuery achieved this by replacing JavaScript and the unwieldy DOM with a clever and fast API and a totally new syntax: chaining. This is great. This is how to do it. jQuery abstracts the annoyances and complexities out into its core and lets developers write code. You cannot just take this approach and mantra and apply it to any technology without providing a simpler API/platform that abstracts the dangers and annoyances.
Teaching Non-Live Code On The Web? The discussion that happened in the comments of the aforementioned article was mostly about security and the inability of implementing the code discussed in it in a real environment. And yes, they are very much valid. The code is good as an exercise but awful as a live example. Putting it on an live server means you are open to any kind of attacks and scripts looking for zombies to infect— not to mention how a botnet would have a field day with it! And the author knows this. This is why a lot of the article is dedicated to explaining that this is not live code: “Please notice that this article was written for beginners who already grasp HTML and CSS, know a bit of PHP and have seen phpMyAdmin before. I will not go into best practices, safety and all the rest of it; let’s just have fun with this one!” And later on — as a response to some feedback, even more “don’t do this” was added: “Note that this is meant as a beginner’s exercise. The code you see here will give you the intended result, but a lot of it is not safe for production websites. It lacks a lot of safeguards, such as data validation, salts for passwords (for better security), htaccess rules and so on. The goal of this article is to let beginners forget about all of these things and just concentrate on building something nice. Neither does this article promote best practices. You may find yourself adopting different methods later on, or I may write in anoth158
er article that we shouldn’t do something you see here. The article is intended as a fun little example for beginners to spice up their boring theory sessions. I believe that the best way to learn is through increasingly difficult examples. That said, I encourage you to try all of this out and play around with it at home or on your servers. If you put this on a live server, I recommend using an account that has only this website on it (or only test websites). I also recommend using passwords for user accounts that are not the same as your other passwords.” This, actually very much is against the very idea of a beginner tutorial. A beginner tutorial gets people on the way, i.e. it teaches them the first steps and what one can do with it. As these quotes show, teaching people PHP by starting with SQL and writing a login system and file uploader is obviously the wrong way. Out of a sudden, the simple beginner tutorial is “intended as a fun little example for beginners to spice up their boring theory sessions” (cited). What boring theory sessions? I thought we are building something from scratch here?
Piling On Too Much The article tries to teach four things at once: SQL with PHP, login and session control, file uploads and how to build a beautiful Web interface powered by PHP. The login system and the file upload is where it gets very dangerous in terms of security. This is not a beginner tutorial —it is giving beginners the wrong impression that everything is easy and everybody else probably just does it wrong and cares far too much about boring details. We should not teach new developers that they can do things in a few lines of code and keep quiet about the bad effects this has. This is condescending and based on an assumption that people learn only from successes on the Web. The author mentions that in the comments: “I don’t think beginners need to concern themselves with SQL injection attacks. The point here is to start to learn something, not to learn everything at once. When someone understands SQL at all, then teach them about the problems, not before.” This is very dangerous thinking —if you teach how to do something, also make people aware of the consequences it has. I totally agree that the point is to learn something. Defining the “something” is the skill of a
159
TEACH THEM HOW TO HIT THE GROUND RUNNING AND FACEPLANT AT THE SAME TIME?
good tutorial writer or educator. We focus far too much on the final product to be built, rather than the components we use to get there. This is where using a complex example like a “Christmas Wishlist” that needs a login, uses a database and has an upload feature for any file is a bad choice. There is no way to keep this “simple” unless you teach people how to write code exclusively for their own localhost. LET’S NOT ASSUME THAT PEOPLE READ AND CARE AS MUCH AS WE THINK THEY DO One comment was quite interesting as a summary, as it very much sums up some of the comments and assumes good on the side of the readers: “Good stuff just to have some fun and help the super beginners get a quick footing. I think a lot of the people commenting here are either A) Too seasoned to look this far back, and not doing things the “proper” way just irks them, or B) I’d be willing to bet some are just flexing their programmer’s ego a bit. I think assuming that people will take this as serious programming and build from it, building the wrong way, is a bit too much of a stretch. Anyone who can read and who cares about doing things the right way will take the author’s disclaimer to heart. If not, odds are they’re looking for the easy route. If that’s the case, you can’t really stop them. This article isn’t ending the world.” I agree, it is not. But it also brings nothing new to the table. When I learned PHP coming from Perl in around 2000, I read thickbook.com and — except for the CSS styles —it had similar examples. Over the years we learned to protect our systems more. I think the assumption that readers will care much about the “this is not live code” doesn’t cover one main use case of “beginner tutorials”, i.e. that people will most probably find the article via a Google search and simply use the code example in a live environment without reading the tutorial or the comments. All they wanted was a quick, simple to understand example after all and beginner tutorials have those, right?
160
Image credit: Opensourceway205.
Want proof of that? Look at the success of W3Schools.com. The Web is full of materials to learn the same things. The quick “here’s the solution — don’t worry about how it works right now” are the most successful ones. We also have a Web full of systems that lack very basic quality and security features and we spend months educating hires in companies what developing production code means when you protect the data of our users. I think it is time to stop chasing the hollow success of creating a “quick tutorial” that is actually a “bad implementation with quick, sloppy code” in disguise and start curating what is already on the Web. We can then concentrate on the next level tutorials. I think Web-based education will be a big thing in the near future, and creating a new generation of Web makers206 should be on all of our agendas. We do this with tools, great documentation and frameworks, and not with a “write this, it is awesome” approach. ❧
205. http://www.flickr.com/photos/opensourceway/4586670229/ 206. https://commonspace.wordpress.com/2011/08/31/generation-of-web-makers/
161
smashed.by/library
Get immediate access to all Smashing eBooks with 70% discount and vote on the topics you'd like to learn more about. SUBSCRIBE TODAY!
ABOUT THE AUTHORS
About The Authors Austin Gunter Austin Gunter is a writer, blogger, and Community Architect. He manages the Content and Community marketing for WP Engine207, the premiere managed WordPress hosting platform. Previously, Austin brought 120 startups through an incubator in Austin, Texas. Now part of WP Engineâ&#x20AC;&#x2122;s marketing offices in San Francisco, Austin blogs weekly about startups and hacking his own brain at austingunter.com208. Follow the author on Twitter, @austingunter209.
Christian Heilmann An international developer evangelist working for Mozilla in the lovely town of London, England. Website: Wait till I come!210 Twitter: @codepo8211.
Dennis Kardys Dennis Kardys is the lead user experience designer at WSOL212. He spends most of his time helping clients understand the value of user centered design and challenging their assumptions about the Web and mobile. You can follow him on Twitter213 or check out his design blog, RobotRegime.com214.
Dmitry Fadeyev Dmitry Fadeyev is the creator of Usaura215, a micro usability testing service, and the founder of UsabilityPost216, a blog about good design and user experience. Additionally, you can read his thoughts on design,
207. 208. 209. 210. 211. 212. 213. 214. 215. 216.
162
http://wpengine.com/ http://www.austingunter.com/ http://www.twitter.com/austingunter http://www.wait-till-i.com http://www.twitter.com/codepo8 http://wsol.com https://twitter.com/@dkardys http://robotregime.com http://www.usaura.com http://www.usabilitypost.com
art and practical philosophy over at his personal blog217. Twitter: Follow the author on Twitter218.
Helge Fredheim Helge Fredheim is a front-end developer at Bekk Consulting219. He received his MSc degree in informatics from the University of Oslo, Norway. His thesis on UX patterns was written in Baltimore MD, USA. Website: http://www.helgefredheim.no220. Twitter: @helgefredheim221.
Julia May Julia May is a freelance writer now working with FlashMint, the topclass provider of Flash templates222. Website: PhotoInterview.ru223. Twitter: @indigomay224.
Lea Verou Lea works as a Developer Advocate for W3C225. She has a long-standing passion for open Web standards, which she fulfills by researching new ways to use them, blogging226, speaking227, writing228, and coding popular open source projects229 to help fellow developers. She is a member of the CSS Working Group230, which architects the language itself. Lea studied Computer Science in Athens University of Economics and Business, where she co-organized and occasionally lectured a cutting edge Web development course231 for 4th year undergrads. She is one of the few misfits who love code and design almost equally. Website: Lea Verou232. Twitter: @leaverou233. You can also find Lea on Google+234. 217. 218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230. 231.
http://fadeyev.net http://www.twitter.com/dfadeyev http://www.bekk.no http://www.helgefredheim.no http://www.twitter.com/helgefredheim http://www.flashmint.com/ http://www.photointerview.ru/ http://www.twitter.com/indigomay http://w3.org http://lea.verou.me http://lea.verou.me/speaking http://lea.verou.me/writing/ http://lea.verou.me/projects/ http://www.w3.org/Style/CSS/members.en.php3 http://lea.verou.me/2010/07/organizing-a-university-course-on-modern-web-development/ 232. http://lea.verou.me 233. http://www.twitter.com/leaverou
163
ABOUT THE AUTHORS
Marko Dugonjić Marko Dugonjić is a designer from Velika Gorica, Croatia. As the creative and user experience director at Creative Nights235, he improves customers’ digital experience for local and international clients and occasionally speaks at international Web design conferences. He founded FFWD.PRO236, a micro-conference and workshops for internet professionals in Croatia and his favorite pet project is Typetester237, a popular online tool for testing screen fonts. Website: Creative Nights238. Twitter: @markodugonjic239.
Reda Lemeden Reda Lemeden240, a.k.a Kaishin, is a designer, illustrator, and writer who enjoys conceptualizing problems and solving them using technology and design. He has been designing, researching and writing about interfaces for the better part of the last decade and is currently building Rails and mobile apps at thoughtbot, Inc241. You can follow him on Twitter242, visit his website thoughtbot243, or find him on Google244.
Sacha Greif Sacha Greif245 is a user interface designer living in Osaka, Japan. He’s worked with startups like Codecademy and Hipmunk, and has now launched Sidebar246, a site that gives you the 5 best design links of the day. You can follow him on Twitter247.
234. 235. 236. 237. 238. 239. 240. 241. 242. 243. 244. 245. 246. 247.
https://plus.google.com/105591642938690900060/posts?rel=author http://creativenights.com/ http://ffwd.pro/ http://typetester.org/ http://www.creativenights.com/ http://www.twitter.com/markodugonjic https://profiles.google.com/109891304447487495783 http://thoughtbot.com http://www.twitter.com/kaishin http://thoughtbot.com https://profiles.google.com/109891304447487495783?rel=author http://sachagreif.com/ http://sidebar.io http://twitter.com/#!/SachaGreif
164
Tom Giannattasio Tom Giannattasio happily makes things at nclud248. He works as an editor for Smashing Magazine and teaches at Boston University Center for Digital Imaging Arts. He loves to experiment and share his work on his personal site: attasi249. Twitter: @attasi250.
Vasilis van Gemert Vasilis van Gemert251 is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter252.
248. 249. 250. 251. 252.
http://www.nclud.com http://www.attasi.com http://www.twitter.com/attasi http://vasilis.nl/ https://twitter.com/vasilis
165
ABOUT THE AUTHORS
About Smashing Magazine Smashing Magazine253 is an online magazine dedicated to Web designers and developers worldwide. Its rigorous quality control and thorough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published article is carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine’s own publishing policy254. Smashing Magazine publishes articles on a daily basis with topics ranging from business, visual design, typography, front-end as well as back-end development, all the way to usability and user experience design. The magazine is — and always has been — a professional and independent online publication neither controlled nor influenced by any third parties, delivering content in the best interest of its readers. These guidelines are continually revised and updated to assure that the quality of the published content is never compromised.
About Smashing Media GmbH Smashing Media GmbH255 is one of the world’s leading online publishing companies in the field of Web design. Founded in 2009 by Sven Lennartz and Vitaly Friedman, the company’s headquarters is situated in southern Germany, in the sunny city of Freiburg im Breisgau. Smashing Media’s lead publication, Smashing Magazine, has gained worldwide attention since its emergence back in 2006, and is supported by the vast, global Smashing community and readership. Smashing Magazine had proven to be a trustworthy online source containing high quality articles on progressive design and coding techniques as well as recent developments in the Web design industry.
253. http://www.smashingmagazine.com 254. http://www.smashingmagazine.com/publishing-policy/ 255. http://www.smashing-media.com
166