BlogmyQuery – BMQ

When creating content for the Web, considering tone of voice is important. Your tone can help you stand out from competitors, communicate efficiently and effectively with your audience and share your personality.

What Is Tone Of Voice, And Why Is It Important?

Tone of voice isn’t what we say but how we say it. It’s the language we use, the way we construct sentences, the sound of our words and the personality we communicate. It is to writing what logo, color and typeface are to branding.

When we speak to others in person, our non-verbal communication says more than the words themselves. Non-verbal communication consists of facial expressions, tone, cues, gestures and pitch. Online, we lose of all of these except tone. We can imbue our Web copy with a tone that is distinct, clear, consistent and relevant to the target audience.

You can’t create a strong and effective user experience without language. And tone of voice plays a big role in this by doing the following:

• Differentiating you from competitors,
• Showing your personality,
• Helping you gain and retain customers.

Here are some snippets of content from the “About� pages of well-known brands. You can see how each has its own unique and appropriate tone of voice.

Starbucks

“To say that Starbucks purchases and roasts high-quality whole bean coffee is very true. That’s the essence of what we do — but it hardly tells the whole story.

Our coffeehouses have become a beacon for coffee lovers everywhere. Why do they insist on Starbucks? Because they know they can count on genuine service, an inviting atmosphere and a superb cup of expertly roasted and richly brewed coffee every time.”

American Express

“Each day, American Express makes it easier, safer and more rewarding for consumers and businesses to purchase the things they need and for merchants to sell their goods and services. An engine of commerce, American Express provides innovative payment, travel and expense management solutions for individuals and businesses of all sizes.”

British Airways

“British Airways is a full service global airline, offering year-round low fares with an extensive global route network flying to and from centrally-located airports.”

Disney

“The Walt Disney Company, together with its subsidiaries and affiliates, is a leading diversified international family entertainment and media enterprise with five business segments: media networks, parks and resorts, studio entertainment, consumer products and interactive media.”

Each of these organizations has its own voice. The formality of Disney’s voice might be surprising, but despite the fact that it sells “fun,� Disney is still a massive corporation. You need a voice that is true to your company’s culture and values. As Aarron Walter says in his book Designing for Emotion, “To engage your audience emotionally, you must let your brand’s personality show.�

How To Find The Right Tone

You need to have a lot in place before getting started, and the process needs to be embedded in the project. It’s more than about just cobbling together a few sentences. Tone of voice requires careful decisions based on the company’s values and personality.

You might need to adjust your process to find the right tone because each project has its own constraints and deliverables. But research is key, and it could include the following:

• Interviews with stakeholders,
• Content audits,
• Brand reviews,
• Audience research.

Interviews With Stakeholders

The key stakeholders are usually the decision-makers, so engaging them and getting them involved is essential. Your interviews with them needn’t be restricted to tone of voice, but they should include it.

Give them enough time to say everything they need to say, but keep the discussion focused on three of four major topics. You might want to ask what they think how the company sounds like to others and how they want it to sound. It is also chance to find out which voices among competitors and other organizations they like or dislike. Asking how they view their position in the marketplace would be valuable, too.

Don’t let them focus on what they think the solution should be, though. They need to tell you their problems; solving them is your job. The stakeholders should be concerned with their culture, business objectives and reasons for initiating this project. You could also send them your list of questions or an agenda before the interview so that they are not caught off guard.

Keeping the interviews informal would also help. The more comfortable the stakeholders feel with you, the more honest they will be.

Content Audits

A content audit can be a project in itself, depending on how much content you are dealing with. By reviewing all of your current content, you can see what the tone of voice is and then ask later in the research phase whether it is relevant. Reviewing the content relative to the tone should be done carefully, though. If new content is being written, then the people responsible will need guidance on what tone to adopt.

This is also an opportunity to assess whether the tone is consistent across all of the content. Perhaps your social media channels and corporate brochure vary in tone, but do they still sound like your company?

The voice should be essentially the same, regardless of the platform. Image source.

Research

Tone of voice is one part of a brand, so it needs to be considered as part of the big picture. The tone needs to fit the visual identity of the company, too. A formal, corporate-looking brand identity paired with a casual and chatty voice wouldn’t be coherent. Reviewing the brand, including typefaces, colors, language and imagery, will help you determine the most appropriate and authentic tone.

Stakeholder and Client Research

Who will be “listening� to you? Getting input from stakeholders is helpful, but these people usually aren’t the target audience. Any research you invest in the audience will be time well spent, even it it confirms what you already knew. Only when you know the audience will you be able to tell whether the tone of voice is appropriate.

This is all about asking questions. Gather information, and then draw insights from it to find out what works and what has to change.

If you are part of a team, then take time away from email and the phone to have a dedicated session about tone of voice. As a team, ask these questions:

• What is our personality?
• How do we sound to others?
• How do we want to sound?
• Are we authentic?
• Who are we targeting?
• How can we keep our voice but change the tone?

The team could also create mood boards related to how it views the company. These could reveal whether these insiders all view the company in the same way.

Getting everyone on board is important because if the team understands the tone of the company, then it will be able to communicate it consistently. In large organizations, certain stakeholders will likely need to be involved in this process, with the guidelines communicated to everyone else.

You might have to face some hard truths about who you are during this phase. Perhaps you want to be very informal but your industry doesn’t allow it. The key is to be honest. All of the information you gather from the questions above will start to paint a detailed picture of who you are.

You can then narrow down to more specific questions:

• Should we use jargon?
• Can we use humor?
• How informal can we be?
• What punctuation should we use?
• What do our competitors sound like?

One final question not to be ignored is, “Who are we engaging with?”

Audience Research

Your tone of voice has to communicate who you are to the target audience. But what if you have different audiences?

Your tone has to suit the brand, no matter who you are talking to, and this in turn will result in a good user experience. When addressing investors, you might find yourself sounding corporate and business-like. If a segment of your audience is younger, you might change your tone to suit it. Don’t. This immediately prevents you from being consistent, which means you aren’t being authentic, which is critical.

The change will happen at the level of content. The tone will stay the same, while the content will be adapted and refined as needed. Your message might be serious, but that doesn’t mean you can’t say it in a friendly way.

If you are a company that builds things, you could say this:

“The diversity in our department enables us to be innovative and creative, resulting in revolutionary, ground-breaking and immersive experiences for our target customers.”

Or you could say this:

“We build awesome products that our customers love.”

Going through these processes will have yielded a lot of data and information. The challenge now is to decide what’s right. This will be complicated by diverging opinions, and you will need buy-in from the stakeholders.

With a full understanding of the company’s challenges, personality, brand and target audience(s), you’re in a strong position to determine what the tone of voice should be. Any decisions you now make will be backed up by data.

Don’t be afraid to challenge the decision-makers either. They hired you for your expertise after all. Showing examples of their current tone and the proposed new tone will help. Stakeholders often think they sound a certain way when in fact their tone is very different. They might have trouble admitting this, but they can’t argue with cold hard data, and all of the time you’ve spent on research and auditing will support your decisions.

Once the tone has been decided, write down guidelines. The tone of voice might be a part of broader branding guidelines. If not, then put something together that informs everyone in the organization what you should sound like.

Showing examples is best. Include before-and-afters, and even list words to use and words to avoid if needed. If everyone on the team understands the tone, then they will help to keep it consistent, especially if you have more than one content creator.

Different Tones

MailChimp has taken its guidelines a step further by putting them online for all to see, on a website named Voice and Tone. The website makes clear through examples, tips and descriptions of feelings exactly how to achieve MailChimp’s tone of voice in all areas, including apps, social media, the main website, the blog and internal communications. The same approach and presentation could be used for printed guidelines, too. Tell team members how to get the tone right, but also show them.

Here are some pages from “Voice and Tone”:

Content types on MailChimp’s “Voice and Tone”.

Voice and Tone explains the jokes of MailChimp’s mascot, Freddie.

An explanation of how to write failure messages.

If the project allows you to have fun with the design and language, then you can get quirky or adopt a tone that others in the marketplace would shy away from. There’s a fine line between coming across as fun and quirky and coming across as unprofessional or snarky.

If you are in the legal, government or banking industry, then going the informal chatty route might not be appropriate, because you will need to appear trustworthy and professional to customers. Would you bank with a company that sounded like it wanted to have fun all day? I wouldn’t. I work hard for my money and want it to be looked after.

Your tone can still be friendly. The key is to be credible, because the worst thing you could do is try to sound like someone else or be something you are not.

I was at a local arts and literature festival recently, and one of the slides that was shown before each talk said this:

The tone of voice here was true to the spirit of the festival, making it authentic, and it was noticeable in other signage, making it consistent. It suited the personality of the festival and appealed to the audience that attended. The tone wasn’t negative (“Please turn your phone off�), which is the approach most commonly taken by cinemas, theaters and airlines. Instead, you were asked turn your phone back on after the talk, on the assumption that you had already turned it off. The bonus of asking you to share news of the session encouraged further positive behavior.

Given the nature of the event, the tone could have been complemented with more personality in the visuals. Something like:

The tone is the same in both graphics, just presented in different ways.

How Others Do It

Let’s explore the personality and tone of voice of some well-known brands and organizations. Some get it right, others less so. Let’s take a look at Ben & Jerry’s website:

Ben & Jerry’s presenting the various flavours they have available.

Tone of voice doesn’t work in isolation here, though. Illustrations, bright colors, a scrapbook feel, sans-serif fonts, animation and a lot of cows all support the friendly, fun and relaxed tone of voice.

Compare that to this more sophisticated and formal home page of the White House:

As you’d expect, Ben and Jerry’s and the White House have very different tones of voice, but they are appropriate for what they are and fit their personalities.

The White House’s website has a traditional color palette (a patriotic combination), a serif typeface, photography rather than illustrations, and a formal and professional tone of voice.

Authenticity And Consistency

While this is getting into other design elements, note that tone of voice can dictate the personality of everything else on the website. It shouldn’t be tacked on at the end of the project through a few tweaks to the copy. It needs to be considered from the start so that it can be communicated precisely at all times.

Ben & Jerry’s and the White House get it right. Each has found a tone that suits it and represents what it is.

But we often learn more from those who do it wrong.

Let’s take LOVEFiLM, an online film and game rental service, for example. With this service, you create an account, add films or games to a list, choose a subscription package, and then receive your selections in the mail. No late fees, no deadlines, no return postage costs.

I’m a subscriber, and the service is excellent. The tone of the website is not. LOVEFiLM provides entertainment, something fun to help users relax and escape to another world. Its tone of voice should reflect these values, e.g. by pushing the boundaries by playing on famous film quotes and titles. Instead, its personality is very middle-of-the-road.

LOVEFiLM’s home page, lacking in personality

The content and tone don’t prevent the user from achieving their objective — it is clear, for example, where to sign up for a free trial — but the tone is boring and formal. Saying something like, “Want free films for a month? Of course you do. Get started here!â€� would be much more appealing.

LOVEFiLM’s unfriendly sign-up and sign-in pages

Again, the user knows what to do here, but the company could really engage users with a distinct tone of voice, building a fun personality and creating a better experience.

This is a big claim, but it shows just how important tone of voice is. If you invest the time to find the tone that best represents who you are, then you are being true to yourself; you’re being authentic. If you then communicate in that tone of voice all of the time, both online or offline, then you are being consistent, and you will positively influence how your organization is perceived.

By being authentic and consistent, audiences will understand your brand and have a good experience wherever they are exposed to it. They will recognize you, and your relationship with them will flourish. They will keep coming back because they feel an emotional connection. If you aren’t authentic or are trying to be something you are not, then their experience with your brand will be inconsistent, and they will see through you and find it harder to engage with you.

Your tone must lead the way at all times. So, find out who you are, and if that means facing up to some harsh truths, so be it. Perhaps you aren’t as fun as you’d like to be; that’s OK, as long as your tone of voice reflects that at all times. Being consistent and distinctive in a large organization is harder, but it is still possible.

The surest sign of a lack of authenticity is hearing stakeholders say, “We want to sound like Innocent.� Innocent is a company that make smoothies and juices and is well known for its informal and chatty tone of voice. Wanting to be like Innocent is fine if you have the same culture, values and personality. But most companies don’t, and they want to be like Innocent just because it has perfected its tone of voice and is regarded as a trailblazer for it.

Its quirky print advertisements shows a consistent tone of voice. Large preview.

Innocent’s friendly subscription box. Large preview.

By emulating another company’s tone of voice, you won’t be emulating their success. Admiring the company and being influenced by its tone is fine, but you can’t recreate it because too many variables are at play, such as product, service, location and audience.

Is This The End?

No, it’s not. Once your content is live, don’t leave it unloved. Keep checking that the tone is relevant. Organizations change, perhaps not overnight, but over time; so, if your culture changes, then maybe the tone has to be adapted, too.

That might be a long way off yet, though. First, do an audit and see if your tone is right. If not, then a research and discovery phase will enable you to gather all of the information needed to make informed decisions.

At the fore of the decision-making process should be your culture, personality and audience. When you have determined the tone, apply it across the brand so that you establish authenticity and so that the user experience is consistent. Then, audiences will engage with you, feel an emotional connection and keep coming back for more.

What are your thoughts on the importance of the voice and tone? Share your thoughts with us in the comments section below!

(al) (il)

© Robert Mills for Smashing Magazine, 2012.

With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina� Web in 2010, we had to wait for the third-generation iPad to fully realize how fuzzy and outdated our Web graphics and content images are.

In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industry-wide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using.

Before diving into the nitty gritty, let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities.

Device Pixels

A device pixel (or physical pixel) is the tiniest physical unit in a display. Each and every pixel sets its own color and brightness as instructed by the operating system, while the imperceptible distance between these tiny dots takes care of tricking the eye into perceiving the full image.

Screen density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI). Apple has coined the marketing term “Retina� for its double-density displays, claiming that the human eye can no longer distinguish individual pixels on the screen from a “natural� viewing distance.

CSS Pixels

A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on Web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs). On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.

<div height="200" width="300"></div>

This would use 200 × 300 device pixels to be drawn on screen. On a Retina display, the same div would use 400 × 600 device pixels in order to keep the same physical size, resulting in four times more pixels, as shown in the figure below.

On a Retina display, four times as many device pixels are on the same physical surface.

The ratio between device pixels and CSS pixels can be obtained using the following media query and its vendor-specific equivalents:

        device-pixel-ratio,
     -o-device-pixel-ratio,
   -moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
…
}

Or you can use their future-proof siblings:

            device-pixel-ratio,
     -o-min-device-pixel-ratio,
   min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
…
}

In Javascript, window.devicePixelRatio can be used to obtain the same ratio, although browser support is still relatively limited. Both of these techniques will be discussed in depth later in this article.

Bitmap Pixels

A bitmap pixel is the smallest unit of data in a raster image (PNG, JPG, GIF, etc). Each pixel contains information on how it is to be displayed, including its position in the image’s coordinate system and its color. Some image formats can store additional per-pixel data, such as opacity (which is the alpha channel).

Beside its raster resolution, an image on the Web has an abstract size, defined in CSS pixels. The browser squeezes or stretches the image based on its CSS height or width during the rendering process.

When a raster image is displayed at full size on a standard-density display, 1 bitmap pixel corresponds to 1 device pixel, resulting in a full-fidelity representation. Because a bitmap pixel can’t be further divided, it gets multiplied by four on Retina displays to preserve the same physical size of the image, losing detail along the way.

Each bitmap pixel gets multiplied by four to fill the same physical surface on a Retina display.

The Tool Chest

Even though we are still in the early stages of this major shift, several approaches to optimizing Web graphics for Retina displays have sprung up, and more are popping up as we speak. Each method makes some degree of compromise between performance, ease of implementation and cross-browser support. As such, choosing a tool should be done case by case, taking into account both quantitative and qualitative factors.

HTML And CSS Sizing

The most straightforward way to serve Retina-ready Web graphics is to halve the size of your raster assets using CSS or HTML, either manually or programatically. For instance, to serve a 200 × 300-pixel image (remember, those are CSS pixels), you would upload an image with a bitmap resolution of 400 × 600 pixels to your server, then shrink it by exactly 50% using CSS properties or HTML attributes. On a standard-resolution display, the result would be an image rendered with four times fewer pixels than its full bitmap size — a process commonly referred to as downsampling.

A CSS-sized image gets its dimensions halved during the rendering process.

Because the same image would use four times as many physical pixels on a Retina screen, every physical pixel ends up matching exactly 1 bitmap pixel, allowing the image to render at full fidelity once again.

CSS-sized images regain their full-detail glory on Retina displays.

There are several ways to achieve this:

Using HTML

The easiest way to apply CSS sizing would be by using the width and height attributes of the img tag:

<img src="example@2x.png" width="200" height="300" />

Please note that, even though specifying height is optional, it allows the browser to reserve the space required for the image before loading it. This prevents the page layout from changing as the image loads.

What to use it for? Single-page websites with few content images.

Using Javascript

The same result can also be obtained using Javascript by targeting all Retina-ready content images in the document and halving their sizes. With the help of jQuery, this would look like this:

$(window).load(function() {
  var images = $('img');
    images.each(function(i) {
      $(this).width($(this).width() / 2);
    });
});

What to use it for? Websites with few content images.

Using CSS (SCSS)

If you want to keep all of the presentation code in your CSS files, then the most common technique involves setting the image as the background of another HTML element, usually a div, then specifying its background-size property. You could either set explicit width and height values for the background image or use the contain value if the dimensions of the HTML element are already specified. It is worth noting that the background-size property is not supported in IE 7 or 8.

.image {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  /* Alternatively background-size: contain; */
  height: 300px;
  width: 200px;
}

You could also target a :before or :after pseudo-element instead:

.image-container:before {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  content:'';
  display: block;
  height: 300px;
  width: 200px;
}

This technique works just as well with CSS sprites, as long as the background-position is specified relatively to the CSS size (200 × 300 pixels in this case):

.icon {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  height: 25px;
  width: 25px;

  &.trash {
    background-position: 25px 0;
  }

  &.edit {
    background-position: 25px 25px;
  }
}

When using image sprites, consider any OS-specific limitations.

What to use it for? Websites that make limited use of the background-image property, such as those that rely on a single-image sprite.

HTML and CSS Sizing: Pros

• Easy to implement
• Cross-browser compatible

HTML and CSS Sizing: Cons

• Non-Retina devices have to download larger assets.
• Downsampled images might lose some of their sharpness on standard-density screens, depending on the algorithm used.
• The background-size property is not supported in IE 7 or 8.

Querying Pixel Density

Perhaps the most popular way to serve Retina-ready graphics on the Web is by querying the device for its pixel density and then serving assets accordingly. This can be done using either CSS or JavaScript.

Using CSS Media Queries

As of this writing, almost every major browser vendor has implemented a prefixed variant of device-pixel-ratio and its two siblings, min-device-pixel-ratio and max-device-pixel-ratio. These media queries can be used in conjunction with the background-image property to serve Retina-ready assets to high-density devices:

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

By using a ratio of 1.5 instead of 2, you can target other non-Apple devices with the same query.

What to use it for? Any website or app that uses the background-image property for graphic assets. Not suitable for content images.

CSS Querying: Pros

• Devices download only those assets that target them.
• Cross-browser compatible
• Pixel-precise control

CSS Querying: Cons

• Tedious to implement, especially on large websites.
• Displaying content images as backgrounds of other HTML elements is semantically incorrect.

Using Javascript

The pixel density of the screen can be queried in Javascript using window.devicePixelRatio, which reports the same value as its CSS counterpart. Once a higher-density screen is identified, you can replace every inline image with its Retina counterpart:

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Retina.js is a Javascript plugin that implements roughly the same technique as described above, with some additional features, such as skipping external images and skipping internal images with no @2x counterparts.

Lastly, it is worth noting that devicePixelRatio is not entirely cross-browser compatible.

What to use it for? Any website with content images, such as landing pages and blogs.

Javascript Querying: Pros

• Easy to implement
• Non-Retina devices do not download large assets.
• Pixel-precise control

Javascript Querying: Cons

• Retina devices have to download both standard- and high-resolution images.
• The image-swapping effect is visible on Retina devices.
• Does not work on some popular browsers (such as IE and Firefox).

Scalable Vector Graphics

Regardless of the method used, raster images remain inherently constrained by their bitmap resolution; they were never meant to be infinitely scalable. This is where vector graphics have the advantage, being a future-proof way to “Retinize� your Web graphics.

As of this writing, the vector XML-based SVG format has cross-browser support of more than 70% and can be used in several ways on the Web. SVG images can be easily created in and exported from a number of vector-graphic editors, such as Adobe Illustrator and free alternatives such as Inkscape.

As far as Web design goes, the most straightforward way to use SVG assets is with the HTML img tag or with the CSS background-image and content:url() properties.

<img src="example.svg" width="200" height="300" />

In the example above, a single SVG image can be used as a universal asset, scaling infinitely up or down as required. This not only saves precious bandwidth (most SVG files tend to be smaller in size than standard-resolution PNGs), but also makes your graphic assets much easier to maintain. The same would apply if used in CSS:

/* Using background-image */

.image {
  background-image: url(example.svg);
  background-size: 200px 300px;
  height: 200px;
  width: 300px;
}

/* Using content:url() */

.image-container:before {
  content: url(example.svg);
  /* width and height do not work with content:url() */
}

If you have to support IE 7 or 8 or Android 2.x, then you will need a fallback solution that swaps SVG images with their PNG counterparts. This can be easily done with Modernizr:

.image {
  background-image: url(example.png);
  background-size: 200px 300px;
}

.svg {
  .image {
    background-image: url(example.svg);
  }
}

For best cross-browser results and to avoid some rasterization headaches in Firefox and Opera, make each SVG image at least the size of its parent HTML element.

In HTML, you can implement a similar fallback solution by adding a custom data attribute to your img tag:

<img src="example.svg" data-png-fallback="example.png" />

Then, handle the rest with jQuery and Modernizr:

$(document).ready(function(){
  if(!Modernizr.svg) {
    var images = $('img[data-png-fallback]');
    images.each(function(i) {
      $(this).attr('src', $(this).data('png-fallback'));
    });
  }
});

This HTML and JavaScript route, however, would not prevent browsers with no SVG support from downloading the SVG assets.

What to use it for? Any website or app. Suitable for icons, logos and simple vector illustrations.

SVG: Pros

• One universal asset for all devices
• Easy to maintain
• Future-proof: infinitely scalable vector graphics

SVG: Cons

• No pixel precision due to anti-aliasing
• Unsuitable for complex graphics due to large file sizes
• No native support in IE 7 and 8 or early Android versions

Icon Fonts

Popularized by Twitter’s Bootstrap, the technique of using @font-face with icon-based fonts has garnered a following of its own as a resolution-independent alternative to bitmap icons. The technique consists of using a custom Web font that replaces the alphabet with monochrome glyphs, which can be styled using CSS, just like any other text on the website.

There is no shortage of comprehensive, good-quality icon fonts that would cover most of your needs. That being said, importing a large font in half a dozen formats only to use a small subset of the icons is a bad idea. Consider building your own custom font with free tools such as Fontello, Font Builder or even Inkscape.

The most common way to use icon fonts on websites is by assigning an .icon or .glyph class to a particular HTML element — most often a <span> or an <i> — and then using the letter corresponding to the desired icon as its content:

<span class="icon">a</span>

After having imported your custom font using @font-face, you would declare it:

.icon {
  font-family: 'My Icon Font';
}

Another technique consists of using the :before pseudo-element and the content property, with a unique class for each icon:

<span class="glyph-heart"></span>

[class^="glyph-"]:before {
  font-family: 'My Icon Font';
}

.glyph-heart:before {
  content: 'h';
}

What to use it for? Websites or apps with a high number of icons, and for rapid prototyping.

Icon Fonts: Pros

• Future-proof: infinitely scalable glyphs
• Cross-browser compatible
• More flexible than graphic assets: can be used in placeholder text and other form elements, etc.

Icon Fonts: Cons

• No pixel precision due to subpixel anti-aliasing
• Hard to maintain: changing a single icon requires regenerating the whole font.
• Relies on semantically incorrect markup (unless used with :before or :after pseudo-elements).

Favicons

Favicons are getting their fair share of attention, being increasingly used outside of browser chrome as an iconic representation of our websites and apps. To make your favicons Retina-ready, export an .ico file in both 16- and 32-pixel versions. If you are using a Mac, you can create your own .ico files with Apple’s Icon Composer (included in the Graphic Tools in Xcode) or with Icon Slate, a paid third-party application.

A Glimpse Of The Future

Besides the techniques covered above, several other efforts are being made independently by organizations and individuals alike, not the least of which is Apple’s own -Webkit-image-set, introduced last spring. This proposal allows for multiple variants of the same image to be provided in one CSS declaration:

.image {
  background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x);
  background-size: 200px 300px;
}

This technique does not, however, cover images inside img tags, and it is Webkit-only as of this writing.

Another notable effort is Scott Jehl’s Picturefill, an HTML and Javascript solution that makes heavy use of data attributes and media queries to serve different images in different media contexts.

<div data-picture>
     <div data-src="example.png"></div>
     <div data-src="example@2x.png" data-media="(min-device-pixel-ratio: 1.5)"></div>

  <!-- Fallback content for non-JS browsers -->
  <noscript>
    <img src="example.png" >
  </noscript>
</div>

Even if the markup puts you off, it is a good cross-browser solution to consider if you are dealing with few content images.

Last but not least, the ambitious picture element proposal aims to bring responsive images to the Web using a markup-only approach for multiple image sources, coupled with media queries that route each device to the right asset.

Closing Words

Like other major shifts the Web is currently undergoing, attaining resolution independence will be a long journey. As Web designers and developers, either we can sit down and wait passively for a convention to be standardized, or we can immediately start offering a pleasurable viewing experience to our users. Let’s get to work.

(al)

© Reda Lemeden for Smashing Magazine, 2012.

Whenever people ask me about the most powerful things in JavaScript and the DOM, I quickly arrive at events. The reason is that events in browsers are incredibly useful. Furthermore, decoupling functionality from events is a powerful idea, which is why Node.js became such a hot topic.

Today, let’s get back to the basics of events and get you in the mood to start playing with them, beyond applying click handlers to everything or breaking the Web with <a href="javascript:void(0)"> links or messing up our HTML with onclick="foo()" inline handlers (I explained in detail in 2005 why these are bad ideas).

Note: This article uses plain JavaScript and not any libraries. A lot of what we’ll talk about here is easier to achieve in jQuery, YUI or Dojo, but understanding the basics is important because you will find yourself in situations where you cannot use a library but should still be able to deliver an amazing solution.

Disclaimer: The event syntax we’ll be using here is addEventListener(), as defined in the “DOM Level 3 Eventsâ€� specification, which works in all browsers in use now except for Internet Explorer below version 9. A lot of the things we’ll show can be achieved with jQuery, though, which also supports legacy browsers. Come to think of it, one simple addEventListener() on DOMContentLoaded is a great way to make sure your script does not run on legacy browsers. This is a good thing. If we want the Web to evolve, we need to stop giving complex and demanding code to old browsers. If you build your solutions the right way, then IE 6 would not need any JavaScript to display a workable, albeit simpler, solution. Think of your product as an escalator: if your JavaScript does not execute, the website should still be usable as stairs.

Before we get into the details of events and how to use them, check out a few demos that use scroll events in a clever way to achieve pretty sweet results:

• In its search for a designer, Wealthfront Engineering uses scrolling and shifting content along the Z axis. This was a big part of the Beercamp 2011 website. Wealthfront blogged in detail about how it achieved this.
• Stroll.js takes a slightly similar approach, showing how lovely transitions can be when the user scrolls a list.
• jQuery Scroll Path is a plugin to move content along a path when the user scrolls the page.

All of this is based on event handling and reading out what the browser gives us. Now, let’s look at repeating the basics of that.

Basics: What Is An Event?

var log = document.getElementById('log'),
    i = null, 
    out = [];
for (var i in window) {
  if ( /^on/.test(i)) { out[out.length] = i; }
}
log.innerHTML = out.join(', ');

In my case, running Firefox, I get this:

onmouseenter, onmouseleave, onafterprint, onbeforeprint, onbeforeunload, onhashchange, onmessage, onoffline, ononline, onpopstate, onpagehide, onpageshow, onresize, onunload, ondevicemotion, ondeviceorientation, onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmozfullscreenchange, onmozfullscreenerror, onpause, onplay, onplaying, onprogress, onratechange, onreset, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting, oncopy, oncut, onpaste, onbeforescriptexecute, onafterscriptexecute

That is a lot to play with, and the way to do that is by using addEventListener():

element.addEventListener(event, handler, useCapture);

For example:

var a = document.querySelector('a'); // grab the first link in the document
a.addEventListener('click', ajaxloader, false);

The element is the element that we apply the handler to; as in, “Hey you, link! Make sure you tell me when something happens to you.â€� The ajaxloader() function is the event listener; as in, “Hey you! Just stand there and keep your ears and eyes peeled in case something happens to the link.â€� Setting the useCapture to false means that we are content to capture the event on bubbling, rather than the capturing phase. This is a long and arduous topic, well explained on Dev.Opera. Let’s just say that by setting the useCapture to false, you will be fine in 99.7434% of cases (a rough approximation). The parameter is actually optional in all browsers but Opera.

Now, the event handler function gets an object as a parameter from the event, which is full of awesome properties that we can play with. If you try out my example, you’ll see what the following code does:

var log = document.getElementById('log'),
    i = 0,
    out = '';
    
document.addEventListener('click', logeventinfo, false);
document.addEventListener('keypress', logeventinfo, false);

function logeventinfo (ev) {
  log.innerHTML = '';
  out = '<ul>';
  for (var i in ev) {
    if (typeof ev[i] === 'function' || i === i.toUpperCase()) {
      continue;
    }
    out += '<li><span>'+i+'</span>: '+ev[i]+'</li>';
  }
  log.innerHTML += out + '</ul>';
}

You can assign several event handlers to the same event, or the same handler to various events (as shown in this demo).

The ev is what we get back from the event. And (again, in my case, in Firefox) a lot of interesting things are in it:

originalTarget: [object HTMLHtmlElement]
type: click
target: [object HTMLHtmlElement]
currentTarget: [object HTMLDocument]
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 574553210
defaultPrevented: false
which: 1
rangeParent: [object Text]
rangeOffset: 23
pageX: 182
pageY: 111
isChar: false
screenX: 1016
screenY: 572
clientX: 182
clientY: 111
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
relatedTarget: null
mozPressure: 0
mozInputSource: 1
view: [object Window]
detail: 1
layerX: 182
layerY: 111
cancelBubble: false
explicitOriginalTarget: [object HTMLHtmlElement]
isTrusted: true
originalTarget: [object HTMLHeadingElement]
type: click
target: [object HTMLHeadingElement]
currentTarget: [object HTMLDocument]
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 574554192
defaultPrevented: false
which: 1
rangeParent: [object Text]
rangeOffset: 0
pageX: 1
pageY: 18
isChar: false
screenX: 835
screenY: 479
clientX: 1
clientY: 18
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
relatedTarget: null
mozPressure: 0
mozInputSource: 1
view: [object Window]
detail: 1
layerX: 1
layerY: 18
cancelBubble: false
explicitOriginalTarget: [object Text]
isTrusted: true

It also differs from event to event. Try clicking the demo and pressing keys, and you will see that you get different results. You can also refer to the full list of standard event properties.

The Last Of The Basics: Preventing Execution And Getting The Target

Two more things are important when it comes to events in the browser: we have to stop the browser from carrying out its default action for the event, and we have to find out which element the event fired on. The former is achieved with the ev.preventDefault() method, and the latter is stored in ev.target.

Say you want to know that a link has been clicked, but you don’t want the browser to follow it because you have a great idea of what to do with that event instead. You can do this by subscribing to the click event of the link, and you can stop the browser from following it by calling preventDefault(). Here is the HTML:

<a class="prevent" href="http://smashingmagazine.com">Smashing, my dear!</a>
<a class="normal" href="http://smashingmagazine.com">Smashing, my dear!</a>

And the JavaScript:

var normal = document.querySelector('.normal'),
    prevent = document.querySelector('.prevent');

prevent.addEventListener('click', function(ev) {
  alert('fabulous, really!');
  ev.preventDefault();
}, false);

normal.addEventListener('click', function(ev) {
  alert('fabulous, really!');
}, false);

Note: document.querySelector() is the standard way to get an element in the DOM. It is what the $() method in jQuery does. You can read the W3C’s specification for it and get some explanatory code snippets on the Mozilla Developer Network (MDN).

If you now click the link, you will get an alert. And when you hit the “OKâ€� button, nothing more happens; the browser does not go to http://smashingmagazine.com. Without the preventDefault(), the browser will show the alert and follow the link. Try it out.

The normal way to access the element that was clicked or hovered over or that had a key pressed is to use the this keyword in the handler. This is short and sweet, but it’s actually limiting because addEventListener() gives us something better: the event target. It could also be confusing because this might already be bound to something else, so using ev.currentTarget as noted in the specification is a safer bet.

Event Delegation: It Rocks. Use It!

Using the target property of the event object, you can find out which element the event occurred on.

Events happen by going down the whole document tree to the element that you interacted with and back up to the main window. This means that if you add an event handler to an element, you will get all of the child elements for free. All you need to do is test the event target and respond accordingly. See my example of a list:

<ul id="resources">
  <li><a href="http://developer.mozilla.org">MDN</a></li>
  <li><a href="http://html5doctor.com">HTML5 Doctor</a></li>
  <li><a href="http://html5rocks.com">HTML5 Rocks</a></li>
  <li><a href="http://beta.theexpressiveweb.com/">Expressive Web</a></li>
  <li><a href="http://creativeJS.com/">CreativeJS</a></li>
</ul>

Hover your mouse over the list in this example and you will see that one event handler is enough to get the links, the list item and the list itself. All you need to do is compare the tagName of the event target to what you want to have.

var resources = document.querySelector('#resources'),
    log = document.querySelector('#log');

resources.addEventListener('mouseover', showtarget, false);

function showtarget(ev) {
  var target = ev.target;
  if (target.tagName === 'A') {
    log.innerHTML = 'A link, with the href:' + target.href;
  }
  if (target.tagName === 'LI') {
    log.innerHTML = 'A list item';
  }
  if (target.tagName === 'UL') {
    log.innerHTML = 'The list itself';
  }
}

This means you can save a lot of event handlers — each of which is expensive to the browser. Instead of applying an event handler to each link and responding that way — as most people would do in jQuery with $('a').click(...) (although jQuery’s on is OK) — you can assign a single event handler to the list itself and check which element was just clicked.

The main benefit of this is that you are independent of the HTML. If you add more links at a later stage, there is no need to assign new handlers; the event handler will know automatically that there is a new link to do things with.

Events For Detection, CSS Transitions For Smoothness

If you remember the list of properties earlier in this article, there is a lot of things we can use. In the past, we used events for simple hover effects, which now have been replaced with effects using the :hover and :focus CSS selectors. Some things, however, cannot be done with CSS yet; for example, finding the mouse’s position. With an event listener, this is pretty simple. First, we define an element to position, like a ball. The HTML:

<div class="plot"></div>

And the CSS:

.plot {
  position:absolute;
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  top:0;
  left:0;
}

We then assign a click handler to the document and position the ball at PageX and pageY. Notice that we need to subtract half the width of the ball in order to center it on the mouse pointer:

var plot = document.querySelector('.plot'),
    offset = plot.offsetWidth / 2;
document.addEventListener('click', function(ev) {
  plot.style.left = (ev.pageX - offset) + 'px';
  plot.style.top = (ev.pageY - offset) + 'px';
}, false);

Clicking anywhere on the screen will now move the ball there. However, it’s not smooth. If you enable the checkbox in the demo, you will see that the ball moves smoothly. We could animate this with a library, but browsers can do better these days. All we need to do is add a transition to the CSS, and then the browser will move the ball smoothly from one position to another. To achieve this, we define a new class named smooth and apply it to the plot when the checkbox in the document is clicked. The CSS:

.smooth {
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

The JavaScript:

var cb = document.querySelector('input[type=checkbox]');
cb.addEventListener('click', function(ev) {
  plot.classList.toggle('smooth');
}, false);

The interplay between CSS and JavaScript events has always been powerful, but it got even better in newer browsers. As you might have guessed, CSS transitions and animations have their own events.

How Long Was A Key Pressed?

As you might have seen in the list of available events earlier, browsers also give us a chance to respond to keyboard entry and tell us when the user has pressed a key. Sadly, though, key handling in a browser is hard to do properly, as Jan Wolter explains in detail. However, as a simple example, let’s look how we can measure in milliseconds how long a user has pressed a button. See this keytime demo for an example. Press a key, and you will see the output field grow while the key is down. Once you release the key, you’ll see the number of milliseconds that you pressed it. The code is not hard at all:

var resources = document.querySelector('#resources'),
    log = document.querySelector('#log'),
    time = 0;

document.addEventListener('keydown', keydown, false);
document.addEventListener('keyup', keyup, false);

function keydown(ev) {
  if (time === 0) { 
    time = ev.timeStamp; 
    log.classList.add('animate');
  }
}
function keyup(ev) {
  if (time !== 0) {
    log.innerHTML = ev.timeStamp - time;
    time = 0;
    log.classList.remove('animate');
  }
}

We define the elements we want and set the time to 0. We then apply two event handlers to the document, one on keydown and one on keyup.

In the keydown handler, we check whether time is 0, and if it is, we set time to the timeStamp of the event. We assign a CSS class to the output element, which starts a CSS animation (see the CSS for how that is done).

The keyup handler checks whether time is still 0 (as keydown gets fired continuously while the key is pressed), and it calculates the difference in the time stamps if it isn’t. We set time back to 0 and remove the class to stop the animation.

Working With CSS Transitions (And Animations)

CSS transitions fire a single event that you can listen for in JavaScript called transitionend. The event object then has two properties: propertyName, which contains the property that was transitioned, and elapsedTime, which tells you how long it took.

Check out the demo to see it in action. The code is simple enough. Here is the CSS:

.plot {
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

.plot:hover {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background: blue;
}

And the JavaScript:

plot.addEventListener('transitionend', function(ev) {
  log.innerHTML += ev.propertyName + ':' + ev.elapsedTime + 's ';
}, false);

This, however, works only in Firefox right now because Chrome, Safari and Opera have vendor-prefixed events instead. As David Calhoun’s gist shows, you need to detect what the browser supports and define the event’s name that way.

CSS animation events work the same way, but you have three events instead of one: animationstart, animationend and animationiteration. MDN has a demo of it.

Speed, Distance And Angle

Detecting events happening is one thing. If you want to do something with them that is a beautiful and engaging, then you need to go further and put some math into it. So, let’s have a go at using a few mouse handlers to calculate the angle, distance and speed of movement when a user drags an element across the screen. Check out the demo first.

var plot = document.querySelector('.plot'),
    log = document.querySelector('output'),
    offset = plot.offsetWidth / 2,
    pressed = false,
    start = 0, x = 0, y = 0, end = 0, ex = 0, ey = 0, mx = 0, my = 0, 
    duration = 0, dist = 0, angle = 0;

document.addEventListener('mousedown', onmousedown, false);
document.addEventListener('mouseup', onmouseup, false);
document.addEventListener('mousemove', onmousemove, false);

function onmousedown(ev) {
  if (start === 0 && x === 0 && y === 0) {
    start = ev.timeStamp;
    x = ev.clientX;
    y = ev.clientY;
    moveplot(x, y);
    pressed = true;
  }
}
function onmouseup(ev) {
  end = ev.timeStamp;
  duration = end - start;
  ex = ev.clientX;
  ey = ev.clientY;
  mx = ex - x;
  my = ey - y;
  dist = Math.sqrt(mx * mx + my * my);
  start = x = y = 0;
  pressed = false;
  angle = Math.atan2( my, mx ) * 180 / Math.PI;
  log.innerHTML = '<strong>' + (dist>>0) +'</strong> pixels in <strong>'+
                  duration +'</strong> ms ( <strong>' +
                  twofloat(dist/duration) +'</strong> pixels/ms)'+
                  ' at <strong>' + twofloat(angle) +
                  '</strong> degrees';
}
function onmousemove (ev) {
  if (pressed) {
    moveplot(ev.pageX, ev.pageY);
  }
}
function twofloat(val) {
  return Math.round((val*100))/100;
}
function moveplot(x, y) {
  plot.style.left = (x - offset) + 'px';
  plot.style.top = (y - offset) + 'px';
}

OK, I admit: quite a lot is going on here. But it is not as hard as it looks. For both onmousedown and onmouseup, we read the mouse’s position with clientX and clientY and the timeStamp of the event. Mouse events have time stamps that tell you when they happened. When the mouse moves, all we check is whether the mouse button has been pressed (via a boolean set in the mousedown handler) and move the plot with the mouse.

The rest is geometry — good old Pythagoras, to be precise. We get the speed of the movement by checking the number of pixels traveled in the time difference between mousedown and mouseup.

We get the number of pixels traveled as the square root of the sum of the squares of the difference between x and y at the start and end of the movement. And we get the angle by calculating the arctangent of the triangle. All of this is covered in “A Quick Look Into the Math of Animations With JavaScript�; or you can play with the following JSFiddle example:

Media Events

Both video and audio fire a lot of events that we can tap into. The most interesting are the time events that tell you how long a song or movie has been playing. A nice little demo to look at is the MGM-inspired dinosaur animation on MDN; I recorded a six-minute screencast explaining how it is done.

If you want to see a demo of all the events in action, the JPlayer team has a great demo page showing media events.

Input Options

Traditionally, browsers gave us mouse and keyboard interaction. Nowadays, this is not enough because we use hardware that offers more to us. Device orientation, for example, allows you to respond to the tilting of a phone or tablet; touch events are a big thing on mobiles and tablets; the Gamepad API allows us to read out game controllers in browsers; postMessage allows us to send messages across domains and browser windows; pageVisibility allows us to react to users switching to another tab. We can even detect when the history object of the window has been manipulated. Check the list of events in the window object to find some more gems that might not be quite ready but should be available soon for us to dig into.

Whatever comes next in browser support, you can be sure that events will be fired and that you will be able to listen to them. The method works and actually rocks.

Go Out And Play

And that is it. Events are not hard; in most cases, you just need to subscribe to them and check what comes back as the event object to see what you can do with it. Of course, a lot of browser hacking is still needed at times, but I for one find incredible the number of ways we can interact with our users and see what they are doing. If you want to get really creative with this, stop thinking about the use cases we have now and get down into the nitty gritty of what distances, angles, speed and input can mean to an interface. If you think about it, playing Angry Birds to the largest degree means detecting the start and end of a touch event and detecting the power and direction that the bird should take off in. So, what is stopping you from creating something very interactive and cool?

Image source of picture on front page.

(al)

© Christian Heilmann for Smashing Magazine, 2012.

One of the advantages of working in a creative industry is the number of designers and developers who take their craft seriously. The design community shines in one regard in particular: the design community seems to be less willing to hoard knowledge and skills. Instead, we present them, elaborate on them and keep improving on each other’s techniques — among other media — magazines and books.

In this overview of useful magazines you’ll find everything from purely online publications to monthly, glossy print editions, where all subjects relevant to art and design are being investigated in colorful, eloquent detail.

Print And Digital Indie Publications

The Manual
Three beautiful A5 handcrafted hardback books-magazines a year, each one with a bit over 100 pages. The Manual delivers intelligent and critical thinking, and voices on the “Why?” of Web design, taking the reader to a deeper and richer level of work. Published by Andy McMillan, edited by Carolyn Wood, and designed by Jez Burrows, you can get it for 25$.

CODEX, The Journal of Typography
An infrequent 164 page magazine with feature articles, book and typeface reviews, interviews, type history, essays and type design — from typography experts. The first issue was released in spring of 2011, the second one is coming out in summer of 2012. The Codex magazine is only available in print and PDF version (8$).

Offscreen Mag: The People Behind Bits & Pixels
Offscreen is a high-quality print magazine created, edited, designed and published by Kai Brach, issued three to four times a year, and available online for 17,90$. With each issue built around six lengthy interviews, it explores the off-screen life and work of people who create websites and apps, and tells their stories of creativity, passion and hard work.

TYPO
A magazine dedicated to visual communication, graphic design and typography. It is aimed at both professionals and beginners in typography, font design, graphic design and education, as well as marketing and visual communication specialists. The magazine is published quarterly. All 34 issues between 2003 and 2008 are also available in PDF.

8Faces
“If you could only use eight typefaces for the rest of your life, which would you choose?” This is the core question of 8faces, which — amongst many others — is asked to leading designers from the fields of Web design, print design, illustration and type design. With each issue (printed on heavy stock and pressed at just 2000 limited editions), this is definitely a collector’s item, and only 19£. Designed and edited by Elliot Jay Stocks, 8faces is also available as a PDF.

Image credit: Typetoken.

Distance
A quarterly journal about design and technology. Each issue contains three well-researched essays with opinions from day-to-day practitioners who speak out on contentious issues. Distance comes in both digital and print formats (digital 5$, print 15$), the digital bundles contain ePub, Kindle, and PDF editions.

Image credit: Brent Knepper.

Process Journal
The Melbourne-based quarterly publication Process Journal exhibits designers and their work on 96 pages (at a format slightly larger than A4). These high-quality prints (25$) and their congruent iPad app are dedicated to the artistry of design.

Ferocious Quarterly
A printed publication (with a handy size of around A5) featuring illustrators, graphic artists, short fiction authors and written text. Ferocious Quarterly calls itself an ongoing exercise in curation and collaboration, and has been released yearly since its first edition in 2010 (12$).

Ammo Magazine
The independent, UK-based Ammo Magazine is dedicated to illustrations and their creators. This cute little A6 Landscape publication (with thick 160 g pages) displays it feature illustrations in full color on 64 pages and for the cute price of 5£. Best of all, the editors refuse to let editions go out of print. Find it in their shop, in print format only.

IN GRAPHICS
In Graphics is a printed magazine from Berlin that features only infographics. It’s released twice a year, and bilingually in German and English and available on Amazon for 14,90€. Its 96 pages cover challenging topics from politics and economics to architecture, TV shows, culture, entertainment and the environment — very interesting and fascinating content for visual people who have a love for details.

Plog
An autonomous publication designed and cared for by students and dedicated to showcasing student and graduate artwork (both on and offline). Plog is issued four times a year, in print, and with a limited run of 1000 issues. It can be ordered online (or purchased in many leading stores and universities around the UK) for 3£.

Image credit: Booooooom.com.

Collect
This Australian Adelaide-based magazine talks about design, culture and lifestyle around the world — all in a small-world context. Collect is about people, “neighborhoods” and a revival of quality print media. This 64 pages print-only publication comes out every two months for 5$.

IdN Magazine
A publication for creative people which wants to be exactly what its initials declare: an International designers’ Network. The magazine features creative designs, works, projects and events from around the globe. Each issue is sold world-wide (17,50$), published bimonthly, available in English and Chinese, and connected with feeds such as iTunes Podcasts and Video. Each issue comes with a DVD, which presents a theme-based, visual compilation of IdN magazine.

Hacker Monthly
The print magazine version of Hacker News features the top-voted articles from it’s mother-website, ranging from coffee guides to design and coding philosophy — anything goes. Available in glossy print (9$) and various digital formats (3$) (PDF, MOBI, EPUB) this magazine is often gorgeously illustrated, curated by Lim Cheng Soon.

Colors
A fair-minded magazine that celebrates cultural diversity and deals with current social issues through an abundance of photography and unambiguous text. With its single-subject publications, Colors explores each theme with creative virtuosity on non-glossy, recycled pages. The monthly publication is available in print in most book stores or via an iPad app.

Online Publications

Think Quarterly
Google’s Think Quarterly looks like an online magazine (but Google calls it a book on its website). The articles are in-depth insights and outlooks on the digital future from visionaries, heads of industry, innovators and experts. It’s issued about three times per year, and with a very good look: clean lines and minimalism mixed with colorful art and images.

Dmig
This online-only publication presents the works of Germany’s best designers and firms. Even though it requires fluency in the German language, the content of this magazine is varied with serious journalism, and is well worth browsing if you can read the language. The content ranges from design industry facts and news to interviews — of which there are many — focused around one main theme in every issue.

Appliness
Appliness is a digital magazine edited by passionate developers for passionate developers. Available on iPad and Android tablets, and funded by Adobe.

TGD
The Great Discontent is a journal for artists, by artists, and about artists. This online publication concentrates on interviews focusing on subjects that are close to the community’s heart — creativity, risk and connections. This illustrated journal churns out a new interview every Tuesday.

Method & Craft
This small magazine focuses on the “making-ofsâ€� within the design industry. Their contributions take on an educational aspect when they discuss the techniques or motivations behind design pieces in different formats — articles, interviews, videos and notes. Available only on the website, this journal continuously publishes new and interesting content.

Contents
Contents is an online magazine about content strategy, online publishing and new-school editorial work. It’s aimed at everyone who creates, edits, publishes, analyzes or cares for internet content. The issues run six to eight weeks, and each one has a set of annotations that links to thematically related work.

.net magazine
.net magazine is one of the most respected online magazines for Web designers and developers. The articles feature general news in the industry, tutorials, interviews as well as practical tips and techniques for everybody who is designing or building websites. A (beautifully designed) print edition of the magazine is available as well.

GOOD Magazine
GOOD is a very well-done online magazine, a collaboration of individuals, businesses, and non-profits who — besides doing many other great things — have made this magazine “for people who give a damn”, and care about what is sustainable, prosperous, productive and creative.

TXP Magazine
TXP Magazine is the mouthpiece and discussion center to the world the good ol’ Textpattern project. With two issues already published and one issue every two to three month planed, this publication aims at providing the best publishing system conceived, discusses topics with the community and features expert in the field. However, TXP also features topics that aren’t directly related to Textpattern, so even if you aren’t using the CMS, you might want to check the magazine as well.

Form And Future
This magazine’s tag line says it all; “A Journal for New Designers”. This small online publication specializes on featuring interviews with accomplished designer. Their goal is to allay fears of beginners and help them stay the course. This very young publication releases several interviews per month.

Further Resources

Magpile
Magpile is a Web community for magazine lovers. In it you can browse through your friends’ lists of publications, show off your own stockpile of magazines and put together a wish list of issues you’ve been craving to read. With it’s growing wiki-like database of publications. Magpile represents one of the most comprehensive archives of Magazine titles.

No Layout
No Layout is a no-frills digital library for independent art and fashion publishers. Freely accessible from any platform, all featured magazines are all only readable online. It is meant as a promotional and archive tool for any topic-related media.

Mag Is In
This dynamic Italian project is an archive as well as a prophet of contemporary independent magazines. They are dedicated to spreading consciousness about the excellence of current magazines. The creators are planing to complement their online presence with an exhibition to introduce indie magazines to non-expert audiences.

Counter-Print
Counter-Print is committed to promoting art and design related products. While this is not a free website, they sell all sorts of educational materials that a designer might need. From posters to vintage books, their large selection caters to designers’ specialized requirements. All of their materials are in print formats.

What Publications Do You Read?

What print and online publications would you recommend and why? An important magazine is missing? Share your tips and pointers with the community by leaving the comments below!

(fi) (jc) (ea) (vf)

© Smashing Editorial for Smashing Magazine, 2012.

Contracts are a source of anxiety and dismay in creative work, but they exist for a good reason. A good contract ensures that you and your client have the same expectations, and protects you in case things go south. Ideally, your contract should be a combination of industry standards, legal protection and personal preferences. To help you get started, here’s a set of 10 basic agreements for a variety of common business situations that creative professionals face.

How much do you expect to be paid in advance? What happens if a payment is late? Who will own the rights to the work, and when? Contracts can seem overwhelming, but don’t need to be. Reading through these documents is an opportunity to learn from experienced designers in a collaborative setting. Furthermore, every document comes with usage statistics and can be legally signed online for free (at least if you are in the United States). All content on Docracy, the free repository of legal documents, is open source and free to take (or even improve), so please feel free to share your own examples and experience.

Image credits: Joybot.

Here’s the full set that you can customize online:

1. AIGA Standard for Professional Design Services
   Drafted by the premier design association in the US, this is probably the most complete designer-friendly agreement out there (works best for big projects). Multiple versions available, with different licensing options.
2. Contract for Website Development & Identity Work, with Annotations
   A modern Designer-Client Agreement, drafted by a New York lawyer. It’s loosely based off the AIGA form, but closes some loopholes and trims the fat. Informative annotations are provided to guide you through the various clauses.
3. AIGA/GAG Speider’s Designer Contract
   The contract that the designer/writer Speider Schneider sends to his clients, as featured on Smashing Magazine. It’s a hybrid of the AIGA and GAG (Graphic Artists Guild) models, along with some common sense changes. Plus it’s optimized for e-signing to help save some trees.
4. Contract for Web Design
   A plain language agreement for Web design development projects, based heavily on the Andy Clarke’s brilliant “Contract Killer” article on 24 Ways. The beauty of this document is in the language: this is a non-legalese, plain English, straightforward pact that two reasonable people sign.
5. Shortform Design Contract
   Jacob Myers, the author of this sample, is a lawyer/developer who works closely with designers. In his words: “The next time a client comes to you with a quick job, save yourself time and aggravation by sending them a Short Design Contract to be signed BEFORE you start working. The doc is basically an abbreviated contract confirming the scope of the job, the schedule, fees to be paid and essential terms and conditions. Use this style of contract for quick jobs or where a full-blown contract would make the client apprehensive.�
6. Work for Hire
   A short and flexible work-for-hire agreement, where the contractor is an artist being hired by a creative firm for a work of design. Remember that with this kind of contract the IP rights are automatically assigned to the commissioning client.
7. Consulting Agreement
   If you’re hiring a consultant, this is a great starting point: a model agreement by a top US law firm. If you are the consultant, you might want to mitigate some of the provisions of this client-friendly document, like this version (see changes).
8. Shortform NDA
   The contract that everybody signs, sooner or later: The Non-Disclosure Agreement. This is a unilateral example, so if both parties are disclosing confidential information to each other, make sure you use a Mutual NDA instead.
9. Contract for Original Illustration Work
   A simple, commissioned illustration agreement drafted by a lawyer based in Portland. This contract is pro-artist, and a flat, non-refundable commission fee is charged. All rights are non-exclusively licensed, but because most people want a “unique� piece of art, the artist agrees not to resell or publish the work, except for portfolio use (such as posting on DeviantArt, Dribbble, etc.).
10. Simple IP Assignment
    Work is done, money is in the bank, but you forgot to give the IP rights to the client? Fix the issue with this simple IP assignment. Also useful when you hired someone but forgot to have the rights assigned in the original contract. Get this signed to tie up any loose ends.

You can also download the full set in PDF/DOC, with one single file (.zip).

Don’t forget that the legal stuff is important, and so please treat these documents as a starting point. A good lawyer can help you review these examples and tailor them to your particular project and local laws. Standard documents are useful and educational, but are never a substitute for legal advice. Docracy, Smashing Magazine and the original authors of these documents disclaim any liability connected to the use of these material without a licensed attorney.

(vp) (jc)

© Veronica Picciafuoco for Smashing Magazine, 2012.