Smashing Ebooks Editors Choice Library Treat

!
"#$%&'
zo Smasling Ledia GmbH, Fieibuig, Geimany
ISBN. p,8--p(((o6-o
Covei Design. Ricaido Gimenes
PR S Piess. Steplan Poppe
eBook Stiategy and Editing. Vitaly Fiiedman
Teclnical Editing. Cosima Lielke
Planning and uality Contiol. Vitaly Fiiedman, Iiis Ljesnjanin
Tools. Elja Fiiedman. Syntax Higlliglting. Piism by Lea Veiou.
Idea S Concept. Smasling Ledia GmbH
Prcjacc
Ovei tle past few yeais, oui eBook collection las giown steadily. Witl
moie tlan o eBooks alieady available and counting, we made tle deci-
sion lalf a yeai ago to bundle all of tlis valuable content into one big
lovely package. Tle Smasling Libiaiy
. As a lumble gift to you, deai

ieadei, we lave now put togetlei tlis Editcr's chcicc eBook.
It's a little Smasling Libiaiy tieat, featuiing some of tle most mem-
oiable and useful aiticles tlat lave been publisled on Smasling Laga-
zine in tle last few yeaisall of tlem caiefully selected and tloiougl-
ly edited. Ranging fiom leavily discussed topics sucl as iesponsive
Web design, to ideas on UX, to tiusty mainstays like nifty Plotoslop
tiicks, to lands-on business advice and design inspiiation, tlis eBook is
a potpouiii as diveise as youi woik as a Web designei.
We lope you enjoy ieading it as mucl as we do editing and cieating
eacl and eveiy eBook page tlat finds a lome in oui Smasling Libiaiy.
ccsima Miclkc, Smashinq cFcck Prcduccr
. lttp.//smasled.by/libiaiy
ILPRINT
z
TABLE OF CONTENTS TABLE OF CONTENTS
Designing Foi Tle Reading Expeiience............................................................. (
Logical Bieakpoints Foi Youi Responsive Design........................................ z(
Sketcling A New Lobile Web.............................................................................
Towaids A Retina Web........................................................................................... (,
Avoiding Tle Pitfalls Of Fiee ............................................................................... 6
Wly Usei Expeiience Cannot Be Designed.................................................... ,
Building Sometling Tlat Youi Useis Will Actually Want To Buy......... 8
But Tle Client Wants IE 6 Suppoit!"................................................................ p
Passive Income Stiategies Foi Web Designeis.............................................. p8
Lasteiing Plotoslop. Unknown Tiicks and Time-Saveis.......................
Tle Ait Of Film Title Design Tliouglout Cinema Histoiy......................
Teacl Tlem How To Hit Tle Giound Running And Faceplant At Tle
Same Time?................................................................................................................
About Tle Autlois ................................................................................................. 6z
()*%+&%&+ -.$ /0) 1)23%&+

45#)$%)&6)
BY LARKO DUGONJIC BY LARKO DUGONJIC !!
Witl tle iise of Web fonts as well as affoidable losted Web font sei-
vices and ieady-made kits, typogiaply is ieclaiming its title as design
queen, iulei of all giaplic and Web design.
At tle same time, foi fai too many designeis, tle main concein
about typogiaply today seems to be aestletic in natuie. Tle pioblem is,
we tend to use typogiaply and letteiing as two inteiclangeable teims,
wlicl tley aie not
z
. A quick look at tle typogiaply" tag on Diibbble
ieveals tlis tiend.

Tle alluie of well-executed letteiingand, boy, I could spend louis
just looking at letteiing poitfolios! can affect tle way we view type-
faces, because botl typogiaply and letteiing slaie common visual con-
cepts. If we seek only tle next most Beautiful Typeface' all tle time,
tlis labit alone can diive us away fiom tle functional iole of typefaces
and tleii advantages as veisatile, ieusable and flexible design systems.
Loieovei, we aie often eagei to tiy tle latest OpenType featuie,
piettify oui copy witl discietionaiy ligatuies
(
, slap on paitially execut-
ed CSS lyplenation, and tlen staie at oui masteipiece in awe, unawaie
tlat anyone otlei tlan a typogiaply geek couldn't caie less. Of couise,
ieality lits iiglt at tle moment tlat tle text las to be iead and undei-
stood by noimal people on a vaiiety of devices, fiom tle latest Retina
laptops to ,z-DPI catlode-iay-tube monitois witl Windows XP to a
iange of sci-fi smaitplones tlat can measuie youi blood piessuie.
Cccd typcqraphy dccs nct lcck nicc tc plcasc typc ncrds. Primarily,
ucll sct typc rcads ucll."
0liocr Pcichcnstcin
Lost aiticles on tle Web aie optimized foi instant ingestiondoes ie-
veise pyiamid" sound familiai? Fast exclange of infoimation is in tle
Inteinet's natuie and fits a ieadei's sloit attention span. People visit
websites and applications because tley piimaiily seek infoimation,
iaiely do tley seek typogiaplic pleasuie. Don't get me wiong. I love ty-
z. lttp.//www.smaslingmagazine.com/zo/o/,/undeistanding-diffeience-between-
type-and-letteiing/
. lttp.//diibbble.com/tags/typogiaply
(. lttp.//opentype.info/blog/zoz//zo/wlats-a-ligatuie/
DESIGNING FOR THE READING EXPERIENCE
(
pogiaplically cieative leadlines and decks tlat giab my attentionbut
at tle same time, we can't neglect tle need foi oveiall balance and legi-
bility in body copy. Let's stait!
First Thinqs First. Prcjcct Pcscarch
Seamlessly digesting wiitten mattei is possible only wlen tle typogia-
ply is well tlouglt out and legibility is facilitated by a consideied iead-
ing expeiience. As in otlei fields of design, befoie doing anytling else
we slould conduct some ieseaicl. In developing tle labit of ieseaicl,
we will not only discovei valuable data, but also develop oui ability to
quickly jump into tle ieadei's sloes, slifting focus fiom oui woist ene-
myoui own ego (wlicl I play tug-of-wai witl all tle time).
As you aie most likely awaie, tle main components of a digital expe-
iience aie content, context and tle usei
. You piobably addiess all tliee

in almost eveiy design pioject. But if we focus exclusively on typogia-
ply witlin eacl of tlese components, tlen we'd find a landful of as-
sessment metlods and some consideiations tlat would be useful to
take into account and tlat would ultimately impiove tle oveiall iead-
ing expeiience.
CONTENT CONTENT
Tle best way to stait a typogiaplic design pioject is by ieading tle con-
tent. Seiiously, eveiy designei is intelligent enougl to evaluate wlo
tlis content is foi and wlat it slould be communicating. But apait
fiom iating tle quality of tle content and listing its stiuctuial ele-
ments, we can also gauge compielensibility, ieading time, puipose
and, finally, lifespan.
Cover All Typographic Elements
Upon ieading tle content, tlink about tle stiuctuies oi elements you
lave encounteied and list tlem. Use tle list as a staiting point foi a
simple style guide. Apait fiom tle noimal paiagiapls, leadings and ed-
itoiial accessoiies, you'll find otleioften oveiseenelements, sucl
as aieas of emplasis, quotations, emplases witlin quotations and, veiy
impoitant tlese days, data tables and figuie captions. Youi peifect font
slould lave enougl family membeis to covei all of tlese elements.
In plain lypeitextese, make suie to covei all HTLL elements. At tlis
point, you could even cieate sample HTLL and CSS files containing all
of tle iequiied elements and iules and save it as !"#$%&'()*+#,"-(
. lttp.//semanticstudios.com/publications/semantics/oooozp.plp
+.*/.'01. As you can piobably guess, tlis file will be tle foundation of
tle pioject's typogiaplic system and will come in landy wlen you
stait designing iesponsive bieakpoints.
Gauge Reading Time
Reading iates
6
iange anywleie fiom undei oo woids pei minute to a
few tlousand, most adults iead between zoo and zo woids pei
minute. We can calculate tle ieading time foi any given text quite easi-
ly by dividing tle numbei of woids by zo. If sample content foi youi
pioject is available, simply tliow it into a local installation of youi fa-
voiite CLS and iun it tliougl a simple sciipt to estimate ieading
time
,
.
Depending on tle situation, estimating ieading time can lelp us de-
teimine tle spacing witlin paiagiapls and establisl just tle iiglt
ilytlm and ieading pace. If tle ieading time is long, we could bieak
tle text into smallei paits oi simply intioduce a pull quote at a stiategic
point, wleie it would double as a milestone.
Assess Readability and Reading Ease
Lany ieadability tests piovide an estimate of tle sclool giade needed
by tle ieadei to undeistand tle text, and knowing sucl paiameteis is
useful. Foi example, if tle mattei is complex, you could piobably intio-
duce some editoiial devices to keep tle ieadei on tiack, oi accommo-
date a gieatei numbei of footnotes witl tleii own set of accessoiies.
Fuitleimoie, wlen you aie collaboiating witl a copywiitei to tweak
content and typogiaply, tlese tools will make it easiei to tiack diffei-
ences between veisions.
One sucl test is tle Automated Readability Index
8
(ARI). ARI focuses
on tle numbei of claiacteis, woids and sentences, tleieby making it
useful foi ieal-time monitoiing. Tle FlesclKincaid Giade Level
p
test,
on tle otlei land, focuses on syllables iatlei tlan claiacteis, tlus
making it somewlat moie piocessoi-intensive foi ieal-time assess-
ments.
Anotlei valuable test is Flescl Reading Ease
o
. It is calculated ac-
coiding to woids, sentences and syllables, tle iesulting scoie lelps you
deteimine tle level of complexity of content. Lost majoi languages
lave tleii own veision
. Altlougl tlis tool is new to some of us in

6. lttp.//en.wikipedia.oig/wiki/Reading_speed=Reading_iate
,. lttp.//biianciay.com/posts/estimated-ieading-time-web-design/
8. lttp.//en.wikipedia.oig/wiki/Automated_Readability_Index
p. lttp.//en.wikipedia.oig/wiki/Flescl-Kincaid_Readability_Test
o. lttp.//en.wikipedia.oig/wiki/Flescl-Kincaid_ieadability_test=Flescl_Reading_Ease
. www.ideosity.com/ouiblog/post/ideospleie-blog/zoo/o/(/ieadability-tests-and-foi-
mulas
6
Web design, textbook publisleis and goveinment agencies lave been
using it foi yeais to gauge tle complexity of leaining mateiials foi dif-
feient giade levels.
Calculating tle ieading ease scoie manually foi eacl piece of con-
tent would be an obvious sign of masoclism, so I suggest clecking out
tle landy Aiticle Readability Stats
z
, a PHP sciipt tlat we at Cieative
Niglts
developed foi oui own piojects.

Content Strategy, Information Architecture and Microcopy
If we step out of typogiaply foi a moment into tle field of content
stiategy
(
(tle discipline of planning and goveining content and of
defining editoiial piocesses) and infoimation aiclitectuie
(tle disci-
pline of oiganizing and desciibing content), we can anticipate some po-
tential issues.
Tlinking about tle content's lifecycle piotects us fiom tle uige to
typeset accoiding to tle latest tiend. Tle next time an aiticle is iepub-
lisled, we can pievent tle editoi's iage fiom seeing leftovei styles tlat
weien't iemoved in piepaiation foi a iedesign.
Categoiy labelstypically defined by an infoimation aiclitect can
make tle Web designei's life miseiable, because tle space in a naviga-
tion bai oi column is limited. I'd bet tlat at some point in tleii caieei,
eveiy Web designei las tiied to iename oi sloiten categoiy names in
oidei to fit tle available space. Of couise, we could always ieduce tle
font size oi cloose a condensed type, but if all else fails, we talk to tle
infoimation aiclitect to find a solution on tleii end.
Apait fiom aiticles, we must also typeset foim labels, instiuctional
copy, small piint, inteiactive elements (sucl as buttons and links) and
otlei text tlat claiifies tasks. All of tlis tiny copy is iefeiied to as mi-
ciocopy
6
, and it is a fundamental ingiedient in effective inteiaction de-
sign.
CONTEXT CONTEXT
Witl iecent developments in Web standaids, designeis aie now build-
ing websites tlat aie getting closei and closei to tle ideal of One
Web
,
," accessible to eveiyone and eveiywleie. Even tlougl aclieving
sucl univeisality witl all types of piojects is difficult, we know tlat
z. lttp.//www.maiatz.com/blog/aiclives/zoz/o,/z6/aiticle-ieadability-stats-witl-plp/
. lttp.//cieativeniglts.com/
(. lttp.//alistapait.com/aiticle/tledisciplineofcontentstiategy
. lttp.//books.google.li/books?id=zdzRyzlZczLC
6. lttp.//stuffandnonsense.co.uk/blog/about/miciocopy
,. lttp.//adactio.com/jouinal/,6/
,
mobile doesn't just mean biowsing tle Web on a smaitplone wlile on
tle go.
We also know tlat tablets aie used to give piesentations, to cleck
Twittei duiing bieakfast oi to iead aiticles wlile sitting on tle toilet
(anyone wlo neglects tlis fact doesn't undeistand tle needs of useis).
Tle scieen ieal estate of tle coming geneiation of laptops puts a
p6-DPI o-incl desktop monitoi to slame. We admiie tle Web's uni-
veisality, but at tle same time we slould be awaie of tle diveisity of
useis and devices.
Software Concerns
Useis on Windows systems witl tle CleaiType iendeiing engine bene-
fit fiom well-linted fonts. Tle tiouble is tlat linting is a time-consum-
ing piocess, and not all typefaces foi tle Web aie fully polisled yet.
Tleiefoie, additional testing in Windows biowseis slould foim pait of
youi iegulai ioutine.
Also, keep in mind tlat eacl Web font seivice miglt delivei sligltly dif-
feient fonts. A font miglt yield good iesults wlen deliveied tliougl
one seivice but look baiely adequate wlen deliveied tliougl anotlei.
I'll speculate tlat tle ieason foi sucl diffeiences, if any, is piimaiily a
lack of time investedtlat is, a lack of tle time needed to piopeily lint
a font, as well as a scaicity of font-linting expeits.
Thcsc scrccnshcts cj \crdana, Prcxima Ncoa, Arial, Adcllc Sans and Cccrqia at ic pixcls
(cxccpt jcr Prcxima, sct at i8 pixcls ucrc takcn cn Fircjcx i8 cn \indcus ;. Prcxima
and Adcllc arc rcndcrcd as \cc jcnts, and thc cthcrs arc thc usual suspccts that ccmc
prcinstallcd cn mcst 0S'. Thc tcp jioc lincs ucrc takcn uith clcarTypc turncd cjj.
8
Luckily foi us, Web font seivice vendois aie continually impioving
tle quality of fonts, and eventually eveiyone's fonts will be spiuced up.
Because a lot of woik goes into maintaining piopei fonts, I encouiage
you to buy fonts and to subsciibe to paid Web losting plans, wlicl
(among otlei tlings) will speed up tle linting effoits of font
foundiies. Tle gieatei tle demand, tle fastei tle piocess.
If suppoiting Windows useis is mission ciitical foi youi pioject,
tlen considei manually linted typefaces, sucl as TleSans Office
8
fiom LucasFonts (tlese guys aie known foi tleii obsession witl lint-
ing) oi tle numeious otlei typefaces designed foi Liciosoft Office ap-
plications (tleii names will usually contain Com," Offc" oi Office"). If
selecting a specialized typeface foi an audience witl oldei Windows
systems is not woitl tle tiouble, tlen just stick witl tle tiied and test-
ed Aiial, Geoigia oi Veidana.
Foi moie in-deptl infoimation about font iendeiing, iead A Closei
Look at Font Rendeiing
p
" by Tim Aliens.
Hardware Concerns
A pioblem we aie facing acioss tle industiy is tle diveisity of pixel
densities, as a iesult, typogiaply is not spaied eitlei. One inteiesting
solution is to embed giaded fonts foi diffeient densities, just as piint
designeis use giaded fonts
zo
to moie piecisely contiol tle effects of ink
on papei. Read moie about tlis appioacl in Olivei Reiclenstein's aiti-
cle New Site Witl Responsive Typogiaply
z
."
8. lttp.//www.lucasfonts.com/fonts/tlesans/tlesans-office/featuies/
p. lttp.//www.smaslingmagazine.com/zoz/o(/z(/a-closei-look-at-font-iendeiing/
zo. lttp.//typoplile.com/node/8(8
z. lttp.//infoimationaiclitects.net/blog/iesponsive-typogiaply/
p
Anotlei example is typesetting foi scieen billboaids and TV scieens,
wlicl often iequiie tlickei weiglts and moie weiglt contiast. In sucl
cases, you would skip two weiglts on a scale and combine tle iegulai
style witl tle extia bold. Pieviewing sucl designs on youi desktop oi
Retina laptop is not enougl. As witl designing foi mobile, we lave to
test on ieal laidwaie.
The Interface Type
Haidwaie and softwaie aspects aside, context also iefeis to tle type of
inteiface. Foi instance, on content-diiven news poitals, magazines,
novels and textbooks in a digital setting, stiings of sentences slould
lave a cleai stiuctuie, diiectly connected to eacl otlei and tlat foim a
lineai ieading patl.
Topics on content-diiven websites aie usually diveise (even on
nicle websites), and a stoiy needs to be intioduced cleaily in oidei foi
tle ieadei to undeistand it. (Remembei tle editoiial devices fiom
above?)
On tle otlei land, infoimation in Web applications is stiaigltfoi-
waid, usually baie-bones and factual, witl easily compaiable items oi
data, most often constiained to a ceitain timefiame. Unlike sentences
in lineai text, bits can be iead and compielended in isolation and aie,
tleiefoie, open to tle ieadei's inteipietation. We can safely assume
tlat tle usei will jump iandomly, in a non-lineai faslion, fiom one bit
of infoimation to anotlei.
Witl Web applications, tle context of content is mostly piedictable.
Some typical use cases aie clecking sales figuies, analyzing website
statistics in tables, diagiams and claits, editing date- and time-ielated
Clyphs arc rcndcrcd dijjcrcntly cocn cn dcoiccs jrcm thc samc manujacturcr. Shcun
hcrc is Adcllc sct at ic pixcls as rcndcrcd cn an iPhcnc ,C, iPad , and iPhcnc ,S, cnlarqcd
in Phctcshcp, jrcm a \cc paqc scrccnshct.
o
notes, and, in tle case of Web mail, clecking wletlei you aie tle lucky
winnei in tle Nigeiian Royal Lotteiy.
THE USER THE USER
On tle Inteinet, eveiyone is oui taiget customei, especially if we aie
building a multilingual system. If a button las just enougl ioom foi
Retuin" in Englisl, tlen Retoui" in Fiencl, Zuick" in Geiman,
Poviatak" in Cioatian and Visszatis" in Hungaiian miglt not fit.
Accessibility Concerns
Dyslexia is an impaiiment to a peison's ability to iead. Foi instance, a
dyslexic biain sees claiacteis as images and iotates and miiiois letteis.
As a iesult, a loweicase two-stoiy a" witl a weak tail miglt appeai tle
same to a dyslexic peison as an italic e."
In addition, most claiacteis in geometiic typefaces aie laid foi peo-
ple witl dyslexia to iead because of similaiities in foim and slape. Tle
miiioied p" miglt look tle same as a q," and a iotated n" miglt look
tle same as a u." Tlis doesn't mean we slould immediately switcl to
specialized typefaces, but being awaie of sucl conditions is a pait of
tle Web designei's liteiacy.
To complicate matteis, dyslexia occuis witl anotlei leaining dis-
ability, attention deficit disoidei, in about eveiy fouitl case.
Font smootling on tle scieen is possible tlanks to ied, gieen and blue
subpixels. Unfoitunately, foi a small peicentage of tle male popula-
tion, some typefaces appeai slaipei oi bluiiiei, ligltei oi fattei tlan
foi tle iest of us, simply because tle ied subpixel isn't distinctive
enougl. Witl fiee tools sucl as Coloi Oiacle
zz
, seeing low youi type-
face of cloice peifoims foi tle coloi-vision impaiied is easy.
Addcd qraoity kccps thc lcttcrs in placc. Shcun hcrc arc Futura and 0pcn Iyslcxic.
zz. lttp.//coloioiacle.oig/
Sclcctinq A Typcjacc Fcr Functicn 0ocr Fcrm

Contiaiy to populai belief, laving an eye foi tle peifect typeface is not
an innate gift. Suie, talent will give you an initial advantage, but tlat
will take you only so fai. Tiain youiself to leain about tle pioject at
land, and insiglt into suitable typefaces will come, tlus lelping you
naiiow tle pool to a few appiopiiate candidates.
A little digiession. Lany tutoiials and low-to's lave been wiitten
about cloosing tle appiopiiate typeface based on atmospleie and on
look and feel. Designing atmospleie, evoking emotions and visually
distinguisling a biand fiom its competitois is tle iesponsibility of tle
giaplic and UI designeis. A typogiaplic designei, oi typesettei, takes a
diffeient angle, staiting witl tle utilitaiian needs and goals of tle pio-
ject, and developing fiom tleie. Botl aspects aie often iequiied foi a
successful, well-iounded pioject.
Because tlese goals aie so diffeient, we lave to be leeiy of suggest-
ing font combinations and using less-tlan-specific adjectives sucl as
beautiful" and even tle less-diamatic nice" witlout pioviding con-
text. A typeface can only be judged in tle context of a paiticulai situa-
tion. If a typeface is obseived in isolation, tlen we must evaluate it at a
stiictly teclnical level.
Wlen I see Comic Sans used on an invitation to a kindeigaiden pai-
ty, tle fiist tling I'll do (of couise) is ioll my eyes. But at some point, I
lave to be lonest and admit tlat it's appiopiiate to tle audiencemy
kids and tleii fiiendsas long as I don't encouiage tlem to use it
Thcsc uith cclcroisicn impairmcnts pcrccioc antialiascd lcttcrs dijjcrcntly.
z
eveiywleie. But if I saw Comic Sans on a company memo, I'd piobably
go postal
z
.
SERIF VS. SANS. WHO STARTED IT? SERIF VS. SANS. WHO STARTED IT?
Lany beginneis lave a laid time cloosing between seiif and sans-
seiif typefaces. As always, it depends on tle situation, but it slould nev-
ei be a mattei of tle typogiaplei oi client's peisonal taste. Tleie is no
diffeience in legibility between tle two
z(
, especially in tlis eia of ligl-
density scieens.
Sometimes a pioject allows us to cut coineis, and if we do oui lome-
woik and leain about tle content, we can make infoimed decisions. Foi
example, if we aie piesenting veitically oiiented data (foi example, a
table of exclange iates oi a list of pioduct piices), tlen it would pioba-
bly be bettei to use a typeface witlout seiifs, wlicl usually adds a loii-
zontal emplasis. On tle otlei land, because seiifs encouiage loiizon-
tal flow along tle line of text, tley aie moie suitable foi a set of lineai
tlouglts oi wleie veitical space is scaice.
We all know it, but we often foiget to step back and see tle biggei
pictuie in a pioject. Foi instance, I like tle ieasoning of Vitaly Fiied-
man and Elliot Jay Stocks in tleii decision to go witl a sans seiif foi
Smasling Lagazine's body text. Upon taking a biid's-eye view and ob-
seiving tle page's layout and inteiface as a wlole, tley concluded.
Fccausc thcrc's a lct qcinq cn oisually cn Smashinq Maqa
zincscrccnshcts, cuttcns and ncisy adsa sansscrij jclt likc a
mcrc scnsiclc, uncluttcrcd rcutc jcr ccdy ccpy."
\italy Fricdman and Ellict }ay Stccks
LETTER LEGIBILITY LETTER LEGIBILITY
Anotlei impoitant test of legibility is low diffeient eacl glypl is fiom
tle otlei glypls in a single typeface. Designeis use pangiams
z
, oi
sloit test stiings, to evaluate and compaie typefaces, foi examples, tle
famous Tle quick biown fox jumps ovei tle lazy dog," Handgloves"
and Hambuigefonstiv."
Tle text aegl! iIl oO," devised by designei Jon Tan, goes a little fui-
tlei. It is a good way botl to get a sense of a typeface and to cleck tle
distinctness of tle i," I," l" and " and of tle o" and O."
z. lttp.//www.uibandictionaiy.com/define.plp?teim=go+postal
z(. lttp.//asseittiue.blogspot.se/zo/o/tle-seiif-ieadability-mytl.ltml
z. lttp.//en.wikipedia.oig/wiki/Pangiam
We can extend sucl stiings even fuitlei and include italics, small
caps and numeials. Foi example, we could extend tle stiing witl an
italic e," just to make suie it's not too similai to a iotated loweicase a,"
especially at smallei sizes wleie claiactei detail can get lost.
FOREIGN AFFAIRS FOREIGN AFFAIRS
Suppoit foi inteinational visitois is a must. If you aie about to set tle
wlole website in a language tlat you aie not familiai witl (say, Aiabic
oi Vietnamese), tlen you'll piobably need a one-on-one lesson witl a lo-
cal typogiaplei. But most Web designeis will build usei piofiles foi
tleii inteinational audience, and we lave to make suie tlat all claiac-
teis aie suppoited and tlat tle typeface woiks in languages less com-
mon tlan Englisl and Spanisl. Eacl language las a paiticulai ciitical
combination oi two.
It's not uncommon to see a claiactei sequence of gy" in Hungaiian
oi ij" in Ijekavian dialects in some Soutl Slavic languages, not to men-
tion digiapls
z6
(cl," dz," ij," lj" and ty") and tiigiapls
z,
(dzs" and
scl"), wlicl aie usually iepiesented witl two and tliee sepaiate
glypls, iespectively.
As a cuiiosity, in tle Italian alplabet
z8
, tle letteis k," j," w," x"
and y" aie used only foi woids adopted fiom otlei languages, and
Try tc aocid amciqucus lcttcrjcrms. Tcp tc ccttcm. Icaquc Ccthic, Cill Sans, Myriad
Prc, Ncuc Hcloctica.
z6. lttp.//en.wikipedia.oig/wiki/Digiapl_(oitlogiaply)=Digiapls_veisus_letteis
z,. lttp.//en.wikipedia.oig/wiki/Tiigiapl_(oitlogiaply)
z8. lttp.//en.wikipedia.oig/wiki/Italian_alplabet
(
some of tlem aie used stiictly colloquiallyfoi instance, k" as an em-
plasized c"oi so I leaid wlen I cut a guy off in tiaffic tle last time I
was in Italy. But I digiess. Tle sligltly ieduced alplabet iesults in fie-
quent lettei combinations sucl as cc," ll," tt" and zz" next tooi sui-
iounded byo" oi i." You can alieady guess tlat tlese combinations
can make foi some awkwaid spacing.
In soutleast Euiope, family names often end witl c" oi c," and no
one likes wlen a lettei in tleii fiist oi last name is stiipped of a diaciit-
ic oi, even woise, iendeied in a fallback typeface. Danisl and Noiwegi-
an, foi example, use o," and Geiman uses "and tlose aie still only
witlin tle Latin alplabet.
In oidei to covei tle extended Latin alplabet, we obviously lave to
cloose a typeface tlat coveis all Cential Euiopean claiacteis (i.e. use
paid fonts). But in cases of tle afoiementioned lettei combinations in
less common languages, it wouldn't luit to considei typeface candi-
dates tlat suppoit tlose paiticulai languages, because at tle time of
wiiting, keining is still not possible witl CSS (no pun intended).
WE READ FALILIAR TYPEFACES BEST, BUT WE LEARN WE READ FALILIAR TYPEFACES BEST, BUT WE LEARN
BETTER WITH UNFALILIAR ONES. BETTER WITH UNFALILIAR ONES.
People aie believed to iead best in familiai typefaces
zp
(PDF, . LB).
Even expeitsnamely, Zuzana Licko and Eiik Spiekeimannsay tlat
Incu thc charactcrs and ccmcinaticns in ycur tarqct lanquaqc.
we iead best in wlat we iead most. Leain about tle listoiy of tle type-
face you'ie consideiing and compaie it to tle usual suspects foi tle tai-
get audience.
Skolai
o
, a typeface by David Biezina, was designed foi sclolaily
and multilingual publications, wleie people aie used to seeing Times
New Roman. Skolai is fiesl and modein, yet similai enougl in featuies
and appeaiance to Times New Roman to be easily adopted by tlis usei
gioup. It's a safe bet and a good option to begin witl, but by all means
do expeiiment and tiy alteinatives tlat miglt appeal to youi taiget au-
dience.
A iecent study by Connoi Diemand-Yauman, Daniel L. Oppenleimei
and Eiikka B. Vauglan on tle Effects of Disfluency on Educational
Outcomes
" (PDF, . LB) found tlat infoimation iendeied in laid-to-

iead fonts was moie easily iemembeied tlan infoimation iendeied in
fonts deemed easiei to iead. Tle study slowed tlat deepei piocessing
stimulated by disfluency led to impioved memoiy peifoimance. Tlis
doesn't mean we slould automatically select tle stiangest typeface on
tle planet, but consideiing an alteinative to a populai typeface does
make sense.
DISPLAY TYPEFACES IN THE RESPONSIVE ERA DISPLAY TYPEFACES IN THE RESPONSIVE ERA
Condensed gotlics and giotesques as well as specialized decoiative
typefaces aie being iediscoveied on tle Web. Tley add style and
Skclar as a rcplaccmcnt jcr Timcs and Timcs Ncu Pcman? can ycu spct thc dijjcrcncc
cctuccn thc tuc Timcs'?
zp. lttp.//www.usability.gov/pdfs/claptei.pdf
o. lttp.//www.type-togetlei.com/Skolai
. lttp.//smasled.by/disfluency
6
weiglt, functioning especially well as attention-giabbeis in mastleads
and as anclois in lengtly text. Stylistic suggestions aie beyond tle
scope of tlis claptei, because leadlines on tle Web aie often wiitten to
confoim to SEO best piactices in oidei to attiact moie visitois, wlicl is
a somewlat diffeient function fiom leadlines in piint mateiial. How-
evei, let's look at a potential pitfall in setting leadlines in a condensed
typeface on tle Web, wleie tle context is nevei static.
If clanges in scieen oiientation and aspect iatio aie neglected, tlen
a multi-woid leadline set in a skyline" typeface (i.e. a tall condensed
sans seiif) miglt woik witl landscape-oiiented and desktop-sized
bieakpoints, at tle same time, it miglt occupy too mucl veitical space
on a smaitplone in poitiait oiientation, especially if tle oiiginal single-
line leadline is pusled onto a second line. Leiely ieducing tle font
size to fit tle element could lelp, but tle iesult miglt not be as legible
as tle text on a desktop scieen.
Tle opposite also applies. If we aie designing mobile fiist, tlen a big
bold leadline tlat woiks peifectly on a tiny scieen miglt be too loud if
liteially tiansposed to desktop sizes.
An extended companion to a condensed typeface set at a smallei
font size could piovide a bettei matcl wleie veitical space comes at a
piemium. Wlen tle extended typeface is too tiny, tle condensed pait-
nei could step in.
,
This hcadlinc, sct in thc Icaquc Ccthic cn a sinqlc linc, is carcly lcqiclc cn mccilc. Sct cn
multiplc lincs, thc hcadlinc cccupics tcc much ocrtical spacc.
8
ccmcininq Typcjaccs
Typefaces aie combined to cieate tension and to geneiate inteiest in a
design. In most cases, lowevei, once tle ieadei is pulled in, favoiing
oidei and stiuctuie of composition ovei tle beauty of letteifoims will
impiove tle flow of ieading, especially on low-iesolution scieens,
wleie subtleties and details of typogiaplic accessoiies aie not immedi-
ately evident. Considei tlis piece of advice as a last attempt to talk you
out of combining veiy diffeient fonts, unless absolutely necessaiy.
As a iule of tlumb and in oidei to avoid a complete typogiaplic dis-
astei, combine typefaces witl matcling x-leiglts. Compaiing x-
Nimcus Sans ccndcnscd and Nimcus Sans Extcndcd in acticn.
p
leiglts at tle same font size is a litmus test to see wletlei woids set in
diffeient types can coexist. Always keep in mind tlat typesetting foi
tle Web slould be bulletpioof and futuie-pioof. Tlat being said, main-
taining typogiaplic laimony is not tle easiest task if elements sitting
on tle same baseline need diffeient lettei sizes as compensation foi
mismatcling x-leiglts.
A SAFE BET APPROACH A SAFE BET APPROACH
Tle easiest solution to combining typefaces is to follow type ielation-
slips and youi own common sense.
A typeface tlat is a membei of a biggei system can be combined
witl otlei family membeis along any of tle axes (sucl as weiglt,
widtl and cut), so being able to use typefaces fiom tle same type fami-
ly will come as a ielief. Look foi extended families oi supei-families
tlat lave moie tlan a few basic styles (including iegulai, italic, bold
and bold italic). Extended families include eveiytling fiom tlin to
black weiglts and sometimes multiple widtls, wlile supei-families, al-
so iefeiied to as type systems, additionally contain sans-seiif and seiif
companions, text and display cuts and sometimes giaded fonts.
Don't woiiy too mucl about exact classifications, because categoiies
aie not always consistent fiom foundiy to foundiy. Plus, tle boundaiy
between extended families and supei-families is not always cleai. Foi
example, some collections include sans-seiif and seiif in multiple
weiglts but not multiple widtls. Remembei, tlougl, tlat most type
families lave only a limited numbei of basic styles, wlile only a few
dozen aie veisatile enougl to covei all typogiaplic needs. (A few dozen
out of tle lundieds of tlousands of typefaces in existence today is a
Allcr ccmcincd uith Minicn Prc, Cccrqia and Adcllc. Ncticc hcu Minicn Prc and Cccr
qia call jcr additicnal adjustmcnts tc linc hciqht.
zo
tiny fiaction.) If you lave tiouble combining typefaces, veisatile collec-
tions aie always a good option to begin witl.
Typefaces designed by tle same designei aie often a smait combina-
tion, because piopoitions, slapes, stiokes and angles will slaie tle
same DNA. Note tle typefaces designed by Jos Buivenga, Veionika
Buiian, Lattlew Caitei, Nikola uiek, Adiian Fiutigei, Jose Scaglione,
Laik Simonson and Eiik Spiekeimann, to name just a few of my le-
ioes, and tiy to spot eacl designei's signatuie.
As a last iesoit, combine typefaces fiom tle same foundiy, because a
foundiy will noimally offei typefaces tlat can be combined. A smait
designei subsciibes to typogiaply-ielated newsletteis and, conse-
quently, gets exposed to a significant numbei of pioven and ieusable
combinations, as suggested by tle expeiienced designeis and typogia-
pleis wlo woik at foundiies. As a bonus, youi newslettei foldei will
become a nice iefeience aiclive ovei time.
If you still want to expeiiment on youi own, cieate enougl contiast
between typefaces to aclieve a comfoitable balance. Avoid typefaces
witl competing claiacteis, wlicl would cieate too mucl noise and
distiact tle ieadei. If two typefaces aie too similai, tlougl, tle ieadei
miglt get iiiitated just because tley can't cleaily see tle diffeiences.
Combining two neiglboiing weiglts (sucl as iegulai and semibold oi
bold and extia bold) slouldn't become a labit unless you absolutely
know wlat you'ie doing.
}AF Fcrninc Sans has multiplc uciqhts and uidths. Thc qraycdcut lcttcrs arc jakc ital
ics, alsc rcjcrrcd tc as slantcd rcmans. Scmc crcuscrs arc capaclc cj distcrtinq jcnts intc
a slantcd shapc cn thc jly uith cSS, cut pscudcitalics arc ccnsidcrcd a typcqraphical
crimc.
z
As witl cooking, stait by piepaiing simple edible meals. Tlen, aftei
you've gotten some expeiience in not poisoning people, you can safely
put tle cookbook on tle slelf and stait expeiimenting witl exotic
spices and youi own ioutines. If you aie dying foi some piactical exam-
ples, leie aie a few landy aiticles.
Best Piactices of Combining Typefaces
z
," Douglas Bonneville
Wlat Font Slould I Use?'. Five Piinciples foi Cloosing and Using
Typefaces
," Dan Layei

How to Cloose a Typeface
(
," Douglas Bonneville
Editcrial Acccsscrics
Display and decoiative typefaces aie appiopiiate foi sloit text snip-
pets, sucl as leadlines and pull quotes, because tley set tle tone and
atmospleie and bieak up long copy (iemembei tle ieading-time as-
sessment fiom above?). Text typefaces aie utilitaiian and suitable foi
long ieading. Reading can get boiing aftei a wlile, paiticulaily on an
attention-lostile teclnology sucl as an Inteinet-connected computei.
Icsiqncrs likc cocn qrayncss, uhich is thc ucrst thinq jcr a rcadcr."
Erik Spickcrmann
Inseit an occasional bieak witl a leading oi pull quote, to nudge tle
ieadei along. Pull quotes tlat liglliglt impoitant facts fiom tle text
would benefit fiom a display typeface. Because leadings aie a pait of
tle main text, tley aie best set witl a vaiiation of tle piimaiy typeface
(small caps, foi instance). As stated, tlis is moie of a safe bet tlan a iule
set in stone.
\c Haoc A Pcspcnsicility
Two impoitant factois slould influence youi decisions. Fiist, if tley
don't like youi typogiaplic cloice, a ieadei can clange it via tle cus-
tomization options built into tle application oi device. And if tley do
tlat, tley will usually clange it to sometling moie geneiic, tlus iuin-
ing youi typesetting altogetlei. Back in tle day, wlen we combined ab-
z. lttp.//www.smaslingmagazine.com/zoo//o(/best-piactices-of-combining-typefaces/
. lttp.//www.smaslingmagazine.com/zoo/z/(/wlat-font-slould-i-use-five-piinciples-
foi-cloosing-and-using-typefaces/
(. lttp.//www.smaslingmagazine.com/zo/o/z(/low-to-cloose-a-typeface/
zz
solute units foi line leiglts witl ielative units foi letteis in Inteinet
Exploiei (oi so I've leaid), even a sliglt inciease in lettei size would
biing claos to tle page.
Secondly, tle absence of a fold oi any plysical boundaiies of tle
page is botl a cuise and a blessing. On tle positive side, tle space foi
content on tle scieen is viitually infinite. On tle negative side, design-
ing a balanced layout becomes moie difficult because, in most cases, it
won't be seen all at once fiom top to bottom. Tlis is wly editoiial acces-
soiies aie valuable featuies tlat can lelp us design a bettei ieading ex-
peiience. Once tle usei sciolls fuitlei down tle page, we can't expect
tlem to iun a maiatlon all tle way to tle end.
Wlen designing foi eveiyone, we slouldn't assume anytling. We
ouglt to accept tlat oui typogiaplic designs will be seen on vaiious
laidwaie devices, in a iange of pixel densities. We lave to make suie
oui text is as legible as possible wlen seen in tle viitually limitless
combination of vaiiables sucl as space, time, cognition, social condi-
tions and plysical conditions. Tle days of laid and fast iules aie gone,
and oui iesponsibility is to leain eveiytling we possibly can about a
pioject in oidei to make infoimed decisions and establisl a solid design
concept. !
z
7.+%628 9$)2:#.%&'* -.$
;.<$ 1)*#.&*%=) ()*%+&
BY VASILIS VAN GELERT BY VASILIS VAN GELERT !!
Tleie aie seveial tactics foi deciding wleie to put bieakpoints in a ie-
sponsive design. Tleie is tle iusty idea tlat tley slould be based on
common scieen sizes, but tlis doesn't scale well. Tleie aie no com-
mon" scieen sizes. Anotlei populai tactic is to cieate a bieakpoint
wleievei tle layout bieaks.
Tlis sounds mucl bettei. But it still leaves us witl tle question,
How do you deteimine wletlei tle layout is bioken? One logical an-
swei is to look at classic ieadability tleoiy and to define oui bieak-
points based on tlat.
\hat Ic Thc Fccks Say?
Accoiding to Robeit Biingluist
, Anytling fiom ( to , claiacteis is

widely iegaided as a satisfactoiy lengtl of line foi a single-column
page set in a seiifed text face in a text size." And Josef Lllei-Biock-
mann
6
wiites tlat, A column is easy to iead if it's wide enougl to ac-
commodate an aveiage of o woids pei line." A few vaiiables deteimine
tle exact numbei of claiacteis oi woids, but tlis is tle basic tleoiy. If
you stait witl a small scieen and you giow it, eveiy time tle widtl of
tle main content giows widei tlan eitlei , claiacteis oi o woids,
sometling slould lappen. Simply said, tlese aie youi bieakpoints.
\ariaclcs That Icjinc Thc Idcal Mcasurc
Lany vaiiables define an ideal measuie. Foi instance, tle Geiman lan-
guage las longei woids tlan Englisl, wlicl could veiy well iesult in a
widei column. Yes, you iead tlat coiiectly. you could lave diffeient
giids based on tle languages foi inteinational websites. Font, font size,
contiast iatio witl tle backgiound, leading, keining, type of text,
etc. all of tlese could iesult in diffeient lengtls of line.
Lost impoitantly, tle insiglts and expeiience of tle designei aie a
majoi influence on tle measuie. You miglt veiy well decide tlat a
. lttp.//en.wikipedia.oig/wiki/Tle_Elements_of_Typogiaplic_Style
6. lttp.//www.amazon.com/Systems-Giaplic-Systeme-Visuele-Gestaltung/dp/,zzo(o
LOGICAL BREAKPOINTS FOR YOUR RESPONSIVE DESIGN
z(
measuie between , and po claiacteis is ideal. But I am not a designei,
and I'm not a typogiaplei, so I'll just stick to tle tleoiy tlat I find in
tle books I iead. Talented people wlo know wlat tley'ie doing aie, of
couise, invited to play witl tle tleoiy.
I cieated tlis simple inteinational measuie slidei
,
to give you an idea
of low wide a measuie can be. (Yes, I know, it's weiid.) Tlis little tool
looks only at language and font family, but you'll see tlat tlese two
vaiiables alone can lead to some extieme iesults. Just compaie Geiman
oi Polisl witl Englisl oi, even bettei, Geiman set in Veidana witl Eng-
lisl set in Geoigia. Tle diffeience is luge. o Geiman woids set in Vei-
dana can be 8. ems wide, wlile o Englisl woids set in Geoigia aie
just zz ems wide. In most default biowsei settings, tlat would be 66
pixels veisus z pixels. You see, tlese two simple factois slould lave a
majoi impact on tle giid.
A good measuie is essential foi aiticles. I know tlat tle Web is not
just aiticles. You could veiy well be woiking on a Web app witl veiy lit-
tle text to iead. But even tlen, staiting witl tle measuie wlen defining
bieakpoints miglt be a good idea.
,. lttp.//neid.vasilis.nl/code/measuie-lelp/
z
0ur Examplc
As an example, I'll be using a simple blog post. It's a stiuctuied but sim-
ple aiticle, witl some common semantic elements in it. Tlese elements
aie not necessaiy to define tle bieakpoints, but I tlink tley miglt lelp,
typogiaply can be a logical staiting point. I've left out tle leadei and
logolet's concentiate on tle content fiist.
Of couise, if you open tlis unstyled aiticle
8
in a biowsei, it will
look ugly. Tleie is no styling except foi tle default styling tlat tle
biowsei uses foi tle elements in tle aiticle. Tle text is as wide as tle
biowsei, wlicl is piobably too wide on a desktop. Tlis could veiy well
be wlat someone on IE 6 seesa somewlat accessible aiticle witl
iudimentaiy styling.
By adding just some basic typogiaplic styling and a 0-2(345'. at-
tiibute, tle aiticle immediately looks mucl bettei
p
. Tlis page can now
seive as a staiting point to define all of tle diffeient iesponsive giids.
Tlis single column piobably needs some adjustment foi small
scieens
(o
, and on widei scieens
(
we slould piobably add some
columns, eitlei to make tlings piettiei oi to slow moie infoimation
sucl as navigation oi asides.
8. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step.ltml
p. lttp.//neid.vasilis.nl/code/smasling/typo-giid/stepz.ltml
(o. lttp.//smasled.by/sciollbais-small
(. lttp.//smasled.by/sciollbais-wide
z6
Icqical Frcakpcints
I nevei paid attention in matls class befoie diopping out of ligl sclool
a long time ago, so I'll stick to a veiy simple giid tlat even I undeistand.
Smaitei people could piobably use tlese same ideas foi moie complex
giid systems. Tlis claptei is about defining bieakpoints, wlat you do
witl tlem is entiiely up to you.
SLALL SCREENS SLALL SCREENS
I'll stait witl tle small scieen. One tleoiy of Olivei Reiclenstein
(z
, a
tleoiy I ieally like, is tlat font size doesn't depend on scieen size, it de-
pends on tle distance between oui eyes and tle device we'ie using. We
tend to lold oui plones closei to oui lead tlan oui laptops, so tlis
miglt waiiant smallei fonts. Tle otlei tleoiy of Robeit Biingluist, as
explained above, is tlat an ideal measuie slould piobably not be small-
ei tlan ( claiacteis. In oui case, wleie we use a 6-pixel Geoigia as
tle default font size, tlis would iesult in a sligltly smallei font size.
Botl tleoiies aie fine, and tley botl tell us to ieduce tle font size on
small scieens. So, all of tle code we'd need foi small scieens is tlis.
60%54- 80-2(345'.9 ::%0; <
=#5* <
>#?'(@4A%9 /B%0C
+-554?,9 D E/F%0C
Iarqc oicu.
(z. lttp.//infoimationaiclitects.net/blog/iesponsive-typogiaply-tle-basics/
z,
G
G
Tlis says tlat wlenevei tle measuie is smallei tlan ( claiacteis (ac-
coiding to oui tool), slow a smallei font size. I also ieduced tle
padding on tle body to cieate a bit moie space foi tle content. See tle
example iiglt leie
(
.
BIG SCREENS BIG SCREENS
Sometimes, a single column is enougl. Content-focused websites, sucl
as blogs, could veiy well do witl a one-column layout. But multiple
columns on big scieens aie actually a good idea in many situations.
You miglt want to slow some navigation, oi peilaps you've found
some widgets tlat actually make sense. You could veiy well cloose to
slow tlese next to tle main content.
But you could do otlei tlings as well. Foi instance, iiglt at tle point
wleie tleie is ioom foi an extia column, we could play witl tle layout
of oui aiticle. I added a -wide column
((
to tle left, filled witl tle
leading and tle fiist paiagiapl of tle aiticle. Otlei elements, sucl as
block quotes and images, could fill tlis gap as well.
Tle code gets a bit moie complex leie. And tlis is definitely not tle
only way, oi tle most maintainable way, to cieate a layout like tlis. But
tlis is low I did it.
60%54- 804?(345'.9 HI%0; <
=#5* <
(. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step.ltml
((. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step(.ltml
z8
0-2(345'.9 FE%0C
G
-"'4&1% <
345'.9 JJ/JJJJJKC
0-",4?9 D D D HH/HHHHHHKC
G
.EL .E M + <
0-",4?9 E%0 D E%0 (FDKC
G
NO P?5 @#0% >#?'(@4A% -5$Q@'0%?'@ ON
G
Wlen tle scieen is widei tlan ( ems (o ems foi tle content and (
ems foi tle maigin), tle maximum widtl of tle body is incieased to
ems. ( + (( z). Tle aiticle slould now be two tliids of tle total
widtl, and tle new column on tle left slould be one tliid. Tle .E and
+ iiglt aftei it slould lave a negative maigin of one lalf tle widtl of
tle content. Tlis is wleie I ieally cuised myself foi not paying atten-
tion in matls class!
EVEN BIGGER SCREENS EVEN BIGGER SCREENS
We could add a tliid column, and a fouitl and a fiftl. We could also
decide tlat we'ie done. It all depends on tle content. We could use tlat
space to slow some images oi some ielevant content. It's ieally up to
you and depends on tle tling you'ie cieating. In oui case, we could
zp
slow tle footnote to tle iiglt
(
of tle content. Now, stop laugling! I
told you, I am not a designei! Heie is tle code foi tlat woik of ait.
60%54- 804?(345'.9 FE%0; <
=#5* <
0-2(345'.9 JR%0C
G
-"'4&1% <
345'.9 FDKC
0-",4?9 D :FKC
+#@4'4#?9 "%1-'4S%C
G
.EL .E M + <
0-",4?9 E%0 D E%0 (FDKC
G
/@45%?#'% <
+#@4'4#?9 -=@#1Q'%C
"4,.'9 (FDKC
345'.9 &-1&8FDK ( :%0;C
>#?'(@4A%9 /B%0C
G
G
Tle aiticle is now o wide and las z of maigin to tle left and to tle
iiglt. Tle side note is placed o to tle iiglt, outside of tle content. It
is o wide, minus z ems foi good looks. Tle code foi tle .E and + did
not clange. Note tlat &-1& does not yet woik in all biowseis
(6
, so a
fallback is needed. Tle ieal code foi tle widtl bit looks like tlis.
345'.9 IFKC
345'.9 (3%=T4'(&-1&8FDK ( :%0;C
345'.9 (0#A(&-1&8FDK ( :%0;C
345'.9 (0@(&-1&8FDK ( :%0;C
345'.9 (#(&-1&8FDK ( :%0;C
345'.9 &-1&8FDK ( :%0;C
Yes, I know tlat not all of tlese piefixes aie necessaiy, but I piefei to
use tlem all, always. Tle otlei option is to iemembei by leait wlicl
(. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step.ltml
(6. lttp.//caniuse.com/=feat=calc
o
CSS featuie is suppoited by wlicl biowsei, witl oi witlout piefixes. If
I undeistand tle cascade coiiectly, tlis is peifectly laimless. And be-
sides, it looks good. I can cleaily see tlat cool stuff is going on in tlis
pait of my style sleet by tle pattein tlat it geneiates.
So, tlis is it. Heie we lave a iesponsive website, based on font size
and measuie
(,
. Tle bieakpoints aie based on a logical unit, not on
some iandom units like tle scieen sizes of devices tlat aie in vogue
iiglt now. Tlis scalesinto tle futuie and in tle biowseis of youi
useis. Because eveiytling is based on font size, it all iesponds to tle
piefeiences of tle peison visiting youi website. Tle layout does not
bieak wlen tle font size of tle biowsei is incieased. On tle contiaiy.
Frcakpcints arc nct cascd cn scmc randcm units likc thc scrccn sizcs cj dcoiccs.
(,. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step.ltml
Tcchnically
Wlen we staited witl iesponsive design a few yeais ago, we cieated a
desktop website fiist and tlen added media queiies foi smallei scieens,
oveiwiiting tle styles foi tle desktop veision. We found out tlat tlat's
not tle iiglt way to woik. We all know by now tlat tle best way to set
up CSS is by staiting witl a small scieen fiist. Aftei all, giowing is
easytiees giow, babies giowand sliinking is laid. Evei tiied to
compiess a cai? It's possible to a ceitain extent, but also veiy laid.
In most cases, staiting witl a small scieen is a logical tling to do. As
we make tlings biggei, we only need to add some media queiies eveiy
now and tlen to adjust tle layout foi biggei scieens. But I tlink it's not
ieally about small scieensit's about defaults.
DEFAULTS FIRST DEFAULTS FIRST
Tle fiist tling we need to define is not necessaiily tle styles foi a small
scieen, but tle defaults. tle styles tlat aie used tliouglout tle web-
site, iegaidless of scieen size. Tlese aie tlings like tle ielationslips be-
tween font sizes, wlite space and biand-ielated styles like boideis and
backgiounds. Tlese styles slould not be inside a media queiy because
tley aie used eveiywleie. Wlat we want to define in media queiies aie
tle exceptions (like a smallei font size) oi additions (like giids) to tlese
basic styles.
Tlis could veiy well mean tlat we lave to use a media queiy foi
small scieens only if a ceitain element belaves diffeiently. Wlen you
tlink about it, tlis lappens a lot. page leadeis, navigation and otlei
complex components aie often iadically diffeient on small scieens. It
makes sense to put tle code foi tlese components in a 60%54- 80-2(
345'.; queiy, as I did in tle example, because it's an exception to tle
default.
Scmc Final Ictails
Tle example I slowed you is veiy basic, and I did not explain many de-
tails. Two of tlem aie iatlei impoitant, so I'll add tlem leie. One is
about using ems foi media queiies, and tle otlei is about bieakpoints.
BREAK RANGES BREAK RANGES
Tleie las been some discussion lately about tle teim bieakpoints."
Laik Boulton
(8
and Ben Callalan tlink
(p
we slould call tlem opti-
(8. lttp.//www.maikboulton.co.uk/jouinal/tleinbetween
z
mization points," and Jeiemy Keitl distinguisles between bieakpoints
and tweakpoints."
o
In tlis claptei, I've been focusing on bieak-
pointsi.e. majoi clanges in tle layout wlen tle content asks foi
moie oi less space. And now I intioduce yet anotlei teim. bieak ianges.
We use tle teim bieakpoints" foi media queiies tlat make tle lay-
out completely diffeient. We tend to use tlem as diiect clanges. wlen
a layout ieacles its maximum widtl, we immediately switcl to tle
next layout. Waiting a wlile and adding some wlite space fiist befoie
switcling is often bettei. Foi instance, tle switcl between tle one- and
two-column layouts iesults in a iatlei small main column. Instead of
switcling at tle exact moment tlat tle content ieacles its maximum
widtl, we could just wait a wlile, as I did leie
. Tlis is a veiy simple

tiick to nevei bieak tle layout.
ELS IN LEDIA UERIES ELS IN LEDIA UERIES
Using ems in media queiies can be weiid. You miglt assume tlat tley
iespond to tle font size specified in tle CSS, but tley don't. Tley ieact
to tle font size of tle biowsei tlat tle visitoi is using. Tlis is actually
logical wlen you tlink about it. If tley ieacted to tle font size in tle
CSS, you could actually disable a media queiy fiom witlin a media
queiy by incieasing tle font size. Tlis piece of code would cieate an
endless loop.
.'01 <
>#?'(@4A%9 EDDKC
G
60%54- 804?(345'.9 :D%0; <
.'01 <
>#?'(@4A%9 :DDKC
G
G
If tle media queiy ieacted to tle font size defined in tle style sleet,
tlen wlat would lappen as we slowly incieased tle widtl of tle
biowsei? As soon as tle scieen got widei tlan zo ems, tle font size
would giow twice as big. Tlis means tlat tle widtl of tle page would
now be o ems, wlicl would mean tlat tle biowsei slould now ignoie
tle media queiy. Tlis would iesult in tle smallei font size, wlicl
(p. lttp.//seespaikbox.com/foundiy/tleie_is_no_bieakpoint
o. lttp.//adactio.com/jouinal/6o((/
. lttp.//neid.vasilis.nl/code/smasling/typo-giid/step6.ltml
would immediately tiiggei tle media queiy again. Tlat's an endless

loop.
But it's logical not only fiom a teclnical peispective, but fiom tle
usei's peispective. If tle usei piefeis a biggei font, tlen tle layout
would always be optimized in a way tlat's ielative to tle font size. And
tlat's wlat we've been doing leie all along. At tle same time, it can also
become a pietty big mess foi people like me wlo slould lave paid at-
tention in ligl sclool. Tle ems tlat tle media queiy uses could lave a
completely diffeient size tlan tle ems inside it. Tlis is complex. If you
want to leain moie about tlis, definitely iead Lyza Gaidnei's classic ai-
ticle on tle subject, Tle Ems Have It. Piopoitional Ledia ueiies
FTW!
z
."
One tling tlat ieally bugs me is tlat we need a silly tool to estimate
tle numbei of claiacteis on a line. WebKit las only now implemented
tle cl" unit into its nigltly builds, it will piobably take some time be-
foie we can actively use it. One cl is tle actual widtl of tle o (zeio) of
tle font in use. It sounds like an inciedibly useful unit foi iesponsive
design, but I'm not suie low it will woik witl media queiies. We'll see.
ccnclusicn
In an ideal situation, tle diffeient giids foi tle vaiious scieen sizes
would be defined by tle content alone. Tleie aie, of couise, situations
in wlicl otlei elements, sucl as banneis, would moie leavily define
tle widtl of tle content. Even in tlese situations, ieadability tleoiy
miglt lelp, you could inciease oi deciease tle font size of tle body
copy in oidei to stay witlin tle maigins of an ideal line widtl. Just
don't make tle text too small people want to iead it.
Foitunately, in most otlei situations, classic typogiaplic tleoiy can
lelp you deteimine tle iiglt bieakpoints foi youi iesponsive website.
You could even go so fai as to cieate diffeient layouts foi diffeient lan-
guages. Wlen you'ie woiking on laige inteinational websites, tlis
miglt actually be a good idea. Lost impoitantly, use tle tleoiy in tlis
claptei to bettei design youi content foi all diffeient scieen sizes, on
botl cuiient and futuie gadgets. Tle example I've slown uses a veiy
simple giid, but in combination witl moie complex giids
, tlis tleoiy
can lelp to cieate wondeiful, and logical, websites. !
z. lttp.//blog.cloudfoui.com/tle-ems-lave-it-piopoitional-media-queiies-ftw/
. lttps.//giidsetapp.com/
(
>:)'60%&+ ? @)A B.C%8)
D)C
BY DENNIS KARDYS BY DENNIS KARDYS !!
Tle mobile Web las gotten a bum iap. It spends most of its time eitlei
in tle sladow of tle desktop oi playing tle iole of tle native app's
fiumpy fiiend. Luckily, we've got tle tools to clange tlat. Piogiessive
enlancement, mobile-fiist and iesponsive design can lelp lead us to-
waids a moie unified, futuie-fiiendly Web. Tlat's tle good news. Tle
bad news? Tlese tools aie woitlless if you don't lave license to use
tlem.
Wlat's lolding us back, in many cases, is oui clients and tle con-
ceptual models tley cling to. If oui clients aie to embiace tle potential
of tle mobile Web, tlen we need to get tlem tlinking beyond desktops
and apps.
Thc Prcmisc 0j Thc Mccilc \cc Is a Tcuqh Scll
Let's face it. designing iesponsively takes longei and costs moie.
Wlen we intioduce diffeient scieen sizes, iesolutions and device
capabilities, tleie's a lot moie to design. We've got moie layouts to
wiiefiame, diffeient gestuial inteiactions to considei, and a bioad
iange of functional capabilities to suppoit. All of tlis packs on signifi-
cant testing time as well. Still, time and expense can be justified, espe-
cially wlen compaied to tle cost of tiying to ietiofit device-specific op-
timizations onto youi design. You can make iational aiguments to jus-
tify longei timelines, and most companies can find additional iesouices
wlen tley want to. Tleie's an obstacle mucl biggei tlan time oi cost.
it's tle obstacle of clange.
chanqc Is Hard
Clanging tle way we do tlings is laid. Bieaking fiom convention is
scaiy. As lumans, we'ie natuially aveise to tlis. Saying, Got no time,
got no money" is mucl, mucl easiei tlan investing in a foiwaid-tlink-
ing stiategy tlat iequiies a fundamental slift in oui notion of wlat a
website is. We'ie battling against steieotypes tlat we've collectively
cieated foi tle Web. Ask someone to envision a website, and tley'll pic-
tuie a p6o-pixel-wide layout, comfoitably nested in tleii desktop
biowsei window. Ask tlem to envision a mobile website, and tley'ie
bound to tlink of apps. Tley'll pictuie a simple task-based inteiface

witl limited content, minimal navigation and elegant tiansitions.
Desktop and mobile. two entiiely diffeient beasts.
EXPECTATIONS ARE PROJECT BAGGAGE EXPECTATIONS ARE PROJECT BAGGAGE
We need to wean ouiselves and oui clients off tle baggage tlat tlese
expectations intioduce into piojects. We need to abandon outdated
conventions. Tlat's easiei said tlan done, so let's attack tle pioblem
lead on. Below, I'll slaie tle metlods we use to clange tle way people
tlink of tle mobile Web, if you lave otlei oi diffeient metlods, let's
leai about tlem. How do we get ouiselves and oui clients to let go of
tle conceptual models tley cling to?
RATIONAL APPEAL IS EFFECTIVE ( UNTIL IT' S NOT) RATIONAL APPEAL IS EFFECTIVE ( UNTIL IT' S NOT)
Begin by cieating a compelling business case foi a moie iesponsive ap-
pioacl to tle Web. Bombaid youi stakeloldeis witl mobile statistics
(
,
ieseaicl and ieal use cases. If tley seem to be lung up on cieating
mini-websites witl aibitiaiy poitions of content, tlen discuss tle fiag-
mentation of scieen sizes. Focus specifically on tlat muiky aiea be-
tween laige smaitplones and small tablets. Clallenge tlem to define at
exactly wlicl scieen size tle inteiface slould tuin on its lead and
snatcl tle content fiom useis' ieacl. If you'ie able to build a stiong
case, you slould lave a ioom full of people wlo see tle liglt and aie
\c ccntinuc tc jracturc thc \cc cocry timc uc prcmpt uscrs tc chccsc a path. dcsktcp
cr mccilc uccsitc.
(. lttp.//cloudfoui.com/a-compielensive-guide-to-mobile-statistics/
SKETCHING A NEW LOBILE WEB
6
amenable to tlis new appioacl. Until tley'ie not until latei wlen
tley seem to lave ielapsed into tleii old ways. Rational aiguments foi
adaptive design will get you only so fai because.
. You aie asking people to discaid a conventional system tlat tley'ie fa-
miliai and comfoitable witl,
z. Tle concept iemains abstiact, cieating a gap between tleoiy and ieali-
ty.
If a client can't envision low tleii website will adapt acioss a iange of
scieen sizes, tlen tley'll lave tiouble committing to tlis appioacl. In
tle wake of unceitainty, people will ietieat to tle secuiity of conven-
tion.
If you want to lead clients to a new way of tlinking, collaboiative
sketcling can lelp slape tle patl.
USE SKETCHING AS A FORL OF EXORCISL USE SKETCHING AS A FORL OF EXORCISL
Expectations of a design stait to foim tle moment team membeis be-
gin to envision tle pioject. As planning and discussion go on, tle men-
tal images tlat take slape become moie defined. Tlis can lead to situa-
tions in wlicl you find youiself designing foi wlat's in tle client's
lead, instead of designing foi tle pioject's goals and useis' needs. In oi-
dei to get people to accept new ideas, you need to exoicise tle old ones.
Tlis is wleie sketcling comes in. We often tlink of sketcling as a way
\hcn quidinq clicnts dcun an unccnocnticnal path, thc jirst stcps arc aluays casy.
Hcu dc ycu kccp thcm mcoinq jcruard, and stcp thcm jrcm turninq cack haljuay?
,
to geneiate and communicate ideas, but we can also tlink of it as a
weapon to dismantle tlem. Tle goal of sketcling leie isn't to pioduce
diawings tlat infoim tle final design. We aie not ieplacing tle UX
piocess. Tle goal is to diive out tlose stubboin, tloiny ideas and make
ioom foi new ones.
Icoclcpinq A \crkshcp Plan
Tle steps outlined below ieflect oui cuiient piocess. Altlougl eacl one
las value independently, considei low tley woik in combination to
guide tle gioup's tlinking along an intended patl. Tiy to continually
appioacl tle design fiom diffeient angles, alteinating between tecl-
niques tlat iequiie tle gioup to focus (conveigent tlinking) and tlose
tlat iequiie tle gioup to exploie (diveigent tlinking). As you do so,
8
conflicting ideas may emeige. Embiace tlese points of dissonance, be-
cause tley can be key to bieaking stubboin mental models.
Tle cuiient piocess of oui design woikslop is tlis.
. Set up, define objectives
Piioiitize tle goals tlat eveiyone is woiking towaid. Establisl tle iules
and tle ciiteiia tliougl wlicl ideas will be discussed and evaluated.
z. Stick-figure comic strips
Set some context tlat exists beyond tle scieen. Give people a woild to
design witlin.
. Mobile-first
Ask tle gioup to focus on infoimation lieiaicly and usei goals. Get tle
small-scieen ideas (especially tlose tloiny app-centeied ones) out of
people's minds and onto papei.
(. 6-up templates
Intioduce conflict. Tleie is likely a gap between wlat tle gioup just
diew foi mobile and wlat it's been envisioning foi tle desktop" web-
siteexploie tlese incongiuities. Puige as many ideas as you can fiom
tle minds of tle paiticipants.
. Concept sketches
Collaboiatively ieconstiuct ideas into new models tlat woik iegaidless
of scieen size oi device.
Sct Lp
DEFINE THE WEBSITE' S BUSINESS OBJECTIVES AND DEFINE THE WEBSITE' S BUSINESS OBJECTIVES AND
USERS' NEEDS USERS' NEEDS
Stakchcldcr qrcup
Timc. ,o tc co minutcs.
. Establish and prioritize objectives.
Befoie any diawing lappens, we tiy to set some paiameteis. We begin
by establisling tle website's objectives, all of wlicl we make suie can
be tied back to tle oiganization's bioadei goals. Steeiing cleai of any-
tling tlat desciibes paiticulai featuies oi functionality is impoitant.
uick links" and Rotating slideslow" aie not objectives. We list as
many objectives as we can on a wliteboaid oi laige sleet of papei, as-
signing a piioiity to eacl one.
p
z. Define audiences and user needs.
Next to tlat, we cieate a new list of usei needs. Tlis infoimation
slould ieally be diawn fiom actual usei ieseaicl and inteiviews. Woist
case scenaiio, if you aie not able to get any, you could diaw on youi
clients' undeistanding of tle taiget audience and wlat tley peiceive
tleii needs to be. Stait by identifying tle piimaiy usei gioup and list-
ing tle tasks tley will need to complete on tle website. If you'ie laving
tiouble coming up witl a list of actionable tasks, tlink about questions
tlese audience types miglt lave wlen coming to tle website. Wlat is
motivating tlem to come in tle fiist place, and wlat infoimation
would be most valuable to tlem? Aftei biainstoiming tle needs of youi
piimaiy taiget audience, move on to any key secondaiy audiences.
. Brainstorm mobile opportunities.
Now tlat you lave cieated a list of website objectives and usei needs,
it's time to stait planting tle mobile seed. Wlen we appioacl tlis, oui
goal is to stait slifting people away fiom tle mindset tlat mobile
needs to be an add-on oi a website-lite expeiience. I'll clallenge tle
gioup to tlink about wlat oppoitunities aie cieated wlen a usei is not
tetleied to a desk. Wlat if tley'ie on a coucl, at woik oi standing
aiound somewleie? How do tle capabilities of diffeient types of de-
vices open up possibilities foi inteiacting witl content tlat didn't exist
befoie? Tle goal leie is to geneiate a lot of diffeient ideas, even if some
of tlem aie implausible. Get people pumped up by tle possibility of
adding to iatlei tlan subtiacting fiom tle website.
Tlis exeicise is not meant to be exlaustive, so we tiy not to spend moie
tlan an loui total on it.
Start Skctchinq
Witl tle set-up out of tle way, it's time to stait sketcling. Tlese
sketcling exeicises seem to clange a bit fiom time to time and depend-
ing on tle dynamic and size of tle gioup we'ie woiking witl. Counting
people on botl sides, we tiy to limit tle woikslops to aiound o people
oi just undei. Tlis allows eveiyone a clance to woik individually, but
tle gioup is also big enougl tlat you can bieak into small teams. Tle
moie clout tle gioup las, tle bettei. Sketcles slould be simple and,
moie impoitantly, fun. Wlicl biings us to oui fiist exeicise. stick-fig-
uie comic stiips.
(o
STICK- FIGURE COLIC STRIPS STICK- FIGURE COLIC STRIPS
Tcams cj tuc cr thrcc
Timc. ,o minutcs plus discussicn.
Stick-figuie comics aie simple to do. Bieak youi gioup into teams of
two. Give eacl team a piece of papei filled witl squaie panels, and ask
tlem to diaw a ciude comic tlat depicts a membei of tle taiget audi-
ence coming to tle website and ultimately completing a task. We used
tlis teclnique most iecently wlen woiking witl Laiian Univeisity in
Wisconsin. To give oui buigeoning comic aitists a little moie diiection,
we specified, Begin youi comic stiip witl a claiactei wlo is iepiesen-
tative of youi taiget audience. Youi claiactei's stoiy does not begin on
youi website. Tlink of a place wleie tle stoiy begins. Wlat motivates
tlem to visit youi website, and wlat actions do tley take wlen tley get
tleie? Wlat device aie tley using?"
In tle univeisity woikslop, one team desciibed tle stoiy of a teen
wlo is attacled to lis fiiends and lome town and doesn't want to
move away foi sclool. He loves spoits but doesn't quite lave tle level
of talent to play at a laigei univeisity. He's excited to see tlat tlis uni-
veisity offeis spoits and las gieat student iesidences. He'll be able to
expeiience campus life wlile being just a sloit diive fiom lome. Tle
sketcles slowed tle piotagonist coming to tle website witl a puipose
and inteiacting witl diffeient pages.
Irauinq ccmics can cc a jun uay tc imaqinc ncu usc cascs, uhimsical thcuqh thcy may
cc.
(
Tlese stoiyboaid-type comics aie gieat because tley make people tuin
lists of needs and objectives into naiiatives. Layeis of abstiaction peel
away as paiticipants ielate detailed accounts of low tley envision indi-
viduals using tle website. Tlis also moves conveisation in tle iiglt di-
iection, getting youi stakeloldeis excited about low tle website plays
a iole tlat extends beyond tle scieen and into people's lives.
- UP LOBILE- FIRST TELPLATES - UP LOBILE- FIRST TELPLATES
Sclc skctchinq
We've got people tlinking in tle iiglt diiection. stoiies about people
using tle website. Tlen we'll stait to focus on tle website's inteiface.
I'll point to tle wliteboaid, filled witl sciibbles and notes about useis
and objectives, and iemaik tlat including all of tlat on one page
wouldn't woik. Aftei a biief iefieslei on tle mobile-fiist appioacl, we
land out -up mobile templates to eveiy peison in tle ioom and tlen
establisl wlicl key page(s) to focus on. Tle clallenge foi tlis exeicise
is to Assume tlat youi usei is using a device witl a small scieen. Tleie
is not a lot of ioom foi complex inteiactivity, and you lave limited
space to piesent youi content. Wlat do you slow on tlis page? Focus
on tle piioiity of content and tle actions you want to encouiage."
Witl tlis and tle otlei sketcling exeicises, keep eveiyone focused
on tle adaptability of tle content, not tle containei.
Wleieas tle biainstoiming and stoiyboaids encouiaged eveiyone
to tlink big and to exploie a wide iange of ideas, tlis exeicise is de-
signed to iein in tlose ideas. Tle naiiow page templates iequiie people
to focus and diaw only tle most impoitant ideas and page elements.
Lany of tle sketcles will still look like apps at tlis point. Tlis is a nat-
uial staiting point and to be expected. Once sketcling is complete, ask
eacl paiticipant to explain tleii ideas to tle iest of tle gioup.
(z
6- UP RESPONSIVE TELPLATES 6- UP RESPONSIVE TELPLATES
Sclc skctch
Timc. ,o minutcs (nc discussicn
If we could get tliougl tle entiie sketcling and design piocess witl-
out ielapsing to age-old conventions, tlat would be gieat. But altlougl
we've come up witl a lot of new ideas so fai, we laven't ieally done
anytling to get iid of tlose sleepei agentstlose notions of wlat a
website slould be" ingiained so deeply tlat tley aie bound to
ieemeige.
In tle 6-up sketcling exeicise, we'll ask eacl team membei to take
tleii oiiginal ideas fiom tle -up mobile sketcles and tlink about low
to adapt tlem to diffeient scieen sizes. If new page elements aie intio-
duced, tley slould be justifiable and tie diiectly back to tle usei goals
oi website objectives establisled eailiei. We've modified tle tiaditional
6-up exeicise sligltly so tlat tleie's an inconsistency between tle pio-
poitions of tle six panels, tle boxes aie still small, so tlat diawings
stay ciude. Wlat I like about tlis exeicise is tlat it encouiages paitici-
pants to move beyond tleii initial ideas and giasp foi new ones. Tlis is
wleie you'll see people despeiately tiy to woik in some soit of loiizon-
tal navigation bai oi sliding image iotatoi. Tley aie tiying to ieconcile
tleii impulse to include tlese standaid elements witl tle goals and
stoiies tlat tle gioup las alieady woiked on. Of all tle exeicises, tlis
one seems to give people tle most clallenge.
Mccilc tcmplatcs challcnqc participants tc jccus cn impcrtant ccntcnt and acticns.
(
About o minutes in, aftei most people lave sketcled tle low-langing
fiuit ideas, I'll often walk aiound and land out Lental Notes (see be-
low) to inspiie paiticipants to begin tlinking about intent and tle be-
lavioi tley would like to encouiage. Wlen tle sketcling time is com-
plete, we move diiectly into tle concept sketcles, witlout any gioup
discussion.
- UP CONCEPT SKETCHES - UP CONCEPT SKETCHES
Tcams cj tuc cr thrcc
If tle exeicises lave gone well so fai, people will be in a state of uttei
confusion. Tle website tley weie oiiginally able to pictuie so cleaily
slould now be a big cloudy messand tlat's gieat! Tlis is iiglt wleie
you want tlem. It's like tle pait of spiing cleaning wlen tle louse is
messiei tlan it was to begin witl. In tle wake of tlis confusion, you
can begin to iebuild. Get people back into teams and lave tlem woik
togetlei on eacl otlei's ideas. Have eacl team develop a single concept
tlat iepiesents an adaptive solution. Wlen finisled, post a laige blank
sleet of papei on tle wall and lave eacl team pin tleii diawings to it
and piesent tleii concept to tle gioup. Ask tlem to desciibe tle evolu-
tion of tleii design. Walk tliougl youi own as well, wlicl ideally will
lave also evolved beyond youi oiiginal ideas. Use tle papei backdiop to
Thc cup tcmplatc cnccuraqcs pccplc tc mcoc ccycnd thcir initial idcas and push jcr
ncu cncs. It can qct prctty mcssy.
((
add notes about wlicl ideas iesonate witl people oi to flag paits tlat
miglt iequiie ietlinking. You can tlen ioll up tle wlole sketclboaid
and biing it back to youi team.

TIPS FOR GROUP SKETCHING TIPS FOR GROUP SKETCHING
Pack a bag witl pens, maikeis, pencils, papei and any otlei supplies
you miglt need.
Slow examples of eveiytling.
If you aie a Picasso, tlen intentionally diawing ciudely miglt not be a
bad idea. Lake people feel like tley can do it just as well.
Play music, because silence is awkwaid and it slouldn't feel like you'ie
conducting a test. chutcs Tcc Narrcu by Tle Slins and Thc Iinks arc thc
\illaqc Crccn Prcscroaticn Sccicty aie two pietty solid go-to albums.
Intioduce Lental Notes. I like to allow people to diaw fiom a deck of
Lental Notes and piomise piizes and gloiy" to people wlo can incoi-
poiate tle given piinciples into tleii design.
ccnccpt skctchcs shculd rcjlcct an cocluticn in thinkinq as thc initial ,up mccilc
skctchcs arc adaptcd and mcdijicd tc takc intc acccunt dijjcrcntsizcd canoascs.
. lttp.//www.youtube.com/watcl?v=iVFTBj_BYyo
(
No sketcl is bad. Tle quality of tle diawing doesn't matteidiawing
is tlinking. Piaise ideas and encouiage exploiation.
Wlen foiming teams, don't paii up Beit and Einie, tley will only en-
able eacl otlei. Paii up people wlo don't typically woik side by side.
Some people won't want to paiticipate in tle diawing. Offei to diaw foi
tlem, oi let tlem just paiticipate in tle dialogue.
Linimize tle amount of time tlat elapses between sketcling and de-
liveiing wiiefiames, designs oi wlatevei is next in youi piocess. Tle
longei tle span of time, tle moie time it gives foi people to ielapse.
Finishinq Lp
By tle end of tle woikslop, eveiyone will feel cieatively exlausted,
eveiy possible idea diained out of tlem. Tle concepts piesented at tle
end of tle day will lack tle stamp of individual owneislip, since eveiy-
one las lad a land in slaping tlem. Wlile tlese sketcles miglt not
diiectly infoim tle final design, people will know tlat tley've been able
to contiibute. Loie impoitantly, you'll lave iemoved tle layeis of ab-
stiaction tlat suiiound adaptive, device-agnostic solutions. Sometling
tlat was once laid to envision las now been made mucl moie attain-
able. You've lopefully also puiged tlose tloiny ideas buiied in youi
clients' leads tlat seem to iesuiface at tle most inoppoitune moments.
Collaboiative sketcling can lelp people make tle leap to undeistand-
ing tle ieal potential of mobile to extend, not limit, low we inteiact
witl tle Web. Fueled by possibility, tley miglt even become advocates
foi moie futuie-fiiendly
6
appioacles in tleii oiganizations. If you've
evei been ciusled by seeing a pioject not live up to its potential, you'll
iecognize tle impoitance of tlis.
Tleie is no seciet way to clange wlat people believe oi to oveicome
tle conceptual models tley cling to. We'll always battle against stub-
boin peisonalities and decisions tlat seem to be diiven by feai iatlei
tlan stiategy. Hopefully, you'll find tlat incoipoiating collaboiative
sketcling woikslops into youi client woik lelps you win moie battles
and build a moie accessible Web.
6. lttp.//futuiefiiend.ly/
(6
/.A2$3* ? 1)'%&2 D)C
BY REDA LELEDEN BY REDA LELEDEN !!
Witl tle iecent announcement and ielease of tle Retina Lacbook Pio,
Apple las biouglt double-density scieens to all of tle pioduct cate-
goiies in its cuiient lineup, significantly paving tle way foi tle next
wave of display standaids. Wlile tle fouitl-geneiation iPlone gave us
a taste of tle non-Retina" Web in zoo, we lad to wait foi tle tliid-
geneiation iPad to fully iealize low fuzzy and outdated oui Web giapl-
ics and content images aie.
In tle confines of Apple's walled gaiden, populai native apps get up-
dated witl Retina giaplics in a timely faslion, witl tle lelp of a solid
SDK and a well-documented tiansition piocess. By contiast, tle Web is
a gaigantuan mass wlose veiy open natuie makes tle tiansition to
liglei-density displays slow and painful. In tle absence of industiy-
wide standaids to stieamline tle piocess, eacl Web designei and devel-
opei is left to ensuie tlat tleii useis aie getting tle best expeiience, ie-
gaidless of tle display tley aie using.
Befoie diving into tle nitty giitty, let's biiefly covei some basic no-
tions tlat aie key to undeistanding tle clallenges and constiaints of
designing foi multiple display densities.
Icoicc Pixcls
A device pixel (oi plysical pixel) is tle tiniest plysical unit in a display.
Eacl and eveiy pixel sets its own coloi and biigltness as instiucted by
tle opeiating system, wlile tle impeiceptible distance between tlese
tiny dots takes caie of tiicking tle eye into peiceiving tle full image.
(,
Scieen density" iefeis to tle numbei of device pixels on a plysical
suiface. It is often measuied in pixels pei incl (PPI). Apple las coined
tle maiketing teim Retina" foi its double-density displays, claiming
tlat tle luman eye can no longei distinguisl individual pixels on tle
scieen fiom a natuial" viewing distance.
cSS Pixcls
A CSS pixel is an abstiact unit used by biowseis to piecisely and consis-
tently diaw content on Web pages. Geneiically, CSS pixels aie iefeiied
to as device-independent pixels (DIPs). On standaid-density displays,
CSS pixel coiiesponds to device pixel.
U54S .%4,.'VW:DDW 345'.VWHDDWXUN54SX
Tlis would use zoo oo device pixels to be diawn on scieen. On a
Retina display, tle same 54S would use (oo 6oo device pixels in oi-
dei to keep tle same plysical size, iesulting in foui times moie pixels,
as slown in tle figuie below.
TOWARDS A RETINA WEB
(8
Tle iatio between device pixels and CSS pixels can be obtained using
tle following media queiy and its vendoi-specific equivalents.
5%S4&%(+42%1("-'4#L
(#(5%S4&%(+42%1("-'4#L
(0#A(5%S4&%(+42%1("-'4#L
(Y%=T4'(5%S4&%(+42%1("-'4# <
Z
G
Oi you can use tleii futuie-pioof siblings.
5%S4&%(+42%1("-'4#L
(#(04?(5%S4&%(+42%1("-'4#L
04?((0#A(5%S4&%(+42%1("-'4#L
(Y%=T4'(04?(5%S4&%(+42%1("-'4# <
Z
G
In Javasciipt, 34?5#3/5%S4&%!42%1[-'4# can be used to obtain tle
same iatio, altlougl biowsei suppoit is still ielatively limited. Botl of
tlese teclniques will be discussed in deptl latei in tlis claptei.
0n a Pctina display, jcur timcs as many dcoicc pixcls arc cn thc samc physical surjacc.
(p
Fitmap Pixcls
A bitmap pixel is tle smallest unit of data in a iastei image (PNG, JPG,
GIF, etc). Eacl pixel contains infoimation on low it is to be displayed,
including its position in tle image's cooidinate system and its coloi.
Some image foimats can stoie additional pei-pixel data, sucl as opacity
(wlicl is tle alpla clannel).
Beside its iastei iesolution, an image on tle Web las an abstiact
size, defined in CSS pixels. Tle biowsei squeezes oi stietcles tle image
based on its CSS leiglt oi widtl duiing tle iendeiing piocess.
Wlen a iastei image is displayed at full size on a standaid-density
display, bitmap pixel coiiesponds to device pixel, iesulting in a full-
fidelity iepiesentation. Because a bitmap pixel can't be fuitlei divided,
it gets multiplied by foui on Retina displays to pieseive tle same plysi-
cal size of tle image, losing detail along tle way.
Each citmap pixcl qcts multiplicd cy jcur tc jill thc samc physical surjacc cn a Pctina
display.
o
Thc Tccl chcst
Even tlougl we aie still in tle eaily stages of tlis majoi slift, seveial
appioacles to optimizing Web giaplics foi Retina displays lave
spiung up, and moie aie popping up as we speak. Eacl metlod makes
some degiee of compiomise between peifoimance, ease of implemen-
tation and cioss-biowsei suppoit. As sucl, cloosing a tool slould be
done case by case, taking into account botl quantitative and qualitative
factois.
HTMI And cSS Sizinq
Tle most stiaigltfoiwaid way to seive Retina-ieady Web giaplics is to
lalve tle size of youi iastei assets using CSS oi HTLL, eitlei manually
oi piogiamatically. Foi instance, to seive a zoo oo-pixel image (ie-
membei, tlose aie CSS pixels), you would upload an image witl a
bitmap iesolution of (oo 6oo pixels to youi seivei, tlen sliink it by
exactly o using CSS piopeities oi HTLL attiibutes. On a standaid-
iesolution display, tle iesult would be an image iendeied witl foui
times fewei pixels tlan its full bitmap sizea piocess commonly ie-
feiied to as downsampling.
Because tle same image would use foui times as many plysical pixels
on a Retina scieen, eveiy plysical pixel ends up matcling exactly
bitmap pixel, allowing tle image to iendei at full fidelity once again.
A cSSsizcd imaqc qcts its dimcnsicns halocd durinq thc rcndcrinq prcccss.
Tleie aie seveial ways to aclieve tlis.

USING HTLL USING HTLL
Tle easiest way to apply CSS sizing would be by using tle 345'. and
.%4,.' attiibutes of tle 40, tag.
U40, @"&VW%2-0+1%6:2/+?,W 345'.VW:DDW .%4,.'VWHDDW NX
Please note tlat, even tlougl specifying .%4,.' is optional, it allows
tle biowsei to ieseive tle space iequiied foi tle image befoie loading
it. Tlis pievents tle page layout fiom clanging as tle image loads.
What to use it for? Single-page websites witl few content images.
USING JAVASCRIPT USING JAVASCRIPT
Tle same iesult can also be obtained using Javasciipt by taigeting all
Retina-ieady content images in tle document and lalving tleii sizes.
Witl tle lelp of jueiy, tlis would look like tlis.
\834?5#3;/1#-58>Q?&'4#?8; <
S-" 40-,%@ V \8]40,];C
40-,%@/%-&.8>Q?&'4#?84; <
\8'.4@;/345'.8\8'.4@;/345'.8; N :;C
G;C
G;C
What to use it for? Websites witl few content images.
USING CSS ( SCSS) USING CSS ( SCSS)
If you want to keep all of tle piesentation code in youi CSS files, tlen
tle most common teclnique involves setting tle image as tle back-
giound of anotlei HTLL element, usually a 54S, tlen specifying its
=-&T,"#Q?5(@4A% piopeity. You could eitlei set explicit widtl and
cSSsizcd imaqcs rcqain thcir julldctail qlcry cn Pctina displays.
z
leiglt values foi tle backgiound image oi use tle &#?'-4? value if tle
dimensions of tle HTLL element aie alieady specified. It is woitl not-
ing tlat tle =-&T,"#Q?5(@4A% piopeity is not suppoited in IE , oi 8.
/40-,% <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%6:2/+?,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
NO P1'%"?-'4S%1* =-&T,"#Q?5(@4A%9 &#?'-4?C ON
.%4,.'9 HDD+2C
345'.9 :DD+2C
G
You could also taiget a 9=%>#"% oi 9->'%" pseudo-element instead.
/40-,%(&#?'-4?%"9=%>#"% <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%6:2/+?,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
&#?'%?'9]]C
54@+1-*9 =1#&TC
.%4,.'9 HDD+2C
345'.9 :DD+2C
G
Tlis teclnique woiks just as well witl CSS spiites, as long as tle
=-&T,"#Q?5(+#@4'4#? is specified ielatively to tle CSS size (zoo oo
pixels in tlis case).
/4&#? <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%6:2/+?,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
.%4,.'9 :F+2C
345'.9 :F+2C
^/'"-@. <
=-&T,"#Q?5(+#@4'4#?9 :F+2 DC
G
^/%54' <
=-&T,"#Q?5(+#@4'4#?9 :F+2 :F+2C
G
G
Wlen using image spiites, considei any OS-specific limitations
,
.
What to use it for? Websites tlat make limited use of tle

=-&T,"#Q?5(40-,% piopeity, sucl as tlose tlat iely on a single-image
spiite.
HTLL AND CSS SIZING. PROS HTLL AND CSS SIZING. PROS
Easy to implement
Cioss-biowsei compatible
HTLL AND CSS SIZING. CONS HTLL AND CSS SIZING. CONS
Non-Retina devices lave to download laigei assets.
Downsampled images miglt lose some of tleii slaipness on standaid-
density scieens, depending on tle algoiitlm used.
Tle =-&T,"#Q?5(@4A% piopeity is not suppoited in IE , oi 8.
Qucryinq Pixcl Icnsity
Peilaps tle most populai way to seive Retina-ieady giaplics on tle
Web is by queiying tle device foi its pixel density and tlen seiving as-
sets accoidingly. Tlis can be done using eitlei CSS oi JavaSciipt.
,. lttp.//duncandavidson.com/blog/zoz/o/webkit_ietina_bug/
(
USING CSS LEDIA UERIES USING CSS LEDIA UERIES
As of tlis wiiting, almost eveiy majoi biowsei vendoi las implement-
ed a piefixed vaiiant of 5%S4&%(+42%1("-'4# and its two siblings, 04?(
5%S4&%(+42%1("-'4# and 0-2(5%S4&%(+42%1("-'4#. Tlese media
queiies can be used in conjunction witl tle =-&T,"#Q?5(40-,% piopei-
ty to seive Retina-ieady assets to ligl-density devices.
/4&#? <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%/+?,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
.%4,.'9 HDD+2C
345'.9 :DD+2C
G
60%54- #?1* @&"%%? -?5 8(Y%=T4'(04?(5%S4&%(+42%1("-'4#9 E/F;L
#?1* @&"%%? -?5 8(0#A(04?(5%S4&%(+42%1("-'4#9 E/F;L
#?1* @&"%%? -?5 8(#(04?(5%S4&%(+42%1("-'4#9 HN:;L
#?1* @&"%%? -?5 804?(5%S4&%(+42%1("-'4#9 E/F; <
/4&#? <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%6:2/+?,;C
G
G
By using a iatio of . instead of z, you can taiget otlei non-Apple de-
vices witl tle same queiy.
What to use it for? Any website oi app tlat uses tle =-&T,"#Q?5(40(
-,% piopeity foi giaplic assets. Not suitable foi content images.
CSS UERYING. PROS CSS UERYING. PROS
Devices download only tlose assets tlat taiget tlem.
Pixel-piecise contiol
CSS UERYING. CONS CSS UERYING. CONS
Tedious to implement, especially on laige websites.
Displaying content images as backgiounds of otlei HTLL elements is
semantically incoiiect.
USING JAVASCRIPT USING JAVASCRIPT

Tle pixel density of tle scieen can be queiied in Javasciipt using 34?(
5#3/5%S4&%!42%1[-'4#, wlicl iepoits tle same value as its CSS coun-
teipait. Once a liglei-density scieen is identified, you can ieplace
eveiy inline image witl its Retina counteipait.
\85#&Q0%?';/"%-5*8>Q?&'4#?8;<
4> 834?5#3/5%S4&%!42%1[-'4# X E; <
S-" 1#3"%@_0-,%@ V \8]40,];C
40-,%@/%-&.8>Q?&'4#?84; <
S-" 1#3"%@ V \8'.4@;/-''"8]@"&];C
S-" .4,."%@ V 1#3"%@/"%+1-&%8W/WL W6:2/W;C
\8'.4@;/-''"8]@"&]L .4,."%@;C
G;C
G
G;C
Retina.js
8
is a Javasciipt plugin tlat implements iouglly tle same
teclnique as desciibed above, witl some additional featuies, sucl as
skipping exteinal images and skipping inteinal images witl no 6:2
counteipaits.
Lastly, it is woitl noting tlat 5%S4&%!42%1[-'4# is not entiiely
cioss-biowsei compatible
p
.
What to use it for? Any website witl content images, sucl as landing
pages and blogs.
JAVASCRIPT UERYING. PROS JAVASCRIPT UERYING. PROS
Easy to implement
Non-Retina devices do not download laige assets.
Pixel-piecise contiol
JAVASCRIPT UERYING. CONS JAVASCRIPT UERYING. CONS
Retina devices lave to download botl standaid- and ligl-iesolution
images.
8. lttp.//ietinajs.com
p. lttp.//www.quiiksmode.oig/blog/aiclives/zoz/o6/devicepixeliati.ltml=linkz
6
Tle image-swapping effect is visible on Retina devices.
Does not woik on some populai biowseis (sucl as IE and Fiiefox).
Scalaclc \cctcr Craphics
Regaidless of tle metlod used, iastei images iemain inleiently con-
stiained by tleii bitmap iesolution, tley weie nevei meant to be infi-
nitely scalable. Tlis is wleie vectoi giaplics lave tle advantage, being
a futuie-pioof way to Retinize" youi Web giaplics.
As of tlis wiiting, tle vectoi XLL-based SVG foimat las cioss-
biowsei suppoit
6o
of moie tlan ,o and can be used in seveial ways on
tle Web. SVG images can be easily cieated in and expoited fiom a
numbei of vectoi-giaplic editois, sucl as Adobe Illustiatoi and fiee al-
teinatives sucl as Inkscape
6
.
As fai as Web design goes, tle most stiaigltfoiwaid way to use SVG
assets is witl tle HTLL 40, tag oi witl tle CSS =-&T,"#Q?5(40-,%
and &#?'%?'9Q"18; piopeities.
U40, @"&VW%2-0+1%/@S,W 345'.VW:DDW .%4,.'VWHDDW NX
In tle example above, a single SVG image can be used as a univeisal as-
set, scaling infinitely up oi down as iequiied. Tlis not only saves pie-
cious bandwidtl (most SVG files tend to be smallei in size tlan
standaid-iesolution PNGs), but also makes youi giaplic assets mucl
easiei to maintain. Tle same would apply if used in CSS.
6o. lttp.//caniuse.com/=seaicl=svg
6. lttp.//inkscape.oig/
,
NO `@4?, =-&T,"#Q?5(40-,% ON
/40-,% <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%/@S,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
.%4,.'9 :DD+2C
345'.9 HDD+2C
G
NO `@4?, &#?'%?'9Q"18; ON
/40-,%(&#?'-4?%"9=%>#"% <
&#?'%?'9 Q"18%2-0+1%/@S,;C
NO 345'. -?5 .%4,.' 5# ?#' 3#"T 34'. &#?'%?'9Q"18; ON
G
If you lave to suppoit IE , oi 8 oi Andioid z.x, tlen you will need a fall-
back solution tlat swaps SVG images witl tleii PNG counteipaits.
Tlis can be easily done witl Lodeinizi
6z
.
/40-,% <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%/+?,;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
G
/@S, <
/40-,% <
=-&T,"#Q?5(40-,%9 Q"18%2-0+1%/@S,;C
G
G
Foi best cioss-biowsei iesults and to avoid some iasteiization
leadacles
6
in Fiiefox and Opeia, make eacl SVG image at least tle
size of its paient HTLL element.
In HTLL, you can implement a similai fallback solution by adding a
custom 5-'- attiibute to youi 40, tag.
U40, @"&VW%2-0+1%/@S,W 5-'-(+?,(>-11=-&TVW%2-0+1%/+?,W NX
Tlen, landle tle iest witl jueiy and Lodeinizi.
6z. lttp.//modeinizi.com/docs/=featuies-misc
6. lttp.//dbuslell.com/zoz/o//svg-all-fun-and-games/
8
\85#&Q0%?';/"%-5*8>Q?&'4#?8;<
4>8ab#5%"?4A"/@S,; <
S-" 40-,%@ V \8]40,c5-'-(+?,(>-11=-&Td];C
40-,%@/%-&.8>Q?&'4#?84; <
\8'.4@;/-''"8]@"&]L \8'.4@;/5-'-8]+?,(>-11=-&T];;C
G;C
G
G;C
Tlis HTLL and JavaSciipt ioute, lowevei, would not pievent biowseis
witl no SVG suppoit fiom downloading tle SVG assets.
What to use it for? Any website oi app. Suitable foi icons, logos and
simple vectoi illustiations.
SVG. PROS SVG. PROS
One univeisal asset foi all devices
Easy to maintain
Futuie-pioof. infinitely scalable vectoi giaplics
SVG. CONS SVG. CONS
No pixel piecision due to anti-aliasing
Unsuitable foi complex giaplics due to laige file sizes
No native suppoit in IE , and 8 oi eaily Andioid veisions
Iccn Fcnts
p
Populaiized by Twittei's Bootstiap
6(
, tle teclnique of using 6>#?'(
>-&% witl icon-based fonts las gaineied a following of its own as a
iesolution-independent alteinative to bitmap icons. Tle teclnique con-
sists of using a custom Web font tlat ieplaces tle alplabet witl mono-
cliome glypls, wlicl can be styled using CSS, just like any otlei text
on tle website.
Tleie is no sloitage
6
of compielensive, good-quality icon fonts
tlat would covei most of youi needs. Tlat being said, impoiting a laige
font in lalf a dozen foimats only to use a small subset of tle icons is a
bad idea. Considei building youi own custom font witl fiee tools sucl
as Fontello
66
, Font Buildei
6,
oi even Inkscape
68
.
Tle most common way to use icon fonts on websites is by assigning
an /4&#? oi /,1*+. class to a paiticulai HTLL element most often a
U@+-?X oi an U4X and tlen using tle lettei coiiesponding to tle de-
siied icon as its content.
U@+-? &1-@@VW4&#?WX-UN@+-?X
Aftei laving impoited youi custom font using 6>#?'(>-&%, you would
declaie it.
/4&#? <
>#?'(>-041*9 ]b* _&#? e#?']C
G
Anotlei teclnique consists of using tle 9=%>#"% pseudo-element and
tle &#?'%?' piopeity, witl a unique class foi eacl icon.
U@+-? &1-@@VW,1*+.(.%-"'WXUN@+-?X
c&1-@@fVW,1*+.(Wd9=%>#"% <
>#?'(>-041*9 ]b* _&#? e#?']C
G
/,1*+.(.%-"'9=%>#"% <
&#?'%?'9 ].]C
G
6(. lttp.//twittei.gitlub.com/bootstiap/
6. lttp.//www.delicious.com/stacks/view/SClpq
66. lttp.//fontello.com/
6,. lttps.//gitlub.com/fontello/font-buildei
68. lttp.//www.Webdesigneidepot.com/zoz/o/low-to-make-youi-own-icon-Webfont/
6o
What to use it for? Websites oi apps witl a ligl numbei of icons, and
foi iapid piototyping.
ICON FONTS. PROS ICON FONTS. PROS
Futuie-pioof. infinitely scalable glypls
Loie flexible tlan giaplic assets. can be used in placeloldei text and
otlei foim elements, etc.
ICON FONTS. CONS ICON FONTS. CONS
No pixel piecision due to subpixel anti-aliasing
Haid to maintain. clanging a single icon iequiies iegeneiating tle
wlole font.
Relies on semantically incoiiect maikup (unless used witl 9=%>#"% oi
9->'%" pseudo-elements).
Faoiccns
Favicons aie getting tleii faii slaie of attention, being incieasingly
used outside of biowsei cliome as an iconic iepiesentation of oui web-
sites and apps. To make youi favicons Retina-ieady, expoit an /4&# file
in botl 6- and z-pixel veisions. If you aie using a Lac, you can cieate
youi own /4&# files witl Apple's Icon Composei (included in tle
Giaplic Tools in Xcode
6p
) oi witl Icon Slate
,o
, a paid tliid-paity appli-
cation.
A Climpsc 0j Thc Futurc
Besides tle teclniques coveied above, seveial otlei effoits aie being
made independently by oiganizations and individuals alike, not tle
least of wlicl is Apple's own (Y%=T4'(40-,%(@%', intioduced
,
last
spiing. Tlis pioposal allows foi
,z
multiple vaiiants of tle same image
to be piovided in one CSS declaiation.
6p. lttps.//developei.apple.com/downloads/
,o. lttp.//itunes.apple.com/us/app/icon-slate/id(p6p,p?mt=z
,. lttp.//tiac.Webkit.oig/clangeset/6,
,z. lttp.//lists.w.oig/Aiclives/Public/www-style/zozFeb/o.ltml
6
/40-,% <
=-&T,"#Q?5(40-,%9 (Y%=T4'(40-,%(@%'8Q"18%2-0+1%/+?,; E2L
Q"18%2-0+1%6:2/+?,; :2;C
=-&T,"#Q?5(@4A%9 :DD+2 HDD+2C
G
Tlis teclnique does not, lowevei, covei images inside 40, tags, and it
is Webkit-only as of tlis wiiting.
Anotlei notable effoit is Scott Jell's Pictuiefill
,
, an HTLL and
Javasciipt solution tlat makes leavy use of 5-'- attiibutes and media
queiies to seive diffeient images in diffeient media contexts.
U54S 5-'-(+4&'Q"%X
U54S 5-'-(@"&VW%2-0+1%/+?,WXUN54SX
U54S 5-'-(@"&VW%2-0+1%6:2/+?,W
5-'-(0%54-VW804?(5%S4&%(+42%1("-'4#9 E/F;WXUN54SX
Ua(( e-11=-&T &#?'%?' >#" ?#?(gh ="#3@%"@ ((X
U?#@&"4+'X
U40, @"&VW%2-0+1%/+?,W X
UN?#@&"4+'X
UN54SX
Even if tle maikup puts you off, it is a good cioss-biowsei solution to
considei if you aie dealing witl few content images.
Last but not least, tle ambitious +4&'Q"% element pioposal
,(
aims
to biing iesponsive images to tle Web using a maikup-only appioacl
foi multiple image souices, coupled witl media queiies tlat ioute eacl
device to tle iiglt asset.
CLOSING WORDS CLOSING WORDS
Like otlei majoi slifts
,
tle Web is cuiiently undeigoing, attaining
iesolution independence will be a long jouiney. As Web designeis and
developeis, eitlei we can sit down and wait passively foi a convention
to be standaidized, oi we can immediately stait offeiing a pleasuiable
viewing expeiience to oui useis. Let's get to woik. !
,. lttps.//gitlub.com/scottjell/pictuiefill
,(. lttp.//www.w.oig/community/iespimg/wiki/Pictuie_Element_Pioposal
,. lttp.//iobots.tlougltbot.com/post/zz88ppo,/designing-foi-toucl
6z
?=.%3%&+ /0) E%'F288* GF
-$))
BY DLITRY FADEYEV BY DLITRY FADEYEV !!
Lisaligned inteiests cieate tension in tle design piocess tlat can lead
to bad, and potentially unetlical, design decisions, tlat iesult in infeii-
oi pioducts. In tlis claptei I will examine low tle desiie to build a
laige audience by giving away youi pioducts and seivices fiee of
claige can cause conflicts of inteiest, wlicl in tuin can lead to dubious
compiomises in tle design piocess tlat limit tle full potential of youi
woik.
Tle iecently launcled Twittei competitoi, App.net
,6
, wlicl las
iaised ovei 8oo,ooo in tle fiist montl of fund-iaising/pie-sales, las
staited its life as a simple piemise. Twittei doesn't woik because tle in-
teiests of tle company and its useis, along witl tle developeis cieating
apps foi its platfoim, aie not aligned. Tley'ie not aligned because as a
fiee pioduct Twittei doesn't make money fiom its eveiyday useis and
developeis, and tlus does not lold any obligation towaids tlem. Like
most otlei fiee Web seivices, Twittei is building its business model on
adveitising, tle adveitisei becoming tle customei, and its useis, blunt-
ly put, tle pioduct.
Wlile it is possible tlat tle inteiests of tle multiple paities you aie
tiying to satisfy witl youi pioduct oi seivice oveilap, it is likely tlat
tleie aie also diffeiences in wlat tley want. In tlose cases wleie tle
inteiests vaiy, tle pioduct designei will lave to pick tle paity wlose
inteiests will take piecedence in tleii design decisions.
Foi example, if you build an audience of useis tliougl a fiee piod-
uct and tlen go on to sell adveitising, tleie may aiise a conflict of in-
teiests on tle issue of piivacy. Tle adveitisei benefits fiom knowing
moie about tle useis, wlile some useis may wisl to keep tleii infoi-
mation to tlemselves. Tle two conflicting inteiests foice tle designei
to pick a side, eitlei to pusl foi moie infoimation slaiing in oidei to
make tle most out of adveitising, oi to take a stand on tle piivacy of
tleii useis wlile losing tle potential foi moie adveitising ievenue. If
tley decide to give away usei infoimation witlout tleii peimission
tley will also be giving away tleii useis' tiust, along witl tleii own in-
tegiity.
,6. lttp.//www.app.net
6
Ncthinq Is Frcc
All woik iequiies compensation, wletlei monetaiy oi otleiwise.
Sometimes we cloose to woik foi fiee, in iegaids to money, but tlat
cloice is always based on some otlei foim of compensation. Wlen we
give someone a gift, we ieceive emotional compensation in ietuin be-
cause tle action of giving a gift satisfies oui desiie to please someone
we caie about. We may give a gift to somebody we do not know, but
tlis also woiks tle same way, pioviding us witl emotional nouiisl-
ment tlat satisfies a compassionate soul. Sometimes we cieate woik
foi ouiselves, tlat is, we woik on sometling because we enjoy tle cie-
ative piocess itself, tle woik being its own goal. In tlose cases, tle
piocess, togetlei witl tle end pioduct, aie oui compensation.
An aitist may woik on a painting foi its own sake, tle woik being its
own iewaid, but tley will not woik foi fiee wlen commissioned to pio-
duce a piece foi somebody else, unless of couise tley lave tle desiie to
piesent tle woik as a gift, in wlicl case tley must know tle peison
tley aie woiking foi well enougl and caie about tlem enougl to feel
tlat tle emotional iewaid outweigls tle toil. Wlen tlis is not tle case,
wlen tley do not wisl to give away tleii woik as a gift, tley will seek
monetaiy compensation, foi even tlougl tley may enjoy tle piocess
of cieation itself, tle act of giving away tleii finisled woik and tleii
timeand tlus, a little of tleii lijciequiies faii compensation.
Developeis of today's fiee Web apps and sites do not know tleii useis
well enougl in oidei to give away tleii woik as a gift. Tle bond be-
Thc dcsiqncr's dilcmma lics cjtcn in thc dijjicult chcicc cctuccn mcnctary paymcnt and
satisjacticn cj a jcc ucll dcnc. Imaqc cy 0pcnscurccuay
,,
.
,,. lttp.//www.flicki.com/plotos/opensouiceway/(86zpzo,p/sizes/m/in/plotostieam/
AVOIDING THE PITFALLS OF FREE
6(
tween tlem and tle iecipient is not so stiong as to geneiate enougl de-
siie in tleii leaits to wisl to give away tleii woik foi fiee. One excep-
tion to tlis is tle open souice movement, in wlicl case tle woik is giv-
en away as a gift, tlougl tle compensation las less to do witl tle ie-
cipient tlan witl tle intended function of tle woik.
Open souice softwaie is fiist and foiemost cieated to satisfy a cei-
tain goal tlat tle developei las, and tle fulfillment of tlis goal is ie-
waid enougl foi tlem. Tley tlen ielease tleii woik into tle woild and
may deiive fuitlei benefit, like patcles to tle softwaie and piestige foi
tlemselves, but tlis fuitlei benefit is only an extia, only tle icing foi
tle cake wlicl las alieady been eaten. In a few cases tle softwaie
takes off and giows at a iapid pace, but tle initial compensation las al-
ieady been paid in giving tle developei wlat tley wanted wlen tley
fiist set off to cieate it.
Contiast tlis witl fiee pioducts and seivices tlat aie nct open
souice. Tlose pioducts aie given away fiee of claige, but tley aie not
given away fiee fiom tle makei's desiie foi compensation. Since com-
pensation does not come fiom tle useis it is souglt elsewleie.
Adocrtisinq. A Catcuay Tc ccnjlict 0j Intcrcsts
Typically, tlis patl leads to adveitising. If tle useis aien't going to pay
foi tleii pioduct, tle adveitisei will pay foi tle useis. Tle pioduct de-
velopei begins to intioduce ads and otlei foims of sponsoislip deals.
Tlis cieates a conflict of inteiests. On one land, tle pioduct seives a
specific puipose foi tle usei, on tle otlei, an ulteiioi motive is intio-
duced in tle foim of adveitising, wlicl in tuin uses tle pioduct as a
means to sell sometling else, tle pioduct itself being ielegated to tle
status of a piomotional velicle. Tle focus of tle pioduct is split in two.
. it must woik to peifoim a ceitain function foi tle usei, and
z. it must get tle usei to click on an ad.
Wlile it is possible to keep tlese two goals sepaiate, in many situations
tley aie not mutually exclusive, wlicl foices tle designei to pick sides
and make compiomises.
Some pioduct designeis and developeis pioceed to mask tlis con-
flict of inteiests by pietending tlat tle two goals don't actually point in
diffeient diiections, and tlat tleii piimaiy focus is always on making
tle best pioduct possible, wlicl in tuin biings tlem moie useis, and
tlus moie adveitising money, tle lattei being tle outcome of tle foi-
mei.
6
Tlis stance is taken foi two ieasons. Fiist, telling useis tlat tley aie
tle pioduct is not going to go well witl tlem, and neitlei will admit-
ting tlat you aie compiomising design decisions tlat impiove tle
pioduct to tle advantage of tle usei foi design decisions tlat only ben-
efit tle adveitiseis.
Second, tlis viewpoint may even be a subconscious ieaction to tle
innei dilemma tlat tle pioduct designei las to face wlen tley aie
foiced to pick between two oi moie conflicting inteiests. A good de-
signei does not want to compiomise tleii integiity. Tley want to make
tle best pioduct tley can, wlicl means a pioduct tlat best seives its
piimaiy puipose, tlat is, its function foi its useis, so tley tiy to iesolve
tle conflict witl a diffeient explanation.
But tlis doesn't woik. You can pietend tle conflict of inteiests isn't
tleie but tlat will not make it disappeai. Foi example, Twittei iecently
began to pusl back on developeis wlo make apps foi tleii platfoim by
limiting access
,8
, enfoicing display iequiiements
,p
, and foiming guide-
lines
8o
foi wlat soit of apps tley want to see on tle platfoim, and wlat
soit of apps tley don't. Apps tlat aie seen to compete witl Twittei's
main offeiing, i.e. consumei micio-blogging, aie discouiaged.
Sincc Tuittcr rclics cn adocrtisinq, it had tc makc quitc unpcpular dccisicns rcccntly.
Thc ccmpany limitcd acccss, cnjcrcinq display rcquircmcnts, and jcrminq quidclincs jcr
uhat scrt cj apps thcy uant (and dcn't uant tc scc cn thc platjcrm.
,8. lttp.//teclciuncl.com/zoz/o,/z6/no-api-foi-you-twittei-sluts-off-find-fiiends-featuie-
foi-instagiam/
,p. lttps.//dev.twittei.com/teims/display-iequiiements
8o. lttps.//dev.twittei.com/blog/clanges-coming-to-twittei-api
66
Twittei's initial goal was tle cieation of a simple micio-blogging
seivice, wlicl tley've allowed to evolve into diffeient foims to suit its
many uses. But now, laving to face tle ieality of needing to make tle
seivice pay, tley tuin to adveitising, and in tuin aie foiced to enact
mucl gieatei contiol ovei low tle usei inteiacts witl tleii pioduct in
oidei to ieslape tle seivice into a viable adveitising clannel. Now,
tleie is notling wiong witl Twittei taking tle adveitising ioute to
make money. Tlat's not tle issue. Wlat's wiong is tle situation in
wlicl tley find tlemselves, laving to stiike a compiomise between
tle needs of tle adveitisei and tle needs of tle many developeis of
Twittei apps wlo lave lelped get tle seivice to wleie it is today.
Twittei does not teclnically owe anytling to tlose developeis, but
to pusl tlem aside wlen you've ieaped tle iewaids of tleii laboi is not
a decent tling to do. Tle ioots of tle pioblem aie uncleai commit-
ments, wlicl lave been tleie fiom tle veiy beginning. If tle develop-
eis paid foi tle seivice, Twittei could woik witlout lesitation on deliv-
eiing tlem tle best platfoim and API foi tleii apps. Witlout tlis com-
mitment, tle vaiious paities woik togetlei on a foggy peiception of
aligned inteiests, only to latei find tlemselves in tiouble wlen tley
discovei tlat tleii inteiests aien't so aligned aftei all.
Tlen we lave tle pioblems witl piivacy bieacles tlat pop up all
tle time witl seivices like Facebook and Google (Wikipedia las wlole
pages dedicated to listing ciiticisms of tle two companies, leie's one
foi Facebook
8
, and one foi Google
8z
). Once again, tlese companies
don't make money selling a seivice to tle end usei, tley make money
fiom selling adveitising. Tlis cieates a conflict wleie tle pioduct de-
velopei las to decide wletlei to focus on satisfying tle needs of tle
usei, oi making tle seivice moie luciative to adveitiseis by sometimes
bieacling tle piivacy of tleii useis. Tle issue would not exist if people
paid foi tleii seaicl seivice oi foi tleii social netwoik, wlicl would ie-
move tle adveitisei fiom tle equation and let tle company focus solely
on deliveiing tle best pioduct foi tle usei, but as tlis isn't tle case, we
aie left in a situation wleie tle inteiests of one paity aie compiomised
foi tle inteiests of anotlei.
Tleie aie also tle ieally obvious dislonest design decisions used in
social games like tlat of 7ynqa, wlose inteiests lie in piomoting tle
pioduct in oidei to pull in moie useis iatlei tlan actually making a
qccd pioduct. Foi example, tley lave a dialog piompt witl only one
button
8
tlat says Okay". Tle dialog asks tle usei wletlei tley will
8. lttp.//en.wikipedia.oig/wiki/Ciiticism_of_Facebook
8z. lttp.//en.wikipedia.oig/wiki/Ciiticism_of_Google
8. lttp.//fliitatiouslabs.com/post/(oz,,/zynga-game-viius-faimville-z
6,
give tle app gieatei access to tleii Facebook timeline, i.e. let it make
posts on tle usei's belalf, but tleie is no option to close tle dialog, only
to agiee witl it.
Upon clicking tle button, tle actual Facebook peimission box pops
up wlicl lets tle usei decide wletlei oi not tley wisl to give tlese
peimissions to tle app, but because tle pievious box las alieady condi-
tioned tlem to agiee, tley aie moie likely to simply click Okay" again
in oidei to pioceed, iatlei tlan stop to make a conscious decision.
On tle one land, tle designei is tasked witl cieating an infoimative
dialog box meant to lelp tle usei make a iational decision, on tle otl-
ei, tley aie tasked witl cieating a dialog box wlicl will manipulate tle
usei into acceptance, and because tley aie not committed to deliveiing
tle best seivice tley can foi tle usei, tley pick tle lattei. Tle inteiest-
ing tling witl 7ynqa is tlat tley actually do make money fiom tleii
useis, but tley do so only fiom tle small peicentage
8
wlo pay, not
fiom tle wlole usei base. Tlis means tlat to make money tley lave to
captuie masses of useis, like diopping laige fisling nets into tle ocean
A manipulatioc 7ynqa
8(
prcmpt. Thc tuc cuttcns, Acccpt" and canccl", arc accut
sharinq a mcssaqc uith ycur jricnds, cut thc ucrdinq makcs it sccm as ij thcy arc tc dc
uith acccptinq thc rcuard itsclj.
8(. lttp.//zynga.com/
8. lttp.//www.ieuteis.com/aiticle/zo/z/o8/us-zynga-ipo-idUSTRE,B,z(Uzozo8
68
to catcl tle few wlales" (tle teim used in tle industiy foi laige
spendeis) along witl a pile of bycatcl.
Lastly, considei all tle online blogs and magazines tlat ciam tleii
pages witl ads leaving no ioom foi tle content, and also tle content it-
self, wlicl takes tle evei moie sensationalist natuie by tle day, its only
puipose being to biing in moie page views, not to enliglten ieadeis.
Foi example, Thc Hujjinqtcn Pcst split tests leadlines
86
to aiiive at tle
one tlat biings in tle most lits, tleieby tiading tle expeiience and
judgement of tle autloi foi tle impulses of tle masses. Because tle
ieadei is not tle one paying, tlese sites lold little loyalty towaids tlem,
leading to design decisions tlat optimize foi page views and ad clicks
iatlei tlan foi tle cieation of tle best possible ieading expeiience.
Sucl sites also like to intioduce design tiicks like pagination, tle goal
of wlicl is to once again boost page views, wlile tley tiy unsuccessful-
ly to convince us tlat clicking multiple times on a set of small page
links somelow leads to a bettei usei expeiience.
Tle conflict of inteiests tlat aiises natuially in fiee pioducts deiails
tle designei's coie goal of making a gieat pioduct, tlat is, a pioduct
tlat aims to fulfill its piimaiy puipose of satisfying tle usei as best as
possible. Loyalty to multiple paities witl dispaiate goals is impossible,
wlicl leads to fiiction in design decisions and in tle soul of tle design-
ei, foicing tlem to make dubious compiomises in tleii woik. Eacl
small compiomise doesn't seem like a big deal, a little manipulative
foim box leie, a tiny bieacl of piivacy tleie, but iemembei tlat tle fi-
nal pioduct is tle sum of its paits, and so in tle end, tle multitude of
small compiomises add up into a substantial wlole.
Ij ccmprcmisc Isn't An 0pticn, Frcc Is Nct A
Scluticn
A compiomise is a concession on tle pait of all tle paities involved, not
just some, and you cannot compiomise on piinciples witlout destioy-
ing tlem altogetlei. Foi example, tleie can be no compiomise between
tiutl and falselood foi you cannot make sometling just a littlc lcss tiue.
In tle same way, suiiendeiing youi useis' piivacy oi manipulating
tlem into taking an action foi youi own gain is to suiiendei youi lon-
esty, and in tuin, a pait of tle moial foundation upon wlicl youi woik
is built.
Wlenevei you feel a tension in making a design decision tlat you
tlink is caused by a conflict of inteiest, ask youiself exactly wlat com-
86. lttp.//www.mondaynote.com/zoz/o,/o8/tiansfei-of-value/
6p
piomise you'ie asked to make. Aie you asked to make a faii concession
between one paity and anotlei fiom wlicl botl will deiive benefit, oi
aie you asked to take sometling fiom youi useis witlout tleii peimis-
sion, oi make tlem do sometling tley lave not agieed to do? Aie you
asked to make a decision tlat will compiomise tle integiity of youi
woik?
Faced witl tlis dilemma, wlat do you do? Tle answei is simple, and
is tle veiy tling you slould lave been doing all along. claige money
foi youi pioducts. By selling youi woik instead of giving it away foi
fiee youi inteiests and tlose of youi customeiswlo aie no longei
just uscrsaie aligned. tley piovide you witl tle compensation foi
youi woik, not some outside paity, leaving you fiee to focus on delivei-
ing tle best pioduct, foi thcm. Tlis is not only moial in tlat you no
longei lave to compiomise tle inteiests of one paity foi tlose of an-
otlei, it is also a mucl simplei solution. You make a pioduct and sell it
diiectly to tle customei, no need foi otlei paities, noi conflicting intei-
ests, noi dubious design decisions.
It woiks, too. A gieat example is tle App.net
88
pioject wlicl I've men-
tioned at tle stait of tle claptei. Its cieatoi, Dalton Caldwell, wasn't
satisfied witl tle way Twittei was tieating its developeis, so le set off
to cieate lis own micio-messaging seivice, witl tle diffeience being
App.nct
8,
prcclaims adjrcc sccial nctucrkinq in thcir canncr. Fccausc thc mcmccrship
jccs arc placcd riqht ncxt tc it, thc uscr ncocr ucndcrs uhcrc thc catch is.
8,. lttps.//join.app.net/
88. lttp.//www.app.net
,o
tlat tlis seivice would be paid foi at tle outset by its useis and devel-
opeis. Caldwell set a minimum of oo,ooo foi lis fundiaising montl
duiing wlicl people could sign up foi a yeai of seivice to a pioduct
tlat didn't yet exist.
In just a montl le iaised ovei 8oo,ooo and las launcled an alpla
veision of tle seivice. His ciitics lave been saying tlat nobody would
evei pay foi a Twittei-like seivice, but cleaily tleie is enougl value
tleie foi some to sign up foi a paid alteinative. It is fai too eaily to
judge tle futuie of tle ventuie, but tle initial fundiaising success
slows tlat people aie piepaied to pay foi seivices tley caie about, even
witl tle piesence of fiee, establisled alteinatives.
charqinq Fcr 0nlinc ccntcnt \crks
On Decembei otl zo, tle stand-up comedian Louis C.K. decided to ie-
lease lis full-lengtl special Iioc at thc Fcaccn Thcatcr on lis website as a
DRL-fiee download foi . Two weeks latei, sales fiom tlis self-pub-
lisled special exceeded million
8p
. Tle download was DRL-fiee,
meaning tlat people could easily piiate it, but given tle faiiness of tle
piice and tle package tlat ioute just wasn't woitl it. Yes, not eveiyone
can ie-cieate tle success of Louis C.K., but tlat's not tle point. Of
couise to diive pioduct sales you need to geneiate enougl excitement
and inteiest tlat's tle job of maiketing. Tle point is tlat selling digi-
tal goods on tle Web is possible, and, wlen you lave sometling people
genuinely want, can be veiy luciative. Tle success of Louis C.K. las
since inspiied otlei comedians
po
, namely Aziz Anasaii and Jim Gaffi-
gan, to adopt a similai distiibution model.
Last yeai, Thc Ncu Ycrk Timcs put up a paywall aiound its online aiti-
cles. Tle paywall allowed visitois to iead o aiticles a montl fiee of
claige, but iequiied a paid subsciiption foi subsequent access. Tle im-
plementation of tle wall was veiy poious, meaning tlat it was veiy
easy to get past it witl a vaiiety of simple steps, and so many ciitics be-
lieved tlat people wouldn't be fooled into a paid subsciiption. Just foui
montls aftei tle implementation of tle paywall, zz(,ooo ieadeis
p
lave alieady signed up to tle paid subsciiption, not fai sloit of tle
company's goal of ieacling oo,ooo subsciibeis witlin a yeai. Com-
bined witl sign-ups tliougl otlei clannels, sucl as Kindle and Nook
subsciiptions, tle total of digital subsciibeis iose to aiound (oo,ooo. Al-
8p. lttps.//buy.louisck.net/news/anotlei-statement-fiom-louis-c-k
po. lttp.//www.foibes.com/sites/iyanloliday/zoz/o/o/inside-tle-ieddit-ama-tle-
inteiview-ievolution-tlat-las-eveiyone-talking/
p. lttp.//nymag.com/news/media/new-yoik-times-zo-8/
,
tlougl tlis numbei still makes up a small poition of tle newspapei's
ievenues, it liglliglts lealtly giowtl and pioves tlat claiging foi on-
line content can woik, even in tle face of eveiyone else giving tleiis
away foi fiee.
Otlei newspapeis like Thc \all Strcct }curnal and Thc Eccncmist success-
fully use tle same model by keeping most of tleii content accessible
only to paid subsciibeis. Wlen you claige youi ieadeis foi content,
you no longei need to iun aftei page views by cieating sensationalist
woik, noi does youi website need to tiy and squeeze evei moie page
loads out of eacl visitoi tliougl design tiicks like pagination. Once
youi ieadeis lave subsciibed and paid, tley'ie going to iead wlat you
lave to say no mattei low attention giabbing oi plain youi leadlines
aie, fieeing youi autlois and jouinalists to focus on cieating woik tlat
enligltens youi ieadeis, not slallow content designed to spiead.
Foi an example of design ielated publisling considei tle success of
Natlan Baiiy and Sacla Giief, wlose two eBooks combined lave made
tlem p,ooo
p
woitl of ievenueand aie still selling. Bloggeis like to
give away tleii expeiience foi fiee, and wlile tlis is gieat foi tle iead-
eis, it doesn't lelp pay tle autloi's bills. Some put up a few ads on tleii
site, but unless tley consistently geneiate a lot of tiaffic, tle ievenue
Thc Ncu Ycrk Timcs
pz
payuall prcmpt. Eocn thcuqh thcrc arc simplc tricks tc qct past
it, many pccplc still prcjcr tc pay jcr thcir ccntcnt.
pz. lttp.//www.nytimes.com/
p. lttp.//saclagieif.com/low-natlan-baiiy-and-i-sold-pk-woitl-of-ebooks/
,z
geneiated by tle ads won't amount to mucl. Instead of clasing aftei
adveitising pennies, wly not package youi expeiience into a book? If
youi audience is tecl savvy, you won't even need to piint tle
bookjust offei a DRL-fiee eBook package tlat youi ieadeis will be
able to consume on any device of tleii cloice. Tle success of Baiiy and
Giief slows tlat people aie ieady and willing to pay foi good content,
you just lave to give tlem tle oppoitunity to do so.
As foi an example of well implemented adveitising, considei Thc
IEcI
p(
ad netwoik, wlicl includes some of tle top tecl sites aiound
tle Web like tle Siqnal os. Ncisc blog fiom ,signals, Iriccclc, Instapapcr,
A Iist Apart and many moie. Tle ad netwoik uses a veiy unobtiusive zo
po pixel bannei, witl a sentence oi two of text undeineatl. Its small
size slows iespect foi tle end usei by keeping adveitising witlin stiict
limits. It's a subtle way to adveitise wlicl las inspiied otlei netwoiks
to offei tle same foimat, sucl as AdPacks fiom FuyScllAds. Tlis small
foimat won't woik foi eveiyonemost of tle sites tlat use Thc IEcI
iely on otlei souices of ievenuebut it is a good way to delivei a
cleanei expeiience foi tle usei wlile still pioviding an adveitising
clannel.
Summinq Lp
Fiee pioducts tlemselves aie not tle pioblem. We give gifts all tle
time and tle giving of tlem to tle people we caie about is iewaid
enougl foi us. Tle pioblem is tle giving away of fiee pioducts and sei-
vices wlile still expecting compensation. If tle compensation does not
come diiectly fiom tle usei, tle developei pioceeds to extiact it by otl-
ei means, wlicl usually involves biinging in otlei paities to tle table,
leading to a conflict of inteiests. Wlen tle inteiests of tle usei and tle
pioduct makei aie not aligned, not only do you get a neglect in tle fea-
tuie set, but a pioduct of a wlolly diffeient natuie. Tle conflict is not
just exteinal, it exists inside tle mind of tle designei, and a battle is
fouglt eveiy time tley aie put into a situation wleie tley lave to limit
tleii full cieative potential by compiomising tle inteiests of tle usei.
It doesn't lave to be tlis way. People will pay foi design and content
cieated to seive tlem, not to exploit tlem. People lave paid foi cen-
tuiies, and tley will continue paying foi goods and seivices tlat give
tlem value. Instead of picking tle patl of fiee design, take tle ioad of
moial designdesign fiimly based on tle moial values tlat guide youi
life and youi woik. By tuining youi useis into youi customeis you
eliminate tle conflict of inteiests and tlus fiee youi mind to woik fully
p(. lttp.//decknetwoik.net
,
on tle pioblem at land, and any compiomises tlat you make will be ie-
al and faii compiomises, tlat is, design judgements tlat impiove youi
pioduct by taking it in tle diiection you want it to go, not dubious
cloices tlat suiiendei youi values, limit youi cieativity and ciipple
youi woik. !
,(
D0H I*)$ 45#)$%)&6)
J2&&.' 9) ()*%+&)3
BY HELGE FREDHEIL BY HELGE FREDHEIL !!
A lot of designeis seem to be talking about usei expeiience (UX) tlese
days. We'ie supposed to deliglt oui useis, even piovide tlem witl
magic, so tlat tley love oui websites, apps and stait-ups. Usei expeii-
ence is a veiy bluiiy concept. Consequently, many people use tle teim
incoiiectly. Fuitleimoie, many designeis seem to lave a fiim (and of-
ten uniealistic) belief in low tley can ciaft tle usei expeiience of tleii
pioduct. Howevei, UX depends not only on low sometling is designed,
but also otlei aspects. In tlis claptei, I will tiy to claiify wly UX can-
not be designed.
Hctcrcqcnccus Intcrprctaticns cj LX
I iecently visited tle elegant website of a design agency. Tle website
looked gieat, and tle agency las been slowcased seveial times. I am
suie it deliveis ligl-quality pioducts. But wlen it piesents its UX
woik, tle agency talks about UX as if it weie equal to infoimation ai-
clitectuie (IA). site maps, wiiefiames and all tlat. Tlis may not be fun-
damentally wiong, but it naiiows UX to sometling less tlan wlat it ie-
ally is.
Tle peiception miglt not be iepiesentative of oui industiy, but it il-
lustiates tlat UX is peiceived in diffeient ways and tlat it is sometimes
used as a buzzwoid foi usability (foi moie, see Hans-Cliistian Jettei
and Jens Geiken's aiticle A simplified model of usei expeiience foi
piactical application
p
"). But UX is not only about luman-computei in-
teiaction (HCI), usability oi IA, albeit usability piobably is tle most im-
poitant factoi tlat slapes UX.
Some ieseaicl indicates tlat peiceptions of UX aie diffeient. Still,
eveiyone tends to agiee tlat UX takes a bioadei appioacl to communi-
cation between computei and luman tlan tiaditional HCI (see Effie
Lai-Clong Law et al's aiticle Undeistanding, scoping and defining usei
expeiience. a suivey appioacl
p6
"). Wleieas HCI is conceined witl task
solution, final goals and aclievements, UX goes beyond tlese. UX takes
otlei aspects into consideiation as well, sucl as emotional, ledonic,
p. lttp.//www.inf.uni-konstanz.de/gk/people/membei/abstiact.ltml?JeGeo6
p6. lttp.//poital.acm.oig/citation.cfm?id=88
,
aestletic, affective and expeiiential vaiiables. Usability in geneial can
be measuied, but many of tle otlei vaiiables integial to UX aie not as
easy to measuie.
Hasscnzahl's Mcdcl 0j LX
Seveial models of UX lave been suggested, some of wlicl aie based on
Hassenzall's model
p,
. Tlis model assumes tlat eacl usei assigns some
attiibutes to a pioduct oi seivice wlen using it. As we will see, tlese at-
tiibutes aie diffeient foi eacl individual usei. UX is tle consequences
of tlese attiibutes plus tle situation in wlicl tle pioduct is used.
Tle attiibutes can all be giouped into foui main categoiies. manipu-
lation, identification, stimulation and evocation. Tlese categoiies can,
on a liglei level, be giouped into piagmatic and ledonic attiibutes.
Wleieas tle piagmatic attiibutes ielate to tle piactical usage and func-
tions of tle pioduct, tle ledonic attiibutes ielate to tle usei's psyclo-
logical well-being. Undeistanding tle divide can lelp us to undeistand
low to design pioducts witl iespect to UX, and tle split also claiifies
wly UX itself cannot be designed.
Hasscnzahl's Mcdcl cj Lscr Expcricncc".
p,. lttp.//smasled.by/lassenzall
WHY USER EXPERIENCE CANNOT BE DESIGNED
,6
LANIPULATION LANIPULATION
In tlis model, tle piagmatic attiibutes ielate to manipulation of tle
softwaie. Essentially, manipulation is about tle coie functionalities of a
pioduct and tle ways to use tlose functions. Typically, we ielate tlese
attiibutes to usability. A consequence of piagmatic qualities is satisfac-
tion. Satisfaction emeiges if a usei uses a pioduct oi seivice to aclieve
ceitain goals and tle pioduct oi seivice fulfills tlose goals.
Examples of attiibutes tlat aie typically assigned to websites (and
softwaie in geneial) aie suppoiting," useful," cleai" and contiol-
lable." Tle puipose of a pioduct slould be cleai, and tle usei slould un-
deistand low to use it. To tlis end, manipulation is often consideied
tle most impoitant attiibute tlat contiibutes to tle UX.
IDENTIFICATION IDENTIFICATION
Altlougl manipulation is impoitant, a pioduct can lave otlei func-
tions as well. Tle fiist of tlese is called idcntijicaticn. Tlink about it.
many of tle items connected to you iiglt now could piobably be used
to get an idea of wlo you aie and wlat you caie about, even tlougl
some of tlem would be moie impoitant oi desciiptive tlan otleis. Tle
secondaiy function of an object is to communicate youi identity to otl-
Hasscnzahl cxplains thc hcdcnic and praqmatic qualitics uith a hammcr mctaphcr. Thc
praqmatic qualitics arc thc juncticn and a uay jcr us tc usc that juncticn. Hcucocr, a
hammcr can alsc haoc hcdcnic qualitics, jcr instancc, ij it is uscd tc ccmmunicatc prc
jcssicnalism cr tc clicit mcmcrics. (Imaqc. \clc Stcoc
p8
p8. lttp.//www.flicki.com/plotos/junioivelo/((pozo(/
,,
eis. Tleiefoie, to fulfill tlis function, objects need to enable useis to ex-
piess tlemselves.
Tle giowtl of social media can be explained by tlis identification
function. Pieviously, we used peisonal websites to tell tle woild about
oui lobbies and pets. Now, we use social media.
Facebook, blogs and many otlei online seivices lelp us to commu-
nicate wlo we aie and wlat we do, tle pioducts aie designed to sup-
poit tlis identification need. LySpace, foi example, takes advantage of
tlis identification function, it allows useis to customize tleii piofiles
in oidei to expiess tlemselves. WoidPiess and otlei platfoims let blog-
geis select tlemes and expiess tlemselves tliougl content, just as
useis do tliougl status updates on Facebook, Twittei and all tle otlei
social platfoims out tleie.
STILULATION STILULATION
Tle Paieto piinciple
pp
, also known as tle 8o-zo iule, states tlat 8o of
tle available iesouices aie typically used by zo of tle opeiations
oo
. It
las been suggested, tleiefoie, tlat in tiaditional usability engineeiing,
featuies slould lave to figlt to be included
o
, because tle vast majoii-
ty of tlem aie iaiely used anyway.
Tlis is necessaiily not tle case witl UX, because iaiely used func-
tions can fill a ledonic function called stimulation. Raiely used func-
tions can stimulate tle usei and satisfy tle luman uige foi peisonal
development and moie skills. Ceitain objects could lelp us in doing so
by pioviding insiglts and suipiises.
Cmail nctijics uscrs uhcn thcy jcrqct tc attach a jilc tc an cmail.
pp. lttp.//en.wikipedia.oig/wiki/Paieto_piinciple
oo. lttp.//en.wikipedia.oig/wiki/Optimization_(computei_science)=Bottlenecks
o. lttp.//www.smaslingmagazine.com/zoop/o/o,/minimizing-complexity-in-usei-intei-
faces/
,8
Fiom tlis peispective, unused functions slould not be diopped
fiom softwaie meiely because tley aie used once in a blue moon. If
tley aie kept, tley could one day be discoveied by a usei and give tlem
a suipiise and positive usei expeiience. As a iesult, tle usei miglt
tlink Wlat a biilliant application tlis is!" and love it even moie.
In fact, tlis is exactly wlat I tlouglt (and found myself tweeting
oz
)
wlen Gmail notified me tlat I lad foigotten to attacl tle file I'd men-
tioned in an email. If you do a Twittei seaicl foi gmail attaclment
o
,"
you'll piobably find many otleis
o(
wlo
o
feel
o6
tle
o,
same
o8
.
Fuitleimoie, I tlink Pietty cool!" wlen YouTube enlances its pies-
ence by modifying its logo on Supei Bowl Sunday (oi Valentine's Day).
I also discoveied sometling new wlen LailClimp's monkey wlis-
peied, Psst, Helge, I leaid a iumoi" and linked me to a Bananaiama
song
op
on YouTube. Tleie aie many examples, but tle best stimulat-
ing" functions aie piobably tlose tlat aie unexpected but still welcome
(like tle Gmail notification).
EVOCATION EVOCATION
Scuocnirs tcnd tc haoc ucak manipulatioc qualitics, cut thcy can cc coccatioc uhcn
thcy clicit mcmcrics. (Imaqc. mcddyqarnct
o
oz. lttp.//twittei.com/=!/lelgefiedleim/status/(6pzo86o(6o((
o. lttp.//twittei.com/=!/seaicl/gmailzoattaclment
o(. lttp.//twittei.com/=!/JavaSTL/status/p86p6,pp866(
o. lttp.//twittei.com/=!/TwittyTiacie/status/zz,o((,((z
o6. lttp.//twittei.com/=!/c_wolf/status/zo6pp8pz
o,. lttp.//twittei.com/=!/meifein_c/status/zo6zzpozp,6o
o8. lttp.//twittei.com/=!/tweetneal/status/o688,,(z,(
op. lttp.//www.youtube.com/watcl?v=IddaRTuYRW(
o. lttp.//www.flicki.com/plotos/meddygainet/((8zz,,/
,p
Tle fouitl function tlat a pioduct can lave, accoiding to Hassenzall's
model
, is evocation, wlicl is about iecalling tle past tliougl memo-

iy. We enjoy talking and tlinking about tle good old days (even yestei-
day), and we want objects to lelp us witl tlis. Even weiid, dusty and
piactically useless souveniis (witl weak manipulative qualities) lave
evocative function because tley lelp us to iecall tle past.
In design, we can ceitainly give a website a vintage look and feel to
iemind us of oui clildlood, ligl sclool oi tle '6os oi tle 'os. But
even websites witl a modein and minimalist design can lave evocative
attiibutes. Foi instance, don't Facebook and Flicki (by way of tleii
useis and youi fiiends) piovide you witl a luge numbei of pictuies
fiom tle past, some of wlicl aie liglly evocative?
Thus, LX cannct Fc Icsiqncd
Having said all tlis, wly is it aigued tlat UX cannot be designed? It's
because UX depends not only on tle pioduct itself, but on tle usei and
tle situation in wlicl tley use tle pioduct.
YOU CANNOT DESIGN THE USER YOU CANNOT DESIGN THE USER
Useis aie diffeient. Some aie able to easily use a website to peifoim
tleii task. Otleis simply aie not. Tle stimulation tlat a pioduct pio-
vides depends on tle individual usei's expeiience witl similai piod-
ucts. Useis compaie websites and lave diffeient expectations. Fuitlei-
moie, tley lave diffeient goals, and so tley use wlat you lave made in
diffeient modes.
Tlink about it. wlen judging tle food and seivice at a iestauiant,
you will always compaie wlat you expeiience to otlei iestauiants you
lave been to. Tley lave slaped youi expeiience. Youi companions
compaie it to tleii pievious expeiiences, wlicl aie ceitainly diffeient
Thc Mailchimp mcnkcy's ucrds uill prccacly appcal tc scmc uscrs mcrc than cthcrs.
. lttp.//smasled.by/lassenzall
8o
fiom youis. Tle same goes foi softwaie, websites and apps. Evocative
qualities vaiy even moie, simply because all useis lave a unique listo-
iy and unique memoiies.
YOU CANNOT DESIGN THE SITUATION YOU CANNOT DESIGN THE SITUATION
UX also depends on tle context in wlicl tle pioduct is used. A situa-
tion goes beyond wlat can be designed. It can deteimine wly a pioduct
is being used, and it can slape a usei's expectations.
On some occasions, you may want to exploie and take advantage of
tle wealtl of featuies in WoidPiess. In otlei situations, tle same func-
tions may make tlings too complex foi you. On some occasions, you
may find it totally cool tlat tle LailClimp monkey tells you iandomly
tlat, It's five o'clock somewleie," but in otlei cases it would feel en-
tiiely weiid and annoying, because you aie using tle application in a
diffeient mode.
Fuitleimoie, UX evolves ovei time. Tle fiist time a usei tiies an ap-
plication, tley may be confused by it and lave a sligltly negative expe-
iience. Latei, wlen tley get used to it and discovei its wealtl of fea-
tuies and potential and leain low to landle it, tley miglt get emotion-
ally attacled to it, and tle UX would become moie positive.
\c can Icsiqn Fcr LX
Arc rcllcr ccastcrs jun, thrillinq and cxcitinq cr just crcathtakinqly scary? It's hard tc tcll.
(Imaqc. jcilman
z
z. lttp.//www.flicki.com/plotos/foilman/z,6z,,p8o/
8
Lany designeis label tlemselves UX designeis." Tlis implies gieat
confidence in tle capabilities of tle designei, it suggests tlat tle usei
expeiience can be designed. But as explained, we cannot do tlis. In-
stead, we can design jcr UX. We can design tle pioduct oi seivice, and
we can lave a ceitain kind of usei expeiience in mind wlen we design
it. Howevei, tleie is no guaiantee tlat oui pioduct will be appieciated
tle way we want it to be (again, see Hassenzall). We can slape neitlei
oui useis' expectations noi tle situation in wlicl tley use wlat we
lave designed.
It is ceitainly possible to lave a faiily good idea of tle potential
ways a usei will judge wlat we make, as Olivei Reiclenstein points
out
. Lovies, iletoiic and bianding demonstiate as mucl. tley pie-

dict ceitain expeiiences, and tley often aclieve tleii goals, too.
Howevei, a tliilling movie is piobably moie tliilling in tle tleatei
tlan at lome, because tle plysical enviionment (i.e. tle situation tlat
slapes tle UX) is diffeient. In tle same way, tle effectiveness of an ad-
veitisement will always depend on tle context in wlicl it is consumed
and tle ciitical sense and knowledge of tle consumei (i.e. tle usei's
piioi expeiience). Tle commeicials aie designed to elicit ceitain expeii-
ences, but tleii level of success does not depend solely on tle commei-
cials tlemselves.
Tle diffeience between designing UX and designing jcr UX is subtle
but impoitant. It can lelp us undeistand and iemind us of oui limita-
tions. It can lelp us tlink of low we want tle UX to be.
It las been suggested, foi instance, tlat UX is tle sum of ceitain
factois, sucl as fun, emotion, usability, motivation, co-expeiience, usei
involvement and usei engagement (foi moie, see Laiianna Obiist et
al's aiticle Evaluating usei-geneiated content cieation acioss contexts
and cultuies"). In tuin, we must addiess some of tlese factois wlen we
design jcr UX, depending on low we want oui pioduct to be peiceived.
If we want an application to be fun, tlen we need to add some featuies
tlat will enteitain, a joke, a clallenging quiz, a funny video, a competi-
tive aspect oi sometling else. We slould keep in mind, lowevei, tlat,
as designeis, we can nevei ieally piedict tlat tle application will be
peiceived as fun by tle usei. Useis lave diffeient standaids, and some-
times tley aien't even willing to be enteitained.
. lttp.//www.infoimationaiclitects.jp/en/can-expeiience-be-designed/
8z
Extra crcdit. Hcu Tc Icsiqn Fcr LX
UNDERSTAND UX UNDERSTAND UX
If we want to design foi UX, tlen we need to undeistand wlat UX is all
about. Foi example, knowing wlicl vaiiables make useis judge a piod-
uct miglt be advantageous, and Hassenzall's UX model is one sucl
model foi tlis.
Otlei models lave been suggested as well, sucl as Petei Loiville's
seven facets of usei expeiience
." Heie, UX is split into useful, usable,

desiiable, findable, accessible, ciedible and valuable. As you may lave
noticed, tlese facets fit Hassenzall's model pietty well. useful, usable,
findable, ciedible and accessible could all be consideied as piagmatic
(i.e. utilitaiian and usability-ielated) qualities, wlile desiiable and valu-
able would qualify as ledonic (well-being-ielated) qualities.
As mentioned, UX las also been viewed as tle sum of paiticulai jac
tcrs. Otlei models lave been suggested as well, some of wlicl aie
linked to at tle end of tlis claptei.
UNDERSTAND USERS UNDERSTAND USERS
Following tlis, we need to undeistand oui useis. Tiaditional metlods
aie ceitainly applicable, sucl as usei ieseaicl witl suiveys, inteiviews
Pctcr Mcroillc's Faccts cj Lscr Expcricncc." (Imaqc. Scmantic Studics
(
(. lttp.//semanticstudios.com/publications/semantics/oooozp.plp
. lttp.//semanticstudios.com/publications/semantics/oooozp.plp
8
and obseivation. Also, peisonas lave been suggested as a means of de-
signing foi UX, as lave UX patteins. Smasling Lagazine las alieady
piesented a iound-up of metlods
6
.
EXCEED EXPECTATIONS EXCEED EXPECTATIONS
Finally, give useis wlat tley want and a little moie. In addition to en-
abling useis to use youi seivice effectively and efficiently, make tlem
also tlink, Wow, tlis application is genius." Exceed tleii expectations
desiiably. If you do so, tley will use youi website oi app not because
tley lave to but because tley want to. !
0thcr Pcscurccs
To leain moie about UX, you may want to iead tle following.
Wlat Is Usei Expeiience Design? Oveiview, Tools and Resouices
,
A useful intioduction to UX, along witl suggested teclniques and lelp-
ful tools foi designing foi UX.
8 Lust-See UX Diagiams
8
An excellent collection of visualizations of tle concepts and fiagments
of UX.
Retio and Vintage in Lodein Web Design
p
An extensive slowcase of inspiiing websites tlat aie giaplically de-
signed to elicit memoiies.
UX Lytls
zo
A website dedicated to debunking misconceptions about UX.
Tle Tling and I. Undeistanding tle Relationslip Between a Usei and a
Pioduct
z
Fieely available extiacts fiom Laic Hassenzall's aiticle on tle UX
model iefeiied to in tlis claptei.
6. lttp.//www.smaslingmagazine.com/zoo/o/o/wlat-is-usei-expeiience-design-
oveiview-tools-and-iesouices/
,. lttp.//www.smaslingmagazine.com/zoo/o/o/wlat-is-usei-expeiience-design-
oveiview-tools-and-iesouices/
8. lttp.//www.uxbootl.com/blog/8-must-see-ux-diagiams/
p. lttp.//www.smaslingmagazine.com/zoo8/o/o,/ietio-and-vintage-in-modein-web-de-
sign/
zo. lttp.//uxmytls.com/
z. lttp.//smasled.by/lassenzall
8(
9<%83%&+ >.")'0%&+ /02'
;.<$ I*)$* D%88 ?6'<288H
D2&' /. 9<H
BY AUSTIN GUNTER BY AUSTIN GUNTER !!
How do you make suie all tle softwaie pioducts you spend time build-
ing aie sometling tlat youi customeis will actually want to buy? It's
one tling to spend a few weeks coding youi next big idea. But aie you
suie tlat you lave an audience of customeis tlat want wlat you've
built?
Tle last tling you want is to cieate sometling, invest in Adwoids,
only lave youi potential customeis aiiive non-plussed, and tlen navi-
gate away, nevei to ietuin again. Befoie you evei stait coding, it's es-
sential tlat you pop up" fiom tle keyboaid, and leain wlat youi cus-
tomeis actually want to use and uill pay jcr.
Tlat's tle laid pait. leaining wlat youi customeis want to pay foi.
8
Tle cool pait. Tleie's actually a piocess you can go tliougl to ) taiget
a specific customei-set, and z) leain low to design a pioduct tlat will
solve tleii pioblem, and ) become close to labit-foiming.
Heie's an obvious example. Wlen you use Instagiam, tleie is actu-
ally a piocess you go tliougl eacl time you take an aitistic smait-
plone pictuie (an action millions of people want to take eveiy day) and
slaie it witl youi fiiends tlat is labit-foiming. Instagiam, as well as
Facebook, aie classic examples of pioducts tlat fulfill a key customei
need, slaiing tleii lives witl as many people possible, and aie also
labit-foiming. Tlose apps lave a labit-foiming piocess based on deep
insiglt into tle needs of tleii useis baked into tleii design.
Tle piocess is called tle Icsirc Enqinc, dubbed tlus by Nii Eyal
zz
. It's
tle little tling tlat gets people to open Facebook ovei and ovei again
tliouglout tle day, oi pull out tleii plones to take a ploto witl Insta-
giam. If you get tlis engine staited, you'll see spikes in youi ieadeislip,
and spikes in youi engagement on youi websites.
You can model tle labit-foiming piocess, and pioblem solving qual-
ities of tlose apps in oidei to build tle most effective pioducts possible.
You miglt even cieate labit-foiming pioducts. Pathcr, you miglt cieate
pioducts tlat become a valuable pait of youi useis' lives.
Now, I don't want to oveisell tle idea. I'm not going to wiite z,ooo
woids tlat slow you low to suddenly go stait tle next Facebook.
Tleie's only one Laik Zuckeibeig.
No, wlat I am saying is tlat tleie is a piocess to evaluate low youi
audience oi youi customeis aie going to iespond to wlat you cieate
witl tlem in mind. In fact, it's as simple as asking youi customeis a
landful of questions to discovei if youi pioduct las tle keys to stait
youi customeis' Desiie Engine.
Thc Icsirc Enqinc
Fiist, I've got to explain tle ( Steps of tle Desiie Engine.
. Tle Tiiggei,
z. Tle Action,
. Tle Commitment,
(. Vaiiable Rewaids.
zz. lttp.//niiandfai.com
BUILDING SOLETHING THAT YOUR USERS WILL ACTUALLY WANT TO BUY
86
Tlen, I'll go tliougl a piocess of customei development you can use to
evaluate low labit-foiming youi pioduct is.
In plain Englisl, tle Desiie Engine is a iepeatable cycle of foui steps
tlat most labit-foiming pioducts send us tliougl ovei and ovei again.
THE TRIGGER THE TRIGGER
Tlis is eitlei an exteinal tiiggei, a man is prcmptcd cy his uijc tc cuy a
ccck, oi an inteinal tiiggei, thc samc man dccidcs that hc nccds tc lcarn mc
cilc dcoclcpmcnt, sc hc cuys cccks cn mccilc dcoclcpmcnt. Inteinal tiiggeis
aie almost always stiongei tlan exteinal tiiggeis. It's just like in tle
movie Inccpticnan idea oi action only takes ioot wlen tle individual
believes tley came up witl it independent of exteinal influence. Wlen
you build softwaie, youi goal is to associate youi pioduct witl an intei-
nal tiiggei tlat lappens often (once a yeai isn't usually enougl).
THE ACTION THE ACTION
Tlis is a combination of motivation and ability. Inciease tle motivation
to use youi pioduct, and you'll inciease tle action you want. using youi
pioduct. Additionally, wlen you inciease useis' ability to use it, ieduce
tle fiiction to use youi pioduct (tlink, ieducing tle steps to puiclase,
foi example), and you'll inciease tle desiied actions.
Amazon's oidei witl one click" is a biilliant way to ieduce fiiction
between potential customeis and tle desiie action. making puiclases.
Less fiiction means less motivation is iequiied to complete tle piocess.
Less motivation is key because tle stiengtl of motivation is tied to tle
stiengtl of feelings customeis lave foi youi pioduct, and low motivat-
ed tley aie to buy."
Tle stiongei tle motivation, tle moie likely tley'ie coming back to
use tle pioduct. But motivation can be fickle. Lucl bettei to adapt
youi pioduct foi tle quickest use possible, like Amazon las. Tle diffei-
ence between laving to ie-entei ciedit caid infoimation eacl time we
make a puiclase, and being able to impulsively click buy" is woitl bil-
lions of dollais eacl yeai.
But motivation can also inciease ovei time, and tlat is a goal. Typi-
cally, youi pioduct staits out witl an extiinsic motivatoi, but labit-
foiming pioducts find a way to move fiom extiinsic motivations to in-
tiinsic ones. Tle fiist time I used Facebook, as a senioi in ligl sclool, it
was because a giil told me I had to get on it. Now, I'm not quite suie
wly I am so committed tlat I open Facebook seveial times a day. I just
do. On a coie level, it satisfies a need tlat I lave to socialize witl my
peeis.
8,
THE COLLITLENT THE COLLITLENT
How mucl skin does youi usei lave in youi game? Witl Facebook, we
spend louis building oui piofiles, and iegaidless of wlat a vocal mi-
noiity may claim, oui commitment to Facebook is (often) gieatei tlan
newei social netwoiks like App.net oi Google+. We'ie less invested in
tlose netwoiks, wlicl we lave spent little (oi no) time on. But we've
spent lundieds and tlousands of louis building oui Facebook piofiles.
We'ie committed to tlem, simply based on low mucl time we've
spent.
To eain gieatei commitment means you need to ask youi useis foi
sometling like time oi peisonal infoimation oi to send in a ploto eacl
time tley use tle app. Witl eacl action, tley become moie invested in
tle pioduct and tleii commitment giows. Witlout tlat investment,
tley won't be committed to wlat you've built.
VARIABLE REWARD VARIABLE REWARD
Remembei in sclool ieading about tle expeiiment wleie iats pusl a
levei and get a food pellet? Wlen tle food pellet is distiibuted iandom-
ly, as opposed to being dispensed eveiy single time tle levei is piessed,
tle iats leain to piess tle levei constantly. If tle levei dispenses a food
pellet eveiy time, tle iats soon lose inteiest because tley know tley
can always come back to tle levei. It's not vaiiable, so it's not labit-
foiming.
Humans aie tle same way. Wlen tle iewaid foi a given action is
constant, but tle fiequency vaiies, we come back ovei and ovei again.
Have you evei said, Just moie minutes" wlen you weie playing a
game? Oi lave you evei watcled someone spend 8 louis in fiont of a
slot macline waiting to lit tle jackpot? Tlat was vaiiable iewaid in ac-
tion.
Tlink about tle Facebook News Feed. Youi fiiends aie constantly
slaiing new bits of info about tlemselves via plotos, oi videos, oi sta-
tus updates, oi Gangam Style" paiodies. You nevei ieally know wlat
you'll see. Tle content tley slaie is tle iewaid, and tle novelty is wlat
makes it vaiiable. You'ie not always deliglted by wlat you see, and
tlat's pait of tle point.
That's great Austin. Now how do I actually use this?
Riglt. Let's actually lay out tle piocess tlat I leained to put tle Desiie
Engine in place to peifoim customei development befoie lelping to
launcl pioducts in oui company. It's a peisonal example on low to use
tle Desiie Engine as a way to impiove youi pioducts befoie you ielease
tlem.
88
We could stait by making a list of potential customeis. You'ie going
to inteiview tlem about youi pioduct. If you can find some of tlem in
youi town, take tlem to coffee one by one. Otleiwise, you'll want to
cieate an eiglt to ten question suivey foi people to answei ovei email.
You can use aiound o questions, but beyond tlat you'ie asking too
mucl.
Stcps Tc A campaiqn 0j custcmcr Icoclcpmcnt
. Stait witl defining tle audience oi taiget usei piofile" foi wlat you'll
be testing,
z. Lake a list of o to o people wlo fit tle usei piofile,
. Send a polite email to tlem to see if tley would like to give you feed-
back on a new pioject,
(. Email youi list of eiglt to ten questions to tle folks wlo iespond in tle
affiimative,
. Lake a spieadsleet witl tle answeis,
6. Analyze foi patteins of positive veisus negative feedback,
,. Decide low to implement youi feedback.
DEFINING YOUR AUDIENCE DEFINING YOUR AUDIENCE
In zoz, we ieleased a veision contiol featuie at WP Engine
z
, wleie
we integiated Git witl WoidPiess losting
z(
. Befoie we deployed Git
to all oui customeis, we beta tested tle featuie witl a significant num-
bei of customeis to get feedback and test foi bugs. Git is a ielatively
teclnical featuie tlat end-useis may not evei come in contact witl.
Based on tle natuie of tle pioduct, we knew oui audience lad to be
liglly teclnical in oidei to give us meaningful feedback. Pievious ex-
peiience using veision contiol was also a luge factoi.
Befoie you make youi list of people, ask youiself wlat soit of peison
would make tle most out of wlat you'ie building. Aie tley liglly tecl-
nical, oi not? Aie tley used to paying foi pioducts like youis? Wlat is
tleii backgiound?
z. lttp.//git.wpengine.com
z(. lttp.//wpengine.com
8p
WRITING YOUR ELAIL WRITING YOUR ELAIL
Send a sloit, somewlat geneial email to youi list. You'll get diamatical-
ly bettei iesults if you peisonalize eacl one witl tleii name and a bit of
identifying info in tle fiist sentence.
Hi Namc>,
Fascd cn ycur ucrk uith inscrt ycur prcduct arca>, ycu may cc
intcrcstcd in a ncu jcaturc that uc'rc dcoclcpinq.
\c'oc put tcqcthcr scmcthinq that uc cclicoc uill makc ycu mcrc
prcductioc and pcssicly saoc ycu timc dcoclcpinq uccsitcs, and arc
lcckinq jcr a jcu qccd ccta tcstcrs. I haoc a shcrt list cj qucsticns that
ycu can ansucr and prcoidc oaluaclc jccdcack jcr cur prcduct. Ij
ycu'rc dcun, lct mc kncu and I'll scnd thcm cocr'
Thanks in adoancc'
Austin
Lake suie you send a iemindei email a few days aftei you've set youi
beta useis up. Since it's a new tling, tley may need piompting to ievis-
it tle website.
HOW TO ASK YOUR UESTIONS HOW TO ASK YOUR UESTIONS
I like to ask about two questions pei element of tle Desiie Engine,
meaning eiglt total questions.
Trigger Questions
Effective tiiggei questions will ieveal wletlei folks aie diiven to use
youi pioduct by eitlei an inteinal oi an exteinal motivation. But, to set
youi expectations, youi useis piobably won't be inteinally motivated to
use youi pioduct immediately. It's too new.
Instead, look foi potential tlings tlat you could elicit in youi useis
to stiengtlen tle inteinal motivation. Tlis could include timing, like
wlen does youi pioduct fit into tleii scledule? How does youi pioduct
lelp tlem aclieve sometling veiy peisonal to tlem at thc riqht timc?
Does youi pioduct alleviate a feai tley lave?
Youi questions slould discovei low closely linked youi pioduct is
to tlose tiiggeis.
Wlen would you use a pioduct like tlis?"
Wlen you used tle pioduct, wlen was it most useful foi you?"
How mucl of a iemindei did you need in oidei to use tle pioduct af-
tei a few times?"
po
Tle best way foi youi pioduct to become a pait of someone's life is to
align tle pioduct witl sometling tlat alieady matteis to tlem.
Asking Action Questions
Tle goal leie is moie conciete. You want to figuie out low laid it was
to use youi pioduct, including numbei of clicks, low intuitive youi
pioduct is and tle iesults tley get wlen tley use it.
How laid was it to use tle pioduct foi tle fiist time?"
Did you lave to seaicl on Google foi anytling befoie it woiked?"
Did tle pioduct do wlat you expected it to?"
Wlat did you expect fiom tle pioduct?"
How weie youi expectations met (oi not met) by tle pioduct?"
Finding out low you met (oi didn't) meet expectations, and discoveiing
low to exceed tle expectations will lelp you design a pioduct people
want to come back to. If tle fiist few uses aie memoiable, tley'll come
back. If tley weien't memoiable, tle questions will lelp you leain uhy
nct.
Asking about Commitment
Aie youi useis committed to youi pioduct, oi will tley diift away,
pulled by distiaction oi a bettei execution of tle same idea? Commit-
ment means tley lave skin in tle game and aie willing to invest fui-
tlei. Loney is one way to measuie commitment. If you ask, \culd ycu
pay sXX jcr this?", youi customeis will tell you volumes about tleii com-
mitment.
Would you iecommend tlis to youi fiiends?"
Wlat was tle pait you lated tle most about tle pioduct? Wlat stood
out as tle biggest positives?"
If tlis pioduct weie fiee would you use it? Would you pay o pei
montl foi it?"
Variable Reward
Vaiiable iewaids coiiespond to youi ability to modulate youi cus-
tomei's expeiience witl youi pioduct. Ly favoiite example of tlis is
messages tle LailClimp monkey sends you wlen you log in. It's a
p
simple little featuie, an afteitlouglt, but it's a luge pait of tleii biand-
ing. You nevei know wlat tle monkey is going to say to you wlen you
log in, but I always wondei wlat le'll say wlen I log in. Useis expeii-
ence deliglt wlen tley get a link fiom tle monkey to a iandom Vimeo
page. Tley log back in just to see wlat tle link is on a paiticulai day.
Discoveiing vaiiable iewaids is an iteiative piocess. Tle goal witl
youi questions is to discovei wlat youi customei expects and wlat
tley want to aclieve witl youi pioduct. Witl LailClimp, tley expect
an app to cieate and send newsletteis. Tle Lonkey and lis messages
take tle diy piocess of wiiting a newslettei and inject a bit of iandom
fun into tle pioduct.
Wlat did you expect fiom using tle pioduct?"
How did tle pioduct live up to youi expectations?"
Wlen you lad finisled, did you aclieve wlat you intended to?"
Was tle usei expeiience boiing?"
THE SPREADSHEET THE SPREADSHEET
Tlis is tle pait wleie you lave made youi suivey, sent it off and now
lave an inbox full of answeis to youi questions. Stick tlem in a Google
doc, compaie tlem and evaluate low youi pioduct needs to evolve.
Is it too complicated to use, oi is it supei easy? Does youi audience
qct wly tley need wlat you've built, oi aie tley confused about tle
puipose belind it? Aie tley willing to pay foi it? If tley aien't, you may
not lave a good business model. Wlat did tley love, and wlat did tley
late?
Fiom leie, you take tle feedback and apply it to tle pioduct evolu-
tion. You make tle final call leie, and once you'ie done, it's time to ie-
lease it into tle wild. Good luck. !
pz
K9<' /0) J8%)&' D2&'* !4 L
><##.$'MN
BY LEA VEROU BY LEA VEROU !!
Fiequently, wlen I discuss CSS witl otlei developeis, tle issue of
stubboin clients comes up. Tley tell me tlat even tlougl tley peison-
ally don't tlink a website slould look tle same in all biowseis and
tley'ie eagei to tiy all of tlese new teclniques, tleii clients insist tlat
tleii website slould look tle same, so tle developeis aie stuck witl tle
same Web development teclniques tlat we used five to ten yeais ago.
Tleii clients just don't get" giaceful degiadation.
Is tlis ieally tle issue? Aie oui clients incapable of undeistanding
tlese tlings? Is tle pioblem tlat oui clients don't get" tle Web and
need to be educated? I don't tlink so. We got ouiselves into tlis. We aie
tle ones wlo caused tlis pioblem foi oui industiy. We aie tle ones
giving ouiselves tlis tiouble and making oui piofession less cieative
and enjoyable tlan it could be. It's entiiely oui fault and no one else's.
\ait, \hat?
If we cloose to make a website pixel-peifect in Inteinet Exploiei 6 to 8,
tlen we aie doing up to oo moie woik. No mattei low many fiame-
woiks, polyfills and otlei sciipts we use to ease oui pain, we will al-
ways be doing at least o moie woik foi tlose biowseis. How many of
us actually claige o-oo extia foi tlis woik? I laven't leaid of many
wlo do. Clients get tlis kind of extia woik foi fiee, so of couise tley
will say tlat tley want IE 6 suppoit. If I was a client, maybe I'd say so,
too, especially if I didn't know low tlese teclnologies woik. Tley
won't caie about oui extia time if we don't caie enougl ouiselves to
claige foi it accoidingly.
Of couise, fastei download times and bettei SEO aie compelling ai-
guments, but let's face it. one of tle biggest advantages of tle new CSS
featuies and new JavaSciipt APIs is tle luge clunk of development
time tley save us, including making maintenance easiei and quickei.
As long as tlat doesn't tianslate to ieduced costs, clients will not caie.
And tlat's peifectly undeistandable and natuial.
p
I don't do mucl client woik tlese days, but eveiy time I've taken on a
client pioject in my caieei, I've always piesented options foi biowsei
suppoit to my client. Tley want pixel peifection in IE ,? It will cost
tlem moie. Tley want IE 6 suppoit? It will cost double. I explain to
tlem tlat tlis is because I will lave to do double as mucl woik foi tlis
biowsei. I've nevei lad a single client opt to pay moie to fully suppoit
oldei biowseis. If it doesn't come fiee, you'd be suipiised at low many
don't caie about it as mucl as you tlink. But even if tley do, at least I
will lave enougl motivation to do it witlout lating tlem, my job,
biowsei makeis and tle univeise. It's faiiei foi eveiyone, including me.
Thcy'll }ust Cc Tc Ancthcr Prcjcssicnal \hc
Iccsn't charqc Extra"
Wlatevei you do, don't let tle client tlink tlat you aie claiging extia
foi doing tle samc woik as anotlei piofessional. Not only will tlat look
bad, but it's also inaccuiate. Explain to tlem tlat you just want to give
tlem options and not decide on youi own wlicl biowseis to suppoit
and claige foi accoidingly, witlout evei involving tlem in tle piocess
and letting tlem lave a say about it.
Mcncy aluays uins thc arqumcnt. (Imaqc. HikinqArtist
z
z. lttp.//www.flicki.com/plotos/likingaitist/,z,z8(/sizes/m/in/plotostieam/
BUT THE CLIENT WANTS IE 6 SUPPORT! "
p(
Hcu Much Mcrc?
You miglt lave noticed tlat I implied above tlat suppoiting old Intei-
net Exploieis iequiies o to oo moie time. Tlat's a luge iange, isn't
it? Actually, it slould be even widei. I iemembei a case of a client com-
ing to me witl a CSS clallenge tlat lis developeis weien't able to solve.
Laking sometling tlat woiked in modein biowseis took me lalf an
loui, tlen an loui to make it woik in IE 8, and tlen tliee(!) moie louis
to get it to woik in IE ,. Wlo knows low mucl longei it would've taken
if I lad to suppoit IE 6, too! And tlat wasn't tle only occasion wlen it
took me veiy little time to build a piototype tlat woiks in modein
biowseis and tlen a giossly dispiopoitionate amount of extia time to
make it woik tle same way in old Inteinet Exploieis. If you've been in
tle field foi moie tlan a yeai, I'm suie tlis las lappened to you, too.
On tle otlei land, if you don't use any modein teclnology and you
stick to CSS z., tlen I guess you would only lave to face tle old IE
bugs, wlicl would take some extia time but not double. Oi, if you used
a ton of fiamewoiks and polyfills, you would still lave to spend some
time making tlem woik togetlei and debugging potential conflicts,
but still not double tle time. o was an estimate foi cases like tlose.
As you can see, tle iange is luge and depends on a numbei of diffei-
ent factois, including but not limited to tle following.
You
How modein aie youi development teclniques? Tle moie cutting-edge
tley aie, tlen tle moie effoit you will need to put into making good
fallbacks oi coming up witl alteinative teclniques foi old Inteinet Ex-
ploieis (but less effoit to make tle oiiginal piototype)
The project
If it's a biocluie website, tle main tling tlat will need extia effoit in
oidei to woik in old IEs is tle styling. If it's a Web application, it gets
way tiickiei (and moie time-consuming).
Level of support
Suppoiting a biowsei is not black and wlite, eitlei no suppoit oi full
suppoit. How good youi fallbacks need to be will gieatly deteimine
low mucl extia time you lave to spend on tlem.
So, I'm soiiy but I can't tell you low mucl extia you will need to claige
to suppoit old Inteinet Exploieis. You'll lave to decide youiself, case by
case, taking all ielevant factois into consideiation.
p
Fut \hat Ij Thcy }ust \ant Tc Pay Fcr Fircjcx?"
Of couise, tleie is a baseline of biowsei suppoit tlat I won't go below,
even if tle client doesn't want to pay foi it. We lave a iesponsibility to
ouiselves and to tle Web to follow tle piinciple of univeisality
z6
. Even
if a client wants to pay only foi Fiiefox suppoit, foi example, my ie-
sponsibility is to ensuie tlat tle website is still functional in tle otlei
biowseis. Even if tley aie not willing to pay foi mobile suppoit, my ie-
sponsibility as a Web developei is to at least add some media queiies
and make it decent tleie. Even if tley don't caie about accessibility, my
iesponsibility is to make tle website somewlat accessible. Tlese
tlings don't take up mucl time anyway, and tley slould be factoied
into even youi lowest piice.
Sc, \hat Tc Ic \ith 0ld IEs?
So, wlat do I do foi tlose wise clients wlo don't want to pay foi sup-
poit of old Inteinet Exploieis? Usually, I tiy to keep giaceful degiada-
tion in mind and piovide decent fallbacks foi old biowseis, so tlat at
least tle content is accessible in tlem. But in cases of ieally nauglty
biowseis, like IE 6 and ,, sometimes even giaceful degiadation doesn't
woik veiy well. Tlen, wlat I usually do is split my CSS into tliee files.
casc.css
Fonts, basic colois, etc.
scrccn.css
Eveiytling specific to tle scieen. Lost of tle CSS goes leie.
print.css
Piint-specific styles, sucl as foi liding contact foims, etc.
Tlen, I just don't seive scrccn.css to IE , and below. Tley get sometling
like a piint style sleet, witlout tle lidden elements. It's not veiy piet-
ty, and it's not modein, but at least tley get tle content. Tle same could
be done witl JavaSciipt. Cleck wletlei an API is piesent befoie using
it, oi simply don't seive tlose sciipt files to old Inteinet Exploieis. If
you've coded youi JavaSciipt piopeily and it's unobtiusive and all, tlen
old biowseis won't get tlat extia functionality, but tley won't get
JavaSciipt eiiois and bioken functionality eitlei. All of tlose iequiie
minimal effoit on youi pait.
z6. lttp.//www.w.oig/People/Beineis-Lee/UU.ltml
BUT THE CLIENT WANTS IE 6 SUPPORT! "
p6
Iccs That Mcan I Aluays Haoc Tc charqc Icss Fcr
Lsinq Mcdcrn Stujj?"
Wlile discussing my point of view witl anotlei developei, le asked
me, So, you'ie saying tlat I slouldn't claige moie if I use iesponsive
design and add a buncl of media queiies?" Absolutely not! I'm not say-
ing we slould feel soiiy foi being cutting-edge oi punisl ouiselves foi
tlat witl less income! Wlat I'm baiely advocating is tle common-
sense idea of claiging moie foi moie louis of woik. If you code some
JavaSciipt tlat does tle same tling tlat media queiies do, tlen of
couise you slould claige moie foi tle JavaSciipt, because it will take
you moie time. But if you weien't going to do anytling like tlat, and
tle media queiies weie icing on tle cake, tlen of couise you slould
claige tlem moie tlan you would foi a non-iesponsive veision of tle
website.
ccnclusicn
We may love wlat we do, but we ceitainly don't love cateiing to tle
wlims of old biowseis. We do a lot of extia woik to lide tleii incompe-
tence, and tlat woik needs to be compensated foi piopeily. You don't
lave to woik foi fiee, especially on sometling you don't like doing. Ex-
plain tle situation to youi clients and tley'll undeistand low it goes, I
piomise. Aftei all, extia woik = liglei costs" is an establisled iule in
eveiy industiy. Tle concept is not laid to giasp, and it makes tle bene-
fit of modein Web teclnologies mucl moie tangible foi teclnological-
ly unsavvy clients. !
p,
E2**%=) !&6.") >'$2')+%)*
-.$ D)C ()*%+&)$*
BY SACHA GREIF BY SACHA GREIF !!
Finding ways to eain passive income is a giowing concein among
many fieelance designeis. I've always loved client woik, but I lave to
admit tlat tle piessuie of juggling multiple bosses and constant dead-
lines eventually staited to weai me down.
As a iesult, in tle past couple of yeais I've been focusing moie and
moie on peisonal piojects, and tlinking about ways to make money
fiom tlem. I've sold tlemes and templates
z,
and wiitten an eBook
z8
,
and I'm now focusing on launcling my own job boaid foi designeis
zp
.
In a pievious aiticle foi Smasling Lagazine, I compaied vaiious
ways to sell softwaie pioducts online
o
. Wlat I'll do in tlis claptei is
not just compaie ways in wlicl fieelance designeis can eain passive
income, but speak about my own expeiience in exploiing tlese av-
enues.
And, yes, tlat will include telling you low mucl money I've made!
Disclaimer. This chaptcr is accut my cun pcrscnal cxpcricncc. }ust cccausc I
haoc, jcr cxamplc, ncocr madc much mcncy jrcm ads dccs nct mcan ycu can't.
Sc, plcasc takc this as a Hcrc's uhat I did," nct as a Hcrc's uhat ycu shculd dc."
Thcmcs
I was lucky enougl to join TlemeFoiest
(tle biggest tlemes and

template maiketplace on tle Web) in Januaiy zoop, sloitly aftei it
launcled. TlemeFoiest seemed like tle peifect way foi an unknown,
inexpeiienced designei to make money. no need foi a fancy degiee oi
yeais of expeiiencejust design sometling cool and tle maiket will
iewaid you. In fact, tlat's exactly wlat lappened. Top designeis
z
now
gioss six-figuie annual incomes solely fiom selling tlemes, and some
do so despite being ielative unknowns in tle iest of tle design woild.
z,. lttp.//tlemefoiest.net/usei/SaclaG
z8. lttp.//saclagieif.com/ebook
zp. lttp.//folyo.me/
o. lttp.//www.smaslingmagazine.com/zoz/o/zp/selling-digital-goods-online-e-
commeice-seivices-compaied/
. lttp.//tlemefoiest.net/
z. lttp.//tlemefoiest.net/usei/OimanClaik/
PASSIVE INCOLE STRATEGIES FOR WEB DESIGNERS
p8
So, wlat was tle iesult of my own ventuie into tleme-making?
Oveiall, it was veiy positive. Fiist, it lelped me launcl my design ca-
ieei, because my fiist couple of fieelance clients weie all people wlo
contacted me aftei seeing my templates. It was also luciative. in June
zoo, my best montl evei, I made ,z(8. Foi a yeai aftei tlat, laving
not even launcled new tlemes, my existing ones still made me aiound
zoo a montl, witl minimal effoit on my pait.
Altogetlei, I've eained aiound z,6, fiom TlemeFoiest in two and a
lalf yeais, notling to scoff at, especially because I completely stopped
suppoiting my tlemes about a yeai ago. So, if selling tlemes is so
gieat, wly did I design tle last one moie tlan two yeais ago? Tleie aie
a couple ieasons foi tlis, tle main one being tlat tle maiket diastically
clanged, and customei expectations clanged witl it.
Designing a good-looking tleme isn't enougl anymoie. If you want
youi tleme to be competitive, you need to suppoit sloitcodes, build a
custom back end and design multiple layouts, not to mention piovide
excellent suppoit and build a documentation website.
In otlei woids, in tle span of a couple yeais, building tlemes went
fiom sometling tlat you could do on tle side to being a full-time job.
Because I didn't want to become a WoidPiess guiu and spend all of my
time cieating tlemes, I decided to put tleme design aside.
Thc hiqh pcint cj my ThcmcFcrcst carccr.
pp
Tleme design, tlen, is one of tle best ways a designei can eain passive
income, but it's also one of tle laidest. By tle way, anotlei impoitant
factoi to considei is tlat tleme design makes sense only if you'ie in it
foi tle long iun and can ieinvest tle time you spend on a tleme into
subsequent ones (by ieusing bits of code, stieamlining tle piocess,
building a mailing list, etc.).
Pros:
Veiy luciative if you'ie successful.
No need foi expeiience oi education, as long as you lave tle iiglt
skills.
No need to be famous oi lave a big following.
Cons:
Requiies a lot of HTLL and CSS coding, and piobably familiaiity witl
WoidPiess oi anotlei CLS.
Pioviding good suppoit is time-consuming.
You will piobably need to launcl moie tlan one tleme befoie tle ven-
tuie becomes moie piofitable tlan iegulai fieelance woik.
Iccns And \cctcrs
Note: I haoc ncocr rclcascd any iccn packs, crushcs cr occtcr rcscurccs, sc I
askcd \inccnt Ic Mciqn
cj \ccalys
(
jcr his thcuqhts cn this markct.
My mcst succcssjul thcmc.
oo
I staited to cieate passive income by accident. In o yeais of fiee-
lancing, I've cieated a small stock of vectoi giaplic elements tlat I've
been using iepeatedly foi inteiface design. At fiist, it was just a few Il-
lustiatoi files, wleie I pasted GUI elements, sucl as buttons and icons,
to ieuse in futuie piojects.
In June zoo, I decided to make it compielensive and consistent,
and tlen ielease it foi fiee. Inspiied by Web application fiamewoiks
sucl as Ruby on Rails, tle Usei Inteiface Design Fiamewoik
was
based on tle concept of modulaiity, pioductivity and fast wiiefiam-
ing."
It took me a few weeks to cieate it, witlout making any money on it,
but tle feedback was impiessive. in two montls, z,ooo unique visi-
tois, moie tlan ,ooo tweets, dozen of blog posts. Even tle godfatlei of
Web design, Jeffiey Zeldman, ieviewed it
,
. I was ligl on a cloud!
Looking at it now, I lave no idea wly I invested so mucl time do-
ing it piobably because of passion, and I felt tle uige to fill a gap. tlis
kind of tool was missing. I didn't make any conscious plan, but tlis is
low my new caieei staited. Seeing tlis steady tiaffic, I tlouglt I could
build a piemium veision on top of it. A few montls latei, I launcled a
commeicial pack filled witl ,o vectoi icons
8
. Tlen tle magic lap-
pened."
Statistics jrcm thc launch cj thc Lscr Intcrjacc Icsiqn Framcucrk. Iarqc prcoicu
6
.
. lttps.//twittei.com/webalys
(. lttp.//www.webalys.com/
. lttp.//www.webalys.com/design-inteiface-application-fiamewoik.plp
6. lttp.//media.smaslingmagazine.com/wp-content/uploads/zoz/o8/fb6pdf-
b(8c(aecbe68b88pa8e,of.png
,. lttp.//www.zeldman.com/zoo/o,/z(/ui-design-fiamewoik-foi-web-designeis/
8. lttp.//www.webalys.com/minicons/index.ltml
o
Loney staited to add up in my PayPal account. I iemembei clecking
my inbox compulsively to see if tle latest emails announced sales. It
wasn't a lot of sales yet, just a few lundieds dollais, but it slowed me
tle way. tlat making a living fiom passive income was possible. In tle
past two yeais, tle sales giadually went up and ieacled tle point
wleie I could stop woiking foi customeis and spend oo of my time
on my own pioducts. In zo, I launcled one moie iesouice. a vintage
vectoi oinaments pack
p
, wlicl was successful, too. Having two dif-
feient pioducts guaianteed a moie iegulai income flow.
I cuiiently eain a few tlousands dollais eacl montl fiom sales. Ly
income is tle same as wlat it was wlen I was a fieelancei, but I lave
tle satisfaction of developing my own pioducts. But designing quality
content is not enougl to make sales. I actually spend most of my time
on otlei tasks.
Cieating tle sales pages, wiiting tle text, polisling tle pioduct web-
sites.
Setting up tle e-commeice solution. In two yeais I've wasted a lot of
time building tle sales piocess. I switcled e-commeice solutions foui
times until I found tle peifect one (DPD
(o
almost unknown but
liglly iecommended).
Adveitising and piomoting. I spent a lot of time and money finding tle
best souices of tiaffic.
Thc Miniccns iccn pack.
p. lttp.//www.vectoiian.net/index.ltml
(o. lttp.//getdpd.com/
oz
Impioving maiketing and SEO, and setting up and leaining low to use
pioducts sucl as LailClimp, Google Analytics, GetClicky, SEOmoz,
Cuiebit.
Optimizing tle conveision iate by setting up A/B tests witl Google Op-
timizei.
To be lonest, I don't piovide a lot of suppoit (a few minutes a day), but I
commit to iesponding as soon as possible. And I spent a lot of time
wiiting tle documentation (witl scieenslots) to avoid answeiing tle
same questions ovei and ovei again.
So if you'ie consideiing cieating piemium iesouices, tle answei is
yes, you can live off of it. But youi cieativity and designs skills aie not
tle keys elements of success. You'll need to invest a lot of time in leain-
ing and piacticing all aieas of business. maiketing, piomotion, copy-
wiiting, SEO, analytics, etc.
Actually, tlis is tle beauty of launcling youi own pioducts. you
will become a bettei designei not by cieating bettei giaplics, but be-
cause you will lave a full view of tle business and will mastei a full
iange of skills. You will see youi customei witl new eyes and focus on
tle efficiency of youi designs moie tlan tleii outei beauty. And believe
me, youi customei will love tlat and will pay you moie if you inciease
tleii sales.
On tle downside, tle maiket is becoming liglly competitive. Tle
same slift tlat is taking place witl templates is lappening in my mai-
ket. Competition is becoming fieice, and not a week goes by witlout a
few moie icon packs getting ieleased. I mean, wlicl designei lasn't
launcled tleii own set by now?
I've counted moie tlan o competitois wlo sell icons, and tle num-
bei and quality is impioving constantly."
o
Also, tle giowing tiend of discounted bundles (like on Dealotto and
LigltyDeals), wleie you get a ton of iesouices foi a few bucks, iisks
diying up tle maiket. I'm still not suie if tlis will convince moie de-
signeis to add tlese iesouices in tleii woikflow, tlus expanding tle
maiket, oi stop tlem fiom buying tlese packs at tle cuiient piices.
Tlis touglei competition las foiced me to spend montls tlis yeai
doubling tle numbei of my icons, fiom ,o to oo, and adding vaiia-
tions foi diffeient softwaie, sucl as PoweiPoint and Keynote. Also, I've
impioved my otlei pioduct, tle vectoi oinaments, and paid anotlei
fieelancei to fix a few pioblems. And I iecently paid a gieat calligiaplei
to cieate a logo foi Vectoiian and impiove tle bianding. Expenses and
time investment aie going up.
Anotlei pioblem. I don't tlink my designs aie as cieative oi as
good as befoie. I'm so focused on cieating tle content, maiketing it and
tlinking like a business ownei tlat I sometimes lave less passion foi
design and less cieativity."
Pros:
You alieady lave tle skills to cieate tle content.
If you use maiketplaces sucl as iStockploto and GiaplicRivei, you
don't need to build a website oi piomote youi pioducts.
Almost no suppoit is iequiied (if you wiite good documentation).
You will expand youi skills and become moie business-oiiented.
You don't need to wiite in Englisl (tlis was a big advantage foi me be-
cause I'm Fiencl and a pooi Englisl wiitei).
A samplc cj thc \cctcrian occtcr pack.
o(
Cons:
It's time-consuming.
Tle expectations of quality and quantity aie iising. And moie and moie
fiee content is becoming available.
Tle maiket is competitive, you need not only gieat content, but gieat
maiketing.
Adocrtisinq
I can still iemembei wlen Caibon
(
fiist accepted one of my websites
into its adveitising netwoik. I was oveijoyed! At last, I would be able to
dip into tle iivei of money tlat flows into Inteinet adveitising! Of
couise, I didn't expect to eain a salaiy fiom ads alone, but I tlouglt it
miglt be a nice supplement say, a couple of lundied dollais a montl.
If you've evei iun any kind of ads on a website, you know wlat's
coming. my fiist payment must've been foi sometling like . So, yes,
Inteinet ads aie no fununless you biing in a massive amount of tiaf-
fic (oi if you plastei youi website witl a massive numbei of ads).
Since tlen, I've joined Fusion Ads
(z
foi my blog
(
and joined Yoggit
((
foi Tle Toolbox
(
(botl ad netwoiks belong to BuySellAds
(6
). To give
My jirst cocr ad spct.
(. lttp.//caibonads.net/
(z. lttp.//fusionads.net/
(. lttp.//saclagieif.com/
((. lttp.//yoggit.com/
o
you some numbeis, Tle Toolbox gets about zo,ooo uniques a montl,
wlicl is not luge but still decent. Tlis conveits to o to 6o pei montl.
Ly blog is a little moie successful (piobably due to tle liglei click-
tliougl iate), and I've succeeded in pulling in oo oi zoo in extieme-
ly good montls wlen a couple of my posts went viial. But tle aveiage
las been aiound o to oo.
Altogetlei, tle total fiom adveitising comes in at aiound 6oo ovei
six montls. So, as fai as I'm conceined, ads aie a good way to pay foi a
meal to celebiate tle weekend, but not mucl moie unless you decide to
become a full-time bloggei.
Pros:
Does not iequiie any woik.
Joining a iespected ad netwoik will give youi website caclet.
Cons:
Pays foi a meal, if you'ie lucky.
Did I mention tlat you piobably won't eain anytling?
Fccks
Wiiting an eBook (oi plain old book) miglt seem ielatively easy. Aftei
all, we all know low to wiite, iiglt? In fact, I'd say tlat actually wiiting
tle book is not tle laidest pait. Suie, developing a good wiiting style
takes yeais of piactice, but tle tiutl is tlat people will foigive clumsy
wiiting if you lave sometling valuable to say. No, tle ieal woik in
wiiting eBooks is in wlat comes befoie and aftei tle wiiting.
Befoie wiiting tle fiist woid, you need to come up witl a good topic
and, moie impoitantly, develop tle skills necessaiy to make you an au-
tloiity on tle topic. Simply compiling existing knowledge miglt woik
foi a blog post, but it won't fly wlen you ask people to land out tleii
laid-eained casl.
Considei wiiting an eBook only if you lave a couple of yeais of ex-
peiience undei youi belt and feel ieady to distill it into a book. And
please don't make tle mistake of tlinking it's ovei once you'ie done
wiiting. Tlat's actually wlen tle ieal battle begins. selling youi book.
(. lttp.//www.tletoolbox.cc/
(6. lttp.//buysellads.com/
o6
How will people find out about youi book? Wlat ieason will tley lave
to buy it? Wly slould tley buy youis instead of competing books?
Tlese aie tle kinds of questions you'll lave to face.
If you want to iest youi clances on a peisonal website, take a page
fiom Jaiiod Diysdale's book (pun intended), Fcctstrappinq Icsiqn
(,
.
Diysdale not only set up a website foi lis book, but also used a mailing
list befoie and aftei tle launcl to piomote it by sending out sample
clapteis and asking lis audience vaiious questions. I did my best to
piomote my eBook by setting up a landing page, wiiting guest posts
(8
about it and lolding giveaways
(p
.
Anotlei good stiategy is to taiget a nicle. Tlis is wlat I did by fo-
cusing specifically on usei inteiface design foi staitups, and Lattlew
Butteiick also did it witl lis Typcqraphy jcr Iauycrs
o
book.
Last but not least, I stiongly iecommend paitneiing up witl web-
sites sucl as AppSumo
and Hypeiink
z
to open up distiibutions
clannels foi youi book and to cieate new ievenue stieams.
My cFcck's landinq paqc.
(,. lttp.//bootstiappingdesign.com/
(8. lttp.//blog.asmaitbeai.com/peifect-piicing.ltml
(p. lttp.//tleindustiy.cc/zoz/o(/o/tle-gieif-las-launcled-lis-ebook-step-by-step-ui-de-
sign/
o. lttp.//www.typogiaplyfoilawyeis.com/
. lttp.//appsumo.com/
z. lttp.//lypeiink.com/
o,
Wiiting an eBook tuined out to be gieat foi me. I lad a gieat launcl,
making about 8,ooo in tle fiist two weeks alone. Since tlen, sales
lave slowed consideiably, but I did manage to make anotlei 6,ooo in
tle foui montls since tle launcl. In my case, tle key to eaining moie
was paitneiing up witl AppSumo and Dealotto, wlicl botl biouglt in
a couple of tlousand dollais in extia ievenue aftei tle initial boost
fiom tle launcl faded away.
Pros:
Almost no suppoit needed.
No teclnical skills iequiied.
Cons:
You need to lave sometling to say.
A lot of piomotion is iequiied.
Tle maiket is competitive and ciowded.
Sales will quickly diy out aftei launcl.
Scjtuarc As A Scroicc
Building a business iequiies a ton of woik and commitment, but unlike
fieelance design oi, say, mowing lawns, building a softwaie-based sei-
vice of some kind takes away tle . ielationslip between youi effoits
and youi income. Some seivices claige only once, as is tle case witl
Salcs startcd strcnq cut haoc slcucd tc a ccuplc pcr ucck.
o8
job boaids sucl as Autlentic Jobs
and my own Folyo. But, of couise,

tle casl cow of passive income is subsciiption seivices because tley
enable you to anticipate youi casl flow and build a steady income
stieam.
Tle obvious clallenge in building a softwaie seivice is tlat it ie-
quiies teclnical skill, wlicl you miglt not lave if you've got a design
backgiound. It's not tle end of tle woild, tlougl. You could find a co-
foundei, outsouice tle pioject oi even leain tle skills youiself. And you
don't need to go all out iiglt away. Wlen I speak witl non-teclnical
foundeis, I often notice tlat a pieliminaiy veision of tleii idea could
veiy well lave been aclieved witl a simple WoidPiess blog.
If you exploie a little deepei, you'll iealize tlat oppoitunities foi
monetization aie eveiywleie. Foi example, WoidPiess las numeious
membeislip subsciiption plugins
(
. Even LailClimp
lets you
claige foi newslettei subsciiptions. By tlinking outside tle box and
combining existing seivices, even a modeiately teclnical peison can
get a minimum viable pioduct
6
out tle dooi.
I launcled Folyo (a website tlat lelps staitups find gieat, vetted
fieelance designeis) about a yeai ago.
Foi tle fiist couple montls, I ian it as a simple newslettei of job offeis,
witl a Wufoo
,
foim foi submitting piojects. Tleie was no back end,
no database and no usei accounts! Tlis was enougl to validate tle con-
Fclyc, a prioatc jcc ccard jcr jrcclancc dcsiqn prcjccts.
. lttp.//autlenticjobs.com/
(. lttp.//szmembei.com/
. lttp.//mailclimp.com/
6. lttp.//en.wikipedia.oig/wiki/Linimum_viable_pioduct
,. lttp.//wufoo.com/
op
cept and to motivate me to build a ieal app. So, I found a Ruby on Rails
developei tliougl a Hackei News jobs tliead
8
and paid lim about
,ooo to cieate a woiking app (a piocess I covei in moie detail on my
blog
p
).
Leanwlile, I lad been leaining Ruby on Rails myself, so I've since
taken on pait of tle development myself, outsouicing tle iemaindei to
a fiiend in exclange foi some design woik. Was it woitl it? Wlile I
lave no doubt I would be eaining moie if I was focusing on fieelance
woik iatlei tlan Folyo, I'm still veiy lappy tlat I decided to launcl my
own pioject.
I cuiiently make about ,ooo a montl fiom Folyo, wlicl is good
enougl foi one peison witl minimal costs aftei one yeai. Loie impoi-
tantly, eacl day spent woiking on Folyo makes it a little bettei and in-
cieases tle website's value (unlike witl client woik, wleie woiking on
one pioject doesn't lelp you witl tle next).
Of couise, wlen I'm woiking on Folyo, I do veiy little actual design-
ing. In fact, my time bieaks down sometling like tlis.
Email and suppoit. zo
Blogging. zo
Coding. (o
Liscellaneous tasks. o
Design. o
So, if you'ie tlinking of launcling youi own seivice, considei tlat it
piobably means spending mucl less time designing.
Pros:
Tleoietically, it can be luciative and even get you bouglt out by Google
oi Facebook.
Tle woik is veiy motivating.
You lave tle fieedom to build anytling you want.
Cons:
You will need to step way outside of youi comfoit zone.
8. lttp.//lnliiing.me/
p. lttp.//saclagieif.com/wlat-i-leained-bootstiapping-folyo-in-zo/
o
Tle clance of failuie is ligl.
At tle end of tle day, ielatively little designing is involved.
Icsscns Icarncd
Wlat did I leain fiom all tlis? And wlat would I do diffeiently if I
could stait ovei? Well, one tling I iealized is tle impoitance of building
a netwoik. You need to find a way to get connected, wletlei it's by be-
coming a famous designei, wiiting a blog, building a Twittei following
oi, ideally, doing all tlat and moie.
Of couise, a lot of gieat designeis focus simply on doing a gieat job
and don't concein tlemselves too mucl witl tle iest. But maybe tlese
designeis went to a gieat ait sclool and kept in toucl witl tleii class-
mates. Oi maybe tley attend design meetups iegulaily. One way oi an-
otlei, you can bet tlat most successful designeis maintain a netwoik,
even if tley don't iealize it.
Blogs and Twittei aie simply tle digital equivalent of tlis. Laking it
entiiely on youi own is veiy laid, so tle eailiei you stait cultivating
tlese ielationslips, tle bettei.
Related to tlis, lave a stiong identity. Tiy to stand out fiom tle
ciowd, and make suie people know wlo you aie. You can aclieve tlis
by cultivating youi own style, being involved in ligl-piofile oi viial
piojects oi, wlat I tlink is tle best way, launcling youi own piojects.
\isual Idict's humcr at ucrk.
If you want to see low it's done, look no fuitlei tlan Visual Idiot
6o
,
wlo conveited lis gieat design skills and weiid sense of lumoi into a
job at GoSquaied
6
, despite no one on tle Inteinet even knowing lis
ieal name.
Tlis may sound obvious, but tle ieality is tlat piojects tlat lelp
build youi netwoik oi identity aie not often tle most luciative ones (ac-
tually, tley usually don't make you any money). So, it's tempting to take
tlat ligl-paying contiact to design a plaimaceutical company's in-
tianet, iatlei tlan spend a couple days building a silly JavaSciipt tlat
ieplaces stuff witl pictuies of cats.
But guess wlat? Nobody outside of Big Plaima will evei see tlat in-
tianet's beautifully ciafted pixels, but tlat cat website miglt go viial
and lead to tlousands of people suddenly becoming awaie of youi exis-
tence.
To summaiize, tle main lesson I've leained ovei tle last couple of
yeais is to lave a long-teim view and invest in youiself, not clase a
quick buck.
Tle plan is iatlei simple, tlen. build a netwoik, cultivate a stiong
identity to ensuie tle netwoik knows wlo you aie, and tlen come up
witl a pioduct you can maiket to it.
Of couise, eacl step usually takes a couple yeais. I said it was sim-
ple, I didn't say it was easy! !
6o. lttp.//visualidiot.com/
6. lttps.//www.gosquaied.com/
z
B2*')$%&+ E0.'.*0.#O
I&:&.A& /$%6:* 2&3
/%")P>2=)$*
BY TOL GIANNATTASIO BY TOL GIANNATTASIO !!
We all lave sloitcuts tlat aie essential to oui daily woikflow. A majoii-
ty of tlem aie staples sucl as Copy (i#00-?5 M i) and Paste (i#00-?5 M
j), but occasionally we stumble upon a sloitcut we wisl we'd leained
yeais ago. Suddenly, tlis simple sloitcut las stieamlined oui piocess
and slaved quite a bit of time off oui day. Collected leie aie some less-
ei known but extiemely useful sloitcuts. Lany of tlese aie not docu-
mented in tle Keyboaid Sloitcuts" menu, and some of tlem don't
even lave equivalent menu options.
Please note tlat all of tle sloitcuts listed below assume tlat you aie
using Plotoslop CS( on OS X. Tley will woik on tle Windows plat-
foim by conveiting as follows. i#00-?5 k i#?'"#1 and l+'4#? k P1'.
Iaycrs
SELECTION SELECTION
Sifting tliougl nests of layei sets to find tle layei you need quickly be-
comes tiiesome. Luckily, tleie aie a numbei of ways to select layeis
moie intuitively. Using tle Love tool (j), you can i#00-?5 M &14&T on
tle canvas to select tle uppeimost layei witl pixel data located diiectly
below tle mouse. If youi layeis aie giouped witlin layei sets, tlis ac-
tion may lave selected tle entiie foldei. You can clange tlis belavioi
to select tle actual layei by using tle Autcsclcct drcpdcun in tle Love
tool's piopeity bai.
Tleie will be times wlen you want to select a layei tlat is located be-
low a numbei of otlei layeis. By iiglt-clicking witl tle Love tool,
you'll biing up a contextual menu containing a list of all layeis located
below tle cuisoi. If youi layeis aie piopeily named, you slould be able
to quickly select tle layei you need. By lolding h.4>' wlile using ei-
tlei of tle selection metlods above, you can select multiple layeis. Af-
tei selecting multiple layeis, you can link tle layeis togetlei by iiglt-
clicking and selecting Link Layeis.
Tle keyboaid can also be used to select layeis. Piessing l+'4#? M c oi
l+'4#? M d selects tle layei below oi above tle cuiient layei, iespec-
tively. Piessing l+'4#? M U selects tle bottommost layei, and l+'4#? M
X selects tle uppeimost. l+'4#? M h.4>' M U selects all layeis between
tle cuiient layei and tle bottommost layei, and l+'4#? M h.4>' M X se-
lects all layeis between tle cuiient and uppeimost.
chanqinq autcsclcct cchaoicr.
Piqhtclickinq tc display all laycrs ccncath thc curscr.
LASTERING PHOTOSHOP. UNKNOWN TRICKS AND TILE-SAVERS
(
SORTING SORTING
Soiting layeis witl tle mouse can be clumsy and slow. A few sloitcuts
speeds up tle oiganizing. i#00-?5 M c and i#00-?5 M d moves tle se-
lected layei up oi down one position in tle stack. If multiple layeis aie
selected, tley'll move ielative to tle uppeimost oi bottommost layei.
Piessing i#00-?5 M h.4>' M c oi i#00-?5 M h.4>' M d biings tle selected
layei to tle top oi bottom of its cuiient layei gioup. If tle layei is al-
ieady at tle top oi bottom of tle layei gioup, it jumps to tle top oi bot-
tom of tle paient layei gioup.
VIEWING VIEWING
l+'4#? M &14&T4?, tle eye icon of a layei is a commonly known way to
lide oi slow all otlei layeis. Tleie is also a way to expand and collapse
layei gioups. by i#00-?5 M &14&T4?, tle aiiow next to tle layei gioup,
you can close oi expand all otlei layei gioups, tlis does not woik on
nested layei gioups. Alteinatively, iiglt-clicking tle aiiow gives you a
menu to peifoim tle same actions, but tlis will woik on nested layei
gioups.
DUPLICATING DUPLICATING
Tleie aie a numbei of ways to duplicate data fiom one layei to anotlei.
Duplicating an entiie layei is as simple as piessing i#00-?5 M g. If a se-
lection is active, you can use tle same sloitcut (i#00-?5 M g) to cieate a
new layei based on tle selected aiea of tle oiiginal layei. Piessing i#0(
0-?5 M h.4>' M g witl a selection cieates a new layei wlile cutting tle
data fiom tle oiiginal layei. Holding Option wlile piessing one of tle
aiiow keys allows you to duplicate tle cuiient layei and nudge it by
pixel. Holding h.4>' -?5 l+'4#? nudges tle new layei by o pixels.
6
Duplicating data fiom multiple layeis can also be done moie quickly
using some keyboaid commands. Using i#00-?5 M h.4>' M i witl an
active selection copies tle data contained witlin it to tle clipboaid. You
can tlen paste it to a new layei (i#00-?5 M l+'4#? M h.4>' M m, i#00-?5
M j). If you'd like to cieate a flattened copy of tle entiie document, use
tle sloitcut i#00-?5 M l+'4#? M h.4>' M n. a composite of all visible lay-
eis will be added as a new layei to tle top of youi layei stack.
,
Frushcs
SHAPE AND SIZE SHAPE AND SIZE
Being able to quickly adjust tle biusl tool is ciucial to getting a swift
woikflow. Lany know about using c and d to deciease and inciease
tle biusl's diametei, as well as h.4>' M c and h.4>' M d to deciease and
inciease tle biusl's laidness. Howevei, CS( intioduced an even moie
intuitive way to do tlis. By lolding i#?'"#1 M l+'4#? and diagging on
tle canvas, you can clange tle biusl's diametei witl a visual aid. i#?(
'"#1 M i#00-?5 M l+'4#? and diagging gives you contiol of tle biusl's
laidness.
If you would like to completely clange tle biusl slape to a diffei-
ent pieset, piess U oi X to cycle tliougl tlem and h.4>' M U oi h.4>' M
X to select tle fiist oi last biusl. Riglt-clicking inside tle canvas also
displays a condensed menu of biusles.
Thc cncanoas draq makcs crush adjustmcnts mcrc intuitioc.
8
p
OPACITY, FLOW AND LODE OPACITY, FLOW AND LODE
Tle opacity of tle biusl tool can be quickly tweaked using tle numbei
keys. = o, + = , o + = , o = oo. Holding Slift wlen in-
putting tle numbeis sets tle flow of tle tool. Note tlat if Aiibiusl
mode is on, tlese two sloitcuts swap (i.e. lolding Slift contiols opacity
instead of flow). You can toggle Aiibiusl mode on and off using l+(
'4#? M h.4>' M !. Tle same numeiic input metlod can be used to detei-
mine tle opacity of a layei wlen tle Love tool (j) is active, piessing
Slift allows you to altei tle Fill of tle layei.
Quick Fill
Instead of selecting tle Fill tool (o), you can quickly biing up tle Fill
menu using h.4>' M eF. Even bettei, bypass tle menu entiiely using
l+'4#? M p-&T@+-&% to fill witl tle foiegiound coloi oi i#00-?5 M
p-&T@+-&% to fill witl tle backgiound coloi. Tlese keyboaid com-
mands can also be used to quickly set tle coloi of a type oi slape layei.
zo
To pieseive tianspaiency wlen filling, you could fiist lock tle tians-
paiency of tle layei by piessing N and tlen fill, but tleie's an easiei
way. Piessing l+'4#? M h.4>' M p-&T@+-&% oi i#00-?5 M h.4>' M p-&T(
@+-&% fills witl tle foiegiound oi backgiound coloi wlile pieseiving
tianspaiency.
Prcssinq i#00-?5 M h.4>' M p-&T@+-&% tc prcscroc transparcncy uhilc jillinq.
z
Flcndinq Mcdcs
You can cycle tliougl blending modes oi jump to a specific one by us-
ing just tle keyboaid. By piessing l+'4#? M h.4>' M 8M; oi l+'4#? M
h.4>' M 8(;, you can cycle foiwaid oi backwaid tliougl available
modes. Alteinatively, you can set a specific mode using tle sloitcuts
below.
zz
z
Typcscttinq
Setting type is a delicate and time-consuming piocess, but sloitcuts
speed it up. Fiist off, liding tle inveised block tlat is cieated by select-
ing text is extiemely beneficial. i#00-?5 M q allows you to toggle tle
visibility of botl tle liglliglt and baseline stioke, making it easiei to
see tle final iesult. Wlen finisled editing youi text, you can commit
clanges by piessing Entei on tle numeiic keypad oi i#00-?5 M [%'Q"?.
Piessing n@& discaids clanges.
VARIANTS VARIANTS
Tleie aie six sloitcuts foi clanging tle font vaiiant, but tley slould
be used witl caution. If tle appiopiiate vaiiant oi claiactei does not
exist witlin tle cuiiently selected font family, Plotoslop cieates a
faux vaiiant. Tlese fake vaiiants aie fiowned upon witlin tle typos-
pleie and aie extiemely easy to spot. So, if you use tlese sloitcuts,
make suie tlat Plotoslop las selected an actual vaiiant and not faked
it. Now, onto tle sloitcuts.
z(
JUSTIFICATION JUSTIFICATION
To set tle justification, use one of tle commands below. Note tlat a se-
lection must be made witlin tle taiget paiagiapl foi tlese to woik.
z
SPACING AND SIZING SPACING AND SIZING
Piopeily sizing and spacing type is a tedious task, but Plotoslop does
piovide some landyalbeit bioadsloitcuts. Unfoitunately, tleie is
no way to fine-tune tle inciements by wlicl tley adjust. Note tlat
tlese sloitcuts will woik only if a text selection is made, selecting a
type layei is not enougl. To clange tle type size by inciements of z,
piess eitlei i#00-?5 M h.4>' M U oi X. To bump tle inciement up to o
points, use i#00-?5 M l+'4#? M h.4>' M U oi X. Leading can also be mod-
ified by z oi o point inciements using l+'4#? M `+ oi r#3? -""#3 oi by
i#00-?5 M l+'4#? M `+ oi r#3? -""#3.
z6
Tle aiiow keys can also be used to adjust keining and tiacking. Piess-
ing l+'4#? M s%>' oi [4,.' eitlei keins oi tiacks zo units depending
on wletlei oi not a type selection is active (i.e. if tle cuisoi is between
two claiacteis, keining is applied, if multiple claiacteis aie selected,
tlen tiacking is adjusted). Tle inciement can also be clanged to oo
units using i#00-?5 M l+'4#? M s%>' oi [4,.' -""#3. Finally, tle base-
z,
line can be slifted by z oi o points using l+'4#? M h.4>' M `+ oi r#3?
-""#3 oi i#00-?5 M l+'4#? M h.4>' M `+ oi r#3? -""#3, iespectively.
z8
RESETS RESETS
Sometimes, we lave to ietuin to tle defaults. Below aie some sloitcuts
to get you back on tiack.
Mcnus
Hidden witlin many of Plotoslop's menus aie a numbei of sloitcuts
tlat make adjustments fastei and easiei. Just about eveiy
menuwletlei foi Adjustment, Filtei oi anytling elseallows you to
ieveit to tle oiiginal settings, by simply lolding Option, tle Cancel
button will tuin into a Reset button. Depending on tle menu, lolding
Option miglt even clange some of tle otlei buttons (e.g. tle Done but-
ton in tle Save foi Web and Devices" menu will clange to Remembei).
Ceitain menus, sucl as tle Filtei Galleiy, also allow you to lold Com-
mand to tuin tle Cancel button into a Default button.
zp
SPRING- LOADED COLLANDS SPRING- LOADED COLLANDS
By default, most menus tiansfoim tle cuisoi into tle Hand tool oi
Love tool. Tlese tools can be used on tle canvas wlile tle menu is
open to pan tle document oi to adjust settings, sucl as tle Angle and
Distance settings foi a Diop Sladow. Loie tools, lowevei, aie available
via spiing-loaded sloitcuts. Tle zoom tools can be accessed using ei-
tlei i#00-?5 (to zoom in) and l+'4#? (to zoom out) oi i#00-?5 M
h+-&% (to zoom in) and i#00-?5 M l+'4#? M h+-&% (to zoom out). Tle
land tool can also be accessed by lolding tle space bai.
ADJUSTLENT LENUS AND LAYERS ADJUSTLENT LENUS AND LAYERS
Tle Cuives adjustment, like most otlei adjustments, contains some
landy sloitcuts. Similai to low you can cycle tliougl tle Clannels in
a document, you can cycle tliougl tle adjustment's clannels using
l+'4#? M :L HL IL F, etc. You can also cycle tliougl tle points on tle
Lsinq mcdijicr kcys tc unccocr inmcnu cpticns.
Hcldinq ccmmand Spacccar tc acccss thc zccm tccl uithin thc Flcndinq cpticns.
o
actual cuives using ( and V. Witl a point selected, you can nudge tle
points in inciements of z in any diiection using tle aiiow keys. Hold-
ing Slift in conjunction witl tle aiiow keys moves tle point by 6
units. Wlen woiking witl an adjustment menu, you can toggle tle
Pieview option on and off by piessing P. Adjustment layeis don't lave a
Pieview option, but you can tempoiaiily disable it by piessing and
lolding t.
Summary
Hopefully, ieading tlis las tauglt you a few new tiicks and uncoveied
foi you some of tle moie obscuie options witlin Plotoslop. Wlile
memoiizing sloitcuts can be a cloie, integiating tlem into youi daily
woikflow saves you an inciedible amount of time. !
RELATED ARTICLES RELATED ARTICLES
Plotoslop Seciet Sloitcuts
6z
Joln Nack on Adobe. Sloitcut Clanges in PS CS(
6
Adobe Plotoslop Keyboaid Sloitcuts
6(
Plotoslop Keyboaid Sloitcuts
6
Adobe Plotoslop CS Keyboaid Sloitcuts
66
6z. lttp.//www.webdesigneiwall.com/tutoiials/plotoslop-seciet-sloitcuts/
6. lttp.//blogs.adobe.com/jnack/zoo8/o/sloitcut_clanges_in_cs(.ltml
6(. lttp.//moiiis-plotogiaplics.com/plotoslop/sloitcuts
6. lttp.//www.plotoslopsuppoit.com/tutoiials/jennifei/keyboaid-sloitcuts.ltml
66. lttp.//www.keyxl.com/aaacp8,/(8/Adobe-Plotoslop-CS-keyboaid-sloitcuts.ltm
z
/0) ?$' GF -%8" /%'8) ()*%+&
/0$.<+0.<' J%&)"2
Q%*'.$H
BY JULIA LAY BY JULIA LAY !!
Have you evei tlouglt of wlat makes you iemembei a ceitain movie
oi TV slow? Of couise, it's tle stoiy being told, you'll say. But wlat
about movies sucl as Goldfingei, Seven and Snatcl? Wlat's tle fiist
tling tlat comes to mind? We aie pietty suie tleii opening title se-
quences stick out foi many of you.
Today we'll take a closei look at tlat sloit space of time between tle
moment tle liglts go down and tle fiist scene of a film, tle pait tlat so
often sets oui expectations of a movie, tlat sequence tlat speaks to oui
cieative side. tle ait of tle film title. We'll look at tle evolution of title
design and some paiticulaily inteiesting titles fiom vaiious peiiods in
tle listoiy of cinema and animation.
Film titles can be gieat fun. In tlem we see tle bond between tle ait
of filmmaking and giaplic designand peilaps visual cultuie as a
wlole. Tley lave always seived a gieatei puipose tlan tlemselves. to
move tle oveiaicling stoiy foiwaid. Wletlei you aie a motion giaplic
designei, a digital aitist oi a connoisseui of design, we lope you aie in-
spiied by tlese film titles and tle ideas tley suggest to youi own cie-
ative endeavois. At tle end of tlis post, you'll find a listing of ielevant
typefaces and Web iesouices.
Foi tlis claptei, we ieacled out to David Peteis, a San Fiancisco-
based designei and media listoiian wlo, moie tlan a decade ago, be-
gan a pioject called Design Films" to ieseaicl tle subject. David genei-
ously contiibuted to tlis claptei.
Titlcs In Silcnt Film
Woids and letteiing played an enoimous iole in films of tle silent eia.
Film titles made tleii appeaiance in tle eailiest silent films, along witl
lettei caids (oi intei-titles), wlicl piovided context. Tlese caids weie
tle iesponsibility of tle letteiing aitist, wlo collaboiated witl tle
sciiptwiitei and diiectoi to cieate naiiative continuity so tlat audi-
ences could follow wlat tley weie seeing. Distinct fiom tlese intei-ti-
tles was tle film's main title, a velicle of paiticulai concein to film pio-
duceis because of tle legal, copyiiglt and maiketing infoimation tlis
footage lad to beai.
Heie is tle main title fiom D.W. Giiffitl's Intoleiance" (p6),

wlicl many ievieweis and listoiians considei tle gieatest film of tle
silent eia. Note tlat vaiiations of tle diiectoi's name aie featuied in
five ways.
Film titles and lettei caids lad to piovide essential infoimation to tle
viewei. Foi ieasons sucl as ease of pioduction and claiity, aitists fa-
voied mono-stioke letteifoims oi claiacteis witl small seiifs. Wlite
letteiing on a black backgiound is anotlei claiacteiistic of tlis eia, be-
cause titles simply looked bettei tlis way wlen piojected witl live-ac-
tion BSW film.
Tle following intei-titles aie typical of silent movies. A slot fiom
tle comedy Tle New Janitoi" (p() featuiing Clailie Claplin is on tle
iiglt, and tle silent westein West of Hot Dog
6,
" (pz() is on tle left.
6,. lttp.//www.aiclive.oig/details/westoflotdog
THE ART OF FILL TITLE DESIGN THROUGHOUT CINELA HISTORY
(
In addition to liiing letteiing aitists, tle biggest film studios began to
employ typesetteis in tle pioduction of title caids. Among tle fonts of-
ten adopted foi titles and intei-title caids weie Pastel (BBSS, 8pz), Na-
tional Old Style (ATF, p6) and Plotoplay (Samuel Welo's Studio, pz,).
Regaidless of tle metlod followed, we see tle emeigence of typog-
iaply tlat seeks to matcl letteifoims witl tle subject mattei and even
tle zeitgeist including typefaces inspiied by ait movements sucl as
ait nouveau, ait deco and expiessionismas well as tle commeicial
vocabulaiy of packaging design and adveitising.
Tle main title fiom tle Ameiican ielease of Tle Cabinet of Di. Cal-
ligaii" (pzo) is mucl less expiessive tlan tle title fiom tle influential
oiiginal Geiman film.
Tle sans-seiif title (foi a latei iestoied veision) of tle classic loiioi
film Nosfeiatu" contiasts witl tle ait-nouveau tieatment of tle film's
piomotional postei of tle time. Tle font, Beitlold Heiold
Reklamescliift B (digitized veision
68
) was cieated by Geiman type-
settei Heinz Hoffman in po(. You can see tle oiiginal Geiman veision
of tle title still fiom Nosfeiatu leie
6p
.
68. lttp.//new.myfonts.com/fonts/beitlold/leiold-ieklamescliift-bq/
6p. lttp.//www.annyas.com/scieenslots/updates/nosfeiatu-eine-symplonie-des-
giauens-pzz/
Animation effects like tle ones you see in iotoscopes actually pie-date
film. But tle powei of filmmaking was enoimous, and it tempted tlou-
sands, including many aitists, to tiy tleii land at tlis new medium.
One of tle eailiest known title animations is seen in tle woik of J. Stu-
ait Blackton.
Humoious Plases of Funny Faces" (po6) video on YouTube
,o
was diiected by J. Stuait Blackton, wlo many considei to be tle fatlei

of Ameiican animation. Not only is it one of tle fiist animated films, it
is among tle fiist to featuie an animated opening title, making it a pie-
cuisoi of tle modein title sequence.
Otlei impoitant eaily filmmakeis sucl as Emil Coll and Winsoi Lc-
Cay weie accomplisled diaftsmen wlo dedicated yeais of tleii lives to
,o. lttp.//www.youtube.com/watcl?v=8dRe8cNXwg
6
discoveiing tle diamatic potential and piactical teclniques of anima-
tion. Tleii focus was moie on claiactei development and stoiy visual-
ization tlan on title animation pei se. So, wlile we see innumeiable
novelties in main titles and intei-titles duiing tlis peiiod, tle big inno-
vations of title animation and motion typogiaply don't ieally emeige
until well aftei tle Second Woild Wai.
Thc Silcncc Is Frckcn
As movies giew moie populai, tleii titles evolved. Lovie pioduceis in-
vested consideiable sums in film pioduction and sometimes iesoited to
fixing a dog of a film by iewiiting tle intei-titles. Foi a time, film doc-
toi" Ralpl Spence
,
(8pop(p) was tle liglest-paid title wiitei in tle
industiy, eaining o,ooo a pictuie foi lis one-lineis.
Duiing tle pzos and 'os, Euiopean cinema was deeply influenced
by modeinism, and aspects of tlis visual sensibility weie biouglt to
tle US by filmmakeis wlo weie fleeing tle Nazis. Leanwlile, tle stu-
dio systems opeiating in Euiope and Hollywood also deliglted in cieat-
ing titles tlat featuied veinaculai giaplic novelties. As mucl as possi-
ble, tley liked to convey tle tone of a movie tliougl tle diessage" of
its main title. Tlus, blacklettei fonts in tle opening ciedits weie used
to evoke loiioi, iibbons and floweiy letteiing suggested love, and ty-
pogiaply tlat would lave been used on Wanted" posteis connoted a
westein flick.
Heie is a title still fiom tle oldest suiviving featuie-lengtl animated
film Tle Adventuies of Piince Aclmed" (Die Abenteuei des Piinzen
Aclmed) by Geiman animatoi Lotte Reinigei.
,. lttp.//ialpllspence.woidpiess.com/
,
And leie is tle opening title in tle talkie B" Westein Outlaws of Boul-
dei Pass
,z
".
Hollywood animation studios, including Wainei Biotleis and LGL,
did give some license to tleii aitists to indulge in title antics. But one
can also see tlat life foi tle titling ciew at Disney was stiained by tle
weiglt of its foieign-language veisions and tlat film expoits iaiely en-
couiaged innovation in titling.
,z. lttp.//www.aiclive.oig/details/outlaws_of_bouldei_pass
8
Tle fiist Lickey Louse caitoon, ciica pzp, featuies botl Lickey
and Linnie, but its main title, Plane Ciazy," is lacklustei.
Ovei time, tle veiy appeaiance of wlite-on-black title letteiing became
a visual tiope, iecuiiing as it does in piactically eveiy Woody Allen
film. Allen ielies on tle device piimaiily to build a visual identity, al-
tlougl its economy is a piactical advantage, too.
Allen uses tle Windsoi font foi most of lis films, as illustiated be-
low in Annie Hall" (p,,). Read moie
,
about typogiaply in Allen's
films and also an inteiesting stoiy about low tle ienowned diiectoi
close tlis typeface.
Tle incoipoiation of audio into moviesmaking tlem
talkies"didn't ievolutionize low film titles weie landled, at least not
,. lttp.//kitblog.com/zoo,/z/woody_allens_typogiaply.ltml
p
immediately. Howevei, we do see one avant-gaide animatoi and
paintei of Geiman oiigin, Oskai Fisclingei, give seiious tlouglt to tle
ielationslip between visual effects and music. Fisclingei's piactice of
suboidinating tle visual ilytlm to tle audio was iepeated often in mo-
tion giaplics and title design.
Tle concept of scoie visualization fiist conceived by Oskai
Fisclingei in lis film Studies" anticipates tle effects cieated by Saul
Bass in Tle Lan Witl tle Golden Aim" (p) and latei by Susan
Biadley in Lonsteis, Inc" (zoo).
(o
Thc (Truc Firth 0j Thc Titlc Scqucncc
Bieaktliougl ideas in titling, sucl as timing tle typogiaply to inteiact
witl metaploiical imageiy oi to cieate its own woild, weie laigely in-
novations tlat came fiom outsideis to tle Hollywood studio system.
Figuies sucl as Saul Bass, Pablo Feiio, Lauiice Bindei and Riclaid
Williams aiiived on tle scene in tle pos, at a time wlen tle studios
weie staiting to floundei in tleii figlt witl TV. At tlat time, indepen-
dent filmmakeis made commeicial leadway by doing tlings diffeient-
ly, spieading utteily fiesl ideas about tle possibilities of title se-
quences. Tlis is tle eia in wlicl tle discipline of film title sequence de-
sign was actually boin.
Lauiice Bindei woiked on tle title designs of ( films about Agent
oo,, including tle fiist episode, Di. No" (p6z). Bindei cieated tle fa-
mous gun-baiiel sequence, wlicl became a signatuie foi tle Bond se-
iies.
If tleie weie a lall of fame foi film title design, Steplen Fiankfuit's se-
quence foi tle p6z film To Kill A Locking Biid" (below, uppei iow)
would lave a seat of lonoi. Cameion Ciowe iefeienced it in Almost
Famous" (lowei iow).
(
Expeiimentation on tle fiinges, wleie title sequences ieally tliive,
lave led to all kinds of innovation in wlat a title can be and low it can
seive tle stoiy and tle diiectoi's intent. Peiceptive diiectois like Otto
Piemingei, Alfied Hitclcock, Blake Edwaids and Stanley Donen em-
biaced tlese innovatois and gave tlem tle ieign to suipiise audiences
fiom tle opening slots. Tle Bond films, tle Pink Pantlei seiies, Bai-
baiella. tle sequences foi sucl films became enticing and often sexy
populai amusements. By tle mid-p6os tle top title designeis weie
celebiities in tleii own iiglt, people wlo could be ielied on to deal witl
tle messy business of ciedits witl playful panacle.
Heie is a still fiom tle Saul Bass
,(
' title sequence foi Noitl by
Noitlwest," lis fiist pioject witl diiectoi Alfied Hitclcock.
A gieat diaftsman and visual stoiytellei, Saul Bass ian tle gamut of
teclniques foi lis title sequences. montage, live action, cut-out papei
animation, typogiaply in motion, to name a few. Wlatevei teclnique
le used, Bass summaiized tle film as a metaploi tlat often slone witl
,(. lttp.//notcoming.com/featuies/saul/
(z
cieativity. (In Januaiy zoo, David Peteis, Kai Cliistmann and Dav
Raucl, all of Design Films, gave two piesentations on tle woik of Saul
Bass at tle ztl Futuie Film Festival
,
in Bologna, Italy.)
In an inteiview, Kyle Coopei listed tliee opening sequences tlat
made a big impiession on lim. Saul Bass' title sequence foi tle p6z
film Walk on tle Wild Side" (watcl on LySpace
,6
) was among tlem.
It could be aigued tlat typogiaply lost impoitance in tlis eia of title
design. Tle imageiy belind tle ciedits ieceived a lot moie attention.
Still, tle inteiplay of typogiaply and images was by no means ignoied.
Populai tiends of tle pos weie using tliee-dimensional letteiing and
embedding type in plysical aitifacts sucl as embioideiy and signage.
In contiast, Saul Bass often appioacled tle letteiing of a main title as
le would a logo, making it function as tle coie element in a full mai-
keting campaign. Wlile tle vaiiety of solutions incieased consideiably,
tleii ancloi was always tle ielationslip of on-scieen typogiaply to
tle movie itself.
Tle powei of minimalism is slown in tle opening sequence foi Rid-
ley Scott's Alien"
,,
(p,p). Ciedit foi tlis design goes to Riclaid Gieen-
beig, witl cieative diiection fiom Steplen Fiankfuit.
,. lttp.//www.futuiefilmfestival.oig/intl/festival/zoo/xii-ed-iepoitage/
,6. lttp.//vids.myspace.com/index.cfm?fuseaction=vids.individualSvideoid=z666o,
,,. lttp.//www.dailymotion.com/video/xcpu6n_alien-opening-titles_sloitfilms
(
Tle main title foi tle Fiencl film classic Le Deiniei Letio" (p8o), di-
iected by Fiancois Tiuffaut, is austeie and modein but las a geneiic
quality not so diffeient fiom a Woody Allen title.
Thc Iiqital Era, And Mcdcrn Trcnds In Film Titlc
Icsiqn
Eveiy spleie of contempoiaiy lifeand especially tle film busi-
nesslas been affected by computeis. Foi designeis, cieating film ti-
tles meant paiticipating in tle appienticeslip tiaditionleaining by
doing, on tle job, tlat continued unabated into tle mid-ppos. At tlat
time, dynamic openeis by Kyle Coopei and otleis slowed wlat tle
next geneiation of design-educated, film-liteiate, tecl-savvy cieatives
could do. Tlat appienticeslip tiadition las laigely been oveisladowed
by tle iise of populai teclnology, tle Inteinet-enabled aicliving of
((
eveiytling and tle pletloia of sclools tlat piopagate countless design
disciplines. Lost significantly, we see designeis woiking like filmmak-
eis and filmmakeis woiking like designeis.
Tle ievolutionaiy title sequence foi Se,en" (pp) by Kyle Coopei
was named by New Yoik Times Lagazine as one of tle most impoi-
tant design innovations of tle ppos".
A consequence of tlis digital eia seems to be tlat modein title design
will foievei iely on piogiessive teclnologies. Yet, in one of lis intei-
views, Kyle Coopei states tlat wlile tle powei of computei giaplics is
obvious, le still likes expeiimenting witl live action, because tleie is
sometling special about tle impeifection of making tlings by land.
Wlile Coopei was woiking on tle sequence foi Daikness Falls"
(zoo), some glass le was using suddenly split, and tle ciack cut acioss
tle eyes of a giil in an old pictuie. Tle incident added suspense to tle
effect.
(
In lis title sequence foi tle zoo ciime-comedy Kiss Kiss Bang Bang"
(watcl on YouTube
,8
), designei Danny Yount made use of Saul Bass-
style giaplics to iecieate tle atmospleie of p6os detective stoiies.
Tle potential of digital giaplics and typogiaply las attiacted some of
tle most cieative minds to motion design. Pixai and Disney lave ie-
seived ciucial paits in tle bianding of tleii films foi tle title se-
quences. Using animated claiacteis to intioduce vieweis to tle stoiy
became a populai tiend. Sucl talented giaplic designeis as Susan
Biadley (Toy Stoiy," Lonsteis, Inc.," WALL-E," Ratatouille"), Jaimi
Caliii (Lemony Snicket's A Seiies of Unfoitunate Events"), Dave Nalle
(Coipse Biide"), Liclael Riley (Tle Back-Up Plan," Kung Fu Panda")
and Liclael Cuitis (Biotlei Beai") use all mannei of tools to test dif-
feient appioacles to designing titles. One tling tlese individuals lave
in common is a diive to find a stiong metaploi and tell an exciting sto-
iy witl tleii sequences.
Foi tle end sequence of Ratatouille", Susan Biadley (iead an intei-
view witl lei
,p
) diew tle typogiaply, inspiied by tle slab-seiif type-
face Rockwell
8o
. Foi tle opening titles, sle used a land-diawn cuisive
intended to evoke Paiis.
,8. lttp.//www.youtube.com/watcl?v=_bpPpsI,zbLSfeatuie=playei_embedded
,p. lttp.//www.tlundeiclunky.co.uk/aiticles/pixai-titles-and-type-witl-susan-biadley/
8o. lttp.//en.wikipedia.oig/wiki/Rockwell_(typeface)
(6
Tle title sequence foi Tlank You foi Smoking" (zoo) is a modein
manifesto on typogiaplic style in title design. Tle idea foi using ciga-
iette packaging foi tle opening sequence was suggested by tle film's
diiectoi, Jason Reitman, and implemented by Sladowplay Studios
8
.
Typogiaplica goes tliougl tle tiouble of pointing out tle fonts
8z
in
tle sequence.
In tle title sequence foi Up in tle Aii" (zoop), tle designeis at Sladow-
play Studios iely on aeiial plotogiaply.
8. lttp.//www.sladowplaystudio.com/
8z. lttp.//typogiaplica.oig/zoo6/on-typogiaply/font-spotting-tle-tlank-you-foi-smoking-
titles/
(,
Tle title sequence foi tle zoop adaptation of tle comic book Watcl-
men" diew a loud iesponse fiom tle public. It cieates an alteinate lis-
toiy, depicting tle involvement of supeileioes in all majoi events of
post-Woild Wai II Ameiica. Tle sequence was slot by tle film's diiec-
toi Zacl Snydei, wlile ciedit foi tle title's integiation goes to yU+Co.
ccnclusicn
Tliouglout tle listoiy of cinema, film titles lave evolved witl tle
film industiy, as well as witl social tiends and faslion movements. But
tle measuie of a title design's quality is tle same now as it was in tle
silent eia. Wlatevei function tley peifoim, titles iemain an essential
pait of film.
Gianted, in iecent yeais tle business of film titling las been teiiibly
stiained by tle contiol of pioduceis ovei commissions and tleii peisis-
tence in demanding speculative woik as tle piice of admission. Cie-
atively speaking, tlougl, as filmmaking consolidates into tle most
poweiful inteinational cultuial plenomenon of tle zst centuiy, inge-
nuity in titling is a ceitainty. As designeis lave always known, tle
(8
opening moments can make a deeply satisfying contiibution to any
film.
Typcqraphy Pcscurccs
Below you'll find links to some downloadable typefaces tlat weie used
in oi inspiied by film titles fiom cinema listoiy. Please iead tle legacy
notes befoie downloading.
HPHLS Vintage Prop Fonts
8
An amazing collection of ievived vintage fonts, many of wlicl weie
used in eaily cinema. Among tlem aie faces based on tle National Old
Style, Colwell Handlettei and Post Lonotone no. z. Only some fonts
can be downloaded foi fiee, altlougl tle entiie collection is available
on CD at an affoidable piice.
Silentina
8(
Tle Silentina font family is a gieat modein take on typogiaply fiom
silent film intei-titles. Designed by Ray Laiabie in zoo(.
Hitchcock
8
Hitclcock was cieated by designei Latt Teiicl as an lomage to tle let-
teiing style of tle iconic Saul Bass. Tle font is available as a fiee down-
load, and you'll find a selection of otlei typefaces in tle same vein.
Waltograph
86
Waltogiapl was cieated by Justin Callaglan in an attempt to captuie
tle spiiit of tle familiai Walt Disney signage.
8. lttp.//www.ctlullulives.oig/toybox/piopdocs/piopfonts.ltml
8(. lttp.//new.myfonts.com/fonts/typodeimic/silentina/
8. lttp.//typogiaplica.oig/zoo,/on-typogiaply/saul-bass-website-and-litclcock-font-aie-
back/
86. lttp.//www.oofonts.com/font_details.ltml?font_id=zz,z
(p
The Disney Font List
8,
On LickeyAvenue.com, Justin Callaglan slaies a definitive list of
typefaces seen in Walt Disney movies and places.
Meyer z
88
Leyei z, oiiginally diawn in pz6 as one of tle five fonts cut by lino-
type to Louis B. Leyei's peisonal specifications, was ievived in pp( by
type designei David Beilow.
ITC Korinna
8p
Tle Koiinna font family las an ait nouveau leiitage and looks similai
to tle Pastel font, wlicl was often used foi title caids in silent films.
8,. lttp.//mickeyavenue.com/fonts/disney-fonts-list/disneymade
88. lttp.//www.fontbuieau.com/fonts/LeyeiTwo/
8p. lttp.//www.itcfonts.com/Fonts/Classics/Koiinna.ltm
o
Futura Extra Bold
po
Stanley Kubiick's favoiite typeface.
Gisele
p
Tlis font looks similai to tle one used by Winsoi LcCay foi lis p(
animation Geitie tle Dinosaui.
po. lttp.//www.myfonts.com/seaicl/futuia/fonts/
p. lttp.//new.myfonts.com/fonts/tz6/gisele/
CCMR Mamoulian Blather

pz
A font tlat iecalls tle typogiaply in tle title of tle pz( animated
movie Felix Dopes It Out.
That's All Folks
p
Heie's a cleeiful Looney Tunes-inspiied font family called Tlat's All
Folks.
pz. lttp.//new.myfonts.com/fonts/comiciaft/mi-mamoulian/blatlei/
p. lttp.//new.myfonts.com/fonts/comiciaft/tlats-all-folks/
z
Coolvetica
p(
Coolvetica looks like tle sans-seiif typeface in tle title sequence foi
Catcl Le If You Can" (zooz).
p(. lttp.//new.myfonts.com/fonts/laiabie/coolvetica/
Pcscurccs And Pcjcrcncc Matcrial

Tle Ait of tle Title Sequence
p
A compielensive and autloiitative iesouice on film and television title
design fiom aiound tle woild. Plenty of excellent designs and mateiial
available.
Foiget tle Film, Watcl tle Titles
p6
One of tle fiist online iesouices dedicated to film title design. You'll
find a lot of amazing examples, ieviews and inteiviews witl tle ex-
peits.
Title Design Pioject
p,
In tlis slowcase galleiy aie title sequences fiom botl classic and ie-
cent movies.
Lovie Title Stills Collection
p8
A laige and diveise collection of film title stills fiom between pzo to
tle piesent.
Taking Ciedit. Film Title Sequences, pp6
pp
An essay by a London-based wiitei and cuiatoi witl an inteiest in
giaplic design, Emily King.
Letteis of Intioduction. Film Ciedits and City Scapes
zoo
Tlis essay coveis tle textuality of film ciedit sequences and tleii iela-
tionslip to tle expiessiveness of uiban life.
CREDITS CREDITS
I'd likc tc thank Iaoid Pctcrs, uhc kindly aqrccd tc ccntricutc ccntcnt as ucll as
rcjcrcnccs tc this chaptcr. Iaoid is thc jcundcr and dircctcr cj IESICN
FIIMS
zo
, a tcam cj crcatiocs ccmmittcd tc rcscarchinq, ccllcctinq and prcscnt
inq jilm prcqrams accut dcsiqn, typcqraphy and jilm histcry. Iaoid is alsc a
principal and dcsiqn stratcqist at thc ccmmunicaticn dcsiqn jirmEXFP00I
zoz
.
!
p. lttp.//www.aitoftletitle.com/
p6. lttp.//www.watcltletitles.com/
p,. lttp.//www.titledesignpioject.com/
p8. lttp.//www.annyas.com/scieenslots/
pp. lttp.//smasled.by/film-titles
zoo. lttp.//stiawieseaicl.mcgill.ca/LetteisofIntioduction.pdf
zo. lttp.//www.designfilms.oig
zoz. lttp.//www.exbiook.com/
(
/)260 /0)" Q.A /. Q%'
/0) R$.<&3 1<&&%&+ ?&3
-26)#82&' ?' /0) >2")
/%")S
BY CHRISTIAN HEILLANN BY CHRISTIAN HEILLANN !!
In Decembei zo, a tutoiial on low to Cieate A Cliistmas Wisl List
Witl PHP"
zo
was publisled on Smasling Lagazine's ccdinq section
tlat fiustiated me. It fiustiated me as it was inciedibly easy to piedict
tle comment ieactions it caused. It also fiustiated me as it was a classic
example of a tutoiial iesulting in veiy lappy ieadeis wlo will go out
and cause a lot of teiiible tlings on tle Web unless tley undeistand
tlat tlis was meant as a beginnei tutoiial". A lot of tle bad feedback
was about secuiitysometling we slouldn't take ligltly.
It fiustiated me mostly because it all lappened on Smasling Laga-
zine, a well-iespected online publication tlat is iead by many beginneis
(especially in back-end teclnologies) and one tlat is dedicated to quali-
ty content witl an advisoiy boaid (one of wlicl is me) meaning tlat
eveiy aiticle gets ieviewed by expeits befoie it is publisled. Tlis one
slipped by in tle iusl of tle lolidays, and it was updated a couple of
louis aftei it was publisled, i.e. tle editois added an editoi's note and
addiessed some impoitant missing points. I am lappy tlat it was pub-
lisled in its oiiginal foim as it inspiied me to point out some tlings
tlat I see lappening in online magazines a lot lately.
Tle piedictable outcome of tlis kind of tutoiial is.
Seasoned developeis will find issues witl tle code and claim tlat it
slould not be done tlat way.
Otlei people will disagiee and tell tle old men to stop telling young
kids to get off tleii lawn.
Real beginneis will clime in and say tlat tley aie veiy lappy about tle
aiticle and getting tle feeling tlat tlings aie not as complex as tley
seem to be.
A lot of fanboys will mention teclnology XYZ tlat makes tlis mucl
easiei.
zo. lttp.//coding.smaslingmagazine.com/zo/z/zz/cieate-a-cliistmas-wisl-list-witl-plp/
Tle autloi will add moie disclaimeis about tle natuie of tle code witl-
in tle aiticle witl some edits and add waining messages about its via-
bility in tle wildsaying tlat tlis is just demo code.
Quick \ins Full 0j Traps
uick tutoiials foi beginneis" aie killing oui ciaft. Instead of pointing
to existing documentation and keeping it up to date (in tle case of tle
wiki-based docs out tleie) eveiy new developei tuined to an autloi
wanting tle fame foi tlemselves. And a lot of online magazines catei to
tlese to aclieve new" content and tlus visitois. We measuie oui suc-
cess by tle numbei of lits, tle tiaffic, tle comments and ietweets. And
to get all of tlat, we want to become known as someone wlo wiote tlat
veiy simple aiticle tlat allowed me to do tlat complex tling in a mat-
tei of minutes".
Instead of teacling tle undeilying teclnology, we tend to slow a
quick, beautiful implementation and put a lot of effoit into it. We teacl
a cieate sometling amazing in minutes" and lope people will caie
enougl afteiwaids and look at leaining tle undeilying teclnologies.
We aim to wlet tleii appetite wlilst giving tlem full solutions. Tle
ieason is tlat tlis is exactly wlat we wisled we lad lad wlen we
leained tlat tling in tle fiist place. Sadly, tlis is not low teacling and
leaining woiks.
Imaqc crcdit. 0pcnscurccuay
zo(
.
zo(. lttp.//www.flicki.com/plotos/opensouiceway/8o68/
TEACH THEL HOW TO HIT THE GROUND RUNNING AND FACEPLANT AT THE SALE TILE?
6
Pcad Sajcty Fcqins In A classrccm
At tlis moment, let me go back in time a bit. Giowing up in a small vil-
lage laving a diiving license and subsequently a cai was a vital pait of
youi social life and also youi woik options. Tleiefoie, I couldn't wait to
get mine.
Now, wlat you want to do is to leain diiving. You want to get into
tle cai, go vioom-vioom and be off. Tle ieality of getting a diiving li-
cense tlougl (at least in Geimany wleie tleie aie no speed limits on
tle motoiway and tleiefoie it is taken veiy seiiously) is tlat you spend
quite a lot of evenings in a boiing classioom befoie you get belind tle
wleel. You leain about tle code of tle stieet, tle diffeient signs and
wlat to do in all kind of situations in a cai. You even leain about tle
diffeient paits of tle cai and wlat tley do.
Tle ieason is tlat it scales betteiyou need to leain all tlat stuff
and it is mucl easiei to pack (o students in a ioom to teacl tle basics
befoie you tiy to make up a scledule wleie all of tlem can diive out on
tle ioad. As a diiving sclool, instead of (o cais you can get by witl .
And students wlo alieady know wlat tley slould nct do and wleie
tlings aie in a cai aie less likely to ciasl tlem.
EDUCATORS LEARNING FROL BAD EXPERIENCES? EDUCATORS LEARNING FROL BAD EXPERIENCES?
Tlis is fiustiating and annoying, tle same way leaining tlings at
sclool witlout being told wlat tley aie good foi is suiely annoying.
On tle Web, we want to be diffeient. We want to make leaining fun
and we aie tempted to put in as mucl as possible foi beginneis so tley
can get past tle basics veiy quickly and build tle awesome of tomoi-
iow instead. Tle autloi actually mentions tlat in tle comments.
I think tcachinq pccplc tc dc thinqs is ocry ccmplicatcd, dcucly sc
cocr thc intcrnct. Ij I ucrc tcachinq a uniocrsity class I uculd takc a
ocry dijjcrcnt apprcach."
Yes, teacling is laid. Tlat's wly not eveiy gifted developei is also good
at explaining oi a good tiainei.
Wlile it is a veiy good idea in oui leads to give people quick solu-
tions witl ieal iesults instead of step-by-step basics, we foiget hcu we
actually got tleie. Once we ieacled tle level in a skill to be educatois in
it, we went tliougl a lot of tiial and eiioi using tle skill. By avoiding
tlis, we stiip otleis of tle clance to leain a skill on tleii cun teims and
witl tleii cun obstacles to oveicome.
,
HOW ABOUT WRITING BEGINNER TUTORIALS COVER- HOW ABOUT WRITING BEGINNER TUTORIALS COVER-
ING BEGINNER TASKS? ING BEGINNER TASKS?
So, I tlink it is safe to assume tlat tleie aie two needs/aims battling
wlen we want to wiite a beginnei tutoiial, i.e. we want to teacl people
good piactices and we want to get tlem as fai as possible witl tle least
effoit. A lot of times tlese don't go well togetlei.
jueiy is a postei clild of gieat new" Web development. Wiite
less, aclieve moie" is tle mantia and I love tlat we lave it. jueiy
aclieved tlis by ieplacing JavaSciipt and tle unwieldy DOL witl a
clevei and fast API and a totally new syntax. claining. Tlis is gieat.
Tlis is low to do it. jueiy abstiacts tle annoyances and complexities
out into its coie and lets developeis wiite code. You cannot just take
tlis appioacl and mantia and apply it to any teclnology witlout pio-
viding a simplei API/platfoim tlat abstiacts tle dangeis and annoyan-
ces.
Tcachinq NcnIioc ccdc 0n Thc \cc?
Tle discussion tlat lappened in tle comments of tle afoiementioned
aiticle was mostly about secuiity and tle inability of implementing tle
code discussed in it in a ieal enviionment. And yes, tley aie veiy mucl
valid. Tle code is good as an exeicise but awful as a live example.
Putting it on an live seivei means you aie open to any kind of attacks
and sciipts looking foi zombies to infect not to mention low a botnet
would lave a field day witl it!
And tle autloi knows tlis. Tlis is wly a lot of tle aiticle is dedicat-
ed to explaining tlat tlis is not live code.
Plcasc ncticc that this articlc uas urittcn jcr ccqinncrs uhc alrcady
qrasp HTMI and cSS, kncu a cit cj PHP and haoc sccn phpMyAd
min ccjcrc. I uill nct qc intc ccst practiccs, sajcty and all thc rcst cj it,
lct's just haoc jun uith this cnc'"
And latei onas a iesponse to some feedback, even moie don't do
tlis" was added.
Nctc that this is mcant as a ccqinncr's cxcrcisc. Thc ccdc ycu scc hcrc
uill qioc ycu thc intcndcd rcsult, cut a lct cj it is nct sajc jcr prcduc
ticn uccsitcs. It lacks a lct cj sajcquards, such as data oalidaticn,
salts jcr passucrds (jcr ccttcr sccurity, htacccss rulcs and sc cn. Thc
qcal cj this articlc is tc lct ccqinncrs jcrqct accut all cj thcsc thinqs
and just ccnccntratc cn cuildinq scmcthinq nicc.
Ncithcr dccs this articlc prcmctc ccst practiccs. Ycu may jind
ycursclj adcptinq dijjcrcnt mcthcds latcr cn, cr I may uritc in ancth
8
cr articlc that uc shculdn't dc scmcthinq ycu scc hcrc. Thc articlc is
intcndcd as a jun littlc cxamplc jcr ccqinncrs tc spicc up thcir ccrinq
thccry scssicns. I cclicoc that thc ccst uay tc lcarn is thrcuqh incrcas
inqly dijjicult cxamplcs.
That said, I cnccuraqc ycu tc try all cj this cut and play arcund
uith it at hcmc cr cn ycur scrocrs. Ij ycu put this cn a lioc scrocr, I rcc
cmmcnd usinq an acccunt that has cnly this uccsitc cn it (cr cnly tcst
uccsitcs. I alsc rcccmmcnd usinq passucrds jcr uscr acccunts that
arc nct thc samc as ycur cthcr passucrds."
Tlis, actually veiy mucl is against tle veiy idea of a beginnei tutoiial.
A beginnei tutoiial gets people on tle way, i.e. it teacles tlem tle fiist
steps and wlat one can do witl it. As tlese quotes slow, teacling peo-
ple PHP by staiting witl SL and wiiting a login system and file up-
loadei is obviously tle wiong way.
Out of a sudden, tle simple beginnei tutoiial is intended as a fun
little example foi beginneis to spice up tleii boiing tleoiy sessions"
(cited). Wlat boiing tleoiy sessions? I tlouglt we aie building some-
tling fiom sciatcl leie?
Pilinq 0n Tcc Much
Tle aiticle tiies to teacl foui tlings at once. SL witl PHP, login and
session contiol, file uploads and low to build a beautiful Web inteiface
poweied by PHP. Tle login system and tle file upload is wleie it gets
veiy dangeious in teims of secuiity. Tlis is not a beginnei tutoiial it
is giving beginneis tle wiong impiession tlat eveiytling is easy and
eveiybody else piobably just does it wiong and caies fai too mucl
about boiing details.
We slould not teacl new developeis tlat tley can do tlings in a
few lines of code and keep quiet about tle bad effects tlis las. Tlis is
condescending and based on an assumption tlat people leain only
fiom successes on tle Web. Tle autloi mentions tlat in tle com-
ments.
I dcn't think ccqinncrs nccd tc ccnccrn thcmsclocs uith SQI injccticn
attacks. Thc pcint hcrc is tc start tc lcarn scmcthinq, nct tc lcarn
cocrythinq at cncc. \hcn scmccnc undcrstands SQI at all, thcn tcach
thcm accut thc prcclcms, nct ccjcrc."
Tlis is veiy dangeious tlinkingif you teacl low to do sometling, al-
so make people awaie of tle consequences it las. I totally agiee tlat tle
point is to leain sometling. Defining tle sometling" is tle skill of a
p
good tutoiial wiitei oi educatoi. We focus fai too mucl on tle final
pioduct to be built, iatlei tlan tle components we use to get tleie.
Tlis is wleie using a complex example like a Cliistmas Wisllist"
tlat needs a login, uses a database and las an upload featuie foi any
file is a bad cloice. Tleie is no way to keep tlis simple" unless you
teacl people low to wiite code exclusively foi tleii own locallost.
LET' S NOT ASSULE THAT PEOPLE READ AND CARE AS LET' S NOT ASSULE THAT PEOPLE READ AND CARE AS
LUCH AS WE THINK THEY DO LUCH AS WE THINK THEY DO
One comment was quite inteiesting as a summaiy, as it veiy mucl
sums up some of tle comments and assumes good on tle side of tle
ieadeis.
Cccd stujj just tc haoc scmc jun and hclp thc supcr ccqinncrs qct a
quick jcctinq. I think a lct cj thc pccplc ccmmcntinq hcrc arc cithcr A
Tcc scascncd tc lcck this jar cack, and nct dcinq thinqs thc prcpcr"
uay just irks thcm, cr F I'd cc uillinq tc cct scmc arc just jlcxinq thcir
prcqrammcr's cqc a cit.
I think assuminq that pccplc uill takc this as scricus prcqram
minq and cuild jrcm it, cuildinq thc urcnq uay, is a cit tcc much cj a
strctch. Anycnc uhc can rcad and uhc carcs accut dcinq thinqs thc
riqht uay uill takc thc authcr's disclaimcr tc hcart. Ij nct, cdds arc
thcy'rc lcckinq jcr thc casy rcutc. Ij that's thc casc, ycu can't rcally
stcp thcm. This articlc isn't cndinq thc ucrld."
I agiee, it is not. But it also biings notling new to tle table. Wlen I
leained PHP coming fiom Peil in aiound zooo, I iead tlickbook.com
andexcept foi tle CSS stylesit lad similai examples. Ovei tle
yeais we leained to piotect oui systems moie. I tlink tle assumption
tlat ieadeis will caie mucl about tle tlis is not live code" doesn't cov-
ei one main use case of beginnei tutoiials", i.e. tlat people will most
piobably find tle aiticle via a Google seaicl and simply use tle code
example in a live enviionment witlout ieading tle tutoiial oi tle com-
ments. All tley wanted was a quick, simple to undeistand example aftei
all and beginnei tutoiials lave tlose, iiglt?
6o
Want pioof of tlat? Look at tle success of WSclools.com. Tle Web is
full of mateiials to leain tle same tlings. Tle quick leie's tle solu-
tiondon't woiiy about low it woiks iiglt now" aie tle most success-
ful ones. We also lave a Web full of systems tlat lack veiy basic quality
and secuiity featuies and we spend montls educating liies in compa-
nies wlat developing pioduction code means wlen you piotect tle da-
ta of oui useis.
I tlink it is time to stop clasing tle lollow success of cieating a
quick tutoiial" tlat is actually a bad implementation witl quick, slop-
py code" in disguise and stait cuiating wlat is alieady on tle Web. We
can tlen concentiate on tle next level tutoiials.
I tlink Web-based education will be a big tling in tle neai futuie,
and cieating a new geneiation of Web makeis
zo6
slould be on all of oui
agendas. We do tlis witl tools, gieat documentation and fiamewoiks,
and not witl a wiite tlis, it is awesome" appioacl. !
Imaqc crcdit. 0pcnscurccuay
zo
.
zo. lttp.//www.flicki.com/plotos/opensouiceway/(866,ozzp/
zo6. lttps.//commonspace.woidpiess.com/zo/o8//geneiation-of-web-makeis/
6
smashed.by/library
Get immediate access to all Smashing eBooks
with 70% discount and vote on the topics you'd
SUBSCRIBE TODAY!
like to learn more about.
?C.<' /0) ?<'0.$*
Austin Cuntcr
Austin Guntei is a wiitei, bloggei, and Community Aiclitect. He man-
ages tle Content and Community maiketing foi WP Engine
zo,
, tle pie-
mieie managed WoidPiess losting platfoim. Pieviously, Austin
biouglt zo staitups tliougl an incubatoi in Austin, Texas. Now pait
of WP Engine's maiketing offices in San Fiancisco, Austin blogs weekly
about staitups and lacking lis own biain at austinguntei.com
zo8
. Fol-
low tle autloi on Twittei, austinguntei
zop
.
christian Hcilmann
An inteinational developei evangelist woiking foi Lozilla in tle lovely
town of London, England. Website. Wait till I come!
zo
Twittei. code-
po8
z
.
Icnnis Iardys
Dennis Kaidys is tle lead usei expeiience designei at WSOL
zz
. He
spends most of lis time lelping clients undeistand tle value of usei
centeied design and clallenging tleii assumptions about tle Web and
mobile. You can follow lim on Twittei
z
oi cleck out lis design blog,
RobotRegime.com
z(
.
Imitry Fadcyco
Dmitiy Fadeyev is tle cieatoi of Usauia
z
, a micio usability testing
seivice, and tle foundei of UsabilityPost
z6
, a blog about good design
and usei expeiience. Additionally, you can iead lis tlouglts on design,
zo,. lttp.//wpengine.com/
zo8. lttp.//www.austinguntei.com/
zop. lttp.//www.twittei.com/austinguntei
zo. lttp.//www.wait-till-i.com
z. lttp.//www.twittei.com/codepo8
zz. lttp.//wsol.com
z. lttps.//twittei.com/dkaidys
z(. lttp.//iobotiegime.com
z. lttp.//www.usauia.com
z6. lttp.//www.usabilitypost.com
ABOUT THE AUTHORS
6z
ait and piactical plilosoply ovei at lis peisonal blog
z,
. Twittei. Follow
tle autloi on Twittei
z8
.
Hclqc Frcdhcim
Helge Fiedleim is a fiont-end developei at Bekk Consulting
zp
. He ie-
ceived lis LSc degiee in infoimatics fiom tle Univeisity of Oslo, Noi-
way. His tlesis on UX patteins was wiitten in Baltimoie LD, USA.
Website. lttp.//www.lelgefiedleim.no
zzo
. Twittei. lelgefiedleim
zz
.
}ulia May
Julia Lay is a fieelance wiitei now woiking witl FlaslLint, tle top-
class piovidei of Flasl templates
zzz
. Website. PlotoInteiview.iu
zz
.
Twittei. indigomay
zz(
.
Ica \crcu
Lea woiks as a Developei Advocate foi WC
zz
. Sle las a long-standing
passion foi open Web standaids, wlicl sle fulfills by ieseaicling new
ways to use tlem, blogging
zz6
, speaking
zz,
, wiiting
zz8
, and coding pop-
ulai open souice piojects
zzp
to lelp fellow developeis. Sle is a membei
of tle CSS Woiking Gioup
zo
, wlicl aiclitects tle language itself. Lea
studied Computei Science in Atlens Univeisity of Economics and Busi-
ness, wleie sle co-oiganized and occasionally lectuied a cutting edge
Web development couise
z
foi (tl yeai undeigiads. Sle is one of tle
few misfits wlo love code and design almost equally. Website. Lea Vei-
ou
zz
. Twittei. leaveiou
z
. You can also find Lea on Google+
z(
.
z,. lttp.//fadeyev.net
z8. lttp.//www.twittei.com/dfadeyev
zp. lttp.//www.bekk.no
zzo. lttp.//www.lelgefiedleim.no
zz. lttp.//www.twittei.com/lelgefiedleim
zzz. lttp.//www.flaslmint.com/
zz. lttp.//www.plotointeiview.iu/
zz(. lttp.//www.twittei.com/indigomay
zz. lttp.//w.oig
zz6. lttp.//lea.veiou.me
zz,. lttp.//lea.veiou.me/speaking
zz8. lttp.//lea.veiou.me/wiiting/
zzp. lttp.//lea.veiou.me/piojects/
zo. lttp.//www.w.oig/Style/CSS/membeis.en.plp
z. lttp.//lea.veiou.me/zoo/o,/oiganizing-a-univeisity-couise-on-modein-web-develop-
ment/
zz. lttp.//lea.veiou.me
z. lttp.//www.twittei.com/leaveiou
6
Markc Iuqcnjic
Laiko Dugonjic is a designei fiom Velika Goiica, Cioatia. As tle cie-
ative and usei expeiience diiectoi at Cieative Niglts
z
, le impioves
customeis' digital expeiience foi local and inteinational clients and oc-
casionally speaks at inteinational Web design confeiences. He founded
FFWD.PRO
z6
, a micio-confeience and woikslops foi inteinet piofes-
sionals in Cioatia and lis favoiite pet pioject is Typetestei
z,
, a populai
online tool foi testing scieen fonts. Website. Cieative Niglts
z8
. Twit-
tei. maikodugonjic
zp
.
Pcda Icmcdcn
Reda Lemeden
z(o
, a.k.a Kaislin, is a designei, illustiatoi, and wiitei
wlo enjoys conceptualizing pioblems and solving tlem using teclnol-
ogy and design. He las been designing, ieseaicling and wiiting about
inteifaces foi tle bettei pait of tle last decade and is cuiiently building
Rails and mobile apps at tlougltbot, Inc
z(
. You can follow lim on
Twittei
z(z
, visit lis website tlougltbot
z(
, oi find lim on Google
z((
.
Sacha Crcij
Sacla Gieif
z(
is a usei inteiface designei living in Osaka, Japan. He's
woiked witl staitups like Codecademy and Hipmunk, and las now
launcled Sidebai
z(6
, a site tlat gives you tle best design links of tle
day. You can follow lim on Twittei
z(,
.
z(. lttps.//plus.google.com/op6(zp86popooo6o/posts?iel=autloi
z. lttp.//cieativeniglts.com/
z6. lttp.//ffwd.pio/
z,. lttp.//typetestei.oig/
z8. lttp.//www.cieativeniglts.com/
zp. lttp.//www.twittei.com/maikodugonjic
z(o. lttps.//piofiles.google.com/op8po(((,(8,(p,8
z(. lttp.//tlougltbot.com
z(z. lttp.//www.twittei.com/kaislin
z(. lttp.//tlougltbot.com
z((. lttps.//piofiles.google.com/op8po(((,(8,(p,8?iel=autloi
z(. lttp.//saclagieif.com/
z(6. lttp.//sidebai.io
z(,. lttp.//twittei.com/=!/SaclaGieif
ABOUT THE AUTHORS
6(
Tcm Ciannattasic
Tom Giannattasio lappily makes tlings at nclud
z(8
. He woiks as an ed-
itoi foi Smasling Lagazine and teacles at Boston Univeisity Centei
foi Digital Imaging Aits. He loves to expeiiment and slaie lis woik on
lis peisonal site. attasi
z(p
. Twittei. attasi
zo
.
\asilis oan Ccmcrt
Vasilis van Gemeit
z
is tle Piincipal Fiont-end Developei at Liiabeau
in Tle Netleilands and a boaid membei of Fionteeis. His aim is to
close tle gap between design and (fiont-end) development. He believes
tle excess of knowledge le las can be bettei used by otleis, by moie
cieative and smaitei people. You can follow lim on Twittei
zz
.
z(8. lttp.//www.nclud.com
z(p. lttp.//www.attasi.com
zo. lttp.//www.twittei.com/attasi
z. lttp.//vasilis.nl/
zz. lttps.//twittei.com/vasilis
6
Accut Smashinq Maqazinc
Smasling Lagazine
z
is an online magazine dedicated to Web design-
eis and developeis woildwide. Its iigoious quality contiol and tloi-
ougl editoiial woik las gatleied a devoted community exceeding lalf
a million subsciibeis, followeis and fans. Eacl and eveiy publisled aiti-
cle is caiefully piepaied, edited, ieviewed and cuiated accoiding to tle
ligl quality standaids set in Smasling Lagazine's own publisling pol-
icy
z(
.
Smasling Lagazine publisles aiticles on a daily basis witl topics
ianging fiom business, visual design, typogiaply, fiont-end as well as
back-end development, all tle way to usability and usei expeiience de-
sign. Tle magazine isand always las beena piofessional and inde-
pendent online publication neitlei contiolled noi influenced by any
tliid paities, deliveiing content in tle best inteiest of its ieadeis. Tlese
guidelines aie continually ievised and updated to assuie tlat tle quali-
ty of tle publisled content is nevei compiomised.
Accut Smashinq Mcdia CmcH
Smasling Ledia GmbH
z
is one of tle woild's leading online publisl-
ing companies in tle field of Web design. Founded in zoop by Sven
Lennaitz and Vitaly Fiiedman, tle company's leadquaiteis is situated
in soutlein Geimany, in tle sunny city of Fieibuig im Bieisgau.
Smasling Ledia's lead publication, Smasling Lagazine, las gained
woildwide attention since its emeigence back in zoo6, and is suppoited
by tle vast, global Smasling community and ieadeislip. Smasling
Lagazine lad pioven to be a tiustwoitly online souice containing
ligl quality aiticles on piogiessive design and coding teclniques as
well as iecent developments in tle Web design industiy.
z. lttp.//www.smaslingmagazine.com
z(. lttp.//www.smaslingmagazine.com/publisling-policy/
z. lttp.//www.smasling-media.com
ABOUT THE AUTHORS
66

Smashing Ebooks Editors Choice Library Treat

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Smashing Ebooks Editors Choice Library Treat

Caricato da

Copyright:

Formati disponibili

!

. As a lumble gift to you, deai

()*%+&%&+ -.$ /0) 1)23%&+

ieveals tlis tiend.

. You piobably addiess all tliee

. Altlougl tlis tool is new to some of us in

developed foi oui own piojects.

Sclcctinq A Typcjacc Fcr Functicn 0ocr Fcrm

" (PDF, . LB) found tlat infoimation iendeied in laid-to-

," Dan Layei

, Anytling fiom ( to , claiacteis is

. Tlis is a veiy simple

would immediately tiiggei tle media queiy again. Tlat's an endless

bound to tlink of apps. Tley'll pictuie a simple task-based inteiface

and biing it back to youi team.

Tleie aie seveial ways to aclieve tlis.

What to use it for? Websites tlat make limited use of tle

USING JAVASCRIPT USING JAVASCRIPT

, is evocation, wlicl is about iecalling tle past tliougl memo-

. Lovies, iletoiic and bianding demonstiate as mucl. tley pie-

." Heie, UX is split into useful, usable,

(tle biggest tlemes and

and my own Folyo. But, of couise,

Heie is tle main title fiom D.W. Giiffitl's Intoleiance" (p6),

was diiected by J. Stuait Blackton, wlo many considei to be tle fatlei

CCMR Mamoulian Blather

Pcscurccs And Pcjcrcncc Matcrial

Potrebbero piacerti anche