Styling Links

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

• a:link { }Unvisited link.
• a:visited { }Visited links.
• a:hover { }The user mouses over a link.
• a:focus { }The user clicks on a link.
• a:active { }The user has clicked a link.

The TLC uses not only plaint text links, but also icons to communicate the corresponding file types.

Ensure Contrast

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

• text-decoration: underline;Underline.
• font-weight: bold;Bold.
• font-size: 1.4em;Enlarge.
• color: #ed490a;Color.
• background-color: #c0c0c0;Background.
• border-bottom: 2px solid #a959c3;Border.

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mindusers with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

Don’t Forget About Visited Links

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.

Use the Title Attribute

The title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

Use Button Styles

To make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.

For more information, check out “Super-Awesome Buttons With CSS3 and RGBA” and “Call to Action Buttons.”

Hover State

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

Active State

Provide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.

Apply Padding

Here is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.

Use Icons for File Types

If your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.

For some great resources, check out “Fam Fam Fam Silk Icons” and “Social Media Mini Icon Pack.”

Use Icons for Recognition

Just as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.

Make Anchor Text Descriptive

Use meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.

Link Your Logo

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

Don’t Open New Windows

Just don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.

Micro-Formats

As the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…

tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats.

Showcase Of Links In Web Design

Komodo Media

Hicks Design

Notable App

UX Booth

Max Voltar

Elliot Jay Stocks

The TLC

Sam Brown

Adii Rockstar

Forty Seven Media

Stefan Persson

Huge

AWP

Simple Bits

Andy Rutledge

Brian Hoff

Simon Collison

Nielsen’s controversial proposal demonstrates the principle that most design decisions require trade-offs. User goals and business objectives do not always intersect. Security, usability, and aesthetic concerns often compete. We must set priorities and balance these interests to achieve the best results in each situation.

Security issues are particularly difficult to deal with because they’re an annoyance. We just want to let people get at the great tool we’ve created, but instead we have to build barriers between the user and the application. Users must prove their identities. We can’t trust any data they provide unless it’s been thoroughly sanitized.

Unfortunately, this is reality. A great deal of web traffic really is malicious, and sensitive data gets stolen. Typically, we ask users to supply a username (often an e-mail address) along with a password to sign in to an application. The username identifies the person, while the password proves that the person submitting the username is indeed the one who created the account. That’s the theory, based on two assumptions:

1. A password will never be visible outside the mind of the person who created it.
2. Both the username and password can be recalled from memory when needed.

This approach places a significant cognitive burden on people who use websites that require authentication. In general, we get by remarkably well, but it’s easy to see the weaknesses in the system. Passwords that are easy to remember are also easy to guess. When people are forced to choose strong passwords, they’re more likely to either write them down or forget them. The usual response is a password reset mechanism, which naturally undermines the strength of the entire system. It doesn’t matter that my password is encrypted with the strongest ciphers known to man when it can simply be reset by anyone who knows which high school I attended.

This is one of the reasons that Nielsen suggests abandoning password masking. People get frustrated and often reset passwords that they haven’t actually forgotten simply because they’ve mistyped. Providing clear feedback with unobscured letters will reduce errors, improve the user experience, and lessen the need for insecure alternatives.

However, making such a sweeping change to a fundamental user interaction could present serious problems. Consider some contexts in which a password might need to be entered in front of a large group of people, such as while using a conference room projector. And many years of web experience have set user expectations on how form elements should work. People understood that password masking was invented for their security. Failing to meet that expectation might undermine confidence, and we cannot afford to lose our users’ trust.

Is there a middle path—a way to provide feedback and reduce password errors that doesn’t sacrifice the user experience? At least two design patterns address this issue in offline applications, and with a little JavaScript, we can bring them to the web.

Now you see it, now you don’t

The simplest solution is to mask the password by default while giving users a way to switch the field to clear text. Nielsen even mentions this in passing. This approach allows the person to confirm that the password was entered correctly, but it also places control firmly in the user’s grasp. Such toggle controls are often seen on WiFi preference panels, but they’re rarely implemented elsewhere. (Note: at least one blog has advocated a similar technique while this article was in production.)

It should be simple to write a control that switches the type attribute of an HTML input element between password and text. Unfortunately, it’s not. Internet Explorer does not allow this particular attribute to be set by JavaScript, so we have to be slightly more creative. The following two functions should do the trick:

(Line wraps marked » —Ed.)

window.onload = function() {
  if(document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    for(var i in inputs) {
      var input = inputs[i];
      if(input.type == 'password') {
        toggle_control = document.createElement('label');
        toggle_control.innerHTML = "<input type=\"checkbox\ »
        " "+ "onclick=\"toggle_password('"+ input.id+"',this »
        .checked) \" />"+" Show password";
        input.parentNode.insertBefore(toggle_control, input »
        .nextSibling);
      }
    }
  }
}

function toggle_password(element_id, show_text) {
  if(document.getElementById) {
    var password_input = document.getElementById(element_id);
    var new_input      = document.createElement('input');
    with(new_input) {
      id        = password_input.id;
      name      = password_input.name;
      value     = password_input.value;
      size      = password_input.size;
      className = password_input.className;
      type      = show_text ? 'text' : 'password';
    }
    password_input.parentNode.replaceChild(new_input, »
    password_input);
  }
}

The first function scans the document for all input elements and collects those of thepassword type. Note that this code is only intended to demonstrate the concept, and the process might be improved by using a JavaScript framework such as Prototype.

After each input, the function inserts a labeled checkbox to toggle the field between masked and clear text. The second function controls the toggle behavior itself. When the user clicks the toggle control, the function creates a new input and swaps it for the existing one, juggling the value and other properties between them.

An alternative approach is to create the text input only once and toggle the displayproperty to show or hide the appropriate field. One drawback to this method, though, is that an element’s id must be unique. Since the parallel text input would have its own id, it wouldn’t inherit any CSS rules that referenced the original element by ID.

Take a look at example one to see it in action. This solution is easy to implement, and it follows the principle of progressive enhancement: In the absence of JavaScript, password fields will retain their usual behavior. The toggle control empowers the user with a choice as to whether to show or hide a password in a particular circumstance. The main drawback is that it could still undermine a user’s concept of the password field as a “black box.” We’re so completely accustomed to thinking of our passwords as a secret that merely offering the option to display it in clear text could be unsettling.

A second alternative

Typing errors are especially common on touchscreen devices such as the iPhone, where fingers can’t locate the edges of keys by feel. Anticipating that password inputs without visual feedback would cause problems, Apple adopted an interesting approach. The last letter typed into the field remains visible for a couple of seconds before turning into a dot. This creates an opportunity to catch errors without showing the entire password at once.

We can reproduce this progressive masking behavior with HTML and JavaScript, although it will take a bit more code than the previous example. Consider the following:

window.onload = function() {
  if(document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    var password_inputs = Array();
    for(var i in inputs) {
      if(inputs[i].type == 'password') {
        password_inputs.push(inputs[i]);
      }
    }
    for(var i in password_inputs) {
      var input = inputs[i];

      var masking_element = document.createElement('input');
      with(masking_element) {
        style.position = 'absolute';
        id             = input.name + '_mask';
        type           = 'text';
        size           = input.size;
        className      = input.className;
      }
      masking_element.onfocus = function(){this.nextSibling »
      .focus()};
      input.parentNode.insertBefore(masking_element, input);

      input.onchange = function() {

        if(this.timer){
          clearTimeout(this.timer);
        }

        var mask_character = "\u2022";
        var last_character = this.value.charAt(this »
        .value.length-1);

        var masked_text    = this.previousSibling.value;
        var password_text  = this.value;

        if(masked_text.length < password_text.length) {
          this.previousSibling.value = password_text.substr(0,
            password_text.length-1).replace(/./g,
            mask_character)+last_character;
        } else {
          this.previousSibling.value = password_text »
          .replace(/./g,mask_character);
        }
        this.timer = setTimeout("with(document.getElement »
        ById('"+masking_element.id+"')){value=value »
        .replace(/./g,'"+mask_character+"')}",2000);

      }
      input.onkeyup = input.onchange;
      input.onchange();

    }
  }
}

This time, we create a second text input to sit directly on top of each password input (the caveat about CSS inheritance from the previous example applies). By manipulating its value as the original field changes, we can control what the user sees. Let’s break down each step of the script:

window.onload = function() {
  if(document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    var password_inputs = Array();
    for(var i in inputs) {
      if(inputs[i].type == 'password') {
        password_inputs.push(inputs[i]);
      }
    }
    for(var i in password_inputs) {
      var input = inputs[i];
      ...
    }
  }
}

Again, our first task scans the page for password inputs so that we can modify their behavior. However, there’s a critical difference between this function and the first example. In Internet Explorer, document.getElementsByTagName() doesn’t return a simple list of matching elements at the moment the script is run. Rather, it returns a reference to the collection of matching elements. If we create a new input element while looping over the results, we will increase the size of that collection on each pass, and the loop will continue indefinitely. This instantly crashes Internet Explorer (and not gracefully). So, instead, we need to copy the initial results of the function into an array and loop over that.

var masking_element = document.createElement('input');
with(masking_element) {
  style.position = 'absolute';
  id             = input.name + '_mask';
  type           = 'text';
  size           = input.size;
  className      = input.className;
}
masking_element.onfocus = function(){this.nextSibling.focus()};
input.parentNode.insertBefore(masking_element, input);

With the new input inserted directly before the existing one, setting its position toabsolute should place it directly on top. This should work in most layouts, but there may be exceptions where additional CSS is required to position it correctly. Of course, now that we’re covering the input with another element, we also need to make sure that clicking on the mask activates the input. Adding an onfocus handler takes care of this. We have to assign this handler outside the with statement for it to function correctly in Firefox 2.

input.onchange = function() {
  ...
}
input.onkeyup = input.onchange;

With the new element in place, we’ll build a function to display the text of the progressively masked password. We’ll need this text to respond to changes in the contents of the password field. Usually, this will mean that a user is typing on the keyboard, but that may not always be the case. Someone might paste text into the field using a context menu, for example. Attaching our code to both the change and keyup events should cover all the bases.

var mask_character = "\u2022";
var last_character = this.value.charAt(this.value.length-1);

We can define any character we like to mask the passwords. Traditionally, most systems use asterisks or dots, so in this example we define the Unicode entity 2022, which is the bullet character. On the second line, we identify the last character of the current password value so that we can render it in clear text.

var masked_text    = this.previousSibling.value;
var password_text  = this.value;

if(masked_text.length < password_text.length) {
  this.previousSibling.value = password_text.substr(0,
  password_text.length-1).replace(/./g, »
  mask_character)+last_character;
} else {
  this.previousSibling.value = password_text.replace(/./g,
                                 mask_character);
}

Now we can take the value of the password field, replace every character except the last one with a bullet, and put that text into the field that we’re using as a mask. However, we should only do this while the person is typing forward. In other words, if the user presses the backspace key, we don’t want to reveal the previous character again. After it’s been hidden, it should stay hidden. So before performing the replacement, we first check to see if the password value is longer than the masked text. The replacement itself can be done using a simple regular expression. The expression /./ matches any character in the password field. Adding the letter g to the end, (/./g) means that it scans the entire string of text instead of stopping at the first match.

this.timer = setTimeout("with(document.getElementById('"+
  masking_element.id+"')){value=value.replace(/./g,'"+
  mask_character+"')}",2000);

After a two-second delay, we want to mask the full password. However, our users probably won’t pause for two seconds after typing each letter. So we only want the behavior to take effect when the password field hasn’t changed at all for that length of time. Every time we call the setTimeout function in JavaScript, it returns an ID that we can use to reference that particular timer.

if(this.timer){
  clearTimeout(this.timer);
}

By storing the timer ID in a variable and adding the above code at the beginning of our function, we can cancel the countdown as long as we observe that the field is still changing.

input.onchange();

Our last step is to run the function we just defined. This ensures that the mask will show the correct text if the password field was pre-filled before the page was loaded.

To see the full script in action, take a look at example two. It’s been tested in Internet Explorer 6-8, Firefox, Safari, and Chrome. Again, in the absence of JavaScript, this technique will degrade well—password fields will simply function normally.

Proceed with caution

When dealing with such a fundamental area of the web experience, we need to be careful because we’re dealing with deeply conditioned expectations. The username/password method of securing web applications isn’t perfect, but there are few good alternatives and it’s become the standard approach. We can best address the usability concerns of password fields by testing incremental changes like these to extend default behavior—without compromising the basic experience and losing the trust of our users

Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be a tool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.

Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation. We also have followed the Web design algorithm in this process — the designs have distinct themes, styles and elements. To keep things simple and clear, we tried to stick to minimalist designs and also preferred single-page layouts. Obviously, examples in this article are supposed to serve as a simple foundation for your designs and not as the finished designs.

Golden Ratio and Golden Rectangle

The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.

We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. In today’s article, we’ll look at how to use golden rectangles in Web design. A golden rectangle is one whose side lengths have the golden ratio 1:(one-to-phi); that is, 1:1.618.

The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.

A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.

As an example, consider the minimalist design below. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. Thus, the sides of these rectangles adhere approximately to the golden ratio; that is, 299/185 = 1.616. Notice how the large amount of white space surrounding Golden rectangles creates a calm and simple atmosphere in which the navigation options can breathe and serve their purpose. Although the layout uses only few colors and all blocks are positioned very similarly, the navigation options are obvious.

Large view

However, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Probably the only reasonable design solution here would be to add the block on the third line and use the rest of the horizontal space for other, more or less prominent features (if necessary). You can click on the image below to see the enlarged version.

Large view

Possible Applications

The golden rectangle design is well suited for photo galleries, portfolios and product-oriented websites. The golden rectangles can also be arranged in other mathematically sound ways to generate beautiful designs. In particular, you may want to use them for blocks that display images or ads in your sidebar. Of course, the pure collection of golden rectangles doesn’t make for a professional, nice-looking design. You also need to work closely with grids, alignment, proximity and emphasis to achieve the main goals of your design. For instance, an interesting design solution would be a CSS/jQuery-based fluid grid design based on golden rectangles, however we do not cover this technique in this article.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Golden Ratio and Golden Rectangle. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Fibonacci Design

As the name says, Fibonacci designs are designs based on the Fibonacci sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio. A Fibonacci sequence goes like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

In music, Fibonacci numbers are sometimes used to determine tunings, and in visual art to determine the length or size of content and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based designs on his blog. However, if you examine the design he created, you are likely to find it rigid and a bit difficult to read and navigate. Indeed, you need to get a bit creative with math rather than following the rules blindly — maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs.

Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of each square, while the red spiral is a Golden Spiral, a special type of logarithmic spiral. Overlapping portions appear yellow. The length of the side of one square divided by that of the next smaller square is the Golden ratio. Source

The main idea behind such designs is to use Fibonacci when deciding on the dimensions for content area or sidebar. Both Golden ratio and Fibonacci let designers rely on sound, common ratios for page containers or blocks within page containers.

In general, layouts are quite easy to build using the Fibonacci sequence. You pick a certain base width first — for instance, 90px. Then, when determining the size of your containers, you multiply the base width with the numbers from the Fibonacci series. Depending on the calculations you get, you need to use them either for your page blocks. Let’s take a look at an example. Below is a minimalist typography blog based on Fibonacci Web design.

Large view

You can see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a base width of 90 pixels. This base width is then multiplied by a Fibonacci number to get the total width for a particular column. For example, the first column has a width of 180 pixels (90 x 2); the second column has a width of 270 pixels (90 x 3); and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to a Fibonacci number. The blog heading has a size of 55px; the article’s heading is 34px; and the content is 21px.

The downside of layouts based on the Fibonacci sequence is that it’s difficult to use it if you are given certain fixed width layout dimensions (e.g. 1000px). In this situation it’s easier to use the Golden ratio, as you would simply multiply 1000px with 0.618 and get 618px which would be the ideal width for your content block. However, if you try to achieve the same result with the Fibonacci sequence itself, you first need to figure out the sequence to the 1000 range.

According to the Fibonacci sequence calculator, the sequence would be ...,610, 987, 1597.... Indeed, 987 is a good fit and you can start picking the widths for smaller blocks using the previous numbers in the sequence. But if your fixed width layout is smaller or lager, you would need to use some approximate values which would again result in pure guessing. The problem may also occur in liquid or elastic designs to some extent, but you have much more design freedom there.

Possible Applications

A Fibonacci design is best suited to blogs and magazine layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, notice that you need to be creative when using Fibonacci sequence in your designs, otherwise your designs will turn out to be too rigid and hence difficult to use and navigate.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Fibonacci sequence. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Five Elements, Or Kundli Design

Another interesting layout technique comes from the Indian horoscopes which are also called Kundli. Basically, a Kundli is a very simple figure can be made in just three steps. Draw a square, and then cross the two diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in the figure. These are the basis for our Web design.

The design below, then, is based on the Kundli geometric layout. You’ll notice that the chakras in the design also have mathematical properties.

Large view

This is a single-page layout. Clicking on an element reveals more information about it, as shown in the figure below. You could also include some simple jQuery animations or jQuery tooltips that would reveal more information on demand. A further step would be a sliding web page where animation is used to display different content blocks; you may also want to change the background images of the single content areas to make them a bit more distinctive.

In the following figure, you can see that our design is just a simple three-column layout: a header, three columns and a footer. Not complex at all.

Possible Applications

This design is best for displaying product information and portfolios. You can spice it up with JavaScript animation frameworks. For example, you can apply color transformations to the chakras by using Raphael library, or you can add freestyle animations using  jsAnim library. You can have a tree sprout when the user clicks on the Earth element, or you can show sea creatures swimming in the water element. The sky is the limit when it comes to animation using these JavaScript libraries.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Kundli design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Sine Wave Design

When it comes to mathmatics, you do not need to stick to well-known Golden Ratio or Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences by using more general formulas and values in your designs.

For instance, let’s consider the sine wave, or sinusoid, a mathematical function that describes a smooth repetitive oscillation. We used a simple sine wave pattern as the basis for a simple and original Web design and create a single-page layout. Of course, you can use the same approach for other designs such as graphics or infographics.

Large view

The layout is again very simple, consisting of a header, five columns and a footer. You can use a jQuery tooltip to make the design more interactive.

Possible Applications

This wave pattern occurs often in nature, including ocean waves, sound waves, and light waves. Also, a rough sinusoidal pattern can be seen in plotting average daily temperatures for each day of the year, although the graph may resemble an inverted cosine wave. You can also use it to display a timeline of events. It could even be developed to include horizontal navigation. You can make it more interactive with the jQuery highlighter plug-in, which highlights each element (i.e. DIV) so that the user can focus on the content.

Download the PSD-layout

We prepared a sample PSD layout that is designed according to the Sine Wave design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.

Other Techniques

Rule of Thirds
This rule states that an image should be imagined to be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides any layout into thirds, left to right and top to bottom.

Musical Logic
The rhythmic or thematic structure of musical compositions can be applied to distances between elements in a layout, like ABA, ABAC, etc. Learn more about music and mathematics in this Wikipedia article.

Useful Links and Resources

Wikipedia articles

• Sacred Geometry
• Proportion
• Canons of Page Construction

Articles

• Mathematics in Art and Architecture
• Design and Divine Proportion
• Create Awesome Geometrical Designs, Myoats
• Photographer Loves Math, Graphs Her Images
• Typograph: Scale and Rhythm
• Michael Paunker – Art and Math

Books

• Geometry of Design
• Euclid’s Elements
• Mathematics in Nature

We hope you’ve enjoyed this article on mathematics and Web design. Hopefully you now see mathematics not as a hindrance to creativity, but as a friend. Embrace it!

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

Complete Wireframing Toolkits

Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

Mac OS X Interface Stencil Kit
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Flex Stencil Kit
Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

Eclipse Stencil Kit
This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

Massive Web UI & Button Set
This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

Yahoo! Design Stencils – Design Pattern Library
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.

Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

EightShapes Unify
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.

Wireframe Symbols
This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.

OmniGraffle Wireframe Stencils
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).

OmniGraffle UX Template
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.

Web Page Elements
Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.

Web Browser Templates

Photoshop Browser Templates – Web Designer Toolkit
These Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.

Browser Templates for the Website
These Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.

Photoshop Browser Templates
This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!

Browser Screens and Website Elements
A useful set of vector website assets.

Web-Safe Area Templates for Photoshop

All of the Web-safe area browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.

Windows Vista IE Web-Safe Area

Windows Vista Firefox Web-Safe Area

Windows XP IE Web-Safe Area

Mac OS X Safari Web-Safe Area

Mac OS X Firefox Web-Safe Area

Mac OS X Safari Web-Safe Area

Web Form Elements

Best Practice UX Forms Stencil
This is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

Photoshop Form Element Templates
These Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.

Browser Form Elements PSD
Included in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.

Web Form Elements Volume 1
Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.

Web Form Elements Vol.2
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.

Photoshop Button Templates
These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.

Web Browser Elements

You can select the element you need from whichever operating system and browser you use, and download them individually.

Windows Vista IE Form Elements

Windows Vista Firefox Form Elements

Windows XP IE Form Elements

Windows XP Firefox Form Elements

Mac OS X Firefox Form Elements

Mac OS X Safari Form Elements

Grid Templates

960px Photoshop Grid Template
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.

960 Grid Template for OmniGraffle

Illustrator Template for Blueprint CSS Comps
This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Photoshop Template for Blueprint CSS Comps
This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Mobile App Development Resources

iPad GUI PSD
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

Ultimate iPhone Stencil – Graffletopia
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.

iPhone 3G Stencil
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

iPhone GUI PSD 3.0
With Apple’s official release of the new iPhone 3.0 came a number of new GUI elements. Some of the changes and additions have been include in this GUI: map and map elements including curl, copy and paste elements; timeline bar editor; and horizontal iPhone and horizontal panel bars and keyboards.

iPhone PSD Vector Kit
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.

iPhone GUI Elements
Free iPhone elements available as layered Photoshop (PSD) files.

iPhone GUI as Rich Symbols for Fireworks
This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.

Google Android GUI Application Mockup PSD
This Photoshop file contains all of the basic elements of Android 1.5, Google’s mobile operating system.

Palm Pre GUI PSD
This Palm Pre GUI PSD has been built with vectors for easy editing and scaling, and it contains most of the Pre’s GUI elements.

RIM Blackberry PSD
This download package contains 135 detailed layers for Blackberry app development.

Optional Wireframe Extras

Interactive Sketch Notation
The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.

Storyboard Characters (via Google Chrome)

Proofreading Marks

Standard Web Banners
You can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).

Wireframe Icons, Royalty-Free EPS and PNG
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.

WEB UI Treasure Chest
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.

Webdesigner kit
This Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.

Printable Sketching Paper

A4 and A3 Sketching Grid Paper
This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.

Print and Sketch Wireframe Template

iPhone Application Sketch Template
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.

iPhone Wireframe Templates for Sketching
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.

iPhone App Wireframe Template
Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.

Printable Wireframe and Notes

The below 8.5 x 11-inch graph paper is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:

Wireframe with Notes
This wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.

Wireframe (Landscape)

Wireframe (Portrait)

Storyboard
This is a storyboard with four cells. Each cell contains a simple grid.

Storyboard with Notes
This is a storyboard with four cells. Each cell contains a simple grid. The area beneath each cell is ruled for notes.

Basic Paper
This is a basic grid box. Use it for concept diagrams, site maps, spectrums, tables and whatever else you sketch.

Wireframe Magnets (DIY Kit)

These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.

Form Elements

Tabs, Buttons and Bars

Windows and Dialogs

Further Resources And Some Wireframing Inspiration

web.without.words
A visual playground where designers take popular sites and reconstruct them in a wireframe.

Graffletopia
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.Mockups To Go
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.

Wireframes Magazine
Wireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.

I {heart} wireframes
I {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!

Further Related Articles

• 35 Excellent Wireframing Resources
  More than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.
• Sketchy Wireframes: When you can’t (or shouldn’t) draw a straight line
  A nice article about computer-based sketchy wireframes that allow wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artitfacts.
• 16 Design Tools for Prototyping and Wireframing

We often turn to programmers to solve mathematical-related problems, but the concept of mathematics in programming is what powers programmers to innovate. When you think of mathematics you imagine numbers, expressions, and equations. But what about art, music, or even beautiful visuals? Those numbers and equations that we often view as mundane and overly-formulaic can generate beautiful visuals and music. This article will present dozens of examples of motion graphics and interactive visuals created with computational code, along with some useful references and resources.

Beautiful Motion Graphics Created with Programming

First we’ll look at some examples of beautiful and inspiring motion graphics created by programmers. Some of these are audio-reactive whereas others are data visualization.

Metamorphosis by Glenn Marshall

Swan Lake – Zeno Music Visualiser by Glenn Marshall

Black Hole by 360angles

Flightpattern by Gwen Vanhee
These beautiful motion graphics were created using ActionScript.

Disco Maths 1 by Stefan Goodchild

Magnetic Sphere by flight404

Air Doom by Rui Madeira

Audio Reactive Bubbles by Matthias Dörfelt.

Visualization in 7/4 by Eamae Mirkin

Music Is Math by Glenn Marshall

Audio-generated landscape by flight404

okdeluxe XMAS card 2008 by okdeluxe

Solar, with lyrics. by flight404

Bubbletrouble_2 by Leander Herzog

House of Cards by Radiohead
In Radiohead’s video for “House of Cards”, no cameras or lights were used. Instead, 3D plotting technologies collected information about the shapes and relative distances of objects. The video (directed by James Frost) was created entirely with visualizations of that data.

Magnetic Ink by flight404

Shifty by Pedro Mari

Advanced Beauty 13 of 18 by Universal Everything

I Am David Sparkle – Jaded Afghan by Eduardo Omine

Relentless, The REV by flight404

Aphex Twin – Rhubarb by Simon Geilfus

Magnetosphere Revisited by flight404

Vortex by Rui Madeira

The Nest That Sailed The Sky by Glenn Marshall

GoodMorning! by Jer Thorp

Sunflower by VS*

Interpol – Rest My Chemistry Video by Aaron Koblin

Free Applications for Creating Visuals with Computational Code

Processing

Processing is a popular and powerful application for generating visuals using programming. It’s free and open source and uses Java as its coding language. It’s been used in professional, educational, and scientific environments and is available for GNU/Linux, Mac OS X, and Windows. It can also be used for web by embedding as Java applets or through the use of Processing.js, which uses JavaScript to draw shapes and manipulate images using the HTML5 Canvas element. Processing is also available for Java-based mobiles (Mobile Processing).

• Open Processing
  Share your sketches online.
• Useful Processing Applet Source Codes
  A collection of free Java applet source codes.
• Processing with Eclipse
  If you are an avid Java programmer and have been using Eclipse for your daily routine this would be best way to use Processing, making your workspace comfortable and familiar. Another benefit that Eclipse adds is that you can harness the power of the latest Java IDE.

Quartz Composer

Popular among Mac developers and VJs, Quartz Composer is the simplest application for creating still as well interactive motion graphics. It uses a node-based sequencing visual programming language that takes advantage of the Open GL, JavaScript, Core Image and Core Video devices and other technologies built into Mac OS X. It’s intended for non-programmers and is used by developers to construct user interfaces in conjunction with Cocao and other developer tools bundled in Xcode. It’s also used to create iTunes Music Visualizers.

Using third-party tools like Effect Builder AE and QC Integration FX you can turn your Quartz compositions into plug-ins for professional video editing / motion graphics applications such as Apple Final Cut, Adobe After Effects, Apple Motion, etc., without writing a single line of code. Many professional applications like Pixelmator use Quartz Composer on Mac to generate graphics and this is one of the reasons why some graphics processing application are available only for Mac OS X. As you probably guessed, Quartz Composer is only available for Mac OS X. Users of Mac OS X 10.6 or later can utilize OpenCL in Quartz Composers.

• Quartz Composer Programming Guide
  Guide for Quartz Composer.
• Quartz Composer Release Notes for Mac OS X v10.6
  Highlights major changes to Quartz Composer in Snow Leopard.
• Quartz Compositions
  Forum dedicated to Quartz Composer users.
• Quartz Composer Tutorials
  Collection of some of the best Quartz Composer tutorials.
• Installing 3rd Party Plug-Ins for Quartz Composer
• Kineme
  Kineme offers plug-ins for Quartz Composer, including audio analysis, particle effects, and Kineme3D which can import 3D Models.
• Futurismo Zugakousaku
  A great collection of Quartz Composer examples.
• Sam Kass Blog
  Quartz Composer examples that use iSight as an input source for creating real-time effects.
• Free Webcam Audio Visualizer

OpenFrameworks

OpenFrameworks is a tool for creating interactive visuals, and is widely used among creative programmers. The user interface is simple and similar to that of Processing. Similar to Processing, it uses libraries, but it’s difficult to find third-party libraries and requires knowledge of C++ programming.

• Start Up Guide
• OpenFrameworks Forum
• OpenFrameworks Wiki

NodeBox

NodeBox is similar to Processing and OpenFrameworks with the only major difference being the programming language used, which is Python. Although NodeBox has a small number of libraries in comparison with Processing, they are of good quality. NodeBox supports PDF, QuickTime movies, fonts and uses the Mac OS X Core Image library for image manipulations (blend modes, color changes, filters etc). NodeBox is available only for Mac OS X.

• NodeBox Library
  A collection of libraries, add-ons, and extensions.

VVVV

VVVV is usually used in large media environments like concerts and art installations for real-time motion graphics, video and audio processing and interactive motion graphics. Unlike Quartz Composer, VVVV comes with audio synthesis, 3D Mesh manipulation, and real-time video synthesis built in. It is a powerful application for generating visuals in real-time, even at very high resolution and high frame-rates.

Another important feature of VVVV is that it can make use of multiple computers behaving in sync. All programming and editing can be done on one server computer, while all client computers execute their respective tasks. You can easily use the CPU and GPU power of each computer to do some amazing effects at a cheaper cost. Since VVVV uses DirectX, it’s only available for Windows.

• Strukt
  Strukt has done many projects using VVVV, including this beautiful letter universe installation.

eMotion

eMotion is a new free application which can generate real-time as well as offset graphics. It has an awesome text and particle engine which is driven by real-world physics. It is available only for Mac OS X.

Creating Interactive Visuals with Computational Code

Here are some examples demonstrating adding interactivity into visuals.

Sonic Camera by Dmtr.org

Graffiti Analysis 2.0 by Evan Roth

Amoeba Dance is built using Quartz Composer. Its not a pre-rendered visual but works totally in real-time mode, controlled using VDMX and is reactive to the audio input.

The Beauty of Fluid Dynamics by Jens Heinen
Beautiful live interactive visual performances. Also watch Lichtfaktor vs Optix and Reincarnation.

Interactive Projection at GAGA Gallery | Laser tag
This project uses powerful lasers to virtually in-script graffiti on tall buildings. The laser is tracked and the graphics are projected in real time. Also check out the Eyewriter project which uses the same technology for helping physically disabled graffiti artists to once again bring their talent back to life. You can take a look at how-to and source code, too.

Digital Graffiti Wall + Stencils by Alex Beim
Another similar version, also built with OpenFrameworks.

Digital Wallpaper by Gregor Hofbauer
Uses VVVV to generate graphics which are then projected and mapped to the wall.

Body Navigation by Ole Kristensen
Amazing example where interactive visuals are projected on to a wall. To add interactivity, everything is tracked using infrared light and cameras.

Hand from Above by Chris O’Shea
An amazing installation built with openFrameworks and openCV. Pedestrians are tickled, stretched, flicked or removed virtually in real-time.

Quadrature by Griduo
The walls of the building are virtually stretched, broken and reconstructed. A similar installation:

555 KUBIK

Castel Dell’Ovo by Quy & N1ente
A stunning audio-visual performance created by mapping an entire building in a virtual world.

Body Paint by Memo Akten
Beautiful interactive installation which allows performers to paint on a virtual canvas with their body, interpreting gestures and dance into evolving compositions.

Lights on by thesystemis
Created for the Ars Electronica museum, which has a facade that contains 1085 LED controllable windows. The window colors are changed in real time with music that is broadcast on speakers surrounding the building. Visuals are created using openFrameworks.

Vinyl Workout by Theo Watson
A giant record is projected on the floor and it can be played by running around its surface in the direction you want it to go. The speed of playing music is in sync with the speed of the moving person.

Funky Forest – Interactive Ecosystem by Theo Watson
Funky Forest is an interactive installation for children. They can play with the water on floor, grow trees and water it and interact with various creatures. Built using openFrameworks. Also see these other amazing installations: Interactive Mural, Interactive Projection at GAGA Gallery, Guten Touch, Jellyfishes and Interactive Dancers System.

Reverse Shadow Theatre by Gabor Papp
Amazing example in which the code powers the real-time puppet animation. Uses multiple software – Processing, Eyesweb and Animata. Both Eyesweb and Animata are open source, as is Processing. Here Eyesweb handles the motion tracking while Animata takes in the input data from Eyesweb and does the real-time animation. Also watch Jazz Pub.

Tutorials

• Tutorials from the official website
• Controlling animata with OSC from Max/MSP and pure data.

DIY 3D Scanner by Kyle McDonald
Another great application of computational code.

DaVinci by Razorfish – Emerging Experiences
Apart from producing amazing visual and real-time animations, computational code can give new meaning to human-computer interaction. If you like Microsoft Touch Screen Table then you are sure to like DaVinci. You can interact with a virtual world through a user interface that uses object recognition, real-world physics simulation, and gestural interface design.

London Digital Week by seeper
Multi-touch music sequencer.

Books for Reference

Programming Interactivity: A Designer’s Guide to Processing, Arduino, and Openframeworks by Joshua Noble and Noble Joshua

Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction by Daniel Shiffman

Processing: Creative Coding and Computational Art by Ira Greenberg

Real-Time Motion Graphics with Quartz Composer: A Hands-On Guide to Learning Quartz Composer by Graham Robinson and Surya Buchwald

Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry

Algorithms for Visual Design Using the Processing Language by Kostas Terzidis

Visualizing Data by Ben Fry

Resources

• OpenCV
  OpenCV is a library of programming functions for real-time computer vision. You can use it for human-computer interaction, object identification, segmentation and recognition, face recognition, gesture recognition, camera and motion tracking, ego motion, motion understanding, stereo and multi-camera calibration and depth computation, and mobile robotics.
• Arduino
  Open-source software to send signals to the i/o board.
• 10 Best Software for Visual Performance Artists
  Some of the best professional software for live audio-visual performance
• Flickr Group: Processing.org
  Collection of graphics created using Processing
• Flickr Group: Algorithmic Abstracts
  Abstract art created by writing code.
• Flickr Group: VVVV
  Collection of images created with VVVV.
• Flickr Group: Generative Visuals

1. Using hyphens instead of an em dash

If you need to interrupt yourself, do it with an em dash (—) instead of a pair of minus signs. This is a top pet peeve for countless editors.

2. Using periods instead of ellipses.

Most fonts provide a dedicated ellipsis character (…) to keep your type tidy. The ellipsis character fits the three dots into a single letterspace, which is especially beneficial for content that might be printed.

3. Using dumb quotes

These straight “up and down” quotes used in your markup should stay in your markup. In your content, only use them to indicate a measurement in feet or inches.

4. Double-spacing between sentences.

The antiquated practice of double-spacing between sentences seemed like it was finally laid to rest thanks to web typography. Just a few short years ago, it required manually inserting a blank ASCII space to commit this font faux pas. Now, some content management systems will actually format the double-spacing for you if you let them. Don’t give them the chance! Only use single spaces between sentences.

5. Improvising a copyright symbol.

Not only is it ugly and lazy, a copyright symbol hacked together out of a capital C and parenthesis might not even cut the mustard in court. Use the real McCoy (©), and bill your clients extra for the legal advice.

6. Using too much emphasis.

You can bold text. You can italicize it. You can underline it. You can even use all caps if you really need to hammer home your point. Just don’t use more than one at the same time.

7. Underlining your hypertext links with border-bottom.

Underlines cut right through the descenders in your typeface, making it harder to read. Instead of border-bottom: solid 1px #00f;, use text-decoration: underline; to draw a line below your text.

8. Faking families in Photoshop.

If your font doesn’t offer (or you couldn’t afford) the bold, italic, or smallcaps branches of the family tree, don’t try to fake it in Photoshop. Sometimes you can get away with it in print, but at web resolutions, it’ll be a mess.

9. Not using accent characters.

I know how annoying they can be (especially when you’re writing about Ikea furniture), but if somebody’s name includes an exotic character, be polite and include it.

10. Not using CSS for capitalization effects.

I know it’s CRUISE CONTROL FOR COOL, but if you’re using caps (or lowercase) for decorative reasons, be sure to use the text-transform property. It’ll save a lot of trouble if you ever decide to change things later.

What’s the news after all?

Though Google has been intimidating its users for long to stop using IE6, it finally declared to set its foot down, saying, “In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers … Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.”

Finally, Google fully joined the war with Microsoft and the rest of the world against IE6 users with this bold step. For this Google deserves a round of applaud!

The news brings hope for an end to the usage of IE6, if not by the end of year 2010, at least somewhere between the years 2011-12. It’s no news that Google rules the World Wide Web with the maximum number of market share, and with this step it will definitely act as an eye opener for the IE6 users and bring relief to businesses and people suffering because of them.

Great News! No IE6.

This will be great news for developers, as they’ll save a lot of production time bypassing the extra styling and fixes needed to work upon, just to render same look for all the apps and websites on IE6. They will finally implement newer technologies and render web experience, which in turn will undoubtedly raise the web standards and their awareness among users.

Great news for users, as they’ll surf the web more securely and can welcome newer technologies; applications that will enhance their browsing experience. Users will then get more features and functionality from newer browsers, which means they can actually speed up their business or work online and deliver more in lesser time. And above all, they will have one look for all applications on all browsers.

Also for website owners, as they will be relieved from the merciless charge by developers, not me!! to have their websites support users of IE6.

Well, it’s more than important for everyone to support Google in their efforts against IE6. I say, be it developers or designers, we should all follow the footsteps of these great leaders and from this point, stop any and every support and fix for IE6.

What’s your take on this news? Share your views below..

So, how can we stand out from the rest and grab the attention of a design agency when they’re usually bombarded with hundreds of applications?

The best way to do this is in the design of your resume. Assuming that you have the skills that they’re looking for, a striking and visually appealing resume will go a long way at getting you the creative job that you want.

In the worst case scenario, it will at least buy you a few seconds by catching the eye of a recruiter and may become the difference between getting hired or not.

In this article, we’ll take a look at 30 creative resumes that can inspire you to think outside the box when designing your own resume.

Which ones were your favorites? Feel free to share other great resume designs that you may know of…

Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.

In this article we’ll point out 10 easy tips that will help you create better print style sheets.

In case you’ve forgotten, here’s how to set up a print style sheet:

The media="print" attribute ensures that users don’t see any of the styles defined in the print.css file.

Some attention is required, though: if your main style sheet has no media attribute, the print style sheet will inherit its style. To separate them, set your main style sheet as follows:

Here are 10 tips to get you started with the print style sheet.

1. Remove the Navigation

What is the main difference between paper and computer? Paper is static, while a computer is interactive. And to facilitate that interaction, websites have navigation, which becomes useless on paper.

Hide the navigation and other parts of your website that become pointless on paper, such as sidebars that link to other posts. The code for this is very easy: just set the element’sdisplay to none.

#nav, #sidebar {
	display: none;
}

2. Enlarge the Content Area

With the navigation and sidebar removed, our content is now spread across the page. This makes the print style sheet look more like an ordinary document, instead of a paper version of the website.

All we need to do to expand the content is reset the float, remove any margins and set the width to 100%.

#content {
	width: 100%;
	margin: 0;
	float: none;
}

3. Reset the Background Colors

Most browsers already ignore background properties to preserve ink. But to make sure that the entire background is white, we can set the body to white, and then give every child element still on the page a white background.

body {
	background: white;
}

#content {
	background: transparent;
}

4. Reset Text Colors

By resetting the background, another problem pops up. What if you have a dark-gray “Author information” box at the end of your posts, with the text in light gray or white? With the background now set to white, this information will invisible.

To fix this, change any light-colored text to something darker: black or, preferably, dark gray.

#author {
	color: #111;
}

Take Sam Brown’s blog above. Could you imagine what this would look like if he didn’t reset the text’s colors? Unreadable indeed.

5. Display the Destination of Links

Because paper is not an interactive medium, readers of course cannot click through on links to gather more information.

Say someone is reading a print-out about a fancy new product. Seeing “Click here for more information” all of a sudden would be rather irritating for them, wouldn’t it? This is easily fixed by adding the link destination after the link text itself, giving you something like this: “Click here for more information (http://hereismore.com/information).”

What’s more, for CSS 2-ready browsers, this can be done with plain old CSS. Here’s the code:

a:link:after {
	content: " (" attr(href) ") ";
}

You can spice things up with a smaller font size, italics or whatever else.

6. Make Links Stand Out from Regular Text

Readers need to be able to distinguish links from regular text. Basic usability rules apply here: blue and underlining is preferred, but I prefer to add bolding, too.

Remember that documents are often printed in black and white. Don’t depend only on color difference. Here is the code for sensible printed links:

a:link {
	font-weight: bold;
	text-decoration: underline;
	color: #06c;
}

#0066cc is a fresh blue color, and it looks like #999999 when printed in grayscale. With this, links will look good printed either in color or in black and white. They will also stand out from regular text.

7. What About Font Size?

In print, 12 points is the standard. But how do we translate that to CSS? Some say setting the font size to 12 points (pt) is good enough. Others recommend setting it to 100%. Still others say not to declare any font size in your print style sheet at all, because doing so would override the user’s preferences.

Personally, I go with a 12-point font size most of the time:

p {
	font-size: 12pt;
}

8. What About Fonts?

Most people prefer serif fonts because they are less tiring on the eyes, they better lead the reader through the text, and so on. Setting the font-family to serif in your print style sheet is probably a good idea, although some readers may be surprised to find that the font in their print-out is not the same as the one on your website.

Here is the code for a good print font stack:

body {
	font-family: Georgia, 'Times New Roman', serif;
}

One of the benefits of CSS 3’s @font-face property is that your special fonts can be printed, too, making print-outs look a lot more like your website!

9. My Blog Has a Lot of Comments. What Should I Do?

Well, this is really your choice. On the one hand, think of all the trees you’d be saving just by adding #comments { display: none; } to your print style sheet. On the other hand, comments are of great value on some blogs and contain some great discussion.

By moving the comments to their own page, you give users the choice of whether to print them. CSS has a property that makes this very easy:

#comments {
	page-break-before: always;
}

For example, if your article is two-and-a-half pages long, the comments would run from page 4 up to, say, 6. Users would be able to choose which pages to print, without losing any information.

10. Show a Print-Only Message

“Thank you for printing this article! Please don’t forget to come back to mysite.com for fresh articles.” Why not display a friendly message like this in the print-out? Or perhaps ask readers to recycle the paper they have used to preserve the environment.

Here is what that would look like:

Thank you for printing this article. Please do not forget to come back to mysite.com for fresh articles.

#printMsg {
	display: block;
}

You could add a bit of styling, too, like a 1-pixel border. Don’t forget to add #printMsg { display: none; } to your regular style sheet, to avoid confusing visitors.

Showcase

Here are some examples from well-known websites that have thought (or forgotten) about the print style sheet. Feel free to be inspired.

Looks Good:

Here are some websites that do a great job with their print style sheets:

24 Ways: The website for this “advent calendar for web geeks” has a fancy design, but I wondered how it would look in print. The result is really nice. The slick CSS 3 stuff has been removed. The layout is clean and yet still slick. The big branding has been removed, replaced by a simple right-aligned “24 Ways” next to the post’s title.

ThinkVitamin: Carsonified’s blog is a good example of how to do print style sheets. No real weak spots except that the URL’s destination is not shown.

CSS-Tricks: Chris Coyier of CSS-Tricks.com has done a good job with his print style sheet. He has removed all the clutter and moved comments to a new page, so users can choose not to print them.

Could Use Some Work

Here are some websites that are already great but whose print style sheets could use a bit of polish. No offense to anyone in this section.

Webdesign Ledger: Webdesign Ledger seems to have neglected its print style sheet. When you click “Print,” you end up with three pages of advertisements and related links.

The Design Cubicle: Brian Hoff seems to have forgotten about his print style sheet, too. When you print out an article, you get the comment form, too.

Flickr: Being able to print out photos to show to friends would be nice. Flickr could have removed everything but the picture itself and the copyright information in print-outs. But everything appears in plain unstyled HTML.

Resources

• Handy tips for creating a print CSS style sheet by Line25
• Print style sheet: The definitive guide
• CSS Design: Going to print
• CSS-Tricks finally gets a print style sheet