Clever graphic designers love to use typography to explore the interaction between the look of type and what type actually says. In communicating a message, a balance has to be achieved between the visual and the verbal aspects of a design.
Sometimes, however, designers explore the visual aspect of type to a much greater extent than the verbal. In these cases, the visual language does all the talking. This article explores when the visual elements of typography speak louder than words.
Cal Swan, author of Language and Typography, makes this point well when he says, “These two distinct areas often come together in practice as there is clearly a very strong relationship between the conception of the words as a message and their transmission in visible form.�
To avoid any misunderstanding, let’s clarify what the terms “visual languageâ€� and “verbal languageâ€� mean. In professional graphic design, visual language refers to the meanings created by the visual appearance of both text and image. In this article, the term “visual languageâ€� refers to the character and significance created by carefully selected typography. Verbal language is the literal meaning of words, phrases and sentences.
In this first of a two-part series, we will look at the powerful effect that typography has in taking control of meaning. We will discuss a range of examples, from verbal language that inspires and shapes visual treatment to visual language that dominates verbal meaning. The implications of typographic choices in meaning and interpretation will also be examined. And we will show how the same message can be presented in a number of ways to convey and encourage a diversity of responses.
We all have different cultural backgrounds and experiences that affect our perception of type one way or another. So, regardless of the designer’s skill and effort, a number of uncontrollable aspects remain, including the viewer’s perception, expectations, knowledge, experiences and preferences. And while accounting for all such unpredictable responses to type is impossible, awareness is critical.
The name style from Greenpeace’s campaign to raise awareness of the impact of deforestation.
In this ad, you are confronted with the familiar name style of one of the world’s favorite chocolate bars, the Kit Kat. The type style and letterform proportions and certainly the color, shape and angle all create an instantly recognizable connection with the Kit Kat brand — so much so that you would be forgiven for seeing the name Kit Kat before reading and taking in the actual written message. Your familiarity with the brand is an instant draw, and appreciating the change of message might take you a second look.
Manipulating Feelings and Reactions
The visual language established when designing with type can bring into play not only emotions, but also physical responses. The following examples are simple illustrations of the varied and emotive effects and highly dominant control that can be achieved by changing the visual language of a message, while still presenting the same verbal language.
This first of a pair of illustrations shows a single large bold word, set in lowercase and closely kerned. The positioning in the frame makes the word dominant and loud, and the message comes across as enthusiastic, friendly and confident. The person speaking is pleased to see you and is coming towards you with a big smile on their face.
The second illustration contrasts dramatically with the first, despite featuring the exact same greeting. The font, case, scale, color and positioning all suggest a considerably more distant and hesitant meeting. In fact, you would be forgiven for thinking that the person speaking here is not at all sure they even want to acknowledge you and would have preferred to ignore you completely.
Reading these examples aloud helps us instantly appreciate the different effects of visual language. If you read the first example out loud, it would be a loud enthusiastic call that exudes genuine delight, friendliness and openness. Reading aloud the second example, the exact same word, it would be delivered in a much quieter tone, an almost hesitant voice, lacking the assurance and delight of the first. There is an infinite range of typographic alternatives that achieve subtle or dramatic changes in volume and tone of voice.
Making The Most Of Visual Language
Verbal language is often used to inspire and shape design and typography in order to get a message across, with the goal being to make the most of the viewer’s reaction. Carefully mixing a design’s implication with literal meaning can lead to a memorable outcome. The following designs are great examples of the effects that can be achieved by employing verbal language that has helped to inspire a visual treatment.
Our first illustration is taken from the work of renowned American graphic designer Herb Lubalin, who was described in a monograph about him by Gertrude Snyder and Alan Peckolick as being “a tenacious typographer, whose graphic concept employed copy, art and typography, and he used available production methods to underline the drama inherent in the message. Idea preceded design.�
Given the subject of this article, this quote is especially fitting. It shows Lubalin as a designer who valued the combined communicative power of language, typography and composition. The book goes on to explain that he used production methods not just for effect but also as a way to emphasize the meaning and message of a project. In Lubalin’s time, these decisions would have entailed manual labor, posing greater limitations than we face today. Finally, this quote confirms that, for Lubalin, concept was of paramount importance and always came before design.
One of his many entries in the Visual Graphics Corporation’s 1964 competition features a carefully selected quote by US editor and writer Caskie Stinnett.
One of Lubalin’s many typographically expressive designs that have become iconic and inspiring to generations of graphic designers. (Image: Peter Gabor)
Using delicate and well-considered composition of typographic detailing, Lubalin has succeeded in making an unpleasant message seem attractive and pleasing. The quote states “A diplomat is a person who can tell you to go to hell in such a way that you actually look forward to the trip.� The focal point of this statement, being told to “go to hell,� is shown in an elaborate and elegant calligraphic form, enabling this mildly offensive statement to be mistaken for something that could be looked forward to with great anticipation at first sight.
The work of hand-lettering designer Alison Carmichael provides a range of current examples that beautifully illustrate the powerful effect of typography when it takes control of meaning. One such design is her award-winning self-promotional ad for the Creative Circle. Carmichael’s hand-lettering is engraved and inked in an elaborate style on the lid of an old school desk. At first sight, we seem to be looking at a beautiful, possibly historic, work of gothic lettering; seconds later, reality strikes and the rather unpleasant meaning of the text becomes clear.
Award-winning self-promotional ad by Alison Carmichael for the Creative Circle.
Type Tarts is a UK initiative established to raise awareness of the plight of workers trafficked into the sex industry. Contributing designers are asked to send type-oriented “Tart cards� for exhibition. Many London prostitutes advertise their services by displaying promotional cards in phone boxes. Even in the age of the Internet and mobile phones and in the face of police crackdowns, these cards have achieved a cult following, being highly praised and collected as art.
Both examples below use expressive typefaces and type manipulation to visually reinforce the meanings of the provocative text. In the context of the campaign, figuring out the meaning of the cards is easy enough.
“Nice and Tight� by Duncan Bancroft
“Big and Bouncy� by Peter Fletcher
Another stunning example of the visual language of type is by American designer Jason Munn, well known for his highly acclaimed music posters. This example for Liars is mainly typographic, with sections of each letter cleverly removed so that the viewer doesn’t get the full picture. What is the truth? The choice of typeface is also significant; its extreme contrasts of thick and thin strokes point to the contrast between truth and lies.
Jason Munn’s poster for the US band Liars
The designs above use type to reinforce the meaning of their statements. Meanwhile, the British Battleaxe Collection’s visuals for a proposed range of type-based tea towels feature quotes from strong UK female comedy characters. These designs are doing something slightly different; type is used primarily to reinforce the agenda and assertive tone of the speakers.
British Battleaxe typographic tea towel design, inspired by the voice of the lead character in the BBC sitcom Keeping Up Appearances. (Credit: Bright Pink Communication Design)
The example above features a quote from the BBC sitcom Keeping Up Appearances. The words themselves are spoken by the program’s main character — the eccentric, social-climbing and bossy Hyacinth Bucket, a lady in her 60s with grand aspirations. Typographically, the letterforms have been selected and grouped to emphasize the desires of the character. The words “I wantâ€� and “myâ€� stand out because of a dramatic change of scale. “Superiorsâ€� is emphasized with capital letters, whereas “yourâ€� is reduced in size and given lowercase letters, thus downgrading the importance of whom she is talking to, in keeping with the character’s bossy nature and tone of voice when speaking to her milkman.
In this design, the typeface has been dictated by the character’s tone of voice. The serif typeface with its stylish italics and capital letters captures the meaning and cultural context of this statement from a “woman of a certain age.�
Typography is used to communicate tone of voice, personality, age, gender and mood, and it can be easily manipulated. If, instead of this serif font that so successfully represents this woman’s personality, we used a slab serif, suddenly the character changes, as does the emotional impact of the statement. Judging simply by the font, the narrator is no longer definitively female; she is no longer in their mid-60s, and her mood is not merely pompous, but could be described as verging on angry. It’s a great example of how quickly the tone can shift with a simple change of typeface.
A different typographic treatment of this tea towel clearly manipulates the tone of voice and possibly even changes the gender of the speaker. (Credit: Bright Pink Communication Design)
The Power Of Typography Cannot Be Underestimated
All the examples discussed in this article demonstrate that typographic treatment works alongside verbal language to create, enhance and alter meaning. While the aesthetic value of design is always important, the significance of type in influencing meaning should not be underestimated.
The role — and, in fact, the obligation — of the designer in establishing a tone that adds meaning to the verbal message is a matter of regular debate. Many graphic designers and academics argue that the designer has a responsibility to add “flavorâ€� to their work, not only helping to convey and enhance meaning, but also making the message enjoyable and encouraging to “readâ€� and also memorable.
In the second part of this article, we’ll continue looking at the relationship between visual and verbal language. We’ll touch briefly on the structure and semiotics of language, as well as showcase some remarkable examples, all helping to explain why subtle typographic changes make all the difference.
In a post on her blog last year, WordPress designer, business woman and author Lisa Sabin Wilson, talked about how thankful she is to be part of the WordPress economy. It’s an economy that thousands of people, the world over, are benefiting from (including me!). It is an economy built on free, open source software. In this article I’m going to talk to people who are active in the WordPress economy, people from all over the globe. It’s amazing to see how even in the past few years the economy around WordPress has grown, and what new, innovative, enterprises it’s composed of.
Contents
This is a long, two-part article so if you want to get where you’re going quickly, these are the sections:
Last year WordPress carried out a global survey, asking basic questions about what people are doing with WordPress. Over 18,000 people responded from all over the world, making it a good indicator of how people are faring in the WordPress economy. Here’s the global map of the respondents:
53% of respondents described themselves as WordPress developers.
36% described themselves as self-employed WordPress developers.
170,000 websites had been built by survey respondents.
61% of respondents use WordPress just as a CMS, 31% as a CMS and a blog, and only 8% as just a blog.
Respondents reported being paid between $5 – $2000 per hour (sadly, the $2,000 per hour report is not from me).
The average hourly rate is $58 and the median is $50.
2,800 people use WordPress as their primary source of income.
Those are some exciting stats. And with 14.7% of the internet running WordPress, and 22% of new domains running on WordPress (as of August 2011) we can expect exponential growth.
Before we get to the people using WordPress, let’s hear from the two guys responsible for its creation.
Some Words From The Founders
Way back in 2003 (feels like a century in internet terms), Matt Mullenweg expressed his frustration with b2/cafelog and wondered if it was time to fork it. Mike Little commented about this, and WordPress was born.
It’s an important moment for all of us who make our livelihoods from WordPress; people like me who get to wear pajamas all day while meeting awesome people from all over the world.
I asked Matt and Mike some questions about the WordPress economy. Here’s what they had to say:
When you first talked about forking B2, could you have imagined where it would end up?
Matt:
“Not in a million years.”
Mike:
“No, not at all. We were really just looking to fix some bugs and add some improvements to our blogging software.
I was also interested in getting involved in another open source project. I’d been on the fringes of a few different ones over the previous few years, MySQL, CVS, Cygwin, and others, but mostly bug reporting and forum / mailing list support.
So I thought this would be a good opportunity to really get stuck into a project. I had already been providing people with code and other solutions in the forum (as had Matt), and had already written a couple of extensions for B2/Cafelog and bug fixed / modified a few more.”
WordPress provides people with jobs all over the world, and is the foundation for hundreds of businesses. How does it feel to have been a catalyst in that?
Matt:
“We know of tens of thousands of people directly making their living from WordPress, and probably many more indirectly. I think when this community coalesces around a cause, like improving core WP development or charity work, it’ll be something to see.”
Mike:
“It’s not something I’d thought about too much until recently. I was more interested in the fact that WordPress empowers so many people to have a voice on the internet.
But when some of the results from the big WordPress survey started filtering through last year, I began to realize just how big the economy around WordPress had grown.
And I feel great about it. It is tremendously satisfying to know that I was involved in that at the start. It’s also a fantastic advert for the power of Free/Libre software: You can sustain an economy giving away the core product.”
The WordPress economy is booming and seems to be recession-proof. Why do you think that is?
Matt:
“WordPress is often replacing an existing proprietary or inflexible CMS, usually at a tenth of the cost. People want more direct control over their websites.”
Mike:
“Firstly, because WordPress is so very flexible: It means that the same product can be used as the basis for a wide range of jobs, from a simple ‘make me a website’ that might be as little as $25 or $50 and something a relative beginner can do, to complete customised, complex, fully functional, corporate websites that might run up to a $150K+ build for a big agency.
Secondly, because it’s simple enough that many people can get started in a career built around WordPress, yet powerful enough that the most sophisticated websites; those that require highly skilled and experienced teams, can be built with it.
Thirdly, it fits in extremely well with the whole internet-based economy thing. Everyone from designers to marketeers, SEO experts to entrepreneurs (and many others), can do what they do best without having to worry about the building-the-website part, or having to learn many skills that are unrelated to their main skills.”
That’s what the the guys behind WordPress had to say. Now it’s time to hear from people who have built businesses around WordPress—people long-established, as well as those who are just starting out.
Reading through them, you’ll see a pattern emerging. Many came from a personal need, and transformed that need it into a business. It’s this prescience that makes so many of them successful.
The first type of business that springs to mind when thinking about WordPress is the theme shop. Think theme shop and names like WooThemes, Elegant Themes, Thesis and StudioPress all immediately spring to mind. But there are 100′s of WordPress theme shops. This post lists only 90 of them, but I can think of countless more that aren’t included on this list.
Theme shops are based all over the world. From my own personal experience I’ve worked with theme shops in America, the Far East, the Middle East and Europe, and that’s just me and my little business. The theme shop market is saturated, but that doesn’t stop new theme shops from popping up all the time.
I talked to Lisa Sabin Wilson, who launched her own theme shop Allure Themes last year. I asked Lisa whether theme shops, in such a competitive market, continue to be a viable model for WordPress startups. Here’s what she had to say:
“The fact is, it’s not as easy to put a theme shop up on the Web and start selling themes as it was 2-3 years ago. The internet is flooded with WordPress theme shops these days and you’ve got your big names as well as a smattering of younger, smaller groups trying to make it happen. I think a niche shop that targets a particular industry or demographic will help you standout in the crowd, or try tapping into existing marketplaces by offering child themes for the popular theme frameworks like Builder, Headway or Genesis. Those markets have hundreds and hundreds of users, and people like the variety and choice.”
It has become much more difficult to launch a theme shop, but that doesn’t make it impossible. If you’re thinking of launching a theme shop, Lisa has this advice:
Recognize that it’s going to be a slow process. It may take several months to a year before you start seeing a decent return for your work.
Have a strong marketing and PR plan in place to make sure you get noticed.
Approach WordPress news sites such as WPCandy and WPMU.org for coverage of your new venture.
Have drive and passion; eventually if your work is good, you’ll get noticed.
Theme Marketplace
Shopping for themes in the marketplace (image CC license Michael Osmanda)
A Theme Marketplace is a variation on a theme shop. While a theme shop sells themes that it has developed in-house, a marketplace provides a platform for designers and developers to sell their themes, while the marketplace takes a cut. The most well-known of these is Envato’s Theme Forest. However, it’s by no means the only theme marketplace around, with Theme Garden currently undergoing a redesign and Mojo Themes going strong.
I spoke to JR Farr who first came up with the idea of a theme marketplace back in 2006 (but at that time he was unable to get it off the ground). Later he teamed up with his co-founder to create MOJO Themes. I asked him how he felt about competing with such a huge company such as Theme Forest:
“The network that the Envato crew has built is amazing and we have so much respect for them. They do a great job over there. It’s been exciting to compete and personally I think the competition is good. It brings innovation and also keeps things in check.
Since day one we’ve had the same goals in mind and we’ve tried to stick to being consistent with those goals. We try to just focus on what we’re doing and being the best at that. The last two years we had a few growing pains and we also unveiled some features in our marketplace no one else has, like JOINT FORCES.”
They have grown every month since launching: new users, new items, higher sales and higher payouts. This has meant that their team has had to grow, with the marketplace expanding to make sure everything gets done. Now in their third year, the growth rate is getting even higher. In 2011 alone they tripled in size. They’re hoping to expand their Mojoness network and look into customized solutions for new niches.
Theme Design
Theme design is one of the most in-demand WordPress skills. As long as people want gorgeous WordPress websites there’ll be a market for theme designers. Chris Coyier is a designer who has found himself reaching again and again to WordPress to power his clients’ websites.
I asked Chris about the difference between traditional Web design and designing for WordPress. As he pointed out, it’s rare these days for a website to run without a CMS, so we’ll soon be in a situation where traditional means a regular CMS design. Here’s what Chris said to keep in mind when designing for a CMS:
As you’re designing around dynamic data, be sensitive to things like the fact that the size of an area can change depending on the amount of text.
Remember that content creators may want to be able to customize different elements of their website.
Be aware of how media integrates.
The addition of a database means you need to consider page load speeds.
I asked Chris what a theme designer has to do to get ahead in a busy market:
“I know there are loads of small businesses trying to sell WordPress themes. So that market is pretty saturated and probably pretty difficult to get into. As with any other industry, getting ahead means competing on either quality or price. Since it’s hard to compete with free (what the majority of WordPress themes are), you gotta go for quality, and the bar is set pretty high there. If you are a freelancer, I think there is always room for good designers who are also good business people and know how to treat clients well, and deliver to them what they need.”
However, this busy market doesn’t mean that there is no room for new designers. More and more people are using WordPress, ranging from big corporate clients to small businesses and individuals. With the market constantly growing, there’s more scope than ever for a wide range of designers.
Theming Engine
The Infinity Theming Engine wants to give more power to WordPress (image CC license Trey Ratcliff).
As WordPress expands, the number of designers who want to design for it is growing. But not all of them have the skills necessary to make really complex websites. This means that developers are looking for solutions targeted specifically at making life easier for designers. The Infinity Theming Engine is about to launch. It seeks to differentiate itself from traditional WordPress frameworks by being a toolkit for designers. The developers describe it as “a powerful layer of re-usable and highly extensible theme development features that sits between WordPress and your theme(s), without locking you in to a specific design model.” It’s an engine because it adds additional power to WordPress and makes it easier for designers to design.
Rather than having a whole load of functionality stuffed into functions.php, Infinity uses a configuration file to let designers turn on and off whatever functionality that they need.
Infinity is being developed by developer Marshall Sorenson and designer Bowe Frankema. They’ve decided to adopt a Freemium model for when they launch it. Here’s what Marshall had to say:
“We’re the type of guys who are so obsessed with writing code and adding features, it took us a long time before we even got thinking about a business model. Our most important focus has always been making something that we could use for ourselves, and sharing it with the community. Luckily for us, there are a lot more WordPress devs who are in the same boat as us, and the rise of the ‘Freemium Model’ over the last two years, was a real outcome.”
The main product will be given away for free and the pair plan to monetize it by selling themes, extensions, installation and support services. This model has been tried with other traditional frameworks, so it’ll be interesting to see how it works with a different type of theme development tool.
I asked Bowe what he thought the benefit was of working with WordPress:
“Where to start? Seriously, these are very exciting times to be part of the WordPress community. There’s a flood of new people discovering WordPress every day, and they are welcomed by great resources across the Web to help get them started. There are WordCamps all over the planet, and it’s never been easier to start using WordPress.
We’re blown away by the amount of interest we’ve seen for Infinity. We never expected the amount of attention we got from all kinds of people. It comes with some challenges in terms of documentation and managing expectations, but that’s a luxury problem, really. People want to use WordPress, are not afraid to try out new solutions to help solve their problems, and most importantly: they trust WordPress to power their websites/businesses. Without that trust, we (all the WP devs trying to make a living of doing the stuff they love) would be doomed from the start. Thank you WordPress Community :-) “
Plugins
Plugin Developer
The commercialization of plugin development has often proved to be a more contentious issue than the commercial theme market. A divide emerged between design and functionality, with WordPress users happy to pay for theme design but not for plugins. But that doesn’t mean that plugin development isn’t a lucrative and growing market, and some plugin developers have focussed their development efforts on a single plugin, and with great success. Seth Shoultes is the developer behind Event Espresso, an event management plugin for WordPress.
Event Espresso started out as a plugin that Seth developed for a family member. She needed a way for people to register for her online scrap-booking classes, and to let them make payments through her WordPress website. There wasn’t a plugin available, so Seth built Event Espresso.
Like many commercial plugins Event Espresso began its life as a free plugin in the WordPress repository. The support requests started to flood in. Like many plugin developers, he found it difficult to provide support, upgrades and development for a free product. It seemed like a good idea to start selling it on a plugin marketplace.
“We started off with one sale per week, then two and then a few per day, and it steadily doubled each month for about the first year. After about 12 months of growth our trend started to become more conservative, but consistent, so we’ve become more aggressive about marketing and releasing new products.”
I asked Seth what the advantages are to being part of the WordPress economy. As well as mentioning the huge adoption rate of WordPress, he also said:
“The WordPress economy is innovative. Certainly developers have to function on the platform they’re given, but WordPress is open so they can change it and contribute to it. Yet within that framework you can find new and inspiring work daily. Some of that creativity can be monetized by the developer and sometimes it can’t, but in either case the WordPress community is pushing the envelope.”
Seth has big plans for Event Espresso, and in the coming years, hopes to see the plugin (which started out as a favor for a family member) become a foundation for expansion into larger and newer markets.
Services
WordPress Hosting
Servers the world over host WordPress (image CC license Skimaniac).
If you’ve used WordPress (and if you’re reading this, it’s probably safe to assume that you have), you know what an issue finding a good hosting provider can be. Late last year, Alex at WPShout published the results of his hosting review and the outcome was not great for the big hosting providers (Note: if you want to have your say about a hosting company, Joost de Valk is running a similar hosting survey on his blog right now). But what about finding a company that just provides WordPress hosting? That’s what the guys at WPEngine provide.
Like many of the other WordPress businesses I’ve talked about so far, WPEngine grew out of a need that the founder had himself. Jason Cohen had found that his blog would crash every time he hit the front page of HackerNews. He decided what he needed was an all-inclusive WordPress hosting package that would manage WordPress for him, and be able to handle high-traffic spikes.
After carrying out some market research, Jason decided to found WPEngine (his fourth startup!)
“‘Scratching your own itch’ is an awesome and typical way a company is started, but that’s the grain of sand, not the pearl. You have to go out in the field before you know whether it’s just a grain of sand. Remember, lots of ideas are good ideas but not businesses.”
Jason bootstrapped the company, making a profit after seven months. He then hired two more members of staff and turned a profit again in six months. Now their growth is exponential, increasing by double-digits every month.
“This is what fuelled our ability to grow, both on the customer-acquisition side and on the company-building side. Money in the bank means that we can hire ahead of need and test more marketing efforts in a shorter time, and put more money into whatever efforts are paying off.
Perhaps equally useful is the guidance. I get different benefits from different investors—some help with the operational issues of scaling and projections, some are deep on certain kinds of metrics, some have started hosting companies and run them to massive scale and therefore can help on almost everything. In aggregate it has a massive impact on our success—there’s no doubt in my mind that without their help we wouldn’t be doing as well.”
With WordPress powering a significant proportion of the internet, there is scope for other hosting companies that just focus on WordPress. The market is huge, and the potential to create a successful company is massive.
“In a market that huge, of course there’s room for a ton of players, each contributing different benefits, different trade-offs. Sure we hope to be a major player, but we certainly have no interest in ‘killing’ competition. In fact we regularly refer customers to our competitors when we’re not a fit, and they’ll do the same.”
Jason sees the job of WPEngine to be as good as they can be for the corner of marketing that they are targeting. This means getting the balance right for both low-end and high-end customers. That said, they seem to be extremely successful at it, having just released support for servers in both London and Tokyo.
Consultancy
Everyone needs a little help from time to time (image CC license FuturePresent).
WordPress is easy to use, and it’s free, which means that the entry-level threshold of technical knowledge for people starting to use WordPress is always getting lower. This is great as it gives millions of people access to the Web, but once a users start digging under the surface of WordPress they soon discover that things aren’t so simple. On top of that, the plethora of plugins and themes available means it’s hard for an untrained eye to know where to start. This makes consulting an excellent opportunity for the WordPress-savvy.
I spoke to Mason James who provides WordPress consultancy services. I asked him what being a WordPress consultant involves:
“For me, consulting is troubleshooting in advance. A good consultant obviously has to have a thorough understanding of existing plugins and themes as well as what’s in the pipeline for WordPress itself, but also a keen sense of business strategy. This knowledge and experience helps a consultant to see down the development path and provide a clear guide in terms of using solid foundational products and avoiding the common pitfalls faced by WordPress-based businesses.”
This balance of having technical knowledge and business sense is essential for a good consultant. Mason operates by focusing his clients on their goals, and trying to build a business strategy around that. He helps them to set benchmarks, and creates a map around that benchmark of achievable goals. Anything that’s not relevant to their goals gets set aside. With a lot of startups he’s found that an unclear direction leads to feature creep and a delayed release. These are the pitfalls that a consultant is there to help prevent.
I asked him what the best and worst things about working within the WordPress economy are:
The best:
“The best thing about working in the WordPress Economy would have to be the tremendous amount of resources, support, and knowledgeable folks out there to pull from. I’m still discovering great sources of information and it’s growing all the time.”
The worst:
“I would say the worst aspect of the economy would be that the open source aspect can sometimes confuse folks on the value of it. They can get a website up and running quickly at only the cost of the hosting. Because of this some tend to be tighter with their wallets when it comes to getting expert advice or development. It’s not a huge issue, but for example, there is a difference in salary between a WordPress developer and a Drupal developer.“
Development Shop
You can build anything if you put your mind to it (image CC license xray delta one).
As well as there are businesses that just sell WordPress products, there are development shops the world over that are using WordPress to build large-scale (and small-scale) websites. Dave Coveney is the founder of Interconnect/IT, a UK-based WordPress development shop. The business started life as a technology and software consultancy firm, but they soon discovered that demand was starting to climb for WordPress. When Interconnect/IT marketed itself as simply a Web design and development studio it faced a lot of competition. But once it focused on WordPress it started to get the interest of larger potential clients.
I asked Dave if he has ever had any problems convincing his clients that WordPress isn’t a blogging platform. Here’s what he said:
“We took a lot of care to get known for what we could do with WordPress, released quite a few themes, and developed clever things to prove what we could do. When the likes of Telecoms.com or The Telegraph approached they needed strong and clear advice not on what WordPress was, but on where its limitations lay. That gave it credibility. And it’s a fantastic tool for websites with a content stream, and for simple brochure websites.”
That’s not to say that Dave hasn’t thought about jumping ship from time to time. He’s tried out other CMS options, such as Drupal, and spent a month learning Ruby-on-Rails. But he’s always come back to WordPress for its ease with user training, performance and deployment.
“I always come back to WordPress feeling slightly guilty for cheating on it. However, I’m not married to WP, so it’s always worth always keeping options open.”
We are living in a time of global recession, but WordPress has thrived throughout this period. With low barriers to entry, and ease of use for non-technical people, it’s the smart choice for small businesses as well as big businesses. Dave pointed out that many of the large firms and organizations that they work with use Escenic, which is hugely expensive for just one license. For the cost of an Escenic license, a good WordPress developer “can deliver the moon on a stick.” This lets development shops like Interconnect/IT develop sophisticated websites for a fraction of the budget. As Dave pointed out:
“anything that saves people money will do well during a recession, and recessions tend to create innovation. The WordPress economy is a good example of this.”
Translation
Thinking about every language (image CC license Tico).
Living in a global market, a business can expand considerably by creating multi-lingual websites. ICanLocalizeprovides self-service translations for WordPress and other CMS. The company also makes WPML, a WordPress plugin that enables WordPress users to create multilingual versions of their websites
The man behind ICanLocalize is Amir Helzer. Like many developers, ICanLocalize grew from a need that he had himself: a small shareware business selling Web utilities. He had his website and programs translated, and that increased his revenue threefold. The process, however, was painful. He decided to create something that people would actually enjoy using. The company started as one person and has now expanded to five, and continues to grow. Now iCanLocalize is a recommended resource for iOS developers and serves major clients such as eBay.
ICanLocalize provides self-service translation but WordPress users have the added advantage of being able to use the WPML plugin to send WordPress content directly to translators.
“It’s all happening in self-service mode. We are a platform that connects certified professional translators with clients. Our philosophy is that the system should take care of all technical issues allowing translators to just translate, and clients to just push and receive what they need.”
I asked Amir about his work with WordPress, which provides about 30% of ICanLocalize’s business:
“WordPress users are exactly our target audience. They are typically smaller businesses and highly cost sensitive. However, everyone who takes translation work also requires quality, so this lets ICanLocalizes’ benefits shine.
I feel that our involvement in WordPress has been a two-way street. We got a huge push from this mass exposure and we also helped WordPress mature into a completely multilingual CMS.”
Smashing Special: A Two-Part Series
Due to the length of the series, it was split into two parts:
Emotional design has become a powerful tool in creating exceptional user experiences for websites. However, emotions did not use to play such an important role on the Web. Actually, they did not use to play any role at all; rather, they were drowned by a flood of rational functionality and efficiency.
We were so busy trying to adapt to the World Wide Web as a new medium that we lost sight of its full potential. Instead of using the Internet on our terms, we adapted to its technical and, at first, impersonal nature. If it wasn’t for visionary contemporaries such as Don Norman or Aaron Walter, we might still be focusing on improving processes, neglecting the potential of emotional design.
In his book Emotional Design, Norman describes why “attractive things work better.� He explains how attractive products trigger our creativity and ultimately expand our mental processes, making us more tolerant of minor difficulties. What he is saying is that attractive products make problem-solving easier, which makes them absolutely essential. Emotional Design is Norman’s reaction to critics who said that if they followed his rules, their designs would be only functional but ugly. So, he conducted the necessary research and came up with three levels of visual design that all need to be considered in order for a design to be both usable and pretty.
User experience designer Aaron Walter contributed another great book to this new era of design: Designing for Emotion. In this book, he defines emotions as the “lingua franca of humanity,� the native tongue that every human is born with. He describes how important emotional experiences are because they make a profound imprint on our long-term memory and create “an experience for users that makes them feel like there’s a person, not a machine, at the other end of the connection�.
Norman and Walter have recognized that emotions are key to the full potential of contemporary Web design. Let’s follow their example and learn how we can contribute to a more personal, more targeted and more emotional World Wide Web.
In this article, we’ll recap the foundation of a good design, take a look at Norman’s three levels of visual design and introduce practical ways to build emotion into a website.
A couple of things form the foundation of any good design, whether the design is emotional or not. Why are we talking about the foundation of a design here? Think of the construction of a house. First, you need a solid foundation; then, you can start to plan the division of space and build walls. In Web design it’s the same; you need to know your internal design goals, who your users are and in what context they will use your website. Once this groundwork is done, you can get started on the design.
Internal Design Goals
Before you get started on anything, ask yourself what your own goals are. This does not mean you should put yourself at the center of attention for the rest of the process, but it is important to know what image you want to communicate, what your values and visions are, and how you want others to see you. With this knowledge at hand, you are armed to be very clear and consistent not only in your actions, but also in your appearance. A certain amount of continuity and predictability adds to your reliability, which is important for getting people to commit to a relationship with you.
Prospective Users
Know who you are designing for. Your future users will be the people who purchase and use your product or website, so make sure you know what they want. General demographics will give you a rough picture of who you are targeting. By drawing a clear picture of their goals, how they are going to use your website, and what matters and doesn’t matter to them, you will learn how to target your users. Without knowing your prospective users, designing something relevant that is both usable and pleasurable will be quite tricky.
Context of Use
Finally, think about the context of use. Knowing the situations and circumstances in which users will be visiting your website is valuable. Consider possible emotions that might be involved, and find out which role you and your users play. Be aware that knowing the context of use will make it easier for you to understand your users the moment they visit your website. It will help you reach out to your customers and to communicate with them more effectively.
Norman’s Three Levels Of Visual Design
Norman has identified three levels of visual design that designers can apply to build emotions into their products. These three levels are based on the way our brains function and can be seen as guide to a more appealing, effective, pleasurable and memorable design.
In a study on emotion that Norman conducted together with two colleagues from Northwestern University, they were able to show that different levels in our brain result in very specific and advanced human attributes. Those levels are the reason why we are able to accomplish and create things; why we can be artists, musicians and writers; why we have culture with language, art, humor and music; why we are conscious of our role in the world, a consciousness that enables us to reflect on our experiences. The three cognitive levels Norman has defined and applied to visual design are the visceral, behavioral and reflective levels. Let’s look at them one by one.
Visceral Level
The first and also lowest level is visceral. This is the level of preconsciousness, where emotional signals from our environment get interpreted automatically. The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something. Impressions at this level have an immediate emotional impact on us. Norman calls activities that are initiated from the visceral level “bottom-up behavior.�
For a visual design, this means that the visceral level has to do with the initial impact of the appearance, touch and feel. The visceral quality of a design can be studied by observing people’s first impression. A good visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited.
Vimeo has an appealing footer. The design has no other function than to catch people’s attention. (Image: mattyschreck)
Behavioral Level
The behavioral level is all about how things work and how we use and experience them. What matters on this level is function, performance and the physical feel of something.
A visual design would need to feature relevant functions that fulfill actual needs. Behavioral design needs to be understandable and usable. While confusion and frustration lead to negative emotions, fun, ease of use and effectiveness trigger positive emotions. To ensure a good behavioral design, you have to really know your user’s needs — for example, by observing how they interact with the design in the field.
The iPad’s split keyboard has phantom buttons. This way, if you are used to typing the letter Y with your left hand, you can still do it. (Image: Finer Things in iOS)
Reflective Level
The reflective level represents the highest level of our cognitive thought processes. Norman calls activities that come from this level “top-down behavior.� This level is conscious and capable of a high level of feelings, emotions and cognition. On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves. The reflective level sets in after having been exercised, and it dominates the other two levels, which means that through extensive reasoning, we can overrule both automated behavior and emotional impact.
In visual design, expertise enables us to respond differently to a design than if we had no idea what we are looking at. The reflective design defines our overall impression of a product, since we reflect on all aspects of it: messages sent, cultural aspects, the meaning of the product and whether it’s worth remembering.
US highways mapped like a subway system. This infographic has a great reflective design. (Image: Cameron Booth).
In every good design, all three levels work together. The need not be equally weighted, but because we perceive a visual design on all three cognitive levels, they should all at least be addressed. These different levels of visual design might conflict, though. For example, our opinion of a design after having thought about it might diverge from our initial impression of it. Also, people interpret designs differently and have different preferences for the visceral, behavioral and reflective qualities of a design.
So, the appearance of a design makes up only one level of visual design — the visceral design. The behavioral level relates to how the product works, and the reflective level relates to the long-term impact of the design. Combining these three levels in the right way, you can make a design…
Appealing
Grab the user’s attention and influence their perception.
Effective
Guide the user’s attention and make sure they find what they are looking for.
Pleasurable
Allow the user to appreciate your website and have fun.
Memorable
Build a relationship with the user and ensure a positive memory of you.
Implement Emotion In Your Visual Design
How can Web designers apply this knowledge? And how can we build emotions into our designs? A website usually includes several elements that can make a design more personal and that can be regarded as “emotion carriers.� Some of these are obvious, such as colors, images and shapes. Others are not so obvious, such as humor, recognition, dissonance, tone of voice and engagement. Let’s look at the less obvious ones.
Humor
Humor is an effective way to connect with people. A good laugh or even a little smile can break the ice and make people feel comfortable, whether it’s on the street, in the company of friends or on your website. However, humor is also a delicate matter because it is extremely difficult to generalize. What’s hilarious for one person might be ridiculous, embarrassing or even insulting to someone else.
When using humor on your website, think a couple of things through before launching. The foundation of design that was discussed earlier is important here. Knowing your users and the context of use will help you determine whether people will actually share your sense of funny. Also, keep in mind that you will probably not manage to make everyone smile, but avoid making people feel uncomfortable and especially offending them by any means. And don’t forget that the extent of humor on your website will influence the way users perceive you.
In Designing for Emotion Walter discusses an illustrative example of humor on the Web: Freddie von Chimpenheimer, the cartoon mascot of MailChimp. Walter describes Freddie as a friendly mascot who “welcomes users and makes them feel at home.� Freddie perfectly mirrors the brand’s traits, such as trustworthiness, simplicity and informality, without making the whole website look goofy. The mascot works because Freddie cracks jokes that “you can share with your mama,� but at the same time he never gets in the way of your workflow. This is important. Humor can get people involved, but it should never annoy visitors.
Freddie, the cartoon mascot of MailChimp, is a great emotion carrier for humor.
Recognition
By nature, we constantly seek emotional connections with others. That’s why we like to see images of faces on websites, and why we appreciate somehow recognizing ourselves. When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.
Walter explains in his book that we know ourselves so well that we try to relate everything we see to ourselves. We can even relate to a Web design that does not directly show human features. The recognition of our body’s proportions in a design is enough for us to perceive the design as being familiar and harmonic. This reason for this is the golden ratio, which helps us feel connected to a design because we link the abstract concept of proportion to our own body.
By recognizing ourselves in a design, we sense that there is more than just a screen with a bunch of code and images. We perceive human presence, which makes us feel comfortable and connected. Walter describes the personality of a website as the key to making a design more human.
Twitter based its redesign entirely on the golden ratio. (Image: Doug Bowman)
Dissonance
Another trait that characterizes us as humans is that we try to fit the world into patterns. Patterns help us understand and learn how things work, and they give us an idea of what to expect — and we love to know what to expect, because it makes us feel comfortable. In his article “Brains Agree: The Case for Website Usability Guidelines,â€� Todd Follansbee offers a great explanation of why we love patterns so much and of how we look for them on the Web just like everywhere else.
Usability guidelines are based on a deep understanding of how information is processed in our brains. Following these guidelines in Web design helps us offer users a consistent structure that they can fit into their mental models. As long as users recognize patterns on a website and find that everything matches their expectations, they can focus on the content and quickly achieve their goals.
However, if we build a website that doesn’t fit these patterns, we can expect two things to happen. Either users will become irritated because they can’t find what they are looking for; this might lead to frustration, which you want to avoid by any means. Or else users won’t mind being pulled out of their habits and would welcome some distraction; they might see the dissonance with their expectations as a positive or fun experience.
Again, how people react depends strongly on who they are and the context in which they use your website. If you know that visitors intend to find certain information, make sure to meet their expectations and stick with patterns they are familiar with. If you expect users to have the time and desire to explore, you can definitely play with some dissonance to get their attention and get them involved.
The branding firm Subplot has a clear layout for its website, but the navigation is fun and out of the ordinary; it engages people, while still being easy to use.
Tone of Voice
The tone of voice you use on your website is an important emotional factor. How you communicate with users says a lot about your relationship with them. While you communicate certain messages through words, your tone of voice reveals what you think of them and also what you want them to think of you. The psychologist Friedemann Schulz von Thun illustrated these different layers of a message in his “four-sides� model of communication.
Your tone of voice strongly determines your first impression. If you wrap a serious message in a humorous story, users might not take you seriously. On the other hand, if you try to sell something fun and your tone of voice is too serious, users might not take you seriously either.
For your own website, know what you are selling, who is buying it and the context in which you are delivering the message.
Wufoo creates a distinctive environment for conducting surveys through its tone of voice.
Engagement
A perfectly usable and accessible website could still have a high bounce rate, a low number of sign-ups, or no characteristics worth remembering. In his presentation on “The Art and Science of Seductive Interactions,� Stephen Anderson shows how engaging people helps us build relationships and positive user experiences. The World Wide Web has been around long enough that we take it for granted; we don’t notice good usability, and we are hardly surprised to find the content we are looking for.
Now is the time for something more than passive consumption of the expected. We want to be engaged, have fun and be entertained. This engagement could take the form of playing, interaction or personalization of content. We love customizing things; we can spend hours playing social games online; and we welcome any entertaining video that crosses our path, right?
Of course, as with all of the above, your users and their context should determine how you engage them. If users are simply looking for the most efficient way to interact with your website, then make that interaction as straightforward as possible. The more time your users have and the more curious they are, the more you will be able to draw them in.
On Slavery Footprint, users can learn about their impact on slavery in an interactive and engaging way.
Conclusion
Emotional design turns casual users into fanatics, ready to tell others about their positive experience.
– Aaron Walter
Emotional design has many qualities. We become more creative if we are confronted with something attractive. This creativity helps us solve problems more easily. Emotions also give us positive experiences, making us happier and giving us better recall. Norman came up with three levels of visual design based on different levels of our cognitive processing: the visceral level (appearance), the behavioral level (usability), and the reflective level (personal satisfaction, self-image and remembrance). Internal design goals as well as the needs, expectations and context of users will determine how the designer should balance those three levels and what to emphasize in order to get the most out of the design.
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003.
Still, the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we’re not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite.
I won’t take a stance on the validity of CSS sprites. The aim of this article is to find out why people still find it difficult to use CSS sprites. Also, we’ll come up with a couple of substantial improvements to current techniques. So, start up Photoshop (or your CSS sprite tool of choice), put on your LESS and Sass hats, and brush up your CSS pseudo-element skills, because we’ll be mixing and matching our way to easier CSS sprite implementation.
The Problem With CSS Sprites
While Photoshop is booting, take a moment to consider why CSS sprites have had such a hard time getting widespread acceptance and support. I’m always struggling to find the correct starting position for each image within a sprite. I’ll usually forget the exact coordinates by the time I need to write them down in the style sheet, especially when the image is located at x:259, y:182 and measures 17×13 pixels.
I’m always switching back and forth between Photoshop and my CSS editor to write down the correct values, getting more and more frustrated with every switch. I know software is out there specifically tailored to help us deal with this, but I’ve never found an application that lets me properly structure its CSS output so that I can just copy and paste it into my CSS file.
Another important thing to realize is that CSS sprites are meant to be one part of our website optimization toolkit. Many of the people who write and blog about CSS sprites are comfortably wearing their optimization hats while laying out best practices, often going a little overboard and losing track of how much effort it requires to implement their methods of choice.
This is fine if you’re working on an optimization project, but it becomes counterproductive when you need to build a website from scratch while fighting tight deadlines. If you have time to truly focus on implementing a CSS sprite, it’s really not all that hard; but if you have to juggle 50 other priorities at the same time, it does turn into a nuisance for many developers. With these two factors in mind, we’ll try to find a way to make image targeting easier, while coming to terms with the fact that sometimes we have to sacrifice full optimization in the name of ease of development.
CSS sprites in the wild: Amazon, Google and Facebook.
Preparing The Sprite
If you look online for examples of CSS sprites, you’ll see that most are optimized for an ideal use of real estate—gaps between images are kept to a minimum in order to keep the load of the entire sprite as low as possible. This reduces loading time considerably when the image is first downloaded, but it also introduces those horrible image coordinates that we mentioned earlier. So, why not take a slightly different approach? Let’s look for an easier way to target images while making sure the resulting sprite is not substantially bigger than the sum of its individual images.
Rather than try to stack the images in such a way that makes the resulting sprite as small as possible, let’s try a different layout. Instead of a random grid, we’re going to build a nice square grid, reserving the space of each square for one image (although larger images might cover multiple squares). The goal is to be able to target the starting point of every image (top-left corner) with a very simple mathematical function.
The size of the grid squares will depend on the average dimension of the images that you’ll be spriting. For my website, I used a 32×32 pixel grid (because only one image exceeds this dimension), but grid sizes will vary according to the situation. Another thing to take into account is the image bleeding that can occur when zooming a page; if you want to play it safe, add a little padding to each image within the sprite. For extra optimization, you could also use a rectangular grid instead of a square grid, further reducing any wasted space; while a tad more complex, this isn’t much different from what we’ll be doing. For this article, though, we’ll stick with the square grid.
Preparing The Sprite: A Photoshop Bonus
I’m no designer, so I’m not sure how applicable this section is beyond the realm of Photoshop, but there are still some noteworthy improvements that can be made before we get to the actual code. First of all, visualizing the grid can be of great help. Photoshop has guides to do this (so you don’t actually have to include the markers in your sprite), with the added bonus that layers will snap to these guides (making pixel-perfect positioning of each individual image much easier).
Manually adding these guides can be somewhat of a drag, though. Luckily, a colleague of mine (hats off to Filip Van Tendeloo) was kind enough to write and share a little Photoshop script that builds this grid of guides automatically based on the base size of your square. Pretty convenient, no? Just download the script, save it in the Presets\Scripts directory, and choose File → Scripts → Sprite Grid from the Photoshop menu.
Finally, to really finish things off, you can add numbers to the x and y axes of your grid so that you can easily pinpoint every square in the grid. Don’t add these numbers to the actual sprite, though; just copy the sprite into a new image and add them there. These numbers are just for reference—but trust me, they will definitely come in handy in a minute.
Example of a reference image.
If you can’t (or don’t want to) use preprocessing languages such as LESS and Sass, just add the coordinates of each square instead.
LESS And Sass To The Rescue
With all of the images on the same square grid, we can now easily compute the top-left coordinate of each image (this coordinate is the exact match needed for the background-position values to reposition the sprite). Just take the base size of the grid and multiply it by the numbers that you just added to your reference image. Say you need to target the image at a position of (5,3), and your grid size is 32 pixels; the top-left position of your image will be 32 × (5,3) = (160,96). To add these values to your CSS file, just use their negative equivalents, like so:
background-position: -160px -96px;
Leave your calculator where it is for the time being, because it would be too much of a hassle. If computers are good at anything, it’s doing calculations, so we’re going to make good use of that power. Plain CSS doesn’t allow us to do calculations (yet), but languages like LESS and Sass were made to do just that. If you need more background information, check out the article “An Introduction to LESS and Comparison to Sass.� While both languages offer similar functionality, their syntaxes are slightly different. I’m a LESS man myself, but if you’re used to Sass, converting the following examples to Sass code shouldn’t be too hard. Now for some advanced CSS magic:
Nothing too exciting so far. First, we’ve defined the grid size using a LESS variable (@spriteGrid). Then, we made a mixin that accepts the numbers we added to the reference image earlier. This mixin uses the grid variable and the image’s coordinates to calculate the base position of the image that we want to target. It might not look fancy, but it sure makes the basic use of sprites a lot easier already. From now on, you can just use .sprite(1,5), and that’s all there is to it. No more annoying calculations or finding random start coordinates.
Of course, the mixin above only works in our somewhat simplified example (using a square grid and just one sprite). Some websites out there are more complex and might require different sprites using rectangular grids for additional optimization. This isn’t exactly impossible to fix with LESS, though:
Yes, this looks a bit more daunting, but it’s still pretty basic if you take a minute to understand what’s going on. Most importantly, the added complexity is safely hidden away inside the LESS mixins, and we’re still able to use the same sprite mixin as before, only now with three parameters in total. We’ve just added an image parameter so that we can easily determine which sprite to use each time we call our mixin.
Different sprites might have different grid dimensions, though; so, for each grid dimension, we need to write a separate LESS mixin. We match each sprite to its specific dimension (the example above handles three different sprites and matches it to two different grid dimensions), and we define the dimensions (@spriteX and @spriteY) locally in each mixin. Once that is done, we offload the rest of the work to a little .spriteHelper mixin that does all of the necessary calculations and gives us the same result as before.
The “guardsâ€� (as LESS calls them—characterized by the keyword “whenâ€�) are quite new to the LESS vocabulary, so do make sure you’re using the latest version of the LESS engine if you attempt to run this yourself. It does offer a great way to keep the sprite mixin as clear and concise as possible, though. Just pass the sprite you want to use to the sprite mixin, and LESS will figure out the rest for you.
Common CSS Sprite Use Cases
With these mixins at our disposal, let’s see what different CSS sprite use cases we can identify and find out whether capturing these use cases in additional LESS mixins is possible. Once again, in order to minimize complexity in the upcoming sections, we’ll assume you’re working with a square grid sprite. If you need a rectangular grid, just add the image’s parameter to the LESS mixins we’ll be working with, and everything should be fine.
For each use case, we’ll define two mixins: one with and one without height and width parameters. If you’re like me and you keep misspelling the height and width keywords, the second mixin might come in handy. It does leave you the responsibility of learning the correct order of the parameters, though. LESS allows you to define these mixins in the same document, however, so there’s really no harm in listing them both, picking whichever is easiest for you.
1. Replaced Text
This is probably the easiest use case, occurring when we have an html element at our disposal that can be given a fixed dimension (in order to ensure we can hide the unwanted parts of the sprite). We’ll also be hiding the text inside the html element, replacing it with an image from our sprite. Typical examples of this use case are action links (think delete icons, print links, RSS icons, etc.) and headings (although CSS3 and Web fonts are quickly making this technique obsolete).
The spriteReplace mixin simply wraps our former sprite mixin and adds a small helper mixin to hide the text from view. It’s pretty basic, but it does save us the trouble of adding the .hideText mixin manually for every instance of this use case.
Using sprites for replaced elements.
In the example above, we have a list of sharing options. For whatever reason (theming or just personal preference), let’s say we decide to use CSS backgrounds instead of HTML images. Nothing to it with the mixins we just created. Here’s the code (assuming we’re using the reference image shown earlier):
.sharing .twitter a {
.spriteReplace(0, 0, 32px, 32px); display:block;
}
2. Inline Images
For the second use case, we’ll tackle inline images. The main problem we’re facing here is that we won’t be able to put fixed dimensions on the html element itself because we’re dealing with variable-sized content. Typical uses of inline images are for icons next to text links (for example, external links, download links, etc.), but this method can also be used for any other item that allows text to be wrapped around a sprite image.
We might be lacking a structural element to visualize our image, but 2011 taught us that pseudo-elements are the perfect hack to overcome this problem (Nicolas Gallagher’s eye-opening article on using pseudo-elements for background images explains everything in detail). This is why the spriteInline mixin was especially developed to be used within a :before or :after selector (depending on where the image needs to appear). We’ll add an inline-block declaration to the pseudo-element so that it behaves like an inline element while still allowing us to add fixed dimensions to it, and we’ll add the content property, which is needed just for visualizing the pseudo-element.
Using sprites for inline images.
The example above shows a list of affiliate links. The design demands that each link be limited to one line, so we can safely use the .spriteInline mixin to display the icons in front of each link:
<ul class="affiliates">
<li class="amazon"><a href="#">Buy on Amazon.com</a></li>
…
</ul>
The third and final use case comes up when text isn’t allowed to wrap around a sprite image. Typical examples are list items that span multiple lines, and all kinds of visual notifications that bare icons. Whenever you want to reserve space on a multi-line element to make sure the text lines up neatly next to the image, this is the method you’ll want to use.
Again we’ll try our luck with pseudo-elements; this time, though, we’ll be performing some positioning tricks. By applying a position: absolute to the pseudo-element, we can place it right inside the space reserved by its parent element (usually by applying padding to the parent—hence, the name of the mixin). The actual position of the image (the left, right, top and bottom properties) is not added to the spritePadded mixin and should be done in the selector itself to keep things as clean and simple as possible (in this case, by maintaining a low parameter count).
Because we’re using absolute positioning, either the :before or :after pseudo-element will do the job. Keep in mind, though, that the :after element is a likely candidate for CSS clearing methods, so if you want to avoid future conflicts (because the clearing fix won’t work if you add a position: absolute to the :after pseudo-element), you’d be safest applying the sprite style to the :before element.
Using sprites for padded elements.
Let’s assume we need to indicate that our article is available in other languages (probably on a different page or even website). We’ll add a little notification box, listing the different translations of the current article. If the text breaks onto a second line, though, we do not want it to crawl below our little icon, so we’ll use the spritePadded mixin:
So, have we achieved CSS sprite wizardry here? Heck, no! If you’ve been paying close attention, you might have noticed that the use cases above offer no solution for adding repeating backgrounds to a sprite. While there are some ways around this problem, none of them are very efficient or even worthy of recommendation.
What CSS sprites need in order to truly flourish is a CSS solution for cropping an image. Such a property should define a crop operation on a given background image before the image is used for further CSS processing. This way, it would be easy to crop the desired image from the sprite and position it accordingly, repeating it as needed; we’d be done with these :before and :after hacks because there wouldn’t be anything left to hide. A solution has been proposed in the Editor’s Draft of the CSS Image Values and Replaced Content Module Level 3 (section 3.2.1), but it could take months, even years, for this to become readily available.
For now, the LESS mixins above should prove pretty helpful if you plan to use CSS sprites. Just remember to prepare your sprite well; if you do, things should move ahead pretty smoothly, even when deadlines are weighing on you.
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003.
Still, the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we’re not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite.
I won’t take a stance on the validity of CSS sprites. The aim of this article is to find out why people still find it difficult to use CSS sprites. Also, we’ll come up with a couple of substantial improvements to current techniques. So, start up Photoshop (or your CSS sprite tool of choice), put on your LESS and Sass hats, and brush up your CSS pseudo-element skills, because we’ll be mixing and matching our way to easier CSS sprite implementation.
The Problem With CSS Sprites
While Photoshop is booting, take a moment to consider why CSS sprites have had such a hard time getting widespread acceptance and support. I’m always struggling to find the correct starting position for each image within a sprite. I’ll usually forget the exact coordinates by the time I need to write them down in the style sheet, especially when the image is located at x:259, y:182 and measures 17×13 pixels.
I’m always switching back and forth between Photoshop and my CSS editor to write down the correct values, getting more and more frustrated with every switch. I know software is out there specifically tailored to help us deal with this, but I’ve never found an application that lets me properly structure its CSS output so that I can just copy and paste it into my CSS file.
Another important thing to realize is that CSS sprites are meant to be one part of our website optimization toolkit. Many of the people who write and blog about CSS sprites are comfortably wearing their optimization hats while laying out best practices, often going a little overboard and losing track of how much effort it requires to implement their methods of choice.
This is fine if you’re working on an optimization project, but it becomes counterproductive when you need to build a website from scratch while fighting tight deadlines. If you have time to truly focus on implementing a CSS sprite, it’s really not all that hard; but if you have to juggle 50 other priorities at the same time, it does turn into a nuisance for many developers. With these two factors in mind, we’ll try to find a way to make image targeting easier, while coming to terms with the fact that sometimes we have to sacrifice full optimization in the name of ease of development.
CSS sprites in the wild: Amazon, Google and Facebook.
Preparing The Sprite
If you look online for examples of CSS sprites, you’ll see that most are optimized for an ideal use of real estate—gaps between images are kept to a minimum in order to keep the load of the entire sprite as low as possible. This reduces loading time considerably when the image is first downloaded, but it also introduces those horrible image coordinates that we mentioned earlier. So, why not take a slightly different approach? Let’s look for an easier way to target images while making sure the resulting sprite is not substantially bigger than the sum of its individual images.
Rather than try to stack the images in such a way that makes the resulting sprite as small as possible, let’s try a different layout. Instead of a random grid, we’re going to build a nice square grid, reserving the space of each square for one image (although larger images might cover multiple squares). The goal is to be able to target the starting point of every image (top-left corner) with a very simple mathematical function.
The size of the grid squares will depend on the average dimension of the images that you’ll be spriting. For my website, I used a 32×32 pixel grid (because only one image exceeds this dimension), but grid sizes will vary according to the situation. Another thing to take into account is the image bleeding that can occur when zooming a page; if you want to play it safe, add a little padding to each image within the sprite. For extra optimization, you could also use a rectangular grid instead of a square grid, further reducing any wasted space; while a tad more complex, this isn’t much different from what we’ll be doing. For this article, though, we’ll stick with the square grid.
Preparing The Sprite: A Photoshop Bonus
I’m no designer, so I’m not sure how applicable this section is beyond the realm of Photoshop, but there are still some noteworthy improvements that can be made before we get to the actual code. First of all, visualizing the grid can be of great help. Photoshop has guides to do this (so you don’t actually have to include the markers in your sprite), with the added bonus that layers will snap to these guides (making pixel-perfect positioning of each individual image much easier).
Manually adding these guides can be somewhat of a drag, though. Luckily, a colleague of mine (hats off to Filip Van Tendeloo) was kind enough to write and share a little Photoshop script that builds this grid of guides automatically based on the base size of your square. Pretty convenient, no? Just download the script, save it in the Presets\Scripts directory, and choose File → Scripts → Sprite Grid from the Photoshop menu.
Finally, to really finish things off, you can add numbers to the x and y axes of your grid so that you can easily pinpoint every square in the grid. Don’t add these numbers to the actual sprite, though; just copy the sprite into a new image and add them there. These numbers are just for reference—but trust me, they will definitely come in handy in a minute.
Example of a reference image.
If you can’t (or don’t want to) use preprocessing languages such as LESS and Sass, just add the coordinates of each square instead.
LESS And Sass To The Rescue
With all of the images on the same square grid, we can now easily compute the top-left coordinate of each image (this coordinate is the exact match needed for the background-position values to reposition the sprite). Just take the base size of the grid and multiply it by the numbers that you just added to your reference image. Say you need to target the image at a position of (5,3), and your grid size is 32 pixels; the top-left position of your image will be 32 × (5,3) = (160,96). To add these values to your CSS file, just use their negative equivalents, like so:
background-position: -160px -96px;
Leave your calculator where it is for the time being, because it would be too much of a hassle. If computers are good at anything, it’s doing calculations, so we’re going to make good use of that power. Plain CSS doesn’t allow us to do calculations (yet), but languages like LESS and Sass were made to do just that. If you need more background information, check out the article “An Introduction to LESS and Comparison to Sass.� While both languages offer similar functionality, their syntaxes are slightly different. I’m a LESS man myself, but if you’re used to Sass, converting the following examples to Sass code shouldn’t be too hard. Now for some advanced CSS magic:
Nothing too exciting so far. First, we’ve defined the grid size using a LESS variable (@spriteGrid). Then, we made a mixin that accepts the numbers we added to the reference image earlier. This mixin uses the grid variable and the image’s coordinates to calculate the base position of the image that we want to target. It might not look fancy, but it sure makes the basic use of sprites a lot easier already. From now on, you can just use .sprite(1,5), and that’s all there is to it. No more annoying calculations or finding random start coordinates.
Of course, the mixin above only works in our somewhat simplified example (using a square grid and just one sprite). Some websites out there are more complex and might require different sprites using rectangular grids for additional optimization. This isn’t exactly impossible to fix with LESS, though:
Yes, this looks a bit more daunting, but it’s still pretty basic if you take a minute to understand what’s going on. Most importantly, the added complexity is safely hidden away inside the LESS mixins, and we’re still able to use the same sprite mixin as before, only now with three parameters in total. We’ve just added an image parameter so that we can easily determine which sprite to use each time we call our mixin.
Different sprites might have different grid dimensions, though; so, for each grid dimension, we need to write a separate LESS mixin. We match each sprite to its specific dimension (the example above handles three different sprites and matches it to two different grid dimensions), and we define the dimensions (@spriteX and @spriteY) locally in each mixin. Once that is done, we offload the rest of the work to a little .spriteHelper mixin that does all of the necessary calculations and gives us the same result as before.
The “guardsâ€� (as LESS calls them—characterized by the keyword “whenâ€�) are quite new to the LESS vocabulary, so do make sure you’re using the latest version of the LESS engine if you attempt to run this yourself. It does offer a great way to keep the sprite mixin as clear and concise as possible, though. Just pass the sprite you want to use to the sprite mixin, and LESS will figure out the rest for you.
Common CSS Sprite Use Cases
With these mixins at our disposal, let’s see what different CSS sprite use cases we can identify and find out whether capturing these use cases in additional LESS mixins is possible. Once again, in order to minimize complexity in the upcoming sections, we’ll assume you’re working with a square grid sprite. If you need a rectangular grid, just add the image’s parameter to the LESS mixins we’ll be working with, and everything should be fine.
For each use case, we’ll define two mixins: one with and one without height and width parameters. If you’re like me and you keep misspelling the height and width keywords, the second mixin might come in handy. It does leave you the responsibility of learning the correct order of the parameters, though. LESS allows you to define these mixins in the same document, however, so there’s really no harm in listing them both, picking whichever is easiest for you.
1. Replaced Text
This is probably the easiest use case, occurring when we have an html element at our disposal that can be given a fixed dimension (in order to ensure we can hide the unwanted parts of the sprite). We’ll also be hiding the text inside the html element, replacing it with an image from our sprite. Typical examples of this use case are action links (think delete icons, print links, RSS icons, etc.) and headings (although CSS3 and Web fonts are quickly making this technique obsolete).
The spriteReplace mixin simply wraps our former sprite mixin and adds a small helper mixin to hide the text from view. It’s pretty basic, but it does save us the trouble of adding the .hideText mixin manually for every instance of this use case.
Using sprites for replaced elements.
In the example above, we have a list of sharing options. For whatever reason (theming or just personal preference), let’s say we decide to use CSS backgrounds instead of HTML images. Nothing to it with the mixins we just created. Here’s the code (assuming we’re using the reference image shown earlier):
.sharing .twitter a {
.spriteReplace(0, 0, 32px, 32px); display:block;
}
2. Inline Images
For the second use case, we’ll tackle inline images. The main problem we’re facing here is that we won’t be able to put fixed dimensions on the html element itself because we’re dealing with variable-sized content. Typical uses of inline images are for icons next to text links (for example, external links, download links, etc.), but this method can also be used for any other item that allows text to be wrapped around a sprite image.
We might be lacking a structural element to visualize our image, but 2011 taught us that pseudo-elements are the perfect hack to overcome this problem (Nicolas Gallagher’s eye-opening article on using pseudo-elements for background images explains everything in detail). This is why the spriteInline mixin was especially developed to be used within a :before or :after selector (depending on where the image needs to appear). We’ll add an inline-block declaration to the pseudo-element so that it behaves like an inline element while still allowing us to add fixed dimensions to it, and we’ll add the content property, which is needed just for visualizing the pseudo-element.
Using sprites for inline images.
The example above shows a list of affiliate links. The design demands that each link be limited to one line, so we can safely use the .spriteInline mixin to display the icons in front of each link:
<ul class="affiliates">
<li class="amazon"><a href="#">Buy on Amazon.com</a></li>
…
</ul>
The third and final use case comes up when text isn’t allowed to wrap around a sprite image. Typical examples are list items that span multiple lines, and all kinds of visual notifications that bare icons. Whenever you want to reserve space on a multi-line element to make sure the text lines up neatly next to the image, this is the method you’ll want to use.
Again we’ll try our luck with pseudo-elements; this time, though, we’ll be performing some positioning tricks. By applying a position: absolute to the pseudo-element, we can place it right inside the space reserved by its parent element (usually by applying padding to the parent—hence, the name of the mixin). The actual position of the image (the left, right, top and bottom properties) is not added to the spritePadded mixin and should be done in the selector itself to keep things as clean and simple as possible (in this case, by maintaining a low parameter count).
Because we’re using absolute positioning, either the :before or :after pseudo-element will do the job. Keep in mind, though, that the :after element is a likely candidate for CSS clearing methods, so if you want to avoid future conflicts (because the clearing fix won’t work if you add a position: absolute to the :after pseudo-element), you’d be safest applying the sprite style to the :before element.
Using sprites for padded elements.
Let’s assume we need to indicate that our article is available in other languages (probably on a different page or even website). We’ll add a little notification box, listing the different translations of the current article. If the text breaks onto a second line, though, we do not want it to crawl below our little icon, so we’ll use the spritePadded mixin:
So, have we achieved CSS sprite wizardry here? Heck, no! If you’ve been paying close attention, you might have noticed that the use cases above offer no solution for adding repeating backgrounds to a sprite. While there are some ways around this problem, none of them are very efficient or even worthy of recommendation.
What CSS sprites need in order to truly flourish is a CSS solution for cropping an image. Such a property should define a crop operation on a given background image before the image is used for further CSS processing. This way, it would be easy to crop the desired image from the sprite and position it accordingly, repeating it as needed; we’d be done with these :before and :after hacks because there wouldn’t be anything left to hide. A solution has been proposed in the Editor’s Draft of the CSS Image Values and Replaced Content Module Level 3 (section 3.2.1), but it could take months, even years, for this to become readily available.
For now, the LESS mixins above should prove pretty helpful if you plan to use CSS sprites. Just remember to prepare your sprite well; if you do, things should move ahead pretty smoothly, even when deadlines are weighing on you.
