Blog

CSS: Innovative Techniques and Practical Solutions

POSTED IN Blog, Tutorials | Comments Off on CSS: Innovative Techniques and Practical Solutions

Advertisement in CSS: Innovative Techniques and Practical Solutions
 in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

Css-187 in CSS: Innovative Techniques and Practical Solutions

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

Triangle in CSS: Innovative Techniques and Practical Solutions

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

New-css-techniques-119 in CSS: Innovative Techniques and Practical Solutions

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

Art-deco in CSS: Innovative Techniques and Practical Solutions

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

Css-268 in CSS: Innovative Techniques and Practical Solutions

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

Css-150 in CSS: Innovative Techniques and Practical Solutions

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Css-146 in CSS: Innovative Techniques and Practical Solutions

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

New-css-techniques-102 in CSS: Innovative Techniques and Practical Solutions

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

New-css-techniques-108 in CSS: Innovative Techniques and Practical Solutions

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

New-css-techniques-197 in CSS: Innovative Techniques and Practical Solutions

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

New-css-techniques-103 in CSS: Innovative Techniques and Practical Solutions

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

3d-text in CSS: Innovative Techniques and Practical Solutions

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

Css-111 in CSS: Innovative Techniques and Practical Solutions

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

Css-272 in CSS: Innovative Techniques and Practical Solutions

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Background-image-hacks in CSS: Innovative Techniques and Practical Solutions

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

Css-190 in CSS: Innovative Techniques and Practical Solutions

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

New-css-techniques-157 in CSS: Innovative Techniques and Practical Solutions

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

New-css-techniques-223 in CSS: Innovative Techniques and Practical Solutions

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

Owl in CSS: Innovative Techniques and Practical Solutions

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Css-258 in CSS: Innovative Techniques and Practical Solutions

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

Css-260 in CSS: Innovative Techniques and Practical Solutions

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Galaxy in CSS: Innovative Techniques and Practical Solutions

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

Css-261 in CSS: Innovative Techniques and Practical Solutions

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

New-css-techniques-171 in CSS: Innovative Techniques and Practical Solutions

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Bicycle in CSS: Innovative Techniques and Practical Solutions

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Feature-boxes in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Curl in CSS: Innovative Techniques and Practical Solutions

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Fold in CSS: Innovative Techniques and Practical Solutions

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Smooth in CSS: Innovative Techniques and Practical Solutions

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

Web-services-030 in CSS: Innovative Techniques and Practical Solutions

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

New-css-techniques-174 in CSS: Innovative Techniques and Practical Solutions

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

New-css-techniques-168 in CSS: Innovative Techniques and Practical Solutions

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Css-200 in CSS: Innovative Techniques and Practical Solutions

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

New-css-techniques-121 in CSS: Innovative Techniques and Practical Solutions

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

New-css-techniques-123 in CSS: Innovative Techniques and Practical Solutions

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

New-css-techniques-198 in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Tag-name in CSS: Innovative Techniques and Practical Solutions

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

New-css-techniques-115 in CSS: Innovative Techniques and Practical Solutions

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

New-css-techniques-165 in CSS: Innovative Techniques and Practical Solutions

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Css-114 in CSS: Innovative Techniques and Practical Solutions

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

New-css-techniques-193 in CSS: Innovative Techniques and Practical Solutions

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Css-168 in CSS: Innovative Techniques and Practical Solutions

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Css-170 in CSS: Innovative Techniques and Practical Solutions

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

New-css-techniques-207 in CSS: Innovative Techniques and Practical Solutions

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements.

Center in CSS: Innovative Techniques and Practical Solutions

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Overflow in CSS: Innovative Techniques and Practical Solutions

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Layout in CSS: Innovative Techniques and Practical Solutions

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

New-css-techniques-186 in CSS: Innovative Techniques and Practical Solutions

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

New-css-techniques-204 in CSS: Innovative Techniques and Practical Solutions

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Inset in CSS: Innovative Techniques and Practical Solutions

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Deaxon in CSS: Innovative Techniques and Practical Solutions

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Circle in CSS: Innovative Techniques and Practical Solutions

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

New-css-techniques-199 in CSS: Innovative Techniques and Practical Solutions

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

New-css-techniques-175 in CSS: Innovative Techniques and Practical Solutions

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

Css-237 in CSS: Innovative Techniques and Practical Solutions


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

Useful Typography Tips For Adobe Illustrator

POSTED IN Blog, Tutorials | Comments Off on Useful Typography Tips For Adobe Illustrator

Advertisement in Useful Typography Tips For Adobe Illustrator
 in Useful Typography Tips For Adobe Illustrator  in Useful Typography Tips For Adobe Illustrator  in Useful Typography Tips For Adobe Illustrator

Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vector graphics, such as logos, and it is also often used for one-page documents, such as business cards, posters, or postcards.

Since we can easily transfer graphics from Illustrator to Photoshop and InDesign, designers often use Illustrator to create vector type that they can then incorporate into projects in another program. For instance, you can create a nice type design within Illustrator, then add some extra effects in Photoshop. Or you may need to design a text illustration within Illustrator to place within your brochure project in InDesign.

If you have never taken the time to explore the type side of Illustrator, you may be surprised at the powerful tools that Illustrator provides for working with type. Similar text features found in Photoshop and InDesign are also available in Illustrator — only Illustrator comes with its own unique set of typographical features as well. So for those of you who use another Adobe Suite program, you will easily catch on to Illustrator’s type idiosyncrasies.

No matter what your purpose for working with type in Illustrator is, as a designer, you will not only improve your work, but also save valuable time by knowing the different typographical tools available. Here, we will focus on some of the most important aspects of typography that every Illustrator user should know:

  1. Metric vs. Optical Kerning
  2. Roman Hanging Punctuation
  3. The Glyphs Panel
  4. Hyphens and Dashes
  5. Styles Panels
  6. Placing Type on a Path
  7. Point Type vs. Area Type
  8. Creating Columns of Text
  9. Text Flow Between Containers
  10. Scaling Area Type Numerically

1. Metric Vs. Optical Kerning

Kerning is an important aspect of design. It has to do with the adjustment of space between letters in order to improve the visual treatment of typography, and Illustrator provides the right kerning tools for designers. In more recent versions of Illustrator’s CS series, three automatic kerning options are available: “Auto” (also known as metric), “Optical” and “Metrics – Roman Only.” In addition, manual kerning is available. All have their place in design, but knowing which one to use when can be confusing without some basic knowledge.

Kerning in Useful Typography Tips For Adobe Illustrator

Auto, or metrics, kerning is built into type using kern pairs; for instance, all PostScript fonts have kern pairs built into them. Illustrator interprets this kerning code to determine how much space to put between certain letter combinations, such as “WA,” “LA,” “To” and “Ty.”

Optical kerning is also an automatic kerning option built into type but slightly different than the Auto option.  It uses the shapes of the letters to determine the space to put between characters. Optical kerning works well when combining letters of more than one font or when a font has little to no kerning built in. Use manual kerning where possible, since it provides the highest level of control. Most often, though, one would use manual kerning only in display copy, headlines, business cards and other short blocks of text.

The “Metrics – Roman Only” option, which was added into Illustrator in the CS4 version, is for Japanese typography. This option adds kerning only to Roman glyphs or any character that rotates in vertical text. Basically, it works with Latin characters, such as Basic Latin or Latin Extended, and the half-width Katakana. To switch to Optical kerning, first select the text you wish to change. Then, under the Characters palette (WindowTypeCharacter), click on the Kerning drop-down menu. Then select “Optical.”

02 Optical-kerning in Useful Typography Tips For Adobe Illustrator

Or, if you would like to manually kern letters yourself, place the cursor between two letters, and choose a value in the Character palette:

03 Manual-kerning in Useful Typography Tips For Adobe Illustrator

To turn off kerning between selected characters, set it to “0”:

04 Turn-kerning-off in Useful Typography Tips For Adobe Illustrator

Keep in mind that to adjust the value between entire groups of letters, you will have to use the tracking settings in the Character palette. The tracking is adjusted in the drop-down menu located to the right of the Kerning drop-down menu. Hover your mouse over the menu to see “Set the tracking for the selected characters,” as in the screenshot below:

05 Tracking in Useful Typography Tips For Adobe Illustrator

Illustrator’s default kerning is “Auto,” so simply select this if you would like to turn it back on.

06 Auto-kerning in Useful Typography Tips For Adobe Illustrator

Useful Tip: One excellent way to save yourself some time while designing is to use Illustrator’s keyboard shortcuts to change manual kerning and tracking settings. To change the kerning between two characters, simply place the cursor between the two letters. Then use Alt/Option + left/right arrow. The kerning will decrease with Alt/Option + left arrow and increase with Alt/Option + right arrow.

To change the tracking for an entire group of letters, first select the letters you want to change. As with kerning, use Alt/Option + left arrow to decrease tracking and Alt/Option + right arrow to increase tracking.

2. Roman Hanging Punctuation

Roman hanging punctuation will give your blocks of text a clean appearance, taking your typography from amateur to pro. But what exactly is this tool that is hardly talked about? Turning on the Roman hanging option in Illustrator will make the text line up evenly by “hanging” quotation marks in the margin. Otherwise, quotations are set flush with text, within the margin.

To turn on Roman hanging punctuation, open the Paragraph tool panel, and click on the arrow on the upper right of the box. A drop-down menu will appear in which you can choose “Roman Hanging Punctuation.”

07 Roman-hanging-punctuation in Useful Typography Tips For Adobe Illustrator

Keep in mind that you can turn on or off the Roman Hanging Punctuation for entire blocks of text. Just select the blocks of text and use the same drop-down menu to change the setting.

3. The Glyphs Panel

Glyphs are any characters found within a font family. The Glyphs panel in Illustrator is the place to locate font objects, from normal characters to the special symbols. Whatever font you have selected when you open the glyphs panel is the menu that will be displayed. Fortunately, you do not have to keep exiting the Glyphs panel every time you would like to see the glyphs for another font or see glyphs similar to the one you’ve selected. You can also keep the Glyphs panel open while moving your cursor to different locations in the document.

To open the Glyphs Panel, go to WindowTypeGlyphs. Click on a glyph to select it; double-click to insert it in the line of text. Illustrator places the character wherever your blinking text cursor is located.

08 Inserting-glyphs-into-text-lines in Useful Typography Tips For Adobe Illustrator

Hover your mouse over glyphs to see the Unicode (the name given to each character in the Glyphs panel); the Unicode is displayed at the top of the panel. Once you have found the glyph you would like to use, simply double-click on the character to insert it into your current project.

09 Unicode in Useful Typography Tips For Adobe Illustrator

To see a different font, simply choose a different family and style from the drop-down boxes at the bottom of the panel.

10 Change-font in Useful Typography Tips For Adobe Illustrator

To see the glyphs in a larger or smaller preview display, click on the zoom in and out buttons located in the lower-right corner of the panel.

11 Zoom-in-out in Useful Typography Tips For Adobe Illustrator

In the “Show” menu at the top of the panel, you can limit the type of characters displayed in that font; for instance, “Oldstyle Figures.”

12 Oldstyle-figures in Useful Typography Tips For Adobe Illustrator

You might notice that some characters in a font include an arrow in the lower-right corner of the character box in the Glyphs panel. This arrow indicates that alternate glyphs are available for this character. To access these alternates, simply click and hold the character. Drag your cursor over the alternate glyph you would like to use, and release the mouse. The glyph should now be inserted in the text.

13 Alternate-glyphs in Useful Typography Tips For Adobe Illustrator

4. Hyphens and Dashes

One of the easiest ways to disqualify yourself as a professional designer is by using hyphens and dashes incorrectly. The rules are somewhat tedious but fairly easy to learn and remember.

A hyphen is the shortest in length and is located on the keyboard next to the “+” sign. It has three functions. It is used when a word is split at the end of a line of text. It is used to join two words together to create a compound word, such as “fun-loving dad” and “anti-American.” A hyphen is also used with two-word numbers, such as forty-two. If in doubt, look up the word in a dictionary and use a hyphen if the word is not present. Example: “Twenty-two dollars is all that your un- line break loving dad will give to a well-intentioned suitor.”

An en dash is the second longest in length and is used to show a span of time or a numerical range; for example, 5–9, July–September, 1:00–8:00. In the Glyphs panel in Illustrator, the en dash Unicode is U+2013. Example: “Our vacation is from June 13–18.”

An em dash is the longest in length of the three and is used to show a break in thought. For instance, “Down the road—and a long winding road it was—they traveled as quickly as possible.” In Illustrator, the em dash Unicode is U+2014. Example: “We gathered our supplies — all eight truck loads — and started slowly up the bypass.”

5. Styles Panels

When working with large amounts of text in Illustrator, you do not have to keep applying the same font styles manually to every heading and block of text. You can simply save your settings using the Character Styles panel or the Paragraph Styles panel. Both can be found under WindowType.

To set a style, simply type your heading or paragraph using the font styles you want to save. Then go to WindowTypeCharacter Styles, or WindowTypeParagraph Styles. A Styles panel box will appear, and in the upper-right corner will be a small arrow, which is the Styles menu. To create your own name for the style, choose “New Character” or “Paragraph Style,” type a name, and click OK.

15 New-character-style in Useful Typography Tips For Adobe Illustrator

When you would like to add your new Character or Paragraph Style to text, select the text. Then click on the style that you created in the Style panel box. The style you saved will now be added to the text.

15 New-character-style in Useful Typography Tips For Adobe Illustrator

To edit a style, click on the style in the panel box, then click to the Character and Paragraph Style options in the drop-down menu, or simply double-click on the style you want to change.

17 Select-character-style-options in Useful Typography Tips For Adobe Illustrator

Now on the left side of the dialog box that pops open, click on a formatting category. Make the changes you need, click OK, and all text that you’ve applied to this style will be changed. Keep in mind that if text is selected, the changes will be made to it only. Click on the Selection tool and then click anywhere on the work desk to make sure that text is not selected before attempting to change the style of all text.

Character-style in Useful Typography Tips For Adobe Illustrator

To delete a style, select it in the Character or Paragraph Styles panel. Then click the “Delete” button in the bottom-right corner of the panel. Or just drag the style onto the “Delete” button. The formatting of text associated with this style will not change, but a style will no longer be applied to this text.

19 Delete-character-style in Useful Typography Tips For Adobe Illustrator

6. Placing Type On a Path

Most Illustrator users know that type can be placed on a path to create shaped text or text that wraps around an object. The technique for applying text to a path is different depending on the path, though. Type can be placed on either an open path, which is a line with a beginning and end, or a closed path, such as a circle or square.

Open Paths

To place type on an open path (i.e. a line with a beginning and end), begin by creating a path, such as a curved line. Make sure to select the Type tool, and then move your cursor over the path until the cursor changes to a Type on a Path icon, which has a line through it.

20 Type-on-a-path-cursor in Useful Typography Tips For Adobe Illustrator

Then just click on the path, and you will have created a Path Type object. The Stroke objects will be gone, and a blinking cursor will appear in which you can type your message.

21 Type-on-open-path in Useful Typography Tips For Adobe Illustrator

To make any changes to your open path type, choose the Selection tool and click on the path. In and out ports (small white boxes) will appear at either end of the path and a line in the center and on the far left and right. Basically, Illustrator is now treating the path as it would area type. Drag one of the lines to make the text path shorter or longer; make sure that your cursor is an arrow with a line-and-arrow symbol next to it.

22 Handles-for-type-on-a-path in Useful Typography Tips For Adobe Illustrator

You can change the actual type just as you would any other area type, including by changing the font size. Doing this, though, may make the text extend outside of the area type’s boundaries. If this happens, a red plus sign will appear.

23 Type-on-path-plus-sign in Useful Typography Tips For Adobe Illustrator

If you click on the plus sign, the cursor will change to a linked container cursor (it looks like a text box). Then, click on another area in your project to create another open path line of the same size and shape as your first. New text will continue to flow onto this new line.

24 New-open-path-container in Useful Typography Tips For Adobe Illustrator

Or simply drag the beginning and end lines to make text fit on the path:

25 Extend-open-path-text-line in Useful Typography Tips For Adobe Illustrator

Make changes to the actual path that the text sits on by choosing the Direct Selection tool and then clicking on the path. You can now lengthen or shorten the path or change the shape, just as you would with any other path.

26 Change-path-shape in Useful Typography Tips For Adobe Illustrator

You can also move the type to sit underneath the path by dragging the center line to the opposite side of the path. Or go to TypeType on a PathType on a Path Options. In the box that appears, check the “Flip” box and click OK.

27 Move-type-underneath-path in Useful Typography Tips For Adobe Illustrator

To flip type over, go to TypeType on a PathType on a Path Options. Select the Flip box and then select “Ascender” in the “Align to Path” menu. Other changes can be made in this dialog box as well: change the effect, choose other path alignment options or adjust the spacing.

28 Flip-type-on-open-path in Useful Typography Tips For Adobe Illustrator

Closed Paths

The confusing part of placing type on a closed path is that the start and end points are in the same place. With an open path, your starting point is wherever you click with the Type tool to create a Path Type object, and the end point is the end of the path. On a closed path, both the start and end points are wherever you click, because the object creates a continuous line. The center line on a closed path, such as a circle, would then be at the bottom of the circle if your start point is at the top. To place type on a closed path, you will have to choose the Type on a Path tool by clicking on the Type tool and dragging to pull out the Type menu.

29 Type-on-a-path-tool in Useful Typography Tips For Adobe Illustrator

Then click on the path where you would like the text to start and begin typing. Once again, make sure the cursor changes to the Type on a Path symbol.

30 Type-on-a-closed-path in Useful Typography Tips For Adobe Illustrator

Just as with an open path, you can change the location of the start and end points and, therefore, move the location of the text on the object.

31 Move-closed-type in Useful Typography Tips For Adobe Illustrator

You can also move type underneath the line or flip type over the same way as you would with open type. Simply go to TypeType on a PathType on a Path Options, and change the settings to get the desired effect. Or you can make changes by dragging the center line.

32 Flip-type-on-closed-path in Useful Typography Tips For Adobe Illustrator

7. Point Type vs. Area Type

Point type, created by selecting the Type tool, is so called because it adds text to a certain point in an image. Area type, created by selecting the Area Type tool, adds text to fill a specified area of an image.

Point type is often used for headlines and other single lines of text. The more you type, the longer the text line becomes. To move text to another line, you must manually press Enter or Return on the keyboard. Area type is used for paragraphs of text and is surrounded by a bounding box. As you type, the text automatically flows to fill the box. The bounding box in area type will have two large boxes, called ports, in addition to the normal bounding box handles. These ports are the in and out boxes from which text flows between area type containers.

33 Point-and-area-type in Useful Typography Tips For Adobe Illustrator

When selecting point type with the Selection tool and if you have selected “Show Bounding Box” in the View drop-down menu, a bounding box will appear surrounding the text. However, when changing the shape or size of the bounding box with point type, the text will become distorted because no shape is holding the text. On the other hand, changing the size or shape of area text will simply change the way the text fills the bounding box.

34 Changing-shape-of-point-and-area-type in Useful Typography Tips For Adobe Illustrator

8. Creating Columns of Text

Any area type can easily be divided into columns, or even rows, whenever needed. First, create the area type, and then select it. Go to TypeArea Type Options. In the box that appears, you will see options for changing the settings of both rows and columns, as well as for resizing the area type.

Change the number of rows or columns by changing the Number settings underneath the Row or Column settings. The “Span” changes the width of individual rows or columns, and the “Gutter” changes the distance between each row or column.

35 Columns in Useful Typography Tips For Adobe Illustrator

If you select the “Fixed” box, then you can resize the area, and the number of rows or columns will change, not their width.

36 Fixed-box-selected in Useful Typography Tips For Adobe Illustrator

With the Fixed box deselected, the size of the rows and columns will increase or decrease when resizing, but the number of rows or columns will remain the same.

37 Fixed-box-deselected in Useful Typography Tips For Adobe Illustrator

If you break the text into both columns and rows, rather than just one or the other, then you will want to choose the way text flows between columns and rows in the Options section. Selecting “By Rows” will cause the text to be read from left to right, first in the top row and then in the bottom row. Selecting “By Columns” will cause the text to be read left to right, first in the left column and then in the right column.

38 Text-flow in Useful Typography Tips For Adobe Illustrator

9. Text Flow Between Containers

With certain projects, you may need to make text flow from one area type container to the next. For instance, you may have created an area type frame in the exact size you need, but as you type, the text “overflows,” which Illustrator alerts you about with a red box with a plus sign inside.

39 Text-overflow in Useful Typography Tips For Adobe Illustrator

Clicking on this plus sign with the Direct Selection tool will change your cursor to the linked container symbol.

40 Click-on-plus-sign in Useful Typography Tips For Adobe Illustrator

Click again on the artboard and Illustrator will create a new container of the exact same size as the first. Text will now continue to “flow” from the previous container into this new one.

41 New-container-same-size in Useful Typography Tips For Adobe Illustrator

If you would like to create a container of different proportions, though, then click and drag on the artboard until the container is the size you desire.

42 New-container-different-size in Useful Typography Tips For Adobe Illustrator

10. Scaling Area Type Numerically

Instead of resizing an area type bounding box by using the handles, you can scale it numerically, making for a more accurate size that can be repeated. Go to TypeArea Type Options, and enter the size of box you need.

43 Scale-with-area-type-options in Useful Typography Tips For Adobe Illustrator

Or you can go to ObjectTransformScale to size a bounding box numerically. Keep in mind that these techniques will also change the scale of the text. To keep text the same while changing the box only, click on a side of the frame using the Direct Selection tool, and then scale the bounding box. The text should remain the same while the size of the bounding box changes.

44 Scale-with-transform in Useful Typography Tips For Adobe Illustrator

Type Tool Shortcuts

Keyboard shortcuts will make your work in Adobe Illustrator go that much faster. Memorize each of the following to improve your workflow:

  • Shift + Control/Command + O : Create outlines.
  • Alt + Control/Command + I : Show or hide hidden characters.
  • T : This way you can select the Type tool faster.
  • Control/Command + T : Show or hide the Character panel.
  • Shift + Control/Command + T : Show or hide the Tabs panel.
  • Alt + Control/Command + T : Show or hide the Paragraph panel.
  • Alt + Shift + Control/Command + T : Show or hide the Open Type panel.
  • Shift : Hold down while the Type tool is selected to switch between horizontal and vertical text.
  • Escape : Press while typing to escape from the type object. The Selection tool and type object will also be selected.

Keep in mind that these are only type tool shortcuts and commands. Print out a complete list of shortcuts from KeyXL to have on hand if needed.

Other Resources

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

(al) (ik) (vf)


© Tara Hornor for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: ,

Upcoming Conferences and Events for Designers and Developers in 2011

POSTED IN Blog, Creative News | Comments Off on Upcoming Conferences and Events for Designers and Developers in 2011

Advertisement in Upcoming Conferences and Events for Designers and Developers in 2011
 in Upcoming Conferences and Events for Designers and Developers in 2011  in Upcoming Conferences and Events for Designers and Developers in 2011  in Upcoming Conferences and Events for Designers and Developers in 2011

We’re well into 2011, and many designers and developers around the world are planning their travels for the year, including the possibility of attending any Web design or development conferences. To help you out with your plans for the upcoming months, we’ve put together a list of conferences and events that you might want to consider.

This particular post covers events taking place in about a six month timeframe that ends in late August and early September. Later this year, we’ll post another article like this at the end of August that will cover events covering a six-month period beginning in September.

As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be the chance to eventually meet each other this year.

Choose the month that interests you most:

March 2011 Events

Drupalcon Chicago
“In March of 2011, thousands of Drupal users, developers, designers, evaluators and businesspeople will descend on Chicago’s Sheraton Hotel and Towers for sessions, talks, code sprints, and more at DrupalCon Chicago. Whether you’re already using Drupal or considering it for your company or organization, you won’t want to miss out on this one-of-a-kind event.”

When: March 7 – 10, 2011
Where: Chicago, IL, USA at the Sheraton Chicago Hotel

Events-2011-107 in Upcoming Conferences and Events for Designers and Developers in 2011

FITC Amsterdam
“FITC Amsterdam will feature over 50 presentations and panels covering the Creative, Technical, and Business aspects of Flash and digital media. The conference offers two full days and nights of events, plus one day of optional pre-festival workshops and over 750 attendees anticipated from around the globe.”

When: March 8 – 9, 2011
Where: Amsterdam, the Netherlands at De Meervaart

Events-2011-108 in Upcoming Conferences and Events for Designers and Developers in 2011

SXSW Interactive
“SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the incredible new SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer.”

When: March 11 – 15, 2011
Where: Austin, TX, USA

Events-2011-147 in Upcoming Conferences and Events for Designers and Developers in 2011

The Big M
“The Big M is a brand new independent mobile focused event aimed at those who want to learn from and connect with the very best people in the industry. Join us in beautiful Bath for two days of sessions and workshops on mobile development, mobile design and mobile business. Hear from leading industry figures, be inspired and connect.”

When: March 20 – 22, 2011
Where: Bath, UK

The-big-m in Upcoming Conferences and Events for Designers and Developers in 2011

SES Conference & Expo
“SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”

When: Various dates starting March 21, 2011
Where: New York, Shanghai, Toronto, San Francisco, Chicago

Ses-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

DevConnections
“Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”

When: March 27 – 30, 2011
Where: Orlando, FL, USA at the Grande Lakes JW Marriott Resort Hotel

Dc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

An Event Apart Seattle
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: March 28 – 30, 2011
Where: Seattle, WA, USA at the Bell Harbor Conference Center

Aea1-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Web 2.0 Expo
“Web 2.0 Expo, co-produced by O’Reilly Media, Inc. and UBM TechWeb, showcases the latest Web 2.0 business models, development paradigms, products, and design strategies for the builders of the next-generation Web.”

When: March 28 – 31, 2011
Where: San Francisco, CA, USA at Moscone West

Web2-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Photoshop World Conference & Expo
“Designed to help you boost your training and experience, the Photoshop World graphic design and photography convention offers three days of pulse-pounding training with classes from renowned experts in the field and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”

When: March 30 – April 1, 2011
Where: Orlando, FL, USA at the Orange County Convention Center

Psw-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

IA Summit
“The IA Summit is the premier destination for those who practice, research and are interested in the structural design of shared information environments. Some call themselves information architects (and many don’t) but all share a common desire to help people live better lives through meaningful experiences with information.”

When: March 30 – April 3, 2011
Where: Denver, CO, USA at the Colorado Convention Center

Events-2011-117 in Upcoming Conferences and Events for Designers and Developers in 2011

Think Vitamin Online Conferences
“Membership includes valuable conferences. You can attend live, watch the video later or view videos of past online conferences. Ask the speakers your questions and chat with the other attendees.”

When: Numerous dates starting March 2011
Where: Online

Tv-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

The Usability Week 2011 Conference
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials.”

When: Various dates between February 28 – May 13, 2011
Where: Hong Kong, Melbourne, London, Washington, and Minneapolis

Events-2011-1042 in Upcoming Conferences and Events for Designers and Developers in 2011

April 2011 Events

FFK11
“The conference offers about 30 sessions about developing and designing applications and Web sites. 10 full day workshops with just 19 attendees in each workshop are available as well”.

When: April 5 – 8, 2011
Where: MediaPark, Cologne, Germany

Ffk in Upcoming Conferences and Events for Designers and Developers in 2011

Scottish Ruby Conference
“The Scottish Ruby Conference rebrands the successful Scotland on Rails conference.”

When: April 7 – 9, 2011
Where: Edinburgh, Scotland at the Royal College of Physicians

Events-2011-118 in Upcoming Conferences and Events for Designers and Developers in 2011

Voices That Matter: iPhone Developers Conference
“Reinforce your skills and discover emerging trends this April at the Voices That Matter: iPhone Developers Conference, where we will connect you with some of the biggest names in the industry, as they teach you how to create effective user interfaces, utilizing exciting design and the latest technology, for the iPhone, iPad, or both.”

When: April 9 – 10, 2011
Where: Seattle, WA, USA at the Bell Harbor International Conference Center

Idc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

CodeConf
“Coding is about more than code. Whether it’s building a solid community, writing good documentation, or hacking space exploration, CodeConf is about improving the software ecosystem through best practices. Come with an open mind and leave a better programmer.”

When: April 9 – 10, 2011
Where: San Francisco, CA, USA at the Hyatt Regency

Loc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

360|Flex Conferences
“360|Flex is the first and still the best Adobe Flex developer conference in the world. We’re not a publishing company pushing books, or a media company selling subscriptions. We’re a conference company, focused on community. Our goal is to bring the best and brightest in the developer community together for 4 days of incredible sessions, awesome parties, good times, and learning.”

When: April 10 – 13, 2011
Where: Denver, CO, USA at the Marriot Denver South

Flex-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Breaking Development Conference
“Join us for two days of quality talks describing how to design, develop, and leverage the mobile web. Our speakers will walk you through mobile strategies appropriate for your company, design considerations for the mobile platform, development techniques, and how to use web technologies to build cross platform applications.”

When: April 11 – 12, 2011
Where: Dallas, TX, USA at the Gaylord Texan in Grapevine

Bdc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

O’Reilly MySQL Conference & Expo
“The O’Reilly MySQL Conference & Expo is an interactive learning community—four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”

When: April 11 – 14, 2011
Where: Santa Clara, CA, USA at the The Hyatt Regency

Mysql-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

MIX11
“MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. Sessions range from technical, code-based topics to expert advice on content strategy, usability and design. Explore the future of the standards-based web — join the conversation at MIX11.”

When: April 12 – 14, 2011
Where: Las Vegas, NV, USA at the Mandalay Bay Convention Center

Events-2011-122 in Upcoming Conferences and Events for Designers and Developers in 2011

UX London
“UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names. Whether you’re beginning your career, or a seasoned professional, UX London is your chance to add core skills, absorb strategic thinking, and learn advanced techniques from pioneers in the field.”

When: April 13 – 15, 2011
Where: London, UK at the Cumberland Hotel

Events-2011-123 in Upcoming Conferences and Events for Designers and Developers in 2011

WebDU
“webDU is the premier Antipodean Web Technology Conference, taking place 14-15 April 2011 in Sydney, Australia. This is the ninth year the conference will be held. The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications.”

When: April 14 – 15, 2011
Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour

Events-2011-124 in Upcoming Conferences and Events for Designers and Developers in 2011

Where 2.0
“The O’Reilly Where 2.0 Conference explores the intersection of location technologies and trends in software development, business strategies, and marketing. The source for all things location-aware, Where 2.0 brings together CTOs, marketers, developers, technologists, researchers, geographers, startups, business developers, and entrepreneurs.”

When: April 19 – 21, 2011
Where: Santa Clara, CA, USA at the Santa Clara Convention Center

Events-2011-125 in Upcoming Conferences and Events for Designers and Developers in 2011

The Next Web Conference
“The Next Web brings together the best from Europe and the United States to look at overall Internet trends.”

When: April 27 – 29, 2011
Where: Amsterdam, the Netherlands

Tnw-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

LessConf
“LessConf is a two-day conference with just 225 attendees. Lunch is provided on site. You’ll get the meet the speakers. You’ll get inspired (again). Between speakers and during lunch there are tons of opportunities to meet others in our industry. At LessConf you will hear great speakers, meet amazing people, and develop relationships.”

When: April 29 – 30, 2011
Where: Atlanta, GA, USA at the Georgia Institute Of Technology

Events-2011-148 in Upcoming Conferences and Events for Designers and Developers in 2011

May 2011 Events

JSConf
“JSConf is one of the best tech conferences out there and rightly so, because JavaScript or JS is one of the best languages out there. The core focus of this conference is to present the wonders of JavaScript that are often overlooked. The content of the conference caters to all types of JavaScript developers from client interface to server development to testing.”

When: May 2 – 3, 2011
Where: Portland, OR, USA at the Portland Art Museum

Jsct-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

FITC Toronto 2011
“Now in its 10th year, FITC Toronto is one of the largest and longest running events of its kind in the world. With some of the most unique and engaging presenters from around the globe, FITC Toronto is a three day blitz of presentations, demonstrations, and panel discussions, sandwiched between our legendary FITC parties and abundant networking opportunities. Topped off with the FITC Award Show, it’s three days and nights that will leave you inspired, energized and awed.”

When: May 2 – 4, 2011
Where: Toronto, ON, Canada at the Guvernment

Events-2011-129 in Upcoming Conferences and Events for Designers and Developers in 2011

An Event Apart Boston
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: May 2 – 4, 2011
Where: Boston, MA, USA at the Marriott Copley Place

Aea2-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

CMS Expo
“You’re invited to compare the best of the best in CMS and learn first-hand, from leading developers, designers and business minds of our time.”

When: May 2 – 4, 2011
Where: Chicago, Illinois, USA at the Hilton Orrington Hotel

Events-2011-131 in Upcoming Conferences and Events for Designers and Developers in 2011

WordCamp Developers
“The conference will feature 2 tracks, one targeting WordPress UX topics and issues, and the other targeting strictly development issues. The day will also be host to a WordPress Un-Conference where participants are encouraged to pitch talks and join in discussion.”

When: May 5, 2011
Where: Vancouver, BC, Canada

Wcd-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Make Web Not War
“At this conference, attendees will have the opportunity to learn about the latest technologies and techniques available to the ever-evolving web community. Here we will explore the power and flexibility of new web paradigms, mixed web environments, interoperable applications, and PHP on Windows and Azure. MWNW is about bridging the gap between different platforms, communities, and developers of all trades and backgrounds.”

When: May 6 – 7, 2011
Where: Vancouver, BC, Canada

Events-2011-132 in Upcoming Conferences and Events for Designers and Developers in 2011

J and Beyond
“An International Joomla! Conference.”

When: May 6 – 8, 2011
Where: Kercrade, the Netherlands at the Rolduc Conference Centre

Jab-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Google I/O Developer Conference
“Google I/O brings together thousands of developers for two days of deep technical content, focused on building the next generation of web, mobile, and enterprise applications with Google and open web technologies such as Android, Google Chrome, Google APIs, Google Web Toolkit, App Engine, and more.”

When: May 10 – 11, 2011
Where: San Francisco, CA, USA at the Moscone Center

Gio-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

UX Lx: User Experience Lisbon
“Three eventful days in Lisbon to learn from world renowned speakers and meet UX Professionals from around the world. Hone up your skills with 16 practical workshops, 26 thought provoking talks and enjoy the city with lots of networking activities.”

When: May 11 – 13, 2011
Where: Lisbon, Portugal at the FIL Meeting Centre

Events-2011-134 in Upcoming Conferences and Events for Designers and Developers in 2011

Mobilism
“In two days we’ll explore the mobile world from a web-centric point of view. All of our speakers are deeply rooted in the web and have at one time or another decided to take their talent to mobile. They will teach you which web techniques work on mobile, which don’t, and which new ones you need in order to keep up with a rapidly changing web.”

When: May 12 – 13, 2011
Where: Amsterdam, the Netherlands, in Felix Meritis

Events-2011-135 in Upcoming Conferences and Events for Designers and Developers in 2011

Web Directions Unplugged
“HTML5 is fast becoming the way to develop not just web apps, but native apps for platforms like Android, iOS and webOS. Join us for two groundbreaking days of practical development and design presented by leading experts in this exploding field.”

When: May 12 – 13, 2011
Where: Seattle, WA, USA at The Conference Center

Events-2011-136 in Upcoming Conferences and Events for Designers and Developers in 2011

Valio Con
“Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”

When: May 13 – 15, 2011
Where: San Diego, CA, USA

Vc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

RailsConf
“RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Ruby on Rails. Through keynotes, sessions, tutorials, events, and of course lots of hallway hacking, RailsConf is the meeting place for the Ruby on Rails community.”

When: May 16 – 19, 2011
Where: Baltimore, MD, USA

Events-2011-138 in Upcoming Conferences and Events for Designers and Developers in 2011

Future of Web Design
“The Future of Web Design is coming back to London in 2011. Following on from the success of last year we will be bringing you a beautiful three full days of essential web learning.”

When: May 17-18, 2011
Where: London, UK at the The Brewery

Fowd-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Falsy Values
“A true JavaScript event.”

When: May 18 – 20, 2011
Where: Warsaw, Poland

Fv-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

TYPO Berlin
“To shift is to pick up speed, to push the envelope, to change your perspective. All three are useful strategies for TYPO 2011, in order to bring visual communications in line with the latest developments in technology.”

When: May 19 – 21, 2011
Where: Berlin, Germany

Events-2011-140 in Upcoming Conferences and Events for Designers and Developers in 2011

InDesignSecretsLive Print and ePublishing Conference
“Founded by world-renowned InDesign experts David Blatner and Anne-Marie Concepción, and dedicated to the proposition that InDesign professionals deserve a great learning experience, the Print and ePublishing Conference brings together over a dozen of the leading InDesign experts minds for three days of non-stop inspiration and education!”

When: May 23 – 25, 2011
Where: Alexandria, VA, USA at the Westin Alexandria

Ids-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Gravity Free
“GRAVITY FREE 2011 is a celebration of excellence in multidisciplinary design innovation. It stars a remarkable cast of world-class designers who are changing the way we see the world, from a diverse group of design disciplines”

When: May 24 – 26, 2011
Where: San Francisco, CA, USA at the

Gf-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Web Directions @media
“HTML5, CSS3, JavaScript, Mobile, Interaction Design, User Experience, and everything else that’s hot right now—it’s all on the carefully curated Web Directions @media program for 2011.”

When: May 24 – 27, 2011
Where: London, UK at Queen Elizabeth Hall

Events-2011-141 in Upcoming Conferences and Events for Designers and Developers in 2011

mesh conference
“mesh is happening because the five founders (see below) believed that Toronto deserved to have a world-class conference where people with an enthusiasm for the Web could talk about how it is affecting the media, marketing, business and society as a whole.”

When: May 25 – 26, 2011
Where: Toronto, ON, Canada

Mesh-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

WebVisions
“WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”

When: May 25 – 27, 2011
Where: Portland, OR, USA at the Oregon Convention Center

Events-2011-143 in Upcoming Conferences and Events for Designers and Developers in 2011

International PHP Conference
“The IPC is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology. Again, the conference will focus on main topics for developers and core-technologies for decision makers. We will show how to scale your applications, explain the details of Continuous Integration or evaluate different approaches to NoSQL.”

When: May 29 – June 11
Where: Berlin, Germany at the Maritim proArte Hotel

Events-2011-144 in Upcoming Conferences and Events for Designers and Developers in 2011

webinale
“Business, Design and Technology are the three basic pillars for success on the World Wide Web. This webinar has been prescribed for these three pillars of the first conference in 2007.”

When: May 30 – June 1, 2011
Where: Berlin, Germany at the Maritim proArte Hotel

Webinale-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

June 2011 Events

Interlink Web Design Conference
“nterlink Conference will be a small and carefully crafted 3-day web event that will appeal to all web professionals. This international web design conference welcomes website architects, usability specialists, project managers, marketing coordinators, web developers, website designers and any other online professional that wants to meet others in the industry and get inspired.”

When: June 2 – 4, 2011
Where: Vancouver, BC, Canada at The Capilano Performing Arts Theatre

Events-2011-201 in Upcoming Conferences and Events for Designers and Developers in 2011

Internet Week
“Since 2008, Internet Week has taken place all over the city, thanks to our many partners hosting diverse events in different locations. The result is a critical mass of web-focused events that raises the profile of NYC’s industry as a whole, as well as the partners who participate.”

When: June 6 – 13, 2011
Where: New York City, NY, USA at Metropolitan Pavilion & The Altman Building, and around NYC

Events-2011-202 in Upcoming Conferences and Events for Designers and Developers in 2011

DIBI Conference
“DIBI (pronounced “dibby”), is the annual Design It. Build It. Conference held at The Sage Gateshead in the North East of England. DIBI brings together both sides of the web coin for an unusual two-track web conference. World renowned speakers leading in their fields of work will talk about all things web.”

When: June 7 – 8, 2011
Where: Newcastle upon Tyne, UK

Dibi-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

TYPO3
“We invite you to the North American TYPO3 conference held this year in San Francisco. This will be a great time to learn more about the powerful system we use everyday and to connect with other developers from both North America and Europe. Several internationally-known leaders of the TYPO3 community will be attending and presenting.”

When: June 9 – 11, 2011
Where: San Francisco, CA, USA at the Fort Mason Center

Typo3-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Flash and the City
“Explore, discover, connect.”

When: June 9 – 12, 2011
Where: New York City, NY, USA

Fatc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

UXcamp Europe
“The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”

When: June 11 – 12, 2011
Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University

Events-2011-204 in Upcoming Conferences and Events for Designers and Developers in 2011

WordCamp Kansas City
“WordCamps are community organized meetings for users of WordPress, the blogging platform and content management system that is sweeping the online world.”

When: June 11 – 12, 2011
Where: Kansas City, MO, USA at Johnson County Community College

Wck-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

An Event Apart Atlanta
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: June 13 – 15, 2011
Where: Atlanta, GA, USA at the InterContinental Atlanta

Aea3-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

140 Character Conference
“The #140conf events provide a platform for the worldwide twitter community to: listen, connect, share and engage with each other, while collectively exploring the effects of the emerging real-time internet on business.”

When: June 15-16, 2011
Where: New York City, NY, USA

140-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Nordic Ruby Conference
“Come to Nordic Ruby 2011 and you will get a two day, single track Ruby conference, featuring the winning concept of 30 minute talks and 30 minute breaks. Very appreciated last year.”

When: June 16 – 18, 2011
Where: Gothenburg, Sweden

Nr-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Ampersand
“The Web Typography Conference”

When: June 17, 2011
Where: Brighton, UK

Amp-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

HOW Design Live
“What do you call a mega-gathering of thousands of designers, freelancers, in-house managers and—new for 2011—packaging designers, plus a speaker roster packed with some of the brightest minds in the industry? HOW Design Live! Click the links below for more on each HOW Design Live event, then sign up for The BIG Ticket for exclusive access to all four conferences!”

When: June 22 – 27, 2011
Where: Chicago, IL, USA at the Hyatt Regency

How-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Eyeo Festival
“Three days of inspirational talks, demos, labs, and workshops and opportunities to connect with people whose extraordinary creations are pushing the envelope. The line up is amazing. 30 brilliant individuals, one amazing collection of talent and insight. Add yourself to the mix, and it just gets better.”

When: June 27 – 29, 2011
Where: Minneapolis, MN, USA at the McNamara Alumini Center

Eyeo-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Future of Web Apps
“The Future of Web Apps is coming to Las Vegas in 2011. The brand new event is a beautiful three full days of essential web learning.”

When: June 27 – 29, 2011
Where: Las Vegas, NV, USA at Meet exhibition venue

Fowa-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

July 2011 Events

Designer/Developer Workflow Conference
“What’s the big deal about workflow? Workflow is something we all do, day in and day out – although you may not even think about it. Do you work with multiple applications during the day? Do you work with team members, departments, clients, etc.? Improving those workflows is what D2W is all about.”

When: July 14 – 16, 2011
Where: Kansas City, MO, USA at the Crown Plaza Hotel

Ddw-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Front-End Design Conference
“Front-End Conf is an event dedicated to content, presentation and behavior and to the awesome people in the design and development community.”

When: July 23, 2011
Where: St. Petersburg, FL, USA

Fe-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

The O’Reilly Open Source Convention
“OSCON provides a central place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software and standards sweeping through the open source community and the broader technology industry.”

When: July 25-29, 2011
Where: Portland, OR, USA

Events-2011-211 in Upcoming Conferences and Events for Designers and Developers in 2011

re:build Conference
“re:build is an intimate one-day event hosted in Downtown Indianapolis. We’re busy lining up some of our favorite speakers from all across the country. ”

When: July 29, 2011
Where: Indianapolis, IN, USA

Events-2011-212 in Upcoming Conferences and Events for Designers and Developers in 2011

UXCampLondon
“A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”

When: Summer, 2011
Where: London, UK

Events-2011-213 in Upcoming Conferences and Events for Designers and Developers in 2011

August 2011 Events

An Event Apart Minneapolis
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: August 8 – 10, 2011, 2011
Where: Minneapolis, MN, USA at the InterContinental Atlanta

Aea4-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

WordCamp
“WordCamp San Francisco is the official annual conference of the WordPress open source project. WordCamp SF 2010 brought together 700+ WordPress users and developers from around the world. In 2011 we’re expanding the programming for publishers, bloggers, and developers.”

When: August 12 – 14, 2011
Where: San Francisco, CA, USA at the Mission Bay Conference Center

Wc-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Drupalcon London
“DrupalCon is an international event that brings together the people who use, develop, design and support the Drupal platform. DrupalCon London 2011 will feature content from the most influential people and brightest minds within the Drupal community and beyond, in addition to countless opportunities for networking, code sprints, and more.”

When: August 21 – 26, 2011
Where: London, UK

Dcl-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

UX Australia
“The conference covers core user experience design topics – strategy, user-centred design, interaction design, information architecture, information design, service design, content & visual design. It’s not just digital though, and will also include presentations on the design of physical objects and environments.”

When: August 22 – 26, 2011
Where: Sydney, Australia at Four points by Sheraton

Uxa-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

UX Week
“Calling UX professionals (or aspiring professionals) of all levels! Join us at UX Week 2011, the premier user experience conference, for fun times , inspiring sessions on the main stage and roll-up-your-sleeves learning during two full days of workshops. It’s going to rock.”

When: August 23 – 26, 2011
Where: San Francisco, CA at The Mission Bay Conference Center at UCSF

Uxw-2011 in Upcoming Conferences and Events for Designers and Developers in 2011

Related Links

What Event Will You Attend?

Have you attended one of these conferences before, or do you plan to attend any in 2011? Why do you enjoy attending these types of events? Which ones do you recommend and why? Please let us know in the comments.


© Louis Lazaris for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:

The Design Matrix: A Powerful Tool For Guiding Client Input

POSTED IN Blog | Comments Off on The Design Matrix: A Powerful Tool For Guiding Client Input

Advertisement in The Design Matrix: A Powerful Tool For Guiding Client Input
 in The Design Matrix: A Powerful Tool For Guiding Client Input  in The Design Matrix: A Powerful Tool For Guiding Client Input  in The Design Matrix: A Powerful Tool For Guiding Client Input

I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.

Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.

Hey, You Got Math In My Art…

Sometimes the abstract nature of design is enough to make you envy the people over in accounting, with their definite answers and proven formulas. While the beauty of design is that it transcends the world of definite answers, introducing a little math in the form of design matrices can help you create better websites by providing a clear picture of where the website design is today and where it should go tomorrow.

Design matrices don’t require any serious math skills because they’re based on the coordinate system. Chances are you’ve seen a competitor matrix that ranks brands according to two key attributes on X and Y axes (for example, value could be plotted against profit margin). A design matrix is essentially like a competitor matrix but ranks the client’s website against competitor websites, and it uses design attributes (“clean” and “warm,” for example) instead of other points of competitive comparison.

Carmatrix211 in The Design Matrix: A Powerful Tool For Guiding Client Input
A typical competitor matrix ranks brands according to rational factors. (This example, which compares a few car models, was created for illustrative purposes only.)

Screenshot2 in The Design Matrix: A Powerful Tool For Guiding Client Input
A design matrix ranks website designs according to design attributes. (This example, which compares airline website designs, was created for illustrative purposes only).

Design matrices are powerful tools for determining the path of the website design process, because: they force you to determine two design attributes to focus on; they build consensus within a team; they guide the clients’ perception of competitors; and, most importantly, they lead to differentiated website designs.

The Art (And Math) Of Building A Design Matrix

Step 1: Gather Information

To build a design matrix, you will need to know the client’s core brand attributes and main competitors. You should also have a broad understanding of what the redesign aims to accomplish (from a design perspective): “the website is cluttered” or “our website is not engaging.” The good news is that information gathering is a normal part of the discovery phase.

A design matrix should not be the only piece of work involved in the discovery phase, but it can replace some other approaches. Creating or documenting a brand’s position and defining the key redesign goals are essential. However, a design matrix could potentially replace mood boards. A mood board is a collage or grid of images that capture the “feel” or “tone” of a brand. They are valuable tools for providing direction to new brands, but they provide a less concrete direction than a design matrix. If the brand is in its nascent form and needs broad high-level direction, then mood boards work well; but if you are working with an established brand or a client who prefers a concrete approach, then a design matrix is the best bet.

Brandposition in The Design Matrix: A Powerful Tool For Guiding Client Input
Document the brand’s position before creating a design matrix. (For illustrative purposes only.)

Imagespark in The Design Matrix: A Powerful Tool For Guiding Client Input
Image Spark is a great resource for creating online mood boards—particularly useful if you are working with a company that requires high-level brand definition.

Another common discovery activity that design matrices can replace is the “competitor website review.” Looking at competitors’ websites can generate lively discussion, but too often it either shifts the focus to feature sets instead of design direction, or it becomes a cherry-picking session for disparate design elements from a variety of websites that the designer is somehow supposed to mash together into a single coherent website design.

Create a design matrix that shows the current website in relation to competing websites. This way, you are less likely to get distracted by feature sets or be expected to combine all sorts of design elements. That said, if you are looking for an energizing group activity, competitor reviews can generate more brainstorming than a design matrix. Doing both is an option, but if you do that, then do the matrix after the walk-through of competitors.

Screenshot3 in The Design Matrix: A Powerful Tool For Guiding Client Input
Delta Airlines’ website.

Screenshot4 in The Design Matrix: A Powerful Tool For Guiding Client Input
United Airlines’ website.

Looking at these individual airline websites, rather than comparing them on a design matrix, can lead to a less design-oriented and more feature-focused conversation.

Step 2: Determine Your X and Y Axes

Narrowing down a design direction to two attributes can be uncomfortable for those of us accustomed to creative briefs that list a litany of brand attributes to guide our design. How often have we heard that a design should be “clean,” “inspiring,” “warm,” “engaging,” “approachable” and “trustworthy”? How do we even accomplish just two of these attributes? And if we must choose only two, how do we decide?

Understand that a design matrix is not intended to limit the final design to two attributes. That would be almost impossible. It is intended to illustrate the two most important attributes for taking the website design to the next level and differentiating it from that of competitors.

To determine your X and Y axes, ask yourself the following questions:

  • Of all the brand’s attributes, what will make this client stand out from the crowd? Which design traits reinforce those brand attributes?
  • What are the competitor websites’ strengths and weaknesses?
  • What does the design need to do better in order to accomplish the website’s goals?

The X and Y axes should not be nearly synonymous (for example, “warm” and “engaging”), nor should they be mutually exclusive (“innovative” and “traditional”). There should be a slight tension between the two attributes.

The airline websites, for example, are ranked according to how “clean” and “personable” their designs are. There is a slight, but not negating, tension between these two attributes. Clean websites can come across as cold if they don’t have a distinctive voice or warm color palette. Personable websites are often less functionally organized. Achieving a high ranking for both attributes is a worthy challenge, and stepping up to that challenge will definitely create a distinctive website.

You might find that you change the labels of your axes as you place the websites on the matrix (see step 3), but the above process should get you pretty close to determining what the final axes should be.

Step 3: Play a Little

You know the competitors. You have a clear idea of what is important, brand- and design-wise. You have determined your x and y axes. It’s time to try some things out.

Place all of the websites on your matrix as you would rank them off the top of your head. As you begin to place them, you will most likely rearrange some as you compare them to others. This is a natural part of the process because the matrix shows relationships as well as individual rankings.

Screenshot5 in The Design Matrix: A Powerful Tool For Guiding Client Input
I was influenced by Jet Blue’s overall branding and so originally ranked its website’s personality fairly high. Later, when I compared it to the Delta and Virgin America websites, I revised the ranking.

Design matrices do not have to be limited to ranking competitors. They can also show a client’s website’s position among affinity brands (i.e. brands with a similar “feel” and customer base). Mini USA and Apple, for example, might be considered affinity brands because they both exemplify modern design and appeal to similar customer types.

Step 4: Get Serious

Things will take shape fairly quickly, but there is a final step before declaring your design direction matrix done and dusted. Before sharing the matrix with the client team, make sure you can defend it. Show it to others in your agency and see if they agree with your placement decisions. Ask these key questions:

  1. Do my axes represent the two most important design attributes?
  2. Can I clearly articulate why I placed each website where I did?
  3. Will the redesign be able to get the website to the top-right corner? If not, what is holding it back?

If you answered yes, yes and yes (or yes, yes and yes if we do a certain thing…), then your website design direction matrix is ready to share with the client.

Creating Buy-In With Design Matrices

Everyone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.

The design matrix will clearly show which websites you think best capture the desired attributes and where the current website falls into the mix. It is a tangible foundation for a conversation about design.

Invite the client to participate actively in this stage of the design process. Clients usually want to feel like they have had direct input in the design, and designers always prefer that the input comes sooner in a high-level, directional form (“The design feels cold”), rather than later in an overly specific form (“Make that element blue”).

Discuss the following questions:

  • Does the matrix address the two most important design attributes?
  • Do we all agree on the placement of competing and/or affinity brands?
  • Do we all agree on the placement of the client’s brand?
  • If we end up in the top-right corner, are we where we want to be?

Using a design matrix can be risky, mainly for one reason. Some clients have difficulty prioritizing the two most important design elements, and then they dig their heels in and declare that there are in fact four equally important elements. Hopefully, the matrix demonstrates how your choice of attributes distinguishes the website. If you meet with a lot of resistance, just create two matrices or conduct a competitor review (as discussed in step one).

Be prepared to explain your rationale and defend your position — but also be open to suggestions. Maybe there are good reasons to focus on different attributes, or maybe the team feels that the placements of some website are not quite right. Revising a design matrix is much easier than revising a design.

Truly Going The Distance

Creating a design matrix is a great first step, and getting client feedback is an awesome second step, but the most important step is to use the matrix as a resource as you design and when you present your designs to the client.

Ultimately, the purpose of a design matrix is to move a website design in the right direction. Specifically, move it to that space in the upper-right corner that represents the best of both worlds. As you design, continually refer to the matrix and see where your new iterations might fall on it.

Think about these questions as you design, and take notes for upcoming presentations:

  • Do the new iterations embody the key attributes?
  • Are they better than the competing and affinity brands?
  • How do they accomplish the design goals?

When presenting designs to a client, review key findings and recommendations made during the discovery phase. Before presenting your designs, review the matrix with the client, and revisit the matrix at the end of the presentation to show that progress has been made.

Training Wheels: A Step-By-Step Overview Of A Design Matrix For Cannondale

The following walk-through illustrates the design matrix process in its entirety and addresses the kinds of decisions that need to be made when creating a matrix. The exercise below is entirely theoretical. I do not work, nor have I ever worked, for any major bicycle manufacturer, including Cannondale. Thoughts about what design attributes Cannondale might strive for are purely my opinion. Thoughts about competing website design attributes are informed by looking at their websites and general industry expertise — just as yours will be.

Screenshot6 in The Design Matrix: A Powerful Tool For Guiding Client Input
How would you create a design matrix for Cannondale? (This example is purely illustrative.)

Step 1: Understand

For the purposes of this exercise, let’s assume that Cannondale has chosen you to redesign its website. Your first step will be to understand its brand, its competition and the desired attributes of its new website. Let’s also assume that you left the initial discovery meeting with this information:

  • Cannondale’s key competitors are Trek, Giant, Diamondback and Fuji.
  • Its brand is about performance, innovation and a superior craftsmanship that inspires riders.

When you ask about the desired design attributes, Cannondale’s representatives say the website should capture the sense of elation that comes with a successful bike ride. They also want the website to showcase technical innovation, dedication to quality and devotion to the individual rider. Your notes read, “inspiring, innovative, technical, individual, quality.”

Step 2: Determine Your Axes

The X and Y axes reflect the client’s most important and desired design attributes, but do look at competing websites before naming the axes; they will inform your direction and give you ideas about what would be distinctive.

Upon viewing the competitor websites, I found both Trek’s and Fuji’s to be “immersive” and “powerful,” with clean, bold imagery. Fuji’s was slightly colder and more “technical.” Diamondback has an inspiring home page, but the website loses steam and doesn’t showcase the individual bikes distinctively. Giant has a strong focus on teams and individual riders and helpful bike selection tools, but the design is flat.

So, how does all of this play into naming the axes and creating the matrix? Going back to your note about desired design attributes, we see that Cannondale wants to showcase technical innovation, which Trek and Fuji do well on their websites; Cannondale wants to inspire, which Trek and Fuji do through immersive imagery; unlike Giant, though, Cannondale doesn’t want to focus on racing.

At first, it may seem that “inspiring” and “innovative” would be good axes names, but those attributes don’t have quite enough tension. They are not synonyms, but there is no balance either. “Inspiring” and “quality” may come to mind, but “quality” is not a design attribute; it’s something the client wants to showcase (it’s an attribute of the product, not the design).

I chose “inspiring” and “technical” for the desired design attributes. “Inspiring” works because the client wants to inspire riders. “Technical” is a good second attribute because it captures innovation and product quality while striking a balance with “inspiring.” There is a healthy tension between the two words. Capturing both emotion and technical detail is difficult. Accomplish that balance and you’ll leave the competition in the dust.

Step 3: Place Websites on the Matrix

I always start by plotting all of the websites roughly where I think they fall on the matrix, and then I move them around as I consider the relationships between the websites.

I originally placed Cannondale’s website in the lower-left corner but, as I compared it to the other websites, I realized that it’s actually more technically focused than others, including Diamondback and Giant. That said, the Trek and Fuji websites are still more technical, with their bold product showcases and detailed imagery.

Inspiration-wise, the current Cannondale website seems to be on par with Giant’s: there is imagery of bikers, but it feels flat and diminutive.  Diamondback’s immersive home page raises it a bit above the others. Trek’s warmth and voice put it in the lead for inspiration. I originally had Trek in the upper-right, but I ultimately decided that Fuji’s website has a more technical feel to it.

The final matrix (below) is informative on many levels. It shows where Cannondale currently is and where the websites are that it needs to surpass in order to get to where we determined it needs to go. Naturally, the final design will have a unique flavor, but looking at the competing designs will partly uncover how to get there.

Screenshot7 in The Design Matrix: A Powerful Tool For Guiding Client Input
A design matrix informs the path of the design process.

Step 4: Consensus

This is a purely illustrative example, so I did not show this to a team (or the client) for feedback. Typically, feedback focuses on the desired design attributes (“Is this where we want to go?”) and the placement of all of the websites on the matrix. The most important thing is to agree on direction, of course, and then to determine the goal. The hard part is to design a website that gets there.

Step 5 (the Big One): Using It

The last step is not so much a step as a big stride. Once you’ve created the matrix, the important part comes: using it to create a better website. Make a copy for everyone involved in the project (including those in other disciplines) and have them put it up somewhere to serve as a daily reminder and motivator.

Refer to the matrix as you design. Are the decisions you are making moving you toward the upper-right? For example, if you were choosing images for the Cannondale website, ask yourself relevant questions:

  • Is this image inspirational?
  • Does it convey the technical expertise of Cannondale?
  • How can the design be more inspiring?
  • How can I better convey the technical passion of the brand?

As mentioned, revisiting the matrix when showing comps to the client will help justify your approach, but the real reason to create a matrix isn’t to sell comps or do a fun exercise during discovery; rather, it is to remind us of the path we are on. We could take so many directions, and going down a road that looks good but doesn’t take you where you want to be is all too easy.

Think of your design matrix as a compass. It’s not as precise (or cold) as a GPS; it’s an old pocket compass that wobbles a bit as you walk but still gets you to the summit.

Do’s And Don’ts

The beauty of design matrices is that they provide a new way to look at competitors and a tangible foundation on which to begin discussions with clients. They also enable you to play a little as you tweak the axes’ names and the websites’ placement to get them just right. There is wiggle room in the methodology and application, so have fun with it. That said, there are a few set guidelines worth adhering to for success:

  • Don’t be afraid to experiment.
  • Do get your ducks in a row. Verify the desired design attributes and the competitor and affinity brands with a client before proceeding, so that the matrix is relevant.
  • Don’t base your insights on home pages alone. A website’s design is more than the home page. Your matrix might use a home page screenshot, but include it only if it represents the overall design of the website.
  • Do share your toys. Get team input about the placement of websites on the matrix. It’s not an altogether scientific approach, but be as objective as possible.
  • Don’t carve it in stone. Be open to recommendations from clients. Changing a matrix is easier than changing a comp.
  • Do use it to sell your work. Present the matrix as part of your comp presentation in order to explain your rationale and sell your comps.
  • Don’t matrix and run. Don’t abandon the matrix after the discovery process. Refer to it regularly.

Enjoy the process of creating a matrix and of seeing opportunities to design a distinctive website for your client.

Further Reading

(al) (vf)


© Bridge for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , ,

10 Tips for Newly-Hired Junior/Entry Level Designers

POSTED IN Blog | Comments Off on 10 Tips for Newly-Hired Junior/Entry Level Designers

As a recent hire myself, I understand the hardships of finding a job, the interview process, and working in a new environment. I’ve read plenty of articles on how to boost your resume or land a dream job, but I rarely find articles on what to do when you first start working. Here are some of the most useful tips I’ve learned so far that may be helpful for other novice designers:

10. Ask Questions

questions

It might seem intimidating to be in a new workplace. You can’t keep up with anyone’s names, let alone the occupation they hold within your company. And you don’t want to start off on the wrong foot. One issue I was a victim of was when to ask questions. You don’t want to seem stupid by asking a potentially simple question, yet you really need the help. My advice is to just go for it. Chances are, your co-workers or your boss will appreciate your desire to learn and will be glad to answer anything you have to ask, even if it might be a simple question. Most of the time they don’t even consider your questions stupid. They’re eager to take on that authority figure and lead you in the right direction. Just make sure you show that you are truly interested and listen carefully to what they have to say.

9. Take Notes

notes

As a designer, especially a junior one, you will constantly be getting feedback and tips. Maybe you’ll receive some cool pointers on shortcuts for Photoshop. Or maybe your boss will critique your design and provide information on things that would need to be changed. Making the mistake of not taking notes can affect your work efficiency. Not only does it show that you’re not really paying attention, it will come to bite you in the behind when you are left to edit your design and can’t remember all the changes that need to be made. So remember, keep a pen and notepad with you all the time. Don’t worry about not making eye contact if someone is giving you feedback. I think they can understand when you’re busy jotting notes down.

8.  Request Feedback

feedback

Showing that you’re eager to learn and eager to improve your skills is very important at a new job. Most companies who hire new graduates assume that they will have to do a lot of hand-holding and are prepared for that. Help make their lives easier by going to them and asking what you can improve on rather than sitting quietly at your desk and making them come to you when there’s an issue. It shows initiative and dedication when you seek the advice yourself instead of wait for it to fall into your lap. Doing so on a regular basis and not just once a month will also ensure that any kinks that do exist will be cleared up right away.

7. Get to know your co-workers

coworkers

Companies come in all shapes and sizes. But it’s up to you to choose whose opinions you value and who you look up to and strive to become. Just because someone is your boss doesn’t mean you can’t get to know them a little more personally. Or just because someone works in a different department than yours doesn’t mean you can’t say hi or make small talk. Designers don’t just stick to designers. What we do usually affects how the rest of the company runs too, and we are constantly working with other people to produce the best results. Make things less awkward by scheduling lunch with a co-worker, or a one-on-one session with your boss. Trust me, this will make those future meetings far easier to deal with. It’s also a time for you to talk about things you might not feel comfortable talking about in front of others. So really take advantage of these moments and schedule them consistently.

6. Be Social

social

This sounds simple enough but is overlooked more often than not. Junior or Entry Level designers are usually fresh out of college. Meaning, the youngest people in the company. Because of this, personalities and hobbies are usually different. Your boss might enjoy things such as yoga, baking, or spending time with her 2-year-old. You might enjoy things like going to bars, clubbing, and watching TV. This might make you hesitant to talk since you don’t have much in common with other people. But making the effort is what counts. Maybe show an interest in what your co-workers like to do and try one of their hobbies. Likewise, they might go to you to find the best bar to go to in town just for a night of fun. Just because personalities are different doesn’t mean it should be a social barrier. And next time there’s a company softball game or happy hour, sign up to go! It will be fun to see people outside of the work environment. And you’ll probably be surprised to learn that they really aren’t that different from yourself.

5.  Organize your files and layers

organize

As a designer, you’ll most likely be working with Photoshop and Illustrator or any other design program. The glory of these programs is that they allow you to layer your designs, making life oh-so-much easier. But organizing and renaming files can be a real pain. While it might be more comfortable for you to just work continuously without stopping to name your layers, you will need to think about other people. Sometimes you may be swamped with work and have to have someone else take over your project for you. Imagine what a hard time they’ll have when they open up the file and all they see are rows and rows of “Layer 45 copy.” Or what if your boss is looking at your design and asks for you to make a tweak on the spot? Don’t be caught in the embarrassment of digging through your layers to find the one that needs tweaking. Just be safe and name or group your layers as you create them. This makes working together on projects so much less painful.

4. Research your industry

research

Designers often make the mistake of thinking that since they specialize in design, they only stick to aesthetics and nothing else. That notion could not be more wrong. Design is usually closely related to marketing since what you create is generally seen by a large audience. You will need to think outside the box in your designs. What would you want to see if you were a customer looking at this design for the first time? What is the goal you want the customer to do? Thinking about your design from a marketing approach in addition to your creative approach is just as important. To get the best marketing knowledge, it’s also important to keep up with the fast-paced economy. Check the news every day to see if there are any changing trends within your industry. This will help keep you up to date for your designs and will allow you to keep up with everyone else. Don’t be the lone person who doesn’t know what everyone else is talking about. Be the first to know the news and bring it to everyone else’s attention.

3. Gather your assets and tools

collect_tools

Efficiency is key when it comes to working professionally. Deadlines are usually tight and timelines are short. Save time by compiling a list of resources you can refer to when you need them. Keep a list of websites to go to for swatches, or keep a folder of Photoshop brushes and patterns to use when you need them. Fonts are also a good asset to collect. Other examples are icons, vector art, gradient swatches, and shapes. If you don’t have a large library to choose from, ask your fellow design friends or co-workers. Everyone has different sites they go to and the larger the pool, the merrier. And don’t limit yourself to just tools. Gather a list of blogs or website tutorials that you enjoy and keep up with them. Tips on those sites may come in handy when you least expect it.

2. Be open to criticism and disagreements

criticism

You’ve probably heard the quote: “Everyone is a designer.” Or so they think. You will never win if you are looking for 100% happy campers. But there’s such thing as compromise. People who aren’t designers will sometimes tear your design apart because of different reasons. It doesn’t work with the marketing message, it doesn’t fit on the webpage, etc. Be prepared to change what you need and to have something you worked on and completely love be thrown out in favor of something else. Sometimes you win, sometimes you lose. But understand where they are coming from and keep the advice they give you in mind for your next design. It’s important to get everyone’s feedback, not just other designers’ feedback.

1. Don’t be afraid to voice your opinions

voice_opinions

Lastly, speak up! Yes you want to make everyone happy, especially those who control your income. But don’t be afraid to stand by your work. Sometimes people will have completely overlooked something and by speaking up, you will have brought something crucial to their attention. Or sometimes people will favor one thing over the other but hearing your opinion on why design A is better than design B will show your style and the fact that you defend what you care about. Although be sure you know your limit. There’s a line between making a point and being stubborn or opinionated. And if you ever have too much to do, or too little to do, tell someone. Don’t be scared that they’ll think that you’re lazy or that you can’t handle your workload. They’ll love the extra help, or they’ll love to help you. That’s what working at a company is. Working as a team.

I’m sure there are plenty more that can go on this list. But these are the 10 that have come most in handy thus far in my career. Feel free to share if you have any others you’ve thought of. Or maybe you have experienced some of these uncomfortable situations. Then share your experience and how you changed from it!

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



10 Tips for Newly-Hired Junior/Entry Level Designers

Compositing in Adobe Photoshop: Time-Saving Tips

POSTED IN Blog | Comments Off on Compositing in Adobe Photoshop: Time-Saving Tips

Advertisement in Compositing in Adobe Photoshop: Time-Saving Tips
 in Compositing in Adobe Photoshop: Time-Saving Tips  in Compositing in Adobe Photoshop: Time-Saving Tips  in Compositing in Adobe Photoshop: Time-Saving Tips

Compositing is a skill and process that spans the entire spectrum of creative industries. At the high end, compositing boasts its own specialized profession in film and television post production and visual effects. Dedicated software such as NUKE and Shake have taken the craft to powerful levels of its own, leaving behind the relatively basic compositing toolset of Adobe Photoshop. However, for many graphics practitioners compositing is a vital everyday process — and as with all pixel-pushing endeavors, Photoshop remains the entry point and hub to learning and ultimately mastering the fundamentals of this important skill.

In this article, I’ll share some of my own time-saving tips for compositing in Photoshop. Tips such as these should never replace a solid understanding of your craft; however, being able to adapt a technique to make it work for you is part of being a creative professional. I encourage you to share your own creative compositing tips in the comments to this article, and think about how you have adapted existing techniques to work for you.

Tip 1: Matching Tones, Channel by Channel

One of the challenges we face when compositing is matching the colors and tones of various images to produce a realistic and convincing composite. This method aims to save you from spending time fiddling around with color balances and layers upon layers of adjustments, by showing you a systematic approach that should become second nature and enhance your compositing skill set.

1 Images in Compositing in Adobe Photoshop: Time-Saving Tips
These are the three images we will composite together

In the following example, we will composite three people into one shot and address the differences in lighting, tone and color balance. I use this technique most often as a way of quickly grouping my subjects into a similar tonal range for further global color adjustments.

1 Placedimages in Compositing in Adobe Photoshop: Time-Saving Tips
Masked images placed on background

In the above image, I have masked out the images and placed them together on a background. (Read on for some time-saving tips on masking.)

The key to this technique is selecting one of the images as your target, and then matching the other two images to the tone and lighting of this target. Out of the three images, I like the colors, tones and contrast in figure 1 the most, so I’ve chosen it as our target.

Throughout this article, you will see that I am using Smart Objects. This is an excellent habit to get into when starting any Photoshop workflow. Smart Objects allow us to perform non-destructive transformations on a layer, as well as non-destructive filtering.

Visual Evaluation

We are now entering the exciting world of greyscale tonal evaluation, deep inside the channels of our RGB image — the bare bones of bitmap imaging. We are going to go through each channel of the image and simply try to match the greyscale luminence levels to the target layer:

1. In the Channels palette, solo the red channel by either clicking the channel or using the keyboard shortcut Cmd/Ctrl + 3. You should see the entire image in greyscale, representing the luminance values of red.

2. Select the layer for figure 2 and add a Curves adjustment layer just above it. Make this adjustment layer a clipping mask by Alt/Opt clicking between the two layers in the layer palette. You could also select the adjustment layer and use the keyboard shortcut Cmd/Ctrl + Alt/Opt + G. Now select the red channel inside Curves.

1 RedCurves in Compositing in Adobe Photoshop: Time-Saving Tips

3. Now make a quick, overall visual evaluation of the two images: make a point right in the middle of your curve. If the mid-tones in your target layer (figure 1) look darker than your current layer (figure 2), move the midpoint down to darken the layer to better match your target. If the tones in the target appear lighter than your current layer, move the midpoint up to lighten the layer and better match your target. Use small increments, and continuously use your eyes to evaluate the changes.

If things don’t look quite right still, locate the lightest shade of grey (but not white, as this could be a specular highlight — not something you want to factor in much, with compositing) on the target image, and do the same with figure 2. With your eyes darting between these two greyscale shades, move the white slider on the Curves dialog box until the shades visually match. Next, do exactly the same process with the darkest part of the image, moving the black slider in the Curves dialog.

1 RedAdjustments in Compositing in Adobe Photoshop: Time-Saving Tips
Curves adjustments for the red channel

4. Swap over to the blue channel, by either clicking the channel in the Channels palette or using the keyboard shortcut Cmd/Ctrl + 4. Select the blue channel within the Curves dialog box. Perform the same adjustment, starting by creating a center point on the curve, and dragging until the mid-tones in your image match those in the target.

1 BlueCurves in Compositing in Adobe Photoshop: Time-Saving Tips
Curves adjustments for the blue channel

5. Repeat these adjustments for the green channel. Click the green channel in the Channels palette or use the keyboard shortcut Cmd/Ctrl + 5.

1 GreenAdjustments in Compositing in Adobe Photoshop: Time-Saving Tips
Curves adjustments for the green channel

6. You can now revert back to your RGB composite image by selecting the RGB channel in the Channels palette, or by using the keyboard shortcut Cmd/Ctrl + 2, and review the changes you have made. It is sometimes necessary to reduce the opacity of the adjustment layer if the change has been too drastic. Toggle the visibility of the adjustment layer to see a “before” and “after” for your adjustment. As we are using adjustment layers, our changes are non-destructive, so it is always possible to go back into the channels and curves to make further adjustments at any time.

7. Now, repeat steps 1–6 for figure 3, adjusting the curves per channel as before.

1 BeforeAfter1 in Compositing in Adobe Photoshop: Time-Saving Tips
(From left) “before” and “after” adjustments to figure 2

1 BeforeAfter2 in Compositing in Adobe Photoshop: Time-Saving Tips
(From left) “before” and “after” adjustments to figure 3

The registered changes make an excellent starting point to a compositing task, providing the perfect platform for further color corrections and adjustments. It is very rare that the image will be perfect at this stage, but the images will be more homogeneous and in a better relative condition to each other than before.

1 Composite in Compositing in Adobe Photoshop: Time-Saving Tips

As you get more comfortable with this technique, start adding additional points to your curves by sampling tones from your image using the Curves sampler tool.

Tip 2: Gradient Map with Soft Light

Although this is not essentially a compositing technique, it is an especially useful adjustment to perform on a composited image, where the colors and tones often require this type of homogeneous tweaking and subtle realignment. This technique works well as a final adjustment to an image. It has the effect of bringing all colors and tones slightly closer together, whilst still retaining their independence and relevance to the whole image.

1. Add a new Gradient Map Adjustment layer on top of all other layers. You will want to make sure that the layer thumbnail is selected, and not the layer mask thumbnail which is usually selected as default.

2. Next, turn off the visibility of the gradient map layer by deselecting either the eyeball next to the layer, or the eyeball at the bottom of the Gradient Map Adjustment panel.

2 GradientLayer in Compositing in Adobe Photoshop: Time-Saving Tips
Open a Gradient Map Adjustment layer, turning off visibility

3. Click on the gradient bar in the gradient map dialog box to open up the gradient editor. As default the gradient map is set to a black to white gradient — not particularly useful for this technique, but actually quite handy at giving us an initial idea of the direction the dark to light tones we will select, should be going in.

We are going to set ten points on the gradient bar — with colors picked directly from our image — going from darkest to lightest. First, click on the black point of the gradient and hover over the image; you should see the Eyedropper tool. Locate the very darkest point of your image and click; if it is black or very close to black, you won’t see much change in your gradient map. Now click just below the gradient bar, a small space away from the gradient point you just changed, to add a new gradient point.

Don’t worry about the distance between the points at this stage; we can change this at the end. Hover over your image again, select the next darkest area, and click. Continue with this process, adding progressively lighter points to the gradient bar all the way down to the white point, changing that to the lightest color in your image. You should aim to have ten points in total, although a few more or less is fine. Try to space out the points evenly before pressing OK.

2 GradientSamples in Compositing in Adobe Photoshop: Time-Saving Tips
Sample ten colors from your image on the gradient bar

4. Turn on the visibility of the gradient map layer once more. You will probably see a frightening rendering of your carefully composited image, and you may be wondering now what you have just gone and done. Don’t worry; this is to be expected. Change the gradient map layer’s blending mode to Soft Light and reduce the opacity until you are happy with the image once more. Check the change by toggling the adjustment layer visibility on and off.

2 BeforeComposte in Compositing in Adobe Photoshop: Time-Saving Tips
Before
2 Composte1 in Compositing in Adobe Photoshop: Time-Saving Tips
After

Tip 3: Black & White Overlay

This is a great, quick trick for compositing that is perfect for those times when simply closing the job is a priority. The effect applies a stylized adjustment which tempers the colors in the image and increases contrast, especially useful in stylized shots such as sports imagery. The effect of the adjustment immediately makes the images more congruent, and this is what compositing is about.

1. Add a new Black & White adjustment layer above all layers you want to affect, and set the adjustment layer’s blending mode to Overlay.

3 Bw in Compositing in Adobe Photoshop: Time-Saving Tips
Add the Black & White adjustment layer

2. The great thing about the Black & White adjustment layer is the amount of control it gives you over the desaturation effect you have made. Adjust the color balances in the adjustment panel, and finally reduce the opacity of the layer to an effect you are happy with.

3 Composite in Compositing in Adobe Photoshop: Time-Saving Tips
Final image with Black & White adjustment layer (set to overlay)

Tip 4: Lighting Direction

Often, one of the most difficult aspects of compositing is dealing with the direction light is coming from. Different images may be lit with the same intensity, with the same coloring and within the same tonal range, yet if the direction of the light is different, it can be fatal to the realism of the image.

4 Images in Compositing in Adobe Photoshop: Time-Saving Tips

The images above will be composited into one shot with an efficient, non-destructive way of addressing light directionality.

4 Placed in Compositing in Adobe Photoshop: Time-Saving Tips
Masked images placed on background

Once masked and placed on the background, we can see that the light on the two buildings is coming from opposite directions. We could flip one of the buildings horizontally, but this is often not an option in cases where we need to preserve the original angle and direction of an image.

Painting Shadows and Highlights

We will choose the light direction we wish to maintain, out of the two, and only work on the layer which we need to change. There are a multitude of methods for painting in shadows, so my main piece of advice is: do it non-destructively. Try this method:

1. Add a new Curves adjustment layer above the layer you wish to affect. Make this adjustment layer a clipping mask by Alt/Opt clicking the line beneath the layer in the layer palette. You could also select the adjustment layer, and use the keyboard shortcut Cmd/Ctrl + Alt/Opt + G.

2. Make a point on the middle of the curve and move downwards to darken the layer. Fill the adjustment layer’s mask with black, and paint with a soft white brush into the layer mask to add shadow.

4 Shadow in Compositing in Adobe Photoshop: Time-Saving Tips
Shadow added to building

3. Reduce the opacity until you are happy with the effect. You can always paint back into the layer, or use lower-opacity brushes, to get the effect just right.

4. To neutralize the shadow which exists on the wrong side of this same building, repeat the process by adding another Curves adjustment layer and setting it as a clipping mask. Add a mid point to your curve and move the curve upward to lighten the image. Fill the adjustment layer mask with black, and paint with a white brush over the shadow you wish to remove. Reduce the opacity quite a lot, until the shadow is no longer prevalent.

Of course the composited image is still nowhere near perfect, but that change in lighting has made a difference which now lets us imagine these images could exist in the same world; that’s a great starting point for a compositing task.

4 Highlight1 in Compositing in Adobe Photoshop: Time-Saving Tips
Shadow is neutralized

Tip 5: Super-quick Previewing Using Blending Modes

Blending modes and tools offer a really powerful set of compositing features which can be used to speed up a lot of tasks. The following is a very simple trick which many people know about, but often forget.

Here is the scenario: you need to composite an image of a glass of milk on an image of a table.

5 Milk in Compositing in Adobe Photoshop: Time-Saving Tips5 Table in Compositing in Adobe Photoshop: Time-Saving Tips
Sourced images for compositing

You have sourced the images you think would work together, and you need to check if the glass will sit realistically on the table, if the angles will line up and if the perspective will be convincing. However, you are so squeezed for time that even a rough trace of the glass would take too long. Luckily for you, the glass of milk has a black background.

Removing Black or White

Photoshop offers ready-made blending modes for removing black and white from one layer placed on top of another. The Multiply blending mode will render white pixels transparent, while the Screen mode does the same with black pixels. Both blending modes will also affect how other tones in your layer interact with the layer below, so unless this effect is something you are going for, this technique is usually best used to preview images which are on solid black or white backgrounds. This is massively time saving, and is a great way of ensuring you are happy with the image before you commit to masking it out.

This can also help you when sourcing images for a time-sensitive task; knowing that solid black or white backgrounds can be so easily removed for previewing will help you identify the images most appropriate for your use.

5 CompositedGlass in Compositing in Adobe Photoshop: Time-Saving Tips
Preview of how the elements fit, using only blending modes

Tip 6: Masking

Masking out an image is key to almost all compositing workflows, and is often the most time-consuming, tedious part. You have two main areas of masking to choose from when an image needs to be isolated from its surroundings. Manual masking is the preferred method of most top graphics professionals: usually this means using the pen tool, brushing in Quick Mask mode, or using the images channels to create an Alpha Channel mask. Alternatively, automatic masking can be effected from an ever-increasing range of tools and third-party plug-ins within Photoshop. Which method you choose will often be determined by how much time you have, the complexity of the task and the intended use of the image.

Rather than going through every masking technique (there are plenty of resources out there, if you want to learn about how each tool works), here is a quick run down of some time savers.

Quick Mask for Web Imagery

It might sound obvious as a time-saving trick, but when you need to mask an image in super-quick time, the Quick Mask really can be a life saver. I use it for Web imagery, as the edge details will then not be so apparent at the fixed pixel view the user will have. It is also important to choose an image with decent contrast between your masking subject and its background, or the Quick Selection tool will not do a great job with really tough selections.

6 Quick-selection in Compositing in Adobe Photoshop: Time-Saving Tips
Quick Mask tool

Know Your Background Color

You can often save a lot of time masking, if you know and bear in mind what background your masked image will be composited on. Keep you goal in mind; when you need to get the job done, release your mind from the constraints of perfect masking and do the bare minimum!

Refine Edge

The Refine Edge tool set is a very powerful, non-destructive set of tools to help you refine any selection that is currently active. It can save you time, in fixing problem edges you may have encountered with other selection tools. The values in the Refine Edge dialog box remain constant from one adjustment to the next, meaning this tool can also be great for ensuring the edges of composited images have the same level of softness, smoothing and contrast.

For Photoshop CS5 only: Photoshop CS5 has a time- and frustration-saving tool lodged inside its Refine Edge feature which can yield outstanding results. When it comes to masking fine details, every designer will tell you that hair is the most challenging. The Edge Detection tool allows you to identify the unwanted colors in your image while intelligently masking edge details; it can effectively identify the finest hair details and mask them out in a non-destructive dialog box, with minimal work on your part, and do a very convincing job.

6 Refine-edge in Compositing in Adobe Photoshop: Time-Saving Tips
Refine Edge dialog box

Pen Tool

One thing I always do with the Pen tool, is keep a finger hovered over the Alt key; this is really useful as at any point, you can hold it down to move just one handle, and to freeze the corresponding handle in place. You can also Alt-click any point on your path to toggle between a corner point and a smooth point.

Conclusion

There is no shortcut to becoming proficient on your chosen tool or in your chosen craft, be it Photoshop or anything else; but once you have mastered a tool and understand its power, it is then up to you to do what you do best: be creative with it. This means looking at those everyday tasks you do, the time limitations you are faced with and your ability to improvise. Look under the hood once in a while, and be creative and inventive with everything you do!

Further reading

(wcp) (vf)


© Daniel Durrans for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces

POSTED IN Blog | Comments Off on “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces

Advertisement in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces  in What Font Should I Use?: Five Principles for Choosing and Using Typefaces  in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for. Here are five guidelines for picking and using fonts that I’ve developed in the course of using and teaching typography.

1. Dress For The Occasion

Many of my beginning students go about picking a font as though they were searching for new music to listen to: they assess the personality of each face and look for something unique and distinctive that expresses their particular aesthetic taste, perspective and personal history. This approach is problematic, because it places too much importance on individuality.

3000679399 6167208211 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
The most appropriate analogy for picking type. (Photo credit: Samuuraijohnny. Used under Creative Commons license.)

For better or for worse, picking a typeface is more like getting dressed in the morning. Just as with clothing, there’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion. While appropriateness isn’t a sexy concept, it’s the acid test that should guide our choice of font.

My “favorite” piece of clothing is probably an outlandish pair of 70s flare bellbottoms that I bought at a thrift store, but the reality is that these don’t make it out of my closet very often outside of Halloween. Every designer has a few favorite fonts like this — expressive personal favorites that we hold onto and wait for the perfect festive occasion to use. More often, I find myself putting on the same old pair of Levis morning after morning. It’s not that I like these better than my cherished flares, exactly… I just seem to wind up wearing them most of the time.

Every designer has a few workhorse typefaces that are like comfortable jeans: they go with everything, they seem to adapt to their surroundings and become more relaxed or more formal as the occasion calls for, and they just seem to come out of the closet day after day. Usually, these are faces that have a number of weights (Light, Regular, Bold, etc) and/or cuts (Italic, Condensed, etc). My particular safety blankets are: Myriad, Gotham, DIN,Akzidenz Grotesk and Interstate among the sans; Mercury, Electra and Perpetua among the serif faces.

Love-hate1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
A large type family like Helvetica Neue can be used to express a range of voices and emotions. Versatile and comfortable to work with, these faces are like a favorite pair of jeans for designers.

2. Know Your Families: Grouping Fonts

Type-mash2 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

The clothing analogy gives us a good idea of what kind of closet we need to put together. The next challenge is to develop some kind of structure by which we can mentally categorize the different typefaces we run across.

Typefaces can be divided and subdivided into dozens of categories (Scotch Modern, anybody?), but we only really need to keep track of five groups to establish a working understanding of the majority of type being used in the present-day landscape.

The following list is not meant as a comprehensive classification of each and every category of type (there are plenty of great sites on the web that already tackle this, such as Typedia’s type classifications) but rather as a manageable shorthand overview of key groups. Let’s look at two major groups without serifs (serifs being the little feet at the ends of the letterforms), two with serifs, and one outlier (with big, boxey feet).

1. Geometric Sans

Geometric1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

I’m actually combining three different groups here (Geometric, Realist and Grotesk), but there is enough in common between these groups that we can think of them as one entity for now. Geometric Sans-Serifs are those faces that are based on strict geometric forms. The individual letter forms of a Geometric Sans often have strokes that are all the same width and frequently evidence a kind of “less is more” minimalism in their design.

At their best, Geometric Sans are clear, objective, modern, universal; at their worst, cold, impersonal, boring. A classic Geometric Sans is like a beautifully designed airport: it’s impressive, modern and useful, but we have to think twice about whether or not we’d like to live there.

Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

2. Humanist Sans

Humanist1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

These are Sans faces that are derived from handwriting — as clean and modern as some of them may look, they still retain something inescapably human at their root. Compare the ‘t’ in the image above to the ‘t’ in ‘Geometric’ and note how much more detail and idiosyncrasy the Humanist ‘t’ has.

This is the essence of the Humanist Sans: whereas Geometric Sans are typically designed to be as simple as possible, the letter forms of a Humanist font generally have more detail, less consistency, and frequently involve thinner and thicker stoke weights — after all they come from our handwriting, which is something individuated. At their best, Humanist Sans manage to have it both ways: modern yet human, clear yet empathetic. At their worst, they seem wishy-washy and fake, the hand servants of corporate insincerity.

Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

3. Old Style

Old-style1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Also referred to as ‘Venetian’, these are our oldest typefaces, the result of centuries of incremental development of our calligraphic forms. Old Style faces are marked by little contrast between thick and thin (as the technical restrictions of the time didn’t allow for it), and the curved letter forms tend to tilt to the left (just as calligraphy tilts). Old Style faces at their best are classic, traditional, readable and at their worst are… well, classic and traditional.

Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond, which was considered so perfect at the time of its creation that no one really tried much to improve on it for a century and a half.

4. Transitional and Modern

Trans1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Modern1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

An outgrowth of Enlightenment thinking, Transitional (mid 18th Century) and Modern (late 18th century, not to be confused with mid 20th century modernism) typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic than the unassuming faces of the Old Style period. Transitional faces marked a modest advancement in this direction — although Baskerville, a quintessential Transitional typeface, appeared so sharp to onlookers that people believed it could hurt one’s vision to look at it.

In carving Modernist punches, type designers indulged in a kind of virtuosic demonstration of contrasting thick and thin strokes — much of the development was spurred by a competition between two rival designers who cut similar faces, Bodoni and Didot. At their best, transitional and modern faces seem strong, stylish, dynamic. At their worst, they seem neither here nor there — too conspicuous and baroque to be classic, too stodgy to be truly modern.

Examples of transitional typefaces: Times New Roman, Baskerville.
Examples of Modern serifs: Bodoni, Didot.

5. Slab Serifs

Slab1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Also known as ‘Egyptian’ (don’t ask), the Slab Serif is a wild card that has come strongly back into vogue in recent years. Slab Serifs usually have strokes like those of sans faces (that is, simple forms with relatively little contrast between thick and thin) but with solid, rectangular shoes stuck on the end. Slab Serifs are an outlier in the sense that they convey very specific — and yet often quite contradictory — associations: sometimes the thinker, sometimes the tough guy; sometimes the bully, sometimes the nerd; sometimes the urban sophisticate, sometimes the cowboy.

They can convey a sense of authority, in the case of heavy versions like Rockwell, but they can also be quite friendly, as in the recent favorite Archer. Many slab serifs seem to express an urban character (such as Rockwell, Courier and Lubalin), but when applied in a different context (especially Clarendon) they strongly recall the American Frontier and the kind of rural, vernacular signage that appears in photos from this period. Slab Serifs are hard to generalize about as a group, but their distinctive blocky serifs function something like a pair of horn-rimmed glasses: they add a distinctive wrinkle to anything, but can easily become overly conspicuous in the wrong surroundings.

Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Don’t Be a Wimp: The Principle of Decisive Contrast

So, now that we know our families and some classic examples of each, we need to decide how to mix and match and — most importantly — whether to mix and match at all. Most of the time, one typeface will do, especially if it’s one of our workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it exactly the same, or change it a lot — avoid wimpy, incremental variations.

This is a general principle of design, and its official name is correspondence and contrast. The best way to view this rule in action is to take all the random coins you collected in your last trip through Europe and dump them out on a table together. If you put two identical coins next to each other, they look good together because they match (correspondence). On the other hand, if we put a dime next to one of those big copper coins we picked up somewhere in Central Europe, this also looks interesting because of the contrast between the two — they look sufficiently different.

What doesn’t work so well is when put our dime next to a coin from another country that’s almost the same size and color but slightly different. This creates an uneasy visual relationship because it poses a question, even if we barely register it in on a conscious level — our mind asks the question of whether these two are the same or not, and that process of asking and wondering distracts us from simply viewing.

When we combine multiple typefaces on a design, we want them to coexist comfortably — we don’t want to distract the viewer with the question, are these the same or not? We can start by avoiding two different faces from within one of the five categories that we listed above all together — two geometric sans, say Franklin and Helvetica. While not exactly alike, these two are also not sufficiently different and therefore put our layout in that dreaded neither-here-nor-there place.

Wimpy3 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face. Centuries apart in age and light years apart in terms of inspiration, Helvetica and Bembo have enough contrast to comfortably share a page:

Bump9 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Unfortunately, it’s not as simple as just picking fonts that are very, very different — placing our candy cane font next to, say, Garamond or Caslon does not guarantee us typographic harmony. Often, as in the above example of Helvetica and Bembo, there’s no real explanation for why two faces complement each other — they just do.

But if we want some principle to guide our selection, it should be this: often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.

Gill3 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

4. A Little Can Go a Long Way

‘Enough with all these conventional-looking fonts and rules!’ you say. ‘I need something for my rave flyer! And my Thai restaurant menu! And my Christmas cards!’ What you’re pointing out here is that all the faces I’ve discussed so far are ‘body typefaces’, meaning you could conceivably set a whole menu or newspaper with any of them; in the clothing analogy presented in part one, these are our everyday Levis. What of our Halloween flares?

Periodically, there’s a need for a font that oozes with personality, whether that personality is warehouse party, Pad Thai or Santa Claus. And this need brings us into the vast wilderness of Display typefaces, which includes everything from Comic Sans to our candy-cane and bunny fonts. ‘Display’ is just another way of saying ‘do not exceed recommended dosage‘: applied sparingly to headlines, a display font can add a well-needed dash of flavor to a design, but it can quickly wear out its welcome if used too widely.

Time for another clothing analogy:

Gurtel in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
(Photo credit: Betsssssy. Used under Creative Commons license.)

Betsey’s outfit works because the pink belts acts as an accent and is offset by the down-to-earthiness of blue jeans. But if we get carried away and slather Betsey entirely in pink, she might wind up looking something like this:

2241062332 6feb6c62b6-300x199 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces
(Photo credit: Phillip Leroyer). Used under Creative Commons license.)

Let’s call this the Pink Belt Principle of Type: display faces with lots of personality are best used in small doses. If we apply our cool display type to every bit of text in our design, the aesthetic appeal of the type is quickly spent and — worse yet — our design becomes very hard to read. Let’s say we’re designing a menu for our favorite corner Thai place. Our client might want us to use a ‘typically’ Asian display face, like Sho:

Menu-0 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

So far, so good. But look what happens when we apply our prized font choice to the entire menu:

Menu-v1 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Enough already. Let’s try replacing some of the rank-and-file text copy with something more neutral:

Menu-v21 in What Font Should I Use?: Five Principles for Choosing and Using Typefaces

That’s better. Now that we’ve reined in the usage of our star typeface, we’ve allowed it to shine again.

5. Rule Number Five Is ‘There Are No Rules’

Really. Look hard enough and you will find a dazzling-looking menu set entirely in a hard-to-read display font. Or of two different Geometric Sans faces living happily together on a page (in fact, just this week I wound up trying this on a project and was surprised to find that it hit the spot). There are only conventions, no ironclad rules about how to use type, just as there are no rules about how we should dress in the morning. It’s worth trying everything just to see what happens — even wearing your Halloween flares to your court date.

In Conclusion

Hopefully, these five principles will have given you some guidelines for how to select, apply and mix type — and, indeed, whether to mix it at all. In the end, picking typefaces requires a combination of understanding and intuition, and — as with any skill — demands practice. With all the different fonts we have access to nowadays, it’s easy to forget that there’s nothing like a classic typeface used well by somebody who knows how to use it.

Some of the best type advice I ever received came early on from my first typography teacher: pick one typeface you like and use it over and over for months to the exclusion of all others. While this kind of exercise can feel constraining at times, it can also serve as a useful reminder that the quantity of available choices in the internet age is no substitute for quality.

Other Resources

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

(ik) (vf)


© Dan Mayer for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

What To Do When Your Website Goes Down

POSTED IN Blog | Comments Off on What To Do When Your Website Goes Down

Advertisement in What To Do When Your Website Goes Down
 in What To Do When Your Website Goes Down  in What To Do When Your Website Goes Down  in What To Do When Your Website Goes Down

Have you ever heard a colleague answer the phone like this: “Good afterno… Yes… What? Completely?… When did it go down?… Really, that long?… We’ll look into it right away… Yes, I understand… Of course… Okay, speak to you soon… Bye.” The call may have been followed by some cheesy ’80s rock ballad coming from the speaker phone, interrupted by “Thank you for holding. You are now caller number 126 in the queue.” That’s your boss calling the hosting company’s 24 hour “technical support” line.

An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned “Linux” on your CV. You need to take action. Your company needs you. Your client needs you. Here’s what to do.

1. Check That It Has Actually Gone Down

Don’t take your client’s word for it. Visit the website yourself, and press Shift + Refresh to make sure you’re not seeing a cached version (hold down Shift while reloading or refreshing the page). If the website displays fine, then the problem is probably related to your client’s computer or broadband connection.

If it fails, then visit a robust website, such as google.com or bbc.co.uk. If they fail too, then there is at least an issue with your own broadband connection (or your broadband company’s DNS servers). Chances are that you and your client are located in the same building and the whole building has lost connectivity, or perhaps you have the same broadband company and its engineers have taken the day off. You will need to check the website on your mobile phone or phone a friend. To be doubly sure, ask your friend to check Where’s It Up? or Down for Everyone or Just Me?, which will confirm whether your website is down just for you or for everyone.

If the website is definitely down, then frown confusedly and keep reading. A soft yet audible sigh would also be appropriate. You might want to locate the documents or emails that your Internet hosting service sent you when you first signed up with it. It should have useful details such as your IP address, control panel location, log-in details and admin and root passwords; these will come in handy.

2. Figure Out What Has Gone Down

A website can appear to have gone down mainly for one of the following reasons:

  • A programming error on the website,
  • A DNS problem, or an expired domain,
  • A networking problem,
  • Something on the server has crashed,
  • The whole server has crashed.

To see whether it’s a programming error, visit the website and check the status bar at the bottom of your browser. If it says “Done” or “Loaded,” rather than “Waiting…” or “Connecting…,” then the server and its software are performing correctly, but there is a programming error or misconfiguration. Check the Apache error log for clues.

Otherwise, you’ll need to run some commands to determine the cause. On a Mac with OS X or above, go to Applications → Utilities and run Terminal. On a PC with Windows, go to Start → All Programs → Accessories and choose “Command Prompt.” If you use Linux, you probably already know about the terminal; but just in case, on Ubuntu, it’s under Applications → Accessories.

The first command is ping, which sends a quick message to a server to check that it’s okay. Type the following, replacing the Web address with something meaningful to you, and press “Enter.” For all of the commands in this article, just type the stuff in the grey monospaced font. The preceding characters are the command prompt and are just there to let you know who and where you are.

C:\> ping www.stockashop.co.uk

If the server is alive and reachable, then the result will be something like this:

Reply from 92.52.106.33:
bytes=32 time=12ms TTL=53

Linux-commands-ping1 in What To Do When Your Website Goes Down
Ping command from a Windows computer.

On Windows, it will repeat four times, as above. On Linux and Mac, each line will start with 64 bytes from and it will repeat indefinitely, and you’ll need to press Control + C to stop it.

The four-part number in the example above is your server’s IP address. Every computer on the Internet has one. At this stage, you can double-check that it is the correct one. You’ll need to have a very good memory, or refer to the documentation that your hosting company sent you when you first signed up with it. (This article does not deal with the newish eight-part IPv6 addresses.)

For instance, my broadband company is sneaky and tries to intercept all bad requests so that it can advertise to me when I misspell a domain name in the Web browser. In this case, the ping looks successful but the IP address is wrong:

64 bytes from advancedsearch.virginmedia.com
(81.200.64.50): icmp_seq=1 ttl=55 time=26.4 ms

Note that ping might also show the server name in front of the IP address (advancedsearch.virginmedia.com in this case). Don’t worry too much if it doesn’t match the website you are pinging — a server can have many names. The IP address is more important.

Assuming you’ve typed the domain name correctly, a bad IP address indicates that the domain name could have expired or that somebody has made a mistake with its DNS settings. If you receive something like unknown host, then it’s definitely a domain name issue:

ping: unknown host www.nosuchwebsite.fr

In this case, use a website such as Who.is to verify the domain registration details, or run the whois command from Linux or Mac. It will at least tell you when it expired, who owns it and where it is registered. The Linux and Mac commands host and nslookup are also useful for finding information about a domain. The nslookup command in particular has many different options for querying different aspects of a domain name:

paul@MyUbuntu:~$ whois stockashop.co.uk
paul@MyUbuntu:~$ host stockashop.co.uk
paul@MyUbuntu:~$ nslookup stockashop.co.uk
paul@MyUbuntu:~$ nslookup -type=soa stockashop.co.uk

If nothing happens when you ping, or you get something like request timed out, then you can deepen your frown and move on to step three.

Linux-commands-no-response in What To Do When Your Website Goes Down
What a non-responding server looks like in a Linux terminal.

Alternatively, if your server replied with the correct IP address, then you can exhale in relief and move on to step five.

Note that there are plenty of websites such as Network-Tools.com that allow you to ping websites. However, using the command line will impress your colleagues more, and it is good practice for the methods in the rest of this article.

3. How Bad Is It?

If your ping command has timed out, then chances are your whole server has crashed, or the network has broken down between you and the server.

If you enjoy grabbing at straws, then there is a small chance that the server is still alive and has blocked the ping request for security reasons — namely, to prevent hackers from finding out it exists. So, you can still proceed to the next step after running the commands below, but don’t hold your breath.

To find out if it is a networking issue, use traceroute on Mac or Linux and tracert on a PC, or use the trace option on a website such as Network-Tools.com. On Mac and Linux type:

paul@MyUbuntu:~$ traceroute www.stockashop.co.uk

On Windows:

C:\> tracert www.stockashop.co.uk

Traceroute traces a route across the Internet from your computer to your server, pinging each bit of networking equipment that it finds along the way. It should take 8 to 20 steps (technically known as “hops”) and then time out or show a few asterisks (*). The number of steps depends on how far away the server is and where the network has broken down.

The first couple of steps happens in your office or building (indicated by IP addresses starting with 192.68 or 10). The next few belong to your broadband provider or a big telecommunications company (you should be able to tell by the long name in front of the IP address). The last few belong to your hosting company. If your server is alive and well, then the very last step would be your server responding happily and healthily.

Linux-commands-traceroute in What To Do When Your Website Goes Down
Traceroute on a Mac, through the broadband company and host to an unresponsive server.

Barring a major networking problem, like a city-wide power outage, traceroute will reach your hosting company. Now, you just need to determine whether only your server is ill or a whole rack or room has gone down.

You can’t tell this just from traceroute, but chances are the servers physically next to yours have similar IP addresses. So, you could vary the last number of your server’s IP address and check for any response. If your server’s IP address is 123.123.123.123, you could try:

C:\> ping 123.123.123.121
C:\> ping 123.123.123.122
C:\> ping 123.123.123.124
C:\> ping 123.123.123.125

If you discover that the server is in the middle of a range of 10 to 20 IP addresses that are all broken, then it could well indicate a wider networking issue deep within the air-conditioned, fireproof bunker that your server calls home. It is unlikely that the hosting company would leave so many IP addresses unused or that the addresses would have all crashed at the same time for different reasons. It is likely, though not definitive, that a whole rack or room has been disconnected or lost power… or burned down.

Alternatively, if nearby IP addresses do reply, then only your server is down. You can proceed to the next step anyway and hope that the cause is that your server is very secure and is blocking ping requests. Perhaps upgrade that deep frown to a pronounced grimace.

Otherwise, you’ll have to keep listening to Foreigner until your hosting company answers the phone. It is the only one that can fix the network and/or restart the server. But at least you now have someone else to blame. And if you are number 126 in the queue, it’s probably because 125 other companies think their websites have suddenly gone down, too.

4. Check Your Web Server Software

If the server is alive but just not serving up websites, then you can make one more check before logging onto the server. Just as your office computer has a lot of software for performing various tasks (Photoshop, Firefox, Mac Mail, Microsoft Excel, etc.), so does your server. Arguably its most important bit of software is the Web server, which is usually Apache on Linux servers and IIS on Windows servers. (From here on in, I will refer to it as “Web server software,” because “Web server” is sometimes used to refer — confusingly — to the entire server.)

When you visit a website, your Web browser communicates with the Web server software behind the scenes, sharing caching information, sending and receiving cookies, encrypting and decrypting, unzipping and generally managing your browsing experience.

You can bypass all of this and talk directly to the Web server software by using the telnet command, available on Windows, Linux and Mac. It will tell you conclusively whether your Web server software is alive. The command ends with the port, which is almost always 80:

ping@MyUbuntu:~$ telnet www.stockashop.co.uk 80

If all were well, then your Web server software would respond with a couple of lines indicating that it is connected and then wait for you to tell it what to do. Type something like this, followed by two blank lines:

GET / HTTP/1.1
Host: www.stockashop.co.uk

The first / tells it to get your home page; you could also say GET /products/index.html or something similar. The Host line tells it which website to return, because your server might hold many different websites. If your website were working, then your Web server software would reply with some headers (expiry, cookies, cache, content type, etc.) and then the HTML, like this:

Linux-commands-telnet3 in What To Do When Your Website Goes Down
Checking the web server software with telnet.

But because there is a problem, telnet will either not connect (indicating that your Web server software has crashed) or not respond (indicating that it is misconfigured). Either way, you’ll need to keep reading.

5. Logging Into Your Server

The remote investigations are now over, and it’s time to get up close and personal with your errant server.

First, check your server’s documentation to see whether the server has a control panel, such as Plesk or cPanel. If you’re lucky, it will still be working and will tell you what is wrong and offer to restart it for you (in Plesk, click Server → Service Management).

Linux-commands-plesk in What To Do When Your Website Goes Down
If your server has a control panel such as Plesk, try logging in to make sure the Web server is running.

If not, then the following commands apply to dedicated Linux servers. You could try them in shared hosting environments, but they probably won’t work. Windows servers are a different kettle of fish and won’t be addressed in this article.

To log in and run commands on the server, you will need the administrative user name and password and the root password, as provided by your host. For shared hosting environments, an FTP user name and password might work.

On Linux and Mac, the command to run is ssh, which stands for “secure shell” and which allows you to securely connect to and run commands on your server. You will need to add your administrative user name to the command after -l, which stands for “login”:

paul@MyUbuntu:~$ ssh -l admin www.stockashop.co.uk

Windows doesn’t come with ssh, but you can easily download a Windows SSH client such as Putty. Download putty.exe, save it somewhere and run it. Type your website as the host name and click “Open.” It will ask you who to log in as and then ask for your password.

Linux-commands-putty in What To Do When Your Website Goes Down
Using Putty to SSH from a Windows computer.

Once you have successfully logged in, you should see something like admin@server$, followed by a flashing or solid cursor. This is the Linux command line, very similar to the Terminal or command prompt used above, except now you are actually on the server; you are a virtual you, floating around in the hard drive of your troubled server.

If ssh didn’t even connect, then it might be blocked by a firewall or turned off on the server. If it said Permission denied, then you’ve probably mistyped the user name or password. If it immediately said Connection to www.stockashop.co.uk closed, then you are trying to log in with a user name that is not allowed to run commands; make sure you’re logging in as the administrative user and not an FTP user.

6. Has It Run Out Of Space?

Your server has likely not run out of hard disk space, but I’m putting this first because it’s a fairly easy problem to deal with. The command is df, but you can add -h to show the results in megabytes and gigabytes. Type this on the command line:

admin@server$ df -h

The results will list each file system (i.e. hard drive or partition) and show the percentage of each that has been used.

Linux-commands-dfh in What To Do When Your Website Goes Down
Checking hard disk usage on a Linux server.

If any of them show 100% usage, then the command probably took eons to type, and you will need to free up some space fast.

Quick Fix

You should still be able to FTP to the server and remove massive files that way. A good place to start is the log files and any back-up directories you have.

You could also try running the find command to search for and remove huge files. This command finds files bigger than 10 MB and lets you scroll through the results one page at a time. You might need to run it as root to avoid a lot of permission denied messages (see below for how to do this). It might also take a long time to run.

root@server# find / -size +10000000c | more

You could also restrict the search to the full partition or to just your websites, if you know where they are:

root@server# find /var/www/vhosts/ -size +10000000c | more

If you want to know just how big those files are, you can add a formatting sequence to the command:

root@server# find /var/www/vhosts -size +10000000c -printf "%15s %p\n"

When you’ve found an unnecessarily big file, you can remove it with rm:

root@server# rm /var/www/vhosts/badwebsite.com/backups/really-big-and-old-backup-file.tgz

Permanent Fix

Clearing out back-ups, old websites and log files will free up a lot of space. You should also identify any scripts and programs that are creating large back-up files. You could ask your host for another hard drive.

7. Has It Run Out Of Memory?

Your server might just be running really, really slowly. The free command will let you know how much memory it is using. Add -m to show the results in megabytes.

admin@server$ free -m

The results will show how much of your memory is in use.

Linux-commands-freem in What To Do When Your Website Goes Down
Checking memory usage on a Linux server.

The results above say that the server has 3550 MB, or 3.5 GB, of total memory. Linux likes to use as much as possible, so the 67 MB free is not a problem. Focus on the buffers/cache line instead. If most of this is used, then your server may have run out of workable memory, especially if the swap space (a bit of the hard drive that the server uses for extra memory) is full, too.

If your server has run out of memory, then the top command will identify which bit of software is being greedy.

admin@server$ top

Every few seconds, this gives a snapshot of which bits of software are running, which user started them and how much of your memory and CPU each is using. Unfortunately, this will run very slowly if memory is low. You can press “Q” or Control + C to exit the command.

Linux-commands-top in What To Do When Your Website Goes Down
The Linux top command shows what is running.

Each of the bits of software above is known as a “process.” Big pieces of software such as Apache and MySQL will often have a parent process with a lot of child processes and so could appear more than once in the list. In this benign example, a child process of the Apache Web server is currently the greediest software, using 7.6% of the CPU and 1.6% of the memory. The view will refresh every three seconds. Check the Mem column to see whether anything is consistently eating up a large portion of the memory.

Quick Fix

The quickest solution is to kill the memory hog. You will need to be root to do this (unless the process is owned by you — see below). First of all, though, search on Google to find out what exactly you are about to kill. If you kill a core program (such as the SSH server), you’ll be back to telephone support. If you kill your biggest client’s data amalgamation program, which has been running for four days and is just about to finish, then the client could get annoyed, despite your effort to sweeten it with “But your website is okay now!”

If the culprit is HTTPD or Apache or MySQLd, then skip to the next section, because those can be restarted more gracefully. In fact, most things can be restarted more gracefully, but this is a quick ignore-the-consequences type of fix.

Find the process ID in the PID column of the command above, and type kill -9, followed by the number. For example:

root@server# kill -9 23421

The -9 tells it to stop completely and absolutely. You can now run top again to see whether it has made a difference. If some other similar process has jumped to the memory-eating position instead, then you’ve probably only stopped a child process, and you will need to find the parent process that spawned all the greedy children in the first place, because stopping the parent will stop all the children, too. Use the process ID again in this command:

root@server# ps -o ppid,user,command 23421

This asks Linux to show you the parent process ID, user and command for the process number 23421. The results will look like this:

PPID  USER     COMMAND
31701 apache   /usr/sbin/httpd

The PPID is the parent process ID. Now try killing this one:

root@server# kill -9 31701

Run top again. Hopefully, the memory usage has now returned to normal. If the parent process ID was 0, then some other process entirely is consuming memory, so run top again.

Permanent Fix

You will probably have to restart the offending software at some point because you may have just disabled your server’s SPAM filter or something else important. If the problem was with Apache or MySQL, you might have an errant bit of memory-eating programming somewhere, or Apache, MySQL or PHP might have non-optimal memory limits. There’s a slim chance that you have been hacked and that your server is slow because it’s sending out millions of emails. Sometimes, though, a server has reached capacity and simply needs more RAM to deal with the afternoon rush.

To find out what went wrong in the first place, check the web logs and/or the log files in /var/log/. When your hosting company has finally answered the phone, you can ask it to also take a look. Figuring out what happened is important because it could well happen again, especially if it’s a security issue. If the hosting company is not responsive or convincing enough, seek other help.

8. Has Something Crashed?

Most Linux servers use Apache for the Web server software and MySQL for the database. It is easy to see whether these are still running (and to restart them if they’re not) or are using up way too much memory. To see all processes running on your server right now, run this command:

admin@server$ ps aux | more

Scroll through the list and look for signs of apache (or its older name httpd) and mysqld (the “d” stands for daemon and is related to the way the programs are run). You are looking for something like this:

USER       PID %CPU %MEM   VSZ   RSS TTY     STAT START   TIME COMMAND
apache   29495  0.5  1.4 90972 53772 ?       S    14:00   0:02 /usr/sbin/httpd
apache   29683  0.3  1.4 88644 52420 ?       S    14:03   0:00 /usr/sbin/httpd
apache   29737  0.3  1.4 88640 52520 ?       S    14:04   0:00 /usr/sbin/httpd

Or you can use the grep command to filter results:

admin@server$ ps aux | grep http
admin@server$ ps aux | grep mysql

If either Apache or MySQL is not running, then this is the source of the problem.

Linux-commands-psmore in What To Do When Your Website Goes Down
This listing shows that Apache is indeed running.

Quick Fix

If Apache or MySQL is not running, then you’ll need to run the commands below as root (see below). Linux usually has a set of scripts for stopping and starting its major bits of software. You first need to find these scripts. Use the ls command to check the couple of places where these scripts usually are:

root@server# ls /etc/init.d/

If the results include a lot of impressive-looking words like crond, httpd, mailman, mysqld and xinetd, then you’ve found the place. If not, try somewhere else:

root@server# ls /etc/rc.d/init.d/

Or use find to look for them:

root@server# find /etc -name mysqld

Once it is located, you can run a command to restart the software. Note that the scripts might have slightly different names, like apache, apache2 or mysql.

root@server# /etc/init.d/httpd restart
root@server# /etc/init.d/mysqld restart

Hopefully, it will say something like Stopping… Starting… Started. Your websites will start behaving normally again!

Permanent Fix

As above, check the log files, especially the Apache error logs. Sometimes these are all in one place, but usually each website on the server has its own error log. You could look through the ones that were busiest around the time of the crash. Or else you could have a misconfiguration or a programming bug or security breach, so it could well happen again until you identify and address the cause.

Becoming a Super-User

Most of the fixes above require special permissions. For example, you (i.e. the user you have logged in as) will be able to kill or restart processes only if you started them. This can happen on shared servers but is unlikely on dedicated servers, where you will see a lot of permission denied messages. So, to run those commands, you will need to become the server’s super-user, usually known as “root.” I’ve left this for last because it’s dangerous. You can do a lot of irreversible damage as root. Please don’t remove or restart anything unless you’re sure about it, and don’t leave your computer unattended.

There are two ways to run a command as root. You can prefix each command with sudo, or you can become root once and for all by typing su. Different servers place different restrictions on these commands, but one of them should work. The sudo command is more restrictive when it turns you into a lesser non-root super-user who is able to run some commands but not others. Both commands will ask for an extra password. For example:

admin@server$ sudo /etc/init.d/httpd restart

When you run su successfully, the prompt will change from a $ to a #, like this:

admin@server$ su
Password:
admin@server#

It might say admin@server or root@server. Either way, the # means that you are powerful and dangerous — and that you assume full liability for your actions.

Conclusion

This article has provided a few tips for recognizing and solving some of the most common causes of a website going down. The commands require some technical knowledge — or at least courage — but are hopefully not too daunting. However, they cover only a small subset of all the things that can go wrong with a website. You will have to rely on your hosting company if it is a networking issue, hardware malfunction or more complicated software problem.

Personally, I don’t mind the ’80s music that plays while I’m on hold with my hosting company. It’s better than complete silence or a marketing message. But it would be even better if the support rep picked up the phone within a few seconds and was ready to help. That is ultimately the difference between paying $40 per month for a dedicated server versus $400.

When the dust has settled, this might be a conversation worth having with your boss — the one still sitting glumly by the phone, eyeing your frown, and waiting for Bono to stop warbling.

(al)


© Paul Tero for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , ,

Why We Should Start Using CSS3 and HTML5 Today

POSTED IN Blog | Comments Off on Why We Should Start Using CSS3 and HTML5 Today

Advertisement in Why We Should Start Using CSS3 and HTML5 Today
 in Why We Should Start Using CSS3 and HTML5 Today  in Why We Should Start Using CSS3 and HTML5 Today  in Why We Should Start Using CSS3 and HTML5 Today

For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset.

Adjustment in Progress

Sorry if any bubbles are bursting here, but we have to wake up to the fact that full cross-browser support of new technologies is just not going to happen. Some users will still use older browsers and some users will still have browsers with deactivated JavaScript or images; some users will be having weird view port sizes and some will not have certain plugins installed.

But that’s OK, really.

The Web is a damn flexible medium, and rightly so. We should embrace its flexibility rather than trying to set boundaries for the available technologies in our mindset and in our designs. The earlier we start designing with the new technologies, the quicker their wide adoption will progress and the quicker we will get by the incompatibility caused by legacy browsers. More and more users are using more advanced browsers every single day, and by using new technologies, we actually encourage them to switch (if they can). Some users will not be able to upgrade, which is why our designs should have a basic fallback for older browsers, but it can’t be the reason to design only the fallback version and call it a night.

Selectivzr in Why We Should Start Using CSS3 and HTML5 Today
Select[ivizr] is one of the many tools that make it possible to use CSS3 today.

There are so many remarkable things that we, designers and developers, can do today: be it responsive designs with CSS3 media queries, rich Web typography (with full support today!) or HTML5 video and audio. And there are so many useful tools and resources that we can use right away to incorporate new technologies in our designs while still supporting older browsers. There is just no reason not to use them.

We are the ones who can push the cross-browser support of these new technologies, encouraging and demanding the new features in future browsers. We have this power, and passing on it just because we don’t feel like there is no full support of them yet, should not be an option. We need to realize that we are the ones putting the wheels in motion and it’s up to us to decide what will be supported in the future browsers and what will not.

More exciting things will be coming in the future. We should design for the future and we should design for today — making sure that our progressive designs work well in modern browsers and work fine in older browsers. The crucial mistake would be clinging to the past, trying to work with the old nasty hacks and workarounds that will become obsolete very soon.

We can continue to cling to this notion and wait for older browsers to become outdated, thereby selling ourselves and our potential short, or we can adjust our way of thinking about this and come at the Web from a whole new perspective. One where we understand the truth of the situation we are faced with. That our designs are not going to look the same in every browser and our code will not render the same in every browser. And that’s the bottom line.

Yaili-24ways in Why We Should Start Using CSS3 and HTML5 Today
Yaili’s beautiful piece My CSS Wishlist on 24ways. Articles like these are the ones that push the boundaries of web design and encourage more innovation in the industry.

Andy Clarke spoke about this at the DIBI Conference earlier this year (you can check his presentation Hardboiled Web Design on Vimeo). He really struck a nerve with his presentation, yet still we find so many stalling in this dream of complete Web standardization. So we wanted to address this issue here and keep this important idea being discussed and circulated. Because this waiting is not only hurting those of us working with the Web, but all of those who use the Web as well. Mainly through this plethora of untapped potential which could improve the overall experience across the spectrum for businesses, users and those with the skills to bring this sophisticated, rich, powerful new Web into existence.

For Our Clients

Now this will mean different things for different players in the game. For example, for our clients this means a much more developed and uniquely crafted design that is not bound by the boxes we have allowed our thinking to be contained in. However, this does come with a bit of a compromise that is expected on the parts of our clients as well. At least it does for this to work in the balanced and idealized way these things should play out. But this should be expected. Most change does not come without its compromises.

In this case, our clients have to accept the same truism that we do and concede that their projects will not look the same across various browsers. This is getting easier to convince them of in these times of the expanding mobile market, but they may still not be ready to concede this inch on the desktop side of the coin. Prices might be adjusted in some cases too, and that may be another area that the clients are not willing to accept. But with new doors being opened and more innovation, comes more time and dedicated efforts. These are a few of the implications for our clients, though the expanded innovation is where we should help them focus.

In short:

  • Conceding to the idea that the project will not be able to look the same across various browsers,
  • This means more developed and unfettered imaginative designs for our clients,
  • This could lead to increased costs for clients as well, but with higher levels of innovation and
  • Client’s visions for what they want will be less hindered by these limitations.

For the Users

The users are the ones who have the least amount invested in most of what is going on behind the scenes. They only see the end result, and they often do not think too much about the process that is involved which brings it to the screens before them. Again, with the mobile market, they have already come across the concept of varying interfaces throughout their varied devices. They only care about the functionality and most probably the style that appeals to them — but this is where their interest tends to end. Unless of course, they too are within the industry, and they may give it a second thought or more. So all this talk of cross-browser compatibility really doesn’t concern them, they really leave all that up to us to worry about.

Users only ever tend to notice anything if and when something does not work the way they expect it to from one place to the next. In most cases, they are willing to show something to a relative, friend or colleague, and suddenly from one device to the next, something is different that disrupts their ability to do so. That is when they actually take notice. But if we have done our jobs correctly, these transitions will remain smooth — even with the pushing of the envelopes that we are doing. So there is not much more that is going to change for the users other than a better experience. Average user is not going to check if a given site has the same rounded corners and drop-shadow in two different browsers installed on the user’s machine.

In short:

  • Potentially less disruptions of experience from one device to another and
  • An overall improved user experience.

For Designers/Developers

We, the designers and developers of the Web, too have to make the same concession our clients do and surrender the effort to craft the same exact presentation and experience across the vast spectrum of platforms and devices. This is not an easy idea to give up for a lot of those playing in these fields, but as has been already mentioned, we are allowing so much potential to be wasted. We could be taking the Web to new heights, but we allow ourselves to get hung up on who gets left behind in the process — and as a result we all end up getting left behind. Rather than viewing them as separate audiences and approaching them individually, so to speak, we allow the limitations of one group to limit us all.

Divide in Why We Should Start Using CSS3 and HTML5 Today
Perhaps a divide and conquer mentality should be employed. Image Credit

So this could mean a bit more thought for the desired follow through, and we are not suggesting that we strive to appease one group here and damn the rest. Instead, we should just take a unified approach, designing for those who can see and experience the latest, and another for those who cannot. It wouldn’t mean more work if we design with those users in mind and produce meaningful and clean code up front and then just adjust it for older browsers. Having to remember that not everyone is afforded the privilege of choosing which browser they are using. And if necessary, this approach can be charged for. So it could lead to more revenue along with exciting new opportunities — by bringing some of the fun back into the work that being boxed in with limitations has robbed us of.

In short:

  • Conceding to the idea that the project will not be able to look the same across various browsers,
  • A more open playing field for designers and developers all around; less restricted by this holding pattern,
  • More exciting and innovative landscape to attract new clientele,
  • Division of project audience into separate presentational approaches and
  • Probably less work involved because we don’t need the many hacks and workarounds we’ve used before.

So What Are We Waiting For?

So if this new approach, or adjusted way of thinking can yield positive results across the browsers for everyone involved, then why are we still holding back? What is it that we are waiting for? Why not cast off these limitations thrown upon our fields and break out of these boxes? The next part of the discussion tries to suss out some of the contributing factors that could be responsible for keeping us restrained.

Fear Factor

Fail-Better in Why We Should Start Using CSS3 and HTML5 Today
The fail awaits, and so some of us opt to stay back. Image by Ben Didier

One contributing factor that has to be considered, is perhaps that we are being held back out of fear. This might be a fear of trying something new, now that we have gotten so comfortable waiting for that magic day of compatibility to come. This fear could also stem from not wanting to stand up to some particular clients and try to make them understand this truism of the Web and the concessions that need to be made — with regards to consistent presentation across the browsers. We get intimated, so to speak, into playing along with these unrealistic expectations, rather than trusting that we can make them see the truth of the situation. Whatever the cause is that drives this factor, we need to face our fears and move on.

It’s our responsibility of professionals to deliver high-quality work to our clients and advocate on and protect user’s interests. It’s our responsibility to confront clients when we have to, and we will have to do it at some point anyway, because 100% cross-browser compatibility is just not going to happen.

Comfortable Factor

A possible contributing factor that we should also look into is that some people in the community are just too comfortable with how we design today and are not willing to learn new technology. There are those of us who already tire of the extra work involved in the testing and coding to make everything work as it is, so we have little to no interest at all in an approach that seemingly calls for more thought and time. But really, if we start using new technologies today, we will have to master a learning curve first, but the advantages are certainly worth our efforts. We should see it as the challenge that will save us time and deliver better and cleaner code.

To some extent, today we are in the situation in which we were in the beginning of 2000s; at those times when the emergence and growing support of CSS in browsers made many developers question their approach to designing web sites with tables. If the majority of designers passed on CSS back then and if the whole design community didn’t push the Web standards forward, we probably still would be designing with tables.

Doubt Factor

Doubt is another thing we must consider when it comes to our being in hold mode, and this could be a major contributor to this issue. We begin to doubt ourselves and our ability to pull off this innovative, boundary pushing-kind-of-work, or to master these new techniques and specs, so we sink into the comfort of playing the waiting game and playing it safe with our designs and code. We just accept the limitations and quietly work around them, railing on against the various vendors and the W3C. We should take the new technologies as the challenge to conquer; we’ve learned HTML and CSS 2.1 and we can learn HTML5 and CSS3, too.

Faith Factor

I-want-to-believe in Why We Should Start Using CSS3 and HTML5 Today
Faith can be a good thing, but in this case, it can hold you back. Image by fotologic

Undoubtedly, some of us are holding off on moving forward into these new areas because we are faithfully clinging to the belief that the cross-browser support push will eventually happen. There are those saying that we will be better off as a community if we allowed the Web to evolve, and that this evolution should not be forced.

But this is not forcing evolution, it is just evolution. Just like with Darwin’s theory, the Web evolves in stages, it does not happen for the entire population at once. It is a gradual change over time. And that is what we should be allowing to happen with the Web, gradually using and implementing features for Web community here and there. This way forward progress is happening, and nobody should be held back from these evolutionary steps until we all can take them.

“It’s Too Early” Factor

Another possible contributor is the ever mocking “It’s too early” factor. Some members of the online community faithfully fear that if they go ahead and accept this new way forward and begin designing or developing in accordance, then as soon as they begin completing projects, the support might be dropped and they would need to update the projects they already completed in the past. It’s common to think that it’s just too early to work with new standards until they are fully implemented in many browsers; because it’s just not safe to assume that they will be implemented at all.

However, one needs to understand the difference between two groups of new features: the widely accepted ones (CSS3′s media queries, border-radius or drop-shadows or HTML5 canvas are not going to disappear) and the experimental ones (e.g. some OpenType features are currently supported only in Firefox 4 Beta). The widely accepted features are safe to use and they will not disappear for certain; the experimental features can always be extracted in a separate stylesheet and be easily updated and maintained when necessary. It might be a good idea not to use experimental, unsupported features in large corporate designs unless they are not affecting the critical design elements of the design.

Validation Factor

We cannot forget to mention that there are also many of us who are refusing to dabble in these new waters simply due to the fact that implementing some of these techniques or styles would cause a plethora of vendor-specific pefixes to appear in the stylesheet, thus impeding the validation we as professionals strive for.

Many of us would never put forth any project that does not fully validate with the W3C, and until these new specs are fully standardized and valid, we are unwilling to include them in their work. And because using CSS3 usually means using vendor-specific prefixes, we shouldn’t be using CSS3. Right?

Validate in Why We Should Start Using CSS3 and HTML5 Today
Jeffrey Way’s article But It Doesn’t Validate

Well, not quite. As Jeffrey Way perfectly explains in his article But it Doesn’t Validate, validation is not irrelevant, but the final score of the CSS validator might be. As Jeffrey says,

“This score serves no higher purpose than to provide you with feedback. It neither contributes to accessibility, nor points out best-practices. In fact, the validator can be misleading, as it signals errors that aren’t errors, by any stretch of the imagination.

[...] Validation isn’t a game, and, while it might be fun to test your skills to determine how high you can get your score, always keep in mind: it doesn’t matter. And never, ever, ever compromise the use of the latest doctype, CSS3 techniques and selectors for the sake of validation.”

— Jeffrey Way, But it Doesn’t Validate

Having our work validate 100% is not always the best for the project. If we make sure that our code is clean and accessible, and that it validates without the CSS3/HTML5-properties, then we should take our work to the next level, meanwhile sacrificing part of the validation test results. We should not let this factor keep us back. If we have a chance for true innovation, then we shouldn’t allow ourselves to be restrained by unnecessary boundaries.

All in All…

Whatever the factors that keep us from daring into these new CSS3 styles or new HTML5 coding techniques, just for a tangible example, need to be gotten over. Plain and simple. We need to move on and start using CSS3 and HTML5 today. The community will become a much more exciting and innovative playground, which in turn will improve experiences for as well as draw in more users to this dynamic new Web, which in turn will attract more clientele — effectively expanding the market. This is what could potentially be waiting on the other side of this fence that we are timidly facing — refusing to climb over it. Instead, waiting for a gate to be installed.

Until we get passed this limited way of looking at the situation, only then will we continue falling short of the full potential of ourselves and our field. Are there any areas that you would love to be venturing into, but you are not because of the lack of complete cross browser compatibility? Admittedly, I was a faith factor member of the community myself — how about you? And what CSS3 or HTML5 feature are you going to incorporate into your next design?

Will You Use HTML5 / CSS3 In Your Next Design?


(sp) (vf) (ik)


© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

Movie Poster Typography: The Evolution

POSTED IN Blog | Comments Off on Movie Poster Typography: The Evolution

An effective movie poster is art and text working together. Typography has become more essential to a poster’s success since the start of cinema, though. Take a look at how movie poster typography has evolved from 1920 to the 2000s.

1920s – ’30s: Boring Text

Think about the cover art for novels – hand-rendered artwork and clear typography on the edges of the poster or layered on top of the art rather than integrated as a part of it. Here are some other typical trends of this time period:
  • Black, white, or brightly colored text contrasting strongly with the picture;
  • Thin black or white strokes on the lettering;
  • Heavy drop shadows on thicker kinds of type.
These classic posters show the first glimmer of merging text and art. For example, poster designs for the 1933 movie “King Kong” feature the film’s giant gorilla moving in front of the title’s text.

Movie Poster Typography

Movie Poster Typography-1

1940s – ’50s: Text Takes Center Stage

This is the era with a distinct movement toward making the typography part of the artwork. Movie posters, such as the one for the 1950 movie “Sunset Boulevard,” put the typography front and center. Besides combining text and art more obviously, the biggest changes to typography involved using modern and eye-catching typefaces for the times. Movie Poster Typography-2 Movie Poster Typography-3

1960s – ’70s: Letting the Hair Down

Posters from the 60s took an extreme departure from the elegant-looking typefaces of the 40s and 50s and replaced them with a wide variety of styles. Here are a few 60s to 70s poster trends:
  • Diverse text – bold block lettering, “cartoon” text with outlines, and in-letter detailing
  • Tilted, warped, or shaped text
  • A rainbow of colors for both text and images
Art interacting with lettering is even more common here, and the 70s are responsible for such iconic images as the poster for the 1978 movie “Jaws.” Movie Poster Typography-4 Movie Poster Typography-5

1980s – ’90s: Branded Text

In the 80s and 90s, typography became artwork. The unique shape and color of the title was a branded image to associate with each movie. Lettering took on creative shapes and spacing, as seen in the 1990 movie “Night of the Living Dead.” Textured text made to look like different materials was also in. The title for the 1984 movie “The Terminator” featured shiny metallic lettering to match the film’s cyborg and futuristic themes. Movie Poster Typography-6 Movie Poster Typography-7

2000s: Photo-realism

With the advent of computer graphics and photo manipulation, designers have the freedom to show any image they can dream.
  • Text made of anything – smoke, birds, negative space, even tongues
  • Lots of photo-realistic special effects, such as rain, mist, lighting, and blood
  • More extreme/artistic photography to stand up to shiny text effects
Since designers can digitally make text from physical materials, hyper real word/image fusions are popular. Contemporary movie posters often show photo-real scenes of impossible things, as is the case with the 2009 movie “Zombieland.” Movie Poster Typography-8 Movie Poster Typography-9

What’s Next?

Throughout the years, the art of movie posters has evolved, but posters made entirely of typography aren’t likely to catch on as the standard. Designers with no limits on their technical ability to make something must come up with new designs unlike anything anybody has ever seen before. Sponsored by Made By Tinder Advertise on Fuel Brand Network. Fuel Brand Network 2010 cc (creative commons license) Movie Poster Typography: The Evolution

See our New Portfolio Items

We have been busy uploading new portfolio items onto our web site. Please take a look and check out some of our latest work. Be sure to let us know what you think.

Comments

    Archives