Planetaki Planet Desarrollo Web

Words that Zing

2010-02-09T10:30:46+00:00

When someone consults a website, there is a precious opportunity not only to provide useful information but also to influence their decision. To make the most of this opportune moment, we must ensure that the site says or does precisely the right thing at precisely the right time. Understanding the rhetorical concept of kairos can help us craft a context for the opportune moment and hit the mark with appropriately zingy text.

The Problem with Passwords

2010-02-09T10:30:46+00:00

Abandoning password masking as Jakob Nielsen suggests could present serious problems, including undermining a user’s trust by failing to meet a basic expectation. But with design patterns gleaned from offline applications, plus a dash of JavaScript, we can provide feedback and reduce password errors without compromising the basic user experience or losing our visitors’ trust.

jQuery PhotoShoot Plugin Simulates Camera-like Effect

2010-02-09T07:42:47+00:00

The jQuery PhotoShoot Plugin gives you the ability to convert any div on your web page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.

Each time you click the area, a new shot is added to the slide div with a negative margin to the right. After this an animation starts, which slides it in view and pushes the other shots to the left, hiding the leftmost one. You can freely use the techniques and build upon the code. There are many possible uses especially in navigation systems and promotional sites.

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/02/photo-shoot…
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

sIFR default CSS hides content from at least one screen reader

2010-02-08T22:18:16+00:00

Just a heads-up to anyone using sIFR to render text: the default CSS that comes with sIFR hides the replaced text from the VoiceOver screen reader. I don’t know if any others are affected – VoiceOver is the only screen reader I have been able to verify this problem in.

Read full post

Posted in Accessibility, CSS, Typography.

Color Theory for Designer, Part 3: Creating Your Own Color Palettes

2010-02-08T18:07:49+00:00

In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.

Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

A Quick Review

Let’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, even if it’s just subconsciously. The colors you choose can either work for or against the brand identity you’re trying to create.

In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.

Traditional Color Scheme Types

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.

The basic, twelve-spoke color wheel is an important tool in creating color schemes.

Monochromatic

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Examples:

Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Analogous

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.

Examples:

This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.

Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.

Another example of a traditional analogous scheme.

And the above theme modified for use in a website design.

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).

Examples:

A wide range of tints, shades, and tones makes this a very versatile color scheme.

Another complementary color scheme with a wide range of chromas.

Don’t forget that beige and brown are really tints and shades of orange.

Split Complementary

Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

Examples:

A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.

Another palette with a wide range of chromas.

Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

Examples:

Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.

Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.

Double-Complementary (Tetradic)

Tetradic color schemes are probably the most difficult schemes to pull off effectively.

Examples:

A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.

Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.

It works just as well for darker color schemes.

Custom

Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.

Examples:

The colors here all have similar chroma and saturation levels.

Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.

Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color can act as an accent).

Creating a Color Scheme

Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.

We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.

Lets try breaking away from the color scheme types already mentioned, and create some custom schemes. While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined patterns.

So, for the purposes of our project here, we’ll create three color schemes each for two different websites. Our hypothetical clients are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel.

We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.

For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.

For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.

This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used in different values and saturation levels.

Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.

Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale yellow tone, which sits opposite purple on the color wheel. This serves as our neutral, and looks more like an off-white color when compared to our other hues.

While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.

Why Shades, Tones, and Tints Are Important

As you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.

When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.

Adding in Some Neutrals

Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.

Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.

Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).

Using Photos for Color Schemes

One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.

Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.

Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:

Here’s the original color scheme that Kuler gives us when using this image:

One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:

Colorful

Bright

Muted

Deep

Dark

Now, let’s create a color scheme in Photoshop using the same image. This is a bit less scientific than the way Kuler does it. I usually just pick a color with the eyedropper tool, and then keep clicking on different spots in the image until I find other colors that go with it. Here are the results (this took less than five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):

Creating color schemes from images in Photoshop is easiest with images that are relatively monochromatic to begin with. With more colorful images, it gets trickier.

Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:

And here are the five color schemes that Kuler gives us from this image:

Colorful

Bright

Muted

Deep

Dark

And here’s what I came up with in Photoshop using the same image:

As you can see, the Photoshop version I came up with is completely different than what Kuler came up with, but all of the schemes above are visually appealing. The Photoshop version here took a bit longer than the one above, partly because of the diversity of colors present in the image.

The Easiest Color Schemes

We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.

Here are a few examples to give you an idea of what I’m talking about:

You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.

You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.

How Many Colors?

You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

10 Sites With Great Color Schemes

To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.

Wentings Cycle & Mountain Shop

Scheme:

Trivuong.com

Scheme:

Oscar Barber

Scheme:

North East Peace III Partnership

Scheme:

mbA Architects

Scheme:

Studio 13

Scheme:

Joy Project

Scheme:

Morphix Blog

Scheme:

El Designo

Scheme:

LemonStand

Scheme:

Conclusion

We’ve really only just touched on color theory in this series. There are specialists out there who have literally spent years refining their ability to choose colors that are appropriate to any situation.

The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Kuler’s tool for creating schemes from images), or just open up Photoshop and start. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.

Further Resources

Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.

10 Super Useful Tools for Choosing the Right Color Palette
A round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes.
100 Random Colors 2.0
This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration.
Classic Color Schemes
This article from Color Wheel Pro covers all the traditional color schemes in detail, with examples.
ColorMunki
Another color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes.
ColorSchemer
A color scheme gallery and tool with a free online version.
ColourLovers
A community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes.

Flickr-Style Photo Tagging Using jQuery

2010-02-08T07:47:23+00:00

A few days ago, Ben Nadel programmed a little proof-of-concept for Flickr-style photo tagging using jQuery. He did it as an exploration in mouse-based event binding. He took a step further and packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.

jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.

Requirements: jQuery Framework
Demo: http://www.bennadel.com/resources/projects/jquery_photo_tagger…
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

SimpleFolio: A Free Clean Portfolio WordPress Theme

2010-02-08T18:07:49+00:00

Today we are glad to release a beautiful, simple and clean portfolio WordPress theme — SimpleFolio, designed by Omar E. Corrales and released for Smashing Magazine and its readers. SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider.

It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.

Download the theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. You may modify the theme as you wish. Please link to this article if you want to spread the word.

live demo
large preview (main page)
large preview (portfolio page)
large preview (single post page)
large preview (back-end options page)
download the .zip-package (.zip, 0.93 Mb, including installation guidelines, updated)
official support forum
release post on designer’s site

Features

Here are some of the features of the theme:

CSS-based layout,
2 columns of fixed width,
widget-ready,
XHTML 1.0 Transitional valid,
multi-browser compatibility: tested on Firefox, Safari , IE7, IE8, Chrome,
easy to setup, theme options page.

Front page

Portfolio

Options page in back-end

Single post, main area

Single post, threaded comments

Single post, sidebar

Behind the design

As always, here are some insights from the designer:

I created this theme after getting tired of all the fancy design themes that are very popular now a days, this is a design for people that just need the job done without complicating them selfs. The best use can be either for just someone thats starting to blog or some artist that needs to expose there art.

Thank you, Omar. We appreciate your work and your good intentions!

Beautiful Motion Graphics Created With Programming: Showcase, Tools and Tutorials

2010-02-06T15:25:47+00:00

When you hear the word “creative”, what type of profession comes to mind? Maybe a graphic designer, painter, sculptor, illustrator, or writer? It’s unlikely that you would consider a “programmer” when thinking of creative fields of work. But programmers have the potential to be creative and come up with ideas or concepts that will impact others in positive ways.

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.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

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.

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

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

(ll)

How to Create Bulletproof Backups for MySQL

2010-02-06T09:47:41+00:00

You have all your important data backed up, right? I mean, come on folks, it’s 2010. We may not have flying cars yet like we’re supposed to, but “having backups” is a problem that’s solved. And I’m sure you’ve solved it. I’m sure you sleep well at night knowing that if a comet hit the data center where your website lives, and everything was completely destroyed, you could get back up and running somewhere else quickly enough.

If, however, you are one of the many many people who doesn’t have a good backup strategy in place, this article “Bulletproof backups for MySQL” is here to help you out. He covered quite a bit in this article, but if you make it through everything, you should be able to rest easier knowing that you have good, safe backups of your database.

Source: Bulletproof backups for MySQL

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

2010-02-06T02:19:08+00:00

Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.

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.

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

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

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(al)

Plupload – Making Multiple Uploading Easier than Ever

2010-02-05T08:56:51+00:00

Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation. Drag/drop support of files is currently only available in Firefox 3.5+. Image resizing is only possible on Firefox 3.5+ and only at a fixed quality.

Requirements: jQuery Framework
Demo: http://www.plupload.com/example_queuewidget.php
License: GPL v2 License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Forgotten CSS selectors

2010-02-04T20:09:04+00:00

Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML.

Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. So I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them.

Read full post

Posted in CSS.

The Art And Science Of The Email Signature

2010-02-05T19:15:43+00:00

Email signatures are so easy to do well, that it’s really a shame how often they’re done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard. Why are email signatures important? They may be boring and the last item on your list of things to get right, but they affect the tone of every email you write.

Email signatures contain alternative contact details, pertinent job titles and company names, which help the recipient get in touch when emails are not responded to. Sometimes, they give the recipient an idea of who wrote the email in case it has been a while since they have been in touch. They are also professional: like a letterhead, they show that you run a business (in some countries, you’re required to do so). Here are some tips on how to create a tasteful signature that works.

[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]

Be Concise

First and foremost, the sender’s header (the “From” field) should have a name, and you should use a company email address if you can. If someone sees stevies747@hotmail.com, they’ll suspect it’s spam. If the sender’s header reads, “Steve Stevenson – Mister Stevenson Design Company” <steve@misterstevenson.com>, they’ll know it’s a professional email from Steve, their trusted designer.

Start by making your website a link. Many email clients convert email addresses and websites into links automatically, but not always. When you’re creating the HTML for an email, make sure the link will appear by adding writing it in HTML. And instead of linking text like “My website,” type out the URL, which will be useful for those who want to copy and paste the address.

An email signature shouldn’t double the email’s length, so make it as short as possible (three lines is usually enough). Don’t get into your life story here. The purpose of a signature is to let them see who you are and how to get in touch with you.

Make Sure to Include…

Your name,
Your company and position,
How to get in touch with you.

No need to include 10 different ways to get in touch with you. As in website design, less is more; and then they’ll know which way you prefer to be contacted. Go to two or three lines, with a maximum of 72 character per line (many email applications have a maximum width of 80 characters, so limit the length to avoid unsightly wrapping). An optional fourth line could be your company address, but use caution if you work from home.

--
Steve Stevenson, Web Designer
www.misterstevenson.com | steve@misterstevenson.com

Short and Concise, but Check the Rules

In some European countries, laws dictate what items you must put in your email signature if you are a registered company. For example, UK law requires private and public limited companies to include the following:

Company number,
Address of registration,
VAT number, if there is one.

You can be fined for not including this information on all electronic correspondence and on your website and stationary. Many freelancers and small businesses have ignored these rules since their inception, risking a fine. For more information on UK rules, go here. Do some research to find out what rules apply in your country.

--
Steve Stevenson, Web Designer
www.misterstevenson.com | steve@misterstevenson.com
55 Main Street, London, UK, EC2A 1RE
Company number: 12345678

Don’t Include…

Personal Twitter, IM or Skype details;
Your home phone number or address (unless you want to be called by international clients early in the morning);
The URL of your personal website;
Random quotes at the bottom;
Your entire skill set, CV and lifetime achievements in point form.

Random quotes are fun for friends, but you risk offending business associates with whom you don’t have a personal relationship. Unless you want clients contacting you while you’re watching Lost, don’t share your home details far and wide. Also, don’t share your personal contact information with your corporate partners. They certainly won’t be interested in it, and you may not want them to know certain details about you. However, mentioning your corporate Twitter account or alternative means of contact in your signature might be useful, in case your correspondent is not able to get in touch with you by regular email.

	Steve Stevenson, Web Designer web: www.misterstevenson.com blog: blogspot.celebritiesneedhelp.com email: steve@misterstevenson.com
	home: 613.555.2654 home (wife): 613.555.3369 work: 613.555.9876 cell: 613.555.1234 55 Drury Lane Apartment 22 Ottawa, Ontario Canada twitter: @stevie_liverpool_fan skype: stevie_the_man messenger: stevie_mrstevenson I specialize in: Web design Graphic design Logo design Front-end development UI design “Flying may not be all plain sailing, but the fun of it is worth the price.” -Amelia Aerheart

Don’t do this.

Images And Logos

Let’s get this out of the way now: your entire signature shouldn’t be an image. Sure, it will look exactly how you want, but it is completely impractical. Not only does an image increase the email’s file size, but it will likely be blocked before being opened. And how does someone copy information from an image?

: This signature is too big at 20 KB and impossible to copy.

Any images should be used with care and attention. If you do use one, make it small in both dimensions and size, and make it fit in aesthetically with the rest of the signature. 50 x 50 pixels should be plenty big for any logo. If you want to be taken seriously as a business person, do not make it an animated picture, dancing dog or shooting rainbow!

Most email clients store images as attachments or block them by default. So, if you present your signature as an image, your correspondents will have a hard time guessing when you’ve sent a genuine attachment.

The best way to include an image is to host it on a server somewhere and then use the absolute URL to insert the logo. For example, upload the logo to http://www.example.com/uploads/logo.gif. And then, in your email signature’s HTML, insert the image like so:

<img src="http://www.example.com/uploads/logo.gif" width="300" height="250" alt="example's logo" />

Don’t Be A Fancy Pants

Use vCards With Caution

While vCards are a great, convenient way to share contact information, in emails they add bytes and appear as attachments. It is often said that you shouldn’t use a vCard for your email signature, because as helpful as it might be the first time you correspond with someone, receiving it every time after that gets annoying. Besides, the average email user won’t know what it is. Look at the example below. Would an average user know what that is?

---
Steve Stevenson, Web Designer
www.misterstevenson.com | steve@misterstevenson.com

If you do want to provide a vCard, just include a link to a remote copy.

What About Confidentiality Clauses?

If your emails include confidential information, you may need to include a non-disclosure agreement to prevent information leaks. However, good practice is never to send sensitive information as plain text in emails because the information could be extracted by third parties or forwarded by recipients to other people. Thus, including a non-disclosure agreement doesn’t make much sense if you do not send sensitive information anyway.

Keep in mind, too, that the longer a confidentiality clause is, the more unlikely someone will actually read it. Again, check your country’s privacy laws. Some big companies require a disclosure with every email, but if you’re at a small company or are a freelancer and don’t really require it, then don’t put it in. The length of such clauses can be annoying, especially in short emails.

---
Warm Regards & Stay Creative!
Aidan Huang (Editor)
-------------------------------------------
Onextrapixel
Showcasing Web Treats Without Hitch
web . http://www.onextrapixel.com
twi . http://twitter.com/onextrapixel
---------------------------------------------------------------------------------
This email and any files transmitted with it are confidential and intended solely
for the use of the individual or entity to whom they are addressed. If you have
received this email in error please notify the sender. This message contains
confidential information and is intended only for the individual named. If you
are not the named addressee you should not disseminate, distribute or copy this
email. Please notify the sender immediately by email if you have received this
email by mistake and delete this email from your system. If you are not the
intended recipient you are notified that disclosing, copying, distributing or
taking any action in reliance on the contents of this information is strictly
prohibited.

--
This email and any files transmitted with it are confidential. If you have received
this email in error please notify the sender and then delete it immediately.
Please note that any views or opinions presented in this email are solely those
of the author and do not necessarily represent those of Company.

The recipient should check this email and any attachments for the presence
of viruses. Company accepts no liability for any damage caused by any virus
transmitted by this email.

Company may regularly and randomly monitor outgoing and incoming emails
(including the content of them) and other telecommunications on its email
and telecommunications systems. By replying to this email you give your
consent to such monitoring.

*****

Save resources: think before you print.

Don’t Be Afraid to Show Some Personality

Although your email signature should be concise and memorable, it doesn’t have to be boring. Feel free to make your email signature stand out by polishing it with your creative design ideas or your personal touch. Using a warm greeting, adding a cheeky key as Dan Rubin does or encouraging people to “stalk” you as Paddy Donnelly does, all show personality behind simple text.

The key to a simple, memorable and beautiful email signature lies in balancing personal data and your contact details. In fact, some designers have quite original email signatures; most of the time, simple ASCII is enough.

--
h: http://danielrubin.org
w: http://sidebarcreative.com
b: http://superfluousbanter.org

m: +1 234 567 8901
i: superfluouschat

k: h = home, w = work, b = blog, m = mobile, i = aim, k = key

Paddy

--

The Site: http://iampaddy.com
Stalk Me: http://twitter.com/paddydonnelly

--

With optimism,
Dmitry Belitsky
http://belitsky.info

///////////////////////////////////////////////////////////////////
/// Matthias Kretschmann     ///   krema@xxxxxxxx.xx            ///
/// freelance designer &     ///   www.kremalicious.com         ///
/// photographer             ///   www.matthiaskretschmann.com  ///
///////////////////////////////////////////////////////////////////
/// media studies / communication science & art history         ///
/// MLU Halle-Wittenberg                                        ///
///////////////////////////////////////////////////////////////////

--
With greetings from Freiburg, Germany,
Vitaly Friedman (editor-in-chief)
-------------------------------------------------
Smashing Magazine
http://www.smashingmagazine.com - http://www.twitter.com/smashingmag
online magazine for designers and developers

HTML?

If you can, stay away from HTML formatting. Every Web designer knows the pain of HTML newsletters, and while HTML is supported for email signatures, you’ll likely have problems with images and divider lines in different email clients. Some nice ASCII formatting may work in some cases.

--
carole guevin . editor
//// design + digital culture magazine
//// http://netdiver.net

--
Min, Tran Dinh
Chief Creative Designer - Frexy Studio

Website: http://frexy.com | Blog: http://min.frexy.com | Email: info@frexy.com
Cellphone: (84) 012 345 678

- --
Rene Schmidt -- Berater für Web-Entwicklung & eCommerce,
Linux-Webserver-Systemadministration & Web-Programmierung
Vordamm 46, 21640 Horneburg; http://www.reneschmidt.de/
Tel: 0123.456.7.890; Skype: reneATreneschmidt.de
Steuernummer 43/141/09180; USt-IdNr 219014862
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.9 (MingW32)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iEYEARECAAYFAktit8sACgkQucSanG9drm2ZYACggIeQST/C226LIsd/czEmrnrR
TjUAniVPXI2lkA68fy3n+nUawdAE1nJ/
=+vZR
-----END PGP SIGNATURE-----

---
Geoff Teehan
Teehan+Lax
Web Platforms  |  Digital Campaigns  |  Mobile Applications  |  Strategic Consulting

T: 416 123 4567 x 890  |  teehanlax.com  |  twitter.com/@teehanlax

----------------------------------------
Dmitry Dragilev

ZURB | Marketing Lead
getstarted@zurb.com
http://www.zurb.com
------------------------------------------

Follow our blog at:
http://www.zurb.com/blog

Follow us on Twitter: @zurb
http://twitter.com/zurb

Check out Notable - Easiest way for teams to
provide feedback on websites.
http://www.notableapp.com
------------------------------------------

______________________________________________

Website: www.webdesignerdepot.com
Twitter: www.twitter.com/DesignerDepot

Regards,

Matt Ward
Echo Enduring Media

Web - http://www.echoenduring.com
Blog - http://blog.echoenduring.com
Twitter - @echoenduring - Follow me!

--
Dan Rubin
Sidebar Creative { Director of Training & User Experience }

mobile: +1 234 567 8901
http://sidebarcreative.com

--
David Leggett
Tutorial9 Founder
555.012.34567
@theleggett
Tutorial9.net

Gareth Hardy
Graphic Designer | Down With Design

www.downwithdesign.com
gareth@downwithdesign.com
+44 (0) 0123 456 789

Grant Friedman
www.colorburned.com

Follow me on Twitter!
http://twitter.com/colorburned
----------------------------------------

Many thanks,
Yaili.

yaili.com | webdesignernotebook.com | londonchronicles.com
+44 (0) 1234 567890
skype: inayaili

Thanks!
Jonathan Cutrell, Editor
FuelYourInterface.com | @FuelInterface | @jCutrell

--
All the best,

Rob Bowen
Copywriter | Designer | Creative Consultant

Co-Founder/Editor @ Arbenting
& Dead Wings Designs

http://arbent.net/blog
http://deadwingsdesigns.com

Arseny

--
Please consider the environment before printing this email.
---
Arseny Vesnin
http://designcollector.net
Calendar: http://2010.designcollector.net
Profile: http://designhub.ru
Twitter: http://twitter.com/designcollector
Flickr: http://www.flickr.com/groups/designcollector-6
Vimeo: http://vimeo.com/channels/designcollector
Facebook: http://www.facebook.com/designcollector

Warm regards,

Dipti Kankaliya
{ dipti.kankaliya@studiomarch.com }

Studio March Private Limited
12 Moledina Road Camp Pune 1 India
Phone: +91-20-26334002
{ http://www.studiomarch.com }

MarchCast – The Studio March blog
{ http://www.studiomarch.com/mc }
--
This is an official email from Studio March Private Limited and is protected
by a disclaimer. If you are not the intended recipient of this email, please
visit: http://www.studiomarch.com/legal/email.

Of course, if you’re really keen to use HTML, keep it simple:

Make sure it still looks good in plain text.
Use black and standard-sized fonts, and stay away from big, tiny and rainbow-colored fonts.
Don’t use CSS. Inline HTML formatting is universally accepted.
Use common Web fonts.
Including a logo? Make sure the signature looks nice even when the logo doesn’t load or is blocked.
Check how it looks when forwarded. Do all the lines wrap correctly?
You may want to load your company image as your gravatar from Gravatar.com as Joost de Valk does.
Feel free to experiemnt with your e-mail signature: Jan Diblík uses a signature with dynamicaly changed promo image.

–

Steve Stevenson, Web Designer
www.misterstevenson.com | steve@misterstevenson.com

Separate Signature From Content

Your signature should clearly be a separate entity. Wikipedia explains the correct way to separate the signature:

“The formatting of the sig block is prescribed somewhat more firmly: it should be displayed as plain text in a fixed-width font (no HTML, images, or other rich text), and must be delimited from the body of the message by a single line consisting of exactly two hyphens, followed by a space, followed by the end of line (i.e., “– \n”). This … allows software to automatically mark or remove the sig block as the receiver desires.”

There are other less standard ways to separate your signature. While not automatic formatting, a line of —–, ======, or _______ or even just a few spaces will visually separate your signature from your email.

--
----------------------------------
Dan Oliver (editor)
.net magazine (www.netmag.co.uk)
----------------------------------
Twitter: danoliver
Email: dan.oliver@futurenet.com
Phone: 01234 56789
----------------------------------
Address for deliveries:
.net, Units 1 & 2 Cottrell Court,
Monmouth Place, Bath, BA1 2NP
----------------------------------

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Elliot Jay Stocks
Elliot Jay Stocks Design Ltd.
Registered in England & Wales #1234567

http://elliotjaystocks.com

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

###

Cheers,
-Dan

Vennlig hilsen
Lars Bæk
Byråleder & Tekstforfatter
...................................................
JØSS!
Storgata 15, 2408 Elverum
Mob (+47) 01 23 45 67
xxxx@joss.as | www.joss.as

----------------------------------------------
Information Architects Inc.
Tokyo Zurich

Oliver Reichenstein, Founder

http://informationarchitects.jp
http://webtrendmap.com
http://twitter.com/iA
----------------------------------------------

Wrestling With Your Email Client

Offering general advice on signatures is easy, sure. But anyone who has tried to implement automatic signatures in Outlook, Gmail or Yahoo knows it’s not always that simple. Here are some resources to help you get yours right every time.

Outlook
Changing Outlook’s signature is a real pain, but here’s a guide that teaches you a few things. If you use Outlook 2003, here’s another tutorial on custom signatures.

Entourage
Microsoft’s mail for mac works differently. Here’s a tutorial on how to set it up.

Gmail
Want just one basic signature? Here’s how to change the text. You’d think Google would allow you multiple signatures, links and a bit of formatting. If you’re looking for something a little more designed or wish to choose between multiple signatures, here are five ways to do it in Firefox.

Hotmail
Tips on custom images and more for Hotmail (Oh my!) can be found here. If you use Windows Live, here is a tutorial on adding images and HTML. The detail is helpful, even if the images are awful.

Yahoo
After a bit of research, I found that Yahoo used to support HTML signatures, but no longer. Here’s how to change your signature using rich text.

Apple Mail
Here is a pretty decent tutorial, with some inline HTML for formatting. It then explains how to implement it in the application. You even get some hints on how it will look on the iPhone.

Palm Pre
Learn how to customize your message on your Palm Pre here.

iPhone
Customize your “Sent from my iPhone” message here.

BlackBerry
Some information on how to change your message on BlackBerry smartphones here.

Resources

You may be interested in the following related posts:

(al)

Apple iPad GUI in PSD Format using Vectors

2010-02-04T09:25:22+00:00

Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. That’s why Geoff Teehan created iPad GUI PSD for us.

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.

Source: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Don’t Touch That Dial — Lessons Web Designers Can Learn From Television Broadcasts

2010-02-04T00:27:40+00:00

Each year, the battle for television ratings begins. Networks unveil their latest creations, jockeying for position in the ratings race, doing everything and anything within their means to gain and keep as many viewers as possible. Months, sometimes years of planning, preparation, marketing, shooting, and editing are laid bare on the “tube” for all to see. Some shows fail miserably and are cancelled after a few months. Others thrive, and become the next big thing. They all hope to become the next American Idol.

Television broadcasts continue to have a major impact on society — both in positive and negative ways. Whether you have a long-standing love affair with your television set, or you just use it to kill the monotony when you’re taking a break from the internet, I’m sure you’ll agree that, due to the overwhelming impact TV has had on modern society (and on television producers’ pocketbooks), techniques and principles unique to television broadcast production and marketing are worth examining.

Let’s see if there are lessons to be learned from the television broadcasting medium that can be applied to web development, design, and related fields.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Pre-Production

Before a television show is actually produced (that is, filmed and edited), a large amount of pre-production work is done to ensure that the entire process will run smoothly and achieve a desired result. Pre-production work for television might include storyboarding, script writing, budget planning, preparing special effects, casting guest stars, arranging for stunts, as well as creating sets, props, and costumes. Only after such preparation can a polished and interesting product be realized.

Don’t Start Shooting Before You Prepare the Script

How can you apply pre-production methods in web development and design? If you’re designing a site from scratch, you might be tempted to jump into Photoshop without giving any forethought to the design. Have you researched the competition? Have you sketched some ideas on paper? Have you identified the target audience? Have you thought beforehand about particular design principles that would work in the context of the product or service being offered? Preparing answers to such questions can significantly impact the direction the design will ultimately take and the success it achieves.

What if the project is a simple blog post or article? Have you thoroughly researched the topic? Have you ensured that the same topic has not been covered ad nauseam throughout the blogosphere? Have you chosen your main points? In most cases, to create a solid, polished piece, many of those tasks should be completed before opening up your word processor.

Whatever project you’re working on, following the example of television broadcasts by integrating pre-production into your work strategy will likely have a large impact on your project’s final result.

On-Screen Branding

Over the years, television producers have recognized the importance of branding and have taken advantage of opportunities to promote their brand with digital on-screen graphics, while being careful that these don’t interfere with the viewing experience.

The methods of use for on-screen graphics vary from country to country and weren’t used as often prior to the late 1990s. Take a look at the two screen captures below, both from the popular American hospital drama ER.

This 1994 episode of ER has no on-screen branding

In 1994, on-screen branding of logos and other graphics was virtually non-existent. Nowadays, it’s virtually impossible to watch a television station without some kind of on-screen graphical overlay. The screen capture below shows the semi-transparent NBC logo in the bottom-right corner. In North America, this is the customary place for an on-screen logo, whereas in the UK a station logo is commonly found in the top left.

This 2005 episode of ER includes on-screen branding by means of a graphic logo

Television stations have used this technique to increase brand recognition, assert ownership of a video signal, and in some cases attempt to prevent or discourage piracy. Although the use of such technology was not fully utilized until recent years, its benefits were eventually recognized. Networks and television stations have repeatedly tried to innovate in this area in a way that does not greatly affect the viewing experience.

Non-Obtrusive Branding That Makes an Impression

Web developers have many opportunities to establish their brand using elegant, non-obtrusive methods. This might be by means of custom bullets on an unordered list, the subtle color and graphics on a PDF document, or even something as simple as a customized <blockquote> that harmonizes visually with the overall website theme.

Chris Coyier of CSS-Tricks has recently redesigned his site, however, in the previous version of his design, he beautifully accomplished a type of “on-screen branding” by means of a simple enlarged asterisk character that found its way into every nook and cranny of his site — in a non-obtrusive manner. (Although his new design is much nicer overall, the asterisk is not as prevalent.)

Chris Coyier’s Pesky Asterisk

The branding on Soh Tanaka’s website can’t be missed. He beautifully incorporates various subtly-rounded blue elements that give his site character, doing so throughout the site in a non-obtrusive manner.

Soh Tanaka’s Blue Branding

Similarly, Nettuts+ uses a plus symbol that is a primary part of that site’s branding.

The “Plus” Symbol on Nettuts+

Maximizing Screen Real Estate

With technological advances, television broadcasters have realized the advertising potential of screen space during popular programming. Besides the on-screen logo branding mentioned in the previous section, TV producers have for years regularly displayed on-screen advertisements for upcoming shows, usually at the bottom of the viewing area.

This technique in television broadcasting has been widely used during sporting events and especially on 24-hour sports channels that display scores and news updates in “ticker” format. But similar to the logo branding trend, this was not used regularly until the late 1990s and beyond.

Today, every major live sporting event will display the current score, game time, or other informational graphics at the top of the screen. Hockey and basketball broadcasts will commonly display this information even during action, while baseball will usually remove the graphics during action, except when the pitcher-batter view is being shown.

Take a look at the two screen captures below from Major League Baseball’s World Series, depicting the final moments of the 1993 and 2009 World Series, respectively.

Screenshot from the 1993 World Series with no informational graphics

Screenshot from the 2009 World Series with informational graphics

The 2009 World Series image shows the score of the game, the current inning, the number of outs, the current batter’s count, a network logo, and the current score in the series — displayed while action is in progress, without obstructing the view of the game. By contrast, the screenshot from the 1993 World Series has no on-screen graphics during the action.

Television broadcasts have utilized space on the screen that they believe can be sacrificed. During a televised sporting event, much of the broadcast consists of trivial in-between-the-action moments, so the use of informational graphics has proved to be extremely useful and is rarely obtrusive to the viewing experience. In fact, in today’s market, sports fans would be appalled to watch a game for more than two minutes without an on-screen graphical update of the score or current game time.

Don’t Make Them Hunt for Common Functions

Web site users, in certain contexts, will also expect a company’s site to provide information in certain areas. The top right corner of a website’s layout is traditionally reserved for shopping cart functions, search forms, and login/register buttons. The header often holds a horizontal navigation bar that begins and ends with “Home” and “Contact”, respectively. The footer will customarily hold contact info, copyright info, and terms/policy links. On blogs, footers have expanded greatly and might include bio info, twitter feeds, social media links, and more.

Of course, none of these are to be considered hard-and-fast rules, but under certain circumstances (sometimes on information-heavy layouts), users expect certain things. Taking advantage of space in this manner will follow the example of TV industry professionals who have obviously seen great value in displaying all sorts of informative and brand-oriented graphics in a convenient manner in their broadcasts.

Closed Captioning for the Hearing Impaired

Closed Captioning, or “subtitles” (as it’s often called outside of North America) is a system that displays a text transcription of the audio portion of a television broadcast. This system, shown in the photo below, is available on many television sets, DVDs, and even video games. For prerecorded television broadcasts, transcriptions are prepared beforehand, whereas live broadcasts are transcribed by a human operator in real time.

Recognizing the need to provide hearing impaired viewers with a comfortable experience, for more than 30 years television broadcasts have included closed captioning as an option in their programming.

Flickr photo by trainman74

Not Just Screen Readers

Web accessibility is the obvious lesson learned from this television broadcast standard. Making content accessible to a wide range of users, however, is not limited to just focusing on visually impaired users.

Some users may be voluntarily browsing with certain functionality disabled. This might include disabling scripting, images, or animations. In some rare instances, users may be limited to older browsers because of company restrictions on software updates. Content can be made accessible to virtually all users by coding clean semantic markup, implementing progressive enhancement, and performing regular testing on IE6 as well as browsers designed for visually impaired users.

Segues That Keep Viewers Locked In

Over the years, television producers have realized the power of the “clicker”. When a TV ad appears, many viewers will reach for the remote control and see if there isn’t something better to watch. This is inevitably going to occur, and is worsened when you consider that television now competes with the internet for viewing time. To combat the channel-surfing habit, TV stations will often provide virtually seamless segues from one show to the next, without commercial interruption.

In years past, it was customary that a TV program would end about five minutes before the next scheduled show. Then, after two or three minutes of ads, the closing theme and credits would play, sometimes followed by more ads, finally leading into the next show.

Television producers have evidently realized that the old method leaves a window of opportunity for “channel surfers” to escape. Nowadays, it’s common for the final scene of a TV program to run simultaneously with the closing credits, as shown in the screen capture below from the popular American series The Office.

Screenshot from The Office, rolling credits during the final scene

This technique virtually ensures that the viewer will see the introduction of the program that immediately follows. Likewise, the subsequent program will not start with opening credits and theme song, but instead will begin “cold” with the opening scene — a perfect segue to keep the viewer locked in.

There’s No Such Thing as “The End”

This principle can be applied when planning and storyboarding call-to-action processes in web architecture. A simple thank you page after a form submission can be transformed into a smooth gateway to related parts of the website. The completion of an online purchase can close with a “related products” screen. The end of a blog entry can include related links. The expiration of a software trial can promote the purchase of the full version. With the principle of smooth segues in mind, the possibilities are endless.

Web mail providers like Yahoo! Mail and Hotmail have recognized the importance of such a segue — indicated by the fact that, upon logout, the user is quickly redirected to the Yahoo! or MSN home page where there is always plenty to do.

Nielsen Ratings

The Nielsen ratings audience measurement system began with brand advertising and radio market analyses in the 1920s and 1930s, and later moved to television. It eventually became the standard for audience measurement information for television broadcasts around the world.

Nielsen Ratings on Broadcast TV in the U.S.

Television professionals that don’t pay close attention to trends and patterns in the weekly Nielsen ratings system, will likely not be able to compete with other regularly scheduled programs. Although the Nielsen system has been criticized, it is generally a trusted source of audience measurement and continues to be the standard for TV viewing statistics.

The Jakob Nielsen Ratings

Today, web professionals have access to site analytics, browser- and platform-use statistics, usability trends, A/B testing potential, job skills trends, and other technology-related statistics that could impact how they design, how much time they spend on browser and usability testing, how they plan site architecture, and even what projects they’ll build next. Some of the software and online applications used in obtaining the aforementioned data have become standards that, similar to the Nielsen ratings system, cannot be overlooked.

Regularly Scheduled Programming

In the TV world, in most cases, viewers know exactly when to expect a new episode of their favourite program, and this has served to solidify viewership for many broadcasts. Certain timeslots have come to be known as “prime time” because they fit into the recreational habits of most families — prior to bedtime and shortly after dinner.

TV Guide

It would be counter-productive if television networks decided to air new episodes, at random, whenever they fancied, without a regular schedule. It would be unlikely in such circumstances that a solid user-base would be established.

Maybe We’ll Publish Something, or Maybe We Won’t

Is it any wonder that A List Apart has established one of the most loyal readerships in the web design writing industry? They publish exactly four high-quality articles per month, two at a time, on two separate Tuesdays — now that’s regularly scheduled programming that readers can depend on!

Of course, there’s no need for other bloggers and authors to follow that exact pattern, but it has become generally understood that mid-week releases for articles tend to get higher traffic. This mid-week “time slot” has become recognized as “prime time” in the blogging world.

It should be noted, however, that this method may not work for every type of content. Also, if you decide to regularly schedule a specific kind of blog post on one day of the week or month, you’ll be restricting site content for that day, without the flexibility to change. If you’re prepared for such a commitment, then it may be worth a try. Also, if you ever decide to stop publishing a regularly scheduled topic, you may disappoint readers who subscribed because of that particular type of content. So, while the principle of regularly scheduled programming may have some benefits, it could be a risky endeavor if you’re not prepared for the commitment and it could create potential for reader backlash.

Post-Production

Post-production on television broadcasts occurs after all shooting and recording of the footage has completed, and may include video editing, adding a soundtrack, and integrating computer-generated visual effects. If any of the post-production work is overlooked or neglected, the final product will be affected.

Flickr photo by roomman

Refine Your Product

Developers, designers, and site architects can follow this example by polishing, fine tuning, and ensuring that the finished product (whether it’s a large-scale application, a brochure site, or a simple blog post) meets the standards and requirements that were set during the planning and wireframing stages.

Spell checking, grammar checking, code quality assurance, usability testing, speed optimization, and dozens more website maintenance tasks may fall under the web development equivalent of “post-production” — and often such tasks go beyond even the launch of the project.

Conclusion

If a medium has existed for a significant amount of time, numerous practices associated with marketing in that medium will become solidly established and refined.

The web is still relatively young, and as designers and developers we have the opportunity to shape and create methods of marketing and production that will define this medium for years to come. The television industry has certainly established methods that can influence us to create a better and more intuitive user experience.

Related Resources

jQuery MultiSelect Plugin with ThemeRoller Support

2010-02-03T09:59:00+00:00

jQuery MultiSelect Plugin was intended to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.

jQuery MultiSelect Plugin is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. It is known to work in Firefox 2+, IE 6+, Chrome Beta/4, Safari 4 and Opera 10.

Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-multiselect…
License: MIT, GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Color Theory For Designers, Part 2: Understanding Concepts And Terminology

2010-02-02T18:04:52+00:00

If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

Hue

Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Examples

The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.

Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.

Pure red is a very popular hue in Web design.

Mix uses a number of pure hues in its header and logo.

Green in its purer forms is seen less often and so stands out more than some other colors.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

Examples

Cyan has a high chroma and so really stands out against black and white.

Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.

Combining high and low saturation in the same hue can make for a sophisticated and elegant design.

Colors with very high chroma are best used in moderation, as done here.

Differences in chroma can make for a visually pleasing gradient.

Saturation

Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Examples

The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.

Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.

Hues with lower saturation levels aren’t necessarily lighter, as shown here.

An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.

Aother example of how low saturation colors make nearby high saturation colors really stand out.

Value

Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.

When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

Examples

The high value of the yellow used here really stands out against the lower-value black and gray.

This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.

Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).

The red here has a lower value than the light blue, which itself has a lower value than the white.

The human eye can pick up differences in value even among such similar hues.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples

Tones can give websites a sophisticated look while adding some vintage and antique flair.

This website combines blues in a variety of tones, shades and tints.

Tones can be intensified by adding gray around them, as done here.

The tones used in the navigation and background design here give this website a vintage, hand-made feel.

A great example of how a pure hue can really stand out against a background of tones.

Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.

Shades

A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.

In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Examples

Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).

Using different shades together works well, as long as sufficient contrast between them is maintained.

An effective combination of shades and tints, particularly in the header.

Another background design that has shades (and a few tints) in a textured gradient.

Combining shades within textures adds interest to this website.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples

Caio Cardoso’s website has a variety of green tints in the background and in other elements.

The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.

Blue tints are popular for sky and nature motifs.

Tints are also popular in watercolor-based designs.

Tints combined together make for a sophisticated gradient.

Conclusion

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

Hue is color (blue, green, red, etc.).
Chroma is the purity of a color (a high chroma has no added black, white or gray).
Saturation refers to how strong or weak a color is (high saturation being strong).
Value refers to how light or dark a color is (light having a high value).
Tones are created by adding gray to a color, making it duller than the original.
Shades are created by adding black to a color, making it darker than the original.
Tints are created by adding white to a color, making it lighter than the original.

Further Resources

Glossary of Color Terms
An excellent reference from Color Cube.
Design Tip: Saturate Your Colors
An older article, but still has some valuable information.
Elements of Design: Value and Color
An excellent lesson in color from the University of Saskatchewan.
Color
An article from Design Notes about color and how we perceive it.

(al)

Protect Your Email Address with PHP Hide_Email()

2010-02-02T07:45:43+00:00

PHP hide_email() is a PHP function to protect the E-mail address you publish on your website against bots or spiders that index or harvest E-mail addresses for sending you spam. It uses a substitution cipher with a different key for every page load.

PHP hide_email() encrypts your E-mail address and generates the javascript that decrypts it. Most bots and spiders can’t execute javascript and that is what makes this work. A visitor of your web page will not notice that you used this script as long as he/she has javascript enabled. The visitor will see “[javascript protected email address]” in stead of the E-mail address if he/she has javascript disabled.

You can also use the generator if you have no PHP support on your web server. Change the E-mail address into your own E-mail address and press “Generate”. Cut and paste the generated XHTML into your own web page.

Requirements: -
Demo: http://www.maurits.vdschee.nl/php_hide_email/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

55 desarrolladores Flash

2010-02-02T04:22:25+00:00

La semana pasada abrí una encuesta para saber qué tecnología Flash está utilizando la gente. Nada complejo… la pregunta era “¿Cuál es la tecnología Flash que utilizas más en el día a día?”. El sondeo lo hice mediante un servicio online y participaron 55 personas. Los resultados fueron los siguientes:

Las conclusiones que surgieron tras cerrar la encuesta acerca del alto porcentaje de desarrolladores AS2 fueron básicamente:

Dptos. de técnicos: éstos se toman muy en serio las políticas de actualización. Obviamente no ven que Flash Player > 8 les pueda aportar ningún valor y por lo tanto se quedan en versiones anteriores. Estoy seguro que en algún caso puede ayudar convencer al dpto. comercial de las bondades del AVM2 vs AVM1 para que pueda darse el cambio de versión.
Flash Lite: Aquí no hay nada que discutir. Si se quiere desarrollar móvil se tiene que utilizar AS2. Esto hasta que no salga el player 10.1 para algún que otro dispositivo los próximos días.
La tecnología como medio y no como fin: Sin darnos cuenta estamos inmersos en este torbellino de continua explosión mediática que forman el par tecnología+internet. Nadie lo vive más que nosotros, que estamos suscritos a 900 RSS de blogs, a 1553 cuentas de twitter y encima escribimos en tres o cuatro blogs acerca de qué? de tecnología claro! A menudo nos olvidamos de la parte más esencial de todo esto: crear software que funciona. Nos hemos acostumbrado a vivir en un mercado tecnológico en el que las necesidades ya no surgen sino que se crean. Esto es bueno porque promueve la evolución del mundo digital pero tiene su lado oscuro, el esclavismo al que nos somete. Bueno, me he puesto filosófico ahora… pero es cierto, no?

Gracias a todos los participantes y en especial a los que se mojaron un poco más @fernandocomet, @elisma, @wadus, @supremo_tata, @sinsonido, @solisarg

Recortes interesantes iPad vs Flash

2010-02-02T04:22:25+00:00

Seguro hay muchos más por ahí pero de los que ido captando estos días éstos son los que me han parecido más bien argumentados.

Enrique Duvós iPads y lentejas

(…)Abrir esos dispositivos (iPhone, iPad) a una tecnología (Flash) que permita al usuario visualizar contenidos y aplicaciones sin pasar por el AppStore supone claramente perder el control de toda la cadena de desarrollo, publicación y distribución de contenidos, algo en lo que Apple ha invertido mucho y ha sabido monetizar tan exitosamente(…)
(…)Curiosamente versiones Beta de Flash Player 10.1 se ejecutan sin problemas en móviles tipo Nexus One, Palm Pre o Droid, los tres con procesadores mucho menos avanzados que el que monta iPad(…)

Richard Leggett “The World is Moving to HTML 5″ and Other Flights of Fancy

(…)The issue now is that things are looking a bit dated, the browser can now natively do what Flash applications were doing 5 years ago. This is a never ending game of cat and mouse, no-one can argue one is better than the other when nothing is standing still.(…)
(…)Let’s take the hot topic of the day, the <video> tag; it doesn’t even replace what you could do with Flash 8 or 9(…)
(…)It’s also the case that displacing Flash will not get rid of annoying banner ads, agencies will just use <canvas> and <video>, don’t kid yourself, it’ll be those same Flash developers making it, they would simply re-tool and utilise their existing experience to produce infuriating ads in whatever makes the biggest impact(…)
(…)I can’t wait till we get through this next transitionary period, with web designers having to spend twice the effort providing Flash fallbacks to video, companies encoding and hosting their videos twice for Firefox, licenses and royalties for h264, this will be another messy, frustrating time for web users and progress may slow(…)

cshoton en un comentario…

(…)Apple says they disallow Flash because (pick one) it’s buggy, it’s a CPU hog, it’s proprietary, etc. But they also disallow Java and it is none of those things. And they do it for the same reason that they do it for Flash. And it has NOTHING to do with their stated reasons. It is, quite simply, because Flash and Java can both be delivered via the web, completely bypassing the App Store. Period(…)

Joeflash Why Flash is Not on The iPad

(…)the fact of the matter is, the major (front-end) technologies that make up the internet today are HTML, CSS, Javascript, and Flash. Take one away, and you have a crippled, stunted information delivery platform.(…)
(…)The internet is the Matrix, and Steve Jobs is Agent Smith.(…)

Beware of “Web Page, complete” when saving HTML pages with your browser

2010-02-01T18:57:35+00:00

Every now and then I need to ask a client or another developer to save a copy of a web page and email it to me. Mostly it is because they are viewing a page that is behind a firewall and I need to see the markup. Something that happens a lot is that they send me HTML that is more or less mangled.

This HTML mangling happens when you choose “Web Page, complete” or a similarly named option in your web browser. With this option selected, browsers don’t save just the HTML source of the page – they also save any associated images, stylesheets, javascript files and other resources and change all references to those files to make them point to the locally saved copy.

Read full post

Posted in Browsers, Quick Tips.

50 Brilliant CSS3/JavaScript Coding Techniques

2010-02-01T18:55:39+00:00

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Navigation Menus With CSS 3

Sweet AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.

Sweet tabbed navigation bar using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Building Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

CSS 3 Transitions and Animations

Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Sliding Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Fun with CSS3 and Mootols
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Star Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.

Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

CSS3 animations and their jQuery equivalents
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.

CSS Animations
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

Snowy CSS3 Animation
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

Playing around with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-

More on 3D CSS Transforms
Various 3D CSS Transforms in an overview.

Gradients, RGBA and HSL with CSS 3

Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

CSS3 HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Shadows and CSS3
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Cleaner Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.

The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

IE CSS3 pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Replacing CSS Hacks with CSS 3

Rounded corner HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Better Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.

Saying Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

General articles about CSS 3

How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Practical Uses of CSS3
In this article I’ll show you some practical uses for CSS3.

11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

Practical Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”

A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
An extensive overview of CSS3-techniques, tools, articles and resources.

Sublime Video – A HTML 5 Video Player

2010-02-01T07:59:55+00:00

Sublime Video is a HTML5 Video Player, users can play videos without the need of browser plugins or Flash dependencies. It supports Full-window mode with sleek zoom-in/out transitions. There are more advanced controls on a draggable pane. Sublime Video will be soon released for free (at least for non-commercial use).

Requirements: Safari 4.0.4+, Google Chrome 4.0+, IE with Chrome Frame
Demo: http://jilion.com/sublime/video
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

El iPad

2010-02-02T14:07:53+00:00

Pasados ya unos días del evento de Apple en el Yerba Buena Center en San Francisco, he podido pensar con más calma en las implicaciones que puede llegar a tener esta nueva clase de dispositivos. He tenido en cuenta las voces críticas y optimistas del mismo en diversos artículos de opinión y blogs.

Altas expectativas

Lo he de reconocer, yo también he pecado de esperar un poco más de lo que ya todo el mundo daba por sentado que sería anunciado: una tableta Apple. Pero pasados unos días las cosas siempre se ven más claras.

Y es que lo que han anunciado es un dispositivo cuya función no es la de reemplazar ni el teléfono móvil (iPhone por ejemplo) o un portátil como un Macbook. Esto es lo que más ha chocado contra las concepciones generales que tenemos muchos acerca de la informática, pensábamos que tendríamos un mini ordenador portátil multi-touch en el cual poder picar desde código, tener un servidor web para desarrollo o (como algunos llegaron a pensar) tener Mac OS X en un dispositivo multi-touch de 9,7 pulgadas.

Entonces, ¿dónde encaja el iPad?

Steve Jobs en la presentación dijo que para que un dispositivo como éste pueda subsistir junto a los que existen actualmente las cosas que haga las tiene que hacer mejor o al menos igual que el resto de dispositivos. Ni Windows 7 ni Mac OS X Snow Leopard están preparados para ser utilizados con los dedos, sus interfaces de usuario están pensadas para ser operadas con ratón. En el caso de los Netbooks tienes la experiencia de un ordenador común y corriente pero altamente limitada (son lentos, tienen pantallas de calidad mediocre y esencialmente son ordenadores portátiles baratos).

Intentemos al menos por unos instantes quienes nos dedicamos a la informática o quienes pueden lidiar con los problemas que la informática actual conllevan debido a que cuentan con experiencia (instalar y configurar sistemas operativos, instalación de controladores, antivirus, configuración de red) pensar en esa gran cantidad de personas que a pesar de que puedan ser usuarios a diario de ordenadores no cuentan con el tiempo, habilidades o curiosidad de tener que preocuparse por cómo funciona internamente el ordenador, saber por qué repentinamente ha dejado de funcionar o su rendimiendo se ha degradado por un troyano, o conocer el nombre del fabricante de cada uno de sus dispositivos como para visitar la web de dicho fabricante y descargar controladores actualizados.

Lo que Apple empezó con el iPhone y ahora pretende continuar con el iPad es eliminar una enorme cantidad de barreras técnicas y obstáculos a una enorme cantidad de personas que quieren disfrutar la informática de una manera más amigable. Quieren que el ordenador vaya hacia ellos, no ellos hacia el ordenador. Lo que actualmente conocemos como iPhone OS es una plataforma ideal para este nuevo modelo de dispositivos informáticos. No sólo cuenta con una interfaz de usuario pensada y diseñada para multi-touch, sino que además abstrae al usuario de todo lo que anteriormente he mencionado, hasta el punto incluso de evitar que el usuario tenga que manipular el sistema de archivos.

Es por estas razones que apuesto que más de un curioso no experto en informática entrará a una Apple Store y a los pocos minutos de trastear con un iPad quedará cautivado por la facilidad de uso para las tareas informáticas que a esa persona en particular le bastan, que son el navegar por internet, acceder a su correo, ver las fotos de sus familiares o escuchar su música favorita (me estoy dejando el resto de cosas que es capaz de hacer porque no me quiero concentrar en eso). Yo dudo mucho que cualquier Netbook disponible actualmente pueda competir con la calidad de experiencia, facilidad de uso y eliminación de barreras tecnológicas que el iPad ofrece.

Como he leído en algún blog al respecto: no todo es blanco o negro.

Ecosistema de aplicaciones

Estando el iPad también basado en un procesador del tipo ARM (en este caso un procesador propio de Apple del tipo system-on-a-chip llamado A4), era obvio que casi todas las aplicaciones actualmente disponibles para el iPhone funcionarán sin ningún tipo de modificación en el iPad. Esto es una grandísima ventaja.

Por lo que pude ver en el evento, el simple hecho de tener una pantalla más grande que la del iPhone le hace ganar mucho. Hay nuevas ventanas modales desplegables como en el caso de la aplicación Brushes y las demos de las 3 aplicaciones de la suite iWork para iPad, además de barras de herramientas permanentemente visibles gracias al mayor espacio.

Empresas como Omni Group ya se han comprometido a sacar aplicaciones específicas para el iPad (OmniGraffle, OmniFocus…). Actualmente hay unas 140 mil aplicaciones para iPhone y la tendencia es al alza.

Estoy seguro que veremos más anuncios de empresas relacionados al iPad en las próximas semanas. Veremos a quienes actualmente están desarrollando para el iPhone ofrecer aplicaciones que aprovechen la pantalla del iPad y me atrevería a decir que veremos más gente interesada en desarrollar para iPhone OS en su conjunto.

Críticas

Se han visto críticas de todo tipo y las más generales acerca de lo que actualmente entendemos como informática de usuario ya las he intentado rebatir en el apartado “altas expectativas”. Ahora el resto:

Soporte de Flash

Se podría decir que Apple quiere apostar por estándares abiertos, impulsar HTML5 (el elemento canvas, webGL, web sockets), esto es cierto. Pero yo creo que la culpa de que Flash no exista en el iPhone y tampoco en el iPad se reparte entre Adobe y Apple en cantidades iguales. En Adobe por no ser capaces de demostrar que pueden tener un Flash Player decente en Mac OS X (el plug-in de Flash es la razón principal de los cuelgues de Safari en Mac OS X, tanto así que ahora se ejecuta en un proceso aparte para que no haga morir al navegador completo si se cuelga). Viendo este panorama, es altamente dudoso que Adobe sea capaz de comprometerse a ofrecer un Flash Player de calidad para un dispositivo móvil en el que los ciclos de procesador son valiosos y la batería también. El resto de culpa recae en Apple y es que a ellos les interesa mantener el control de la aprobación y entorno de desarrollo de las aplicaciones para iPhone OS. Si Mobile Safari tuviese una versión decente de Flash muchos de quienes desarrollan ahora aplicaciones nativas podrían estar haciéndolo en Flash, aunque yo tengo serias dudas de cómo un desarrollador Flash sería capaz de cobrar por sus aplicaciones si pueden ser fácilmente visitadas en una web. Al menos en el App Store escoges tú el precio y sabes que Apple se queda un 30% y el desarrollador el 70%. El modelo de la App Store ha sido criticado mucho por algunas aplicaciones rechazadas, las demoras en ser aprobadas, pero recientemente han mejorado mucho, esta semana incluso han empezado a permitir aplicaciones VoIP sobre redes 3G con lo cual Skype podrá utilizarse en el iPhone/iPad a través de 3G.

Apple ya ha vendido unos 75 millones de iPhones y iPod Touch. 75 millones de dispositivos capaces de acceder a internet que no cuentan con soporte de Flash.

Soporte multitarea

Esta es una crítica comprensible especialmente ahora en el iPad. Especialmente si las aplicaciones no soportan adecuadamente lo que Apple recomienda al presionar el botón “home”, que es guardar el estado de la aplicación para que al volver a ella te deje tal y como la habías cerrado (algunos juegos que he probado en el iPhone no siguen esta recomendación). Esto es muy incómodo cuando recibes un SMS o una notificación instantánea y decides salir de la aplicación que estabas utilizando.

Hay rumores de que la versión 4.0 del iPhone OS tendrá algún tipo de soporte multitarea.

Características de hardware

Aquí me voy a repetir un poco con lo que he empezado esta pieza, este tipo de dispositivos empezarán a ser vistos no por las características de hardware que tienen sino por lo que hacen y lo bien que lo hacen. Llegado a este punto los gigahertz de frecuencia a los que vaya su procesador es lo que menos importa si la experiencia y facilidad de uso es buena.

Habiendo dicho esto, a mi personalmente me ha decepcionado que no tuviese una cámara mirando hacia el usuario para efectos de videoconferencia, aunque puedo contar con una mano la cantidad de veces que he hecho videoconferencia en mi vida, de hecho la única webcam que he tenido es porque me ha venido incorporada en el iMac. Pero sé que hay gente que este tipo de cosas les gustan, por ejemplo gente de mediana edad que le gustaría hacer una videoconferencia con sus hijos en el extranjero.

Cerrando

El iPad no es un dispositivo para quienes entendemos la informática como ordenadores con sistemas operativos tradicionales, el iPad será un dispositivo para disfrutar haciendo las cosas que hace, sin tener que preocuparse por todo lo que ahora mismo es incómodo de la informática y que constituyen barreras realmente altas para una gran cantidad de personas. Por este motivo y teniendo en cuenta los precios a los cuales será ofrecido, el ecosistema de aplicaciones con el que ya cuenta (y va a contar) y sus futuras versiones (recordemos cómo fué el primer iPod) le auguro éxito.

Esta entrada ha sido escrita por Ernesto González Aroca utilizando Ommwriter desarrollado por Herraiz Soto & Co.

Desktop Wallpaper Calendar: February 2010

2010-02-01T14:36:42+00:00

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with aAbstr nice calendar instead of launching some default time application?

This post features 70 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

all images can be clicked and lead to the preview of the wallpaper;
you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

So what wallpapers have we received for February 2010?

Please notice that you can also download the February 2010 Windows 7 Theme, prepared by Tim Heuer for Smashing Magazine and its readers.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Summer

"I thought I would like to make something relevant to the Aussie readers of Smashing Magazine. This is what February in Australia looks like!" Designed by Eli Burford from Australia.

preview
with calendar: 1024×768, 1440×900, 1600×1200, 1680×1050, 1920×1200
without calendar: 1024×768, 1440×900, 1600×1200, 1680×1050, 1920×1200

Pizza and Wings

"Football season is coming to an end and March Madness is about to begin, carb up." Designed by Ashleigh Liggett from United States.

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Love Memories

"First time I try to paint a sketch in the computer. Beginner… but I like it! :)" Designed by Alicia De Freitas from Venezuela.

preview
with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

Childhood Sweethearts

"Remember the excitement of Valentine’s Day when you were in grade school? Remember the cheesy Valentines cards and the sugary treats; the silly love predictions? I’m hoping to invoke a sense of nostalgia with “Childhood Sweethearts.”" Designed by Leisha Farrell of Feral Bytes from USA.

preview
with calendar: 800×600, 1024×640, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200
without calendar: 800×600, 1024×640, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200

Imaginary Friends

"The inspiration for this illustration was russian rock’n'roll-song “Pharmacist, judge, beaver and owl” by Maksim Leonidov." Designed by Andrei Verner from Russia.

preview
with calendar: 1024×640, 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1200
without calendar: 1024×640, 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1200

Elephants

"Big lovers!" Designed by Giada Degli Agostini from Italy.

preview
with calendar: 800×600, 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600
without calendar: 800×600, 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600

Watercolors

"February is the month for doing the things you love and loving the things you do." Designed by Heldrik Lynch from Peru.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1600
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1600

Love is all around me

"February is a month when everyone and everything radiate love!I wish you to love and be loved:)" Designed by Anna Volkova from Russia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050

Eternal Battle

"Eternal battle between photographers – to use them or not to use them…" Designed by Martin Cajzer from United Kingdom (originally Poland).

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200

Valentines Disaster

"Sometimes the best laid plans fail… even on Valentine’s Day." Designed by Popephoenix from United States.

preview
with calendar: 1024×768, 1280×720, 1900×1200
without calendar: 1024×768, 1280×720, 1900×1200

It’s a French Kind of Love

preview
with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

Clockwork Decay

"I’ve been wanting to play with a steampunk-themed design for a while. So, I made that the goal of this month’s design. I started out with some watch pieces and I added in some grunge textures and played with the color palette. I really like the way the end result looks like rust, and has a real gritty quality to it." Designed by Arcane Palette Creative Design from USA.

preview
with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1600×1200, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1600×1200, 1920×1200

Pink Textile

preview
with calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1680×1050
without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1680×1050

A little month i call Feb

"Corresponding colors to corresponding days of the week to correspond the awkwardness of limp-dated Feb." Designed by Alicia Souza from Australia.

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Colorfull Winter

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Cinema

preview
with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

Be My Valentine

"Teenagers in love! Isn’t love awkward at times?! Happy February!" Designed by Sasha Bell from England, UK.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Grunge Love Hearts

"This isn’t the most amazing and complex of designs, but a lot of the times, simplicity is the beauty of things… this isn’t 100% simple, but it’s edging there! Happy Feb 2010 :)" Designed by Rosanna Bell from England, UK.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Everyday Love

"Designed for daily inspiration and encouragement to live a life of love." Designed by Millicent Bowman from USA.

preview
with calendar: 320×480, 1024×768, 1280×768, 1440×900, 1680×1050, 1920×1200, 1920×1440
without calendar: 320×480, 1024×768, 1280×768, 1440×900, 1680×1050, 1920×1200, 1920×1440

Love Wallpaper

"Suffering from unrequited love? Care to attract your sweetheart right now?Try this free Love Wallpaper at work!Post your and your love’s pic files s

Planetaki Planet Desarrollo Web

Words that Zing

The Problem with Passwords

jQuery PhotoShoot Plugin Simulates Camera-like Effect

Related Posts

Sponsors

sIFR default CSS hides content from at least one screen reader

Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A Quick Review

Traditional Color Scheme Types

Monochromatic

Analogous

Complementary

Split Complementary

Triadic

Double-Complementary (Tetradic)

Custom

Creating a Color Scheme

Why Shades, Tones, and Tints Are Important

Adding in Some Neutrals

Using Photos for Color Schemes

The Easiest Color Schemes

How Many Colors?

10 Sites With Great Color Schemes

Wentings Cycle & Mountain Shop

Trivuong.com

Oscar Barber

North East Peace III Partnership

mbA Architects

Studio 13

Joy Project

Morphix Blog

El Designo

LemonStand

Conclusion

Further Resources

Flickr-Style Photo Tagging Using jQuery

Related Posts

Sponsors

SimpleFolio: A Free Clean Portfolio WordPress Theme

Download the theme for free!

Features

Behind the design

Beautiful Motion Graphics Created With Programming: Showcase, Tools and Tutorials

Beautiful Motion Graphics Created with Programming

Free Applications for Creating Visuals with Computational Code

Processing

Quartz Composer

OpenFrameworks

NodeBox

VVVV

eMotion

Creating Interactive Visuals with Computational Code

Tutorials

Books for Reference

Resources

How to Create Bulletproof Backups for MySQL

Related Posts

Sponsors

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Complete Wireframing Toolkits

Web Browser Templates

Web-Safe Area Templates for Photoshop

Web Form Elements

Web Browser Elements

Grid Templates

Mobile App Development Resources

Optional Wireframe Extras

Printable Sketching Paper

Printable Wireframe and Notes

Wireframe Magnets (DIY Kit)

Further Resources And Some Wireframing Inspiration

Further Related Articles

About the Author

Plupload – Making Multiple Uploading Easier than Ever

Related Posts

Sponsors

Forgotten CSS selectors

The Art And Science Of The Email Signature

Be Concise