BlogmyQuery – BMQ

The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.

All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.

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

1. .parent() vs. .parents() vs. .closest()

All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.

parent(selector)

This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:

$('span#mySpan').parent().css('background', '#f90');
$('p').parent('div.large').css('background', '#f90');

The first line gives the parent of #mySpan. The second does the same for parents of all <p> tags, provided that the parent is a div and has the class large.

Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent().

parents(selector)

This acts in much the same way as parent(), except that it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors. So, for example:

$('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs

This says that for each <li> that has the class nav, return all its parents/ancestors that are also <li>s. This could be useful in a multi-level navigation tree, like the following:

<ul id='nav'>
	<li>Link 1
		<ul>
			<li>Sub link 1.1</li>
			<li>Sub link 1.2</li>
			<li>Sub link 1.3</li>
		</ul>
	<li>Link 2
		<ul>
			<li>Sub link 2.1

			<li>Sub link 2.2

		</ul>
	</li>
</ul>

Imagine we wanted to color every third-generation <li> in that tree orange. Simple:

$('#nav li').each(function() {
	if ($(this).parents('#nav li').length == 2)
		$(this).css('color', '#f90');
});

This translates like so: for every <li> found in #nav (hence our each() loop), whether it’s a direct child or not, see how many <li> parents/ancestors are above it within #nav. If the number is two, then this <li> must be on level three, in which case color.

closest(selector)

This is a bit of a well-kept secret, but very useful. It works like parents(), except that it returns only one parent/ancestor. In my experience, you’ll normally want to check for the existence of one particular element in an element’s ancestry, not a whole bunch of them, so I tend to use this more than parent(). Say we wanted to know whether an element was a descendent of another, however deep in the family tree:

if ($('#element1').closest('#element2').length == 1)
	alert("yes - #element1 is a descendent of #element2!");
else
	alert("No - #element1 is not a descendent of #element2");

Tip: you can simulate closest() by using parents() and limiting it to one returned element.

$($('#element1').parents('#element2').get(0)).css('background', '#f90');

One quirk about closest() is that traversal starts from the element(s) matched by the selector, not from its parent. This means that if the selector that passed inside closest() matches the element(s) it is running on, it will return itself. For example:

$('div#div2').closest('div').css('background', '#f90');

This will turn #div2 itself orange, because closest() is looking for a <div>, and the nearest <div> to #div2 is itself.

2. .position() vs. .offset()

These two are both concerned with reading the position of an element — namely the first element returned by the selector. They both return an object containing two properties, left and top, but they differ in what the returned position is relative to.

position() calculates positioning relative to the offset parent — or, in more understandable terms, the nearest parent or ancestor of this element that has position: relative. If no such parent or ancestor is found, the position is calculated relative to the document (i.e. the top-left corner of the viewport).

offset(), in contrast, always calculates positioning relative to the document, regardless of the position attribute of the element’s parents and ancestors.

Consider the following two <div>s:

Querying (no pun intended) the offset() and position() of #innerDiv will return different results.

var position = $('#innerDiv').position();
var offset = $('#innerDiv').offset();
alert("Position: left = "+position.left+", top = "+position.top+"\n"+
      "Offset: left = "+offset.left+" and top = "+offset.top
)

Try it yourself to see the results: click here.

3. .css(‘width’) and .css(‘height’) vs. .width() and .height()

These three, you won’t be shocked to learn, are concerned with calculating the dimensions of an element in pixels. They both return the offset dimensions, which are the genuine dimensions of the element no matter how stretched it is by its inner content.

They differ in the data types they return: css('width') and css('height') return dimensions as strings, with px appended to the end, while width() and height() return dimensions as integers.

There’s actually another little-known difference that concerns IE (quelle surprise!), and it’s why you should avoid the css('width') and css('height') route. It has to do with the fact that IE, when asked to read “computedâ€� (i.e. not implicitly set) dimensions, unhelpfully returns auto. In jQuery core, width() and height() are based on the .offsetWidth and .offsetHeight properties resident in every element, which IE does read correctly.

But if you’re working on elements with dimensions implicitly set, you don’t need to worry about that. So, if you wanted to read the width of one element and set it on another element, you’d opt for css('width'), because setting dimensions, just like in CSS, requires specifying a unit of measurement.

But if you wanted to read an element’s width() with a view to performing a calculation on it, you’d be interested only in the figure; hence width() is better.

Note that each of these can simulate the other with the help of an extra line of JavaScript, like so:

var width = $('#someElement').width(); //returns integer
width = width+'px'; //now it's a string like css('width') returns
var width = $('#someElement').css('width'); //returns string
width = parseInt(width); //now it's an integer like width() returns

Lastly, width() and height() actually have another trick up their sleeves: they can return the dimensions of the window and document. If you try this using the css() method, you’ll get an error.

4. .click() (etc) vs. .bind() vs. .live() vs. .delegate

These are all concerned with binding events to elements. The differences lie in what elements they bind to and how much we can influence the event handler (or “callbackâ€�). If this sounds confusing, don’t worry. I’ll explain.

click() (etc)

It’s important to understand that bind() is the daddy of jQuery’s event-handling API. Most tutorials deal with events with simple-looking methods, such as click() and mouseover(), but behind the scenes these are just the lieutenants who report back to bind().

These lieutenants, or aliases, give you quick access to bind certain event types to the elements returned by the selector. They all take one argument: a callback function to be executed when the event fires. For example:

$('#table td ').click(function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

This simply says that whenever a <div> inside #table is clicked, alert its text content.

bind()

We can do the same thing with bind, like so:

$('#table td ').bind('click', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Note that this time, the event type is passed as the first argument to bind(), with the callback as the second argument. Why would you use bind() over the simpler alias functions?

Very often you wouldn’t. But bind() gives you more control over what happens in the event handler. It also allows you to bind more than one event at a time, by space-separating them as the first argument, like so:

$('#table td').bind('click contextmenu', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Now, our event fires whether we’ve clicked the <td> with the left or right button. I also mentioned that bind() gives you more control over the event handler. How does that work? It does it by passing three arguments rather than two, with argument two being a data object containing properties readable to the callback, like so:

$('#table td').bind('click contextmenu', {message: 'hello!'}, function(e) {
	alert(e.data.message);
});

As you can see, we’re passing into our callback a set of variables for it to have access to, in our case the variable message.

You might wonder why we would do this. Why not just specify any variables we want outside the callback and have our callback read those? The answer has to do with scope and closures. When asked to read a variable, JavaScript starts in the immediate scope and works outwards (this is a fundamentally different behavior to languages such as PHP). Consider the following:

var message = 'you left clicked a TD';
$('#table td').bind('click', function(e) {
	alert(message);
});
var message = 'you right clicked a TD';
$('#table td').bind('contextmenu', function(e) {
	alert(message);
});

No matter whether we click the <td> with the left or right mouse button, we will be told it was the right one. This is because the variable message is read by the alert() at the time of the event firing, not at the time the event was bound.

If we give each event its own “versionâ€� of message at the time of binding the events, we solve this problem.

$('#table td').bind('click', {message: 'You left clicked a TD'}, function(e) {
	alert(e.data.message);
});
$('#table td').bind('contextmenu', {message: 'You right clicked a TD'}, function(e) {
	alert(e.data.message);
});

Events bound with bind() and with the alias methods (.mouseover(), etc) are unbound with the unbind() method.

live()

This works almost exactly the same as bind() but with one crucial difference: events are bound both to current and future elements — that is, any elements that do not currently exist but which may be DOM-scripted after the document is loaded.

Side note: DOM-scripting entails creating and manipulating elements in JavaScript. Ever notice in your Facebook profile that when you “add another employerâ€� a field magically appears? That’s DOM-scripting, and while I won’t get into it here, it looks broadly like this:

var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('hello, world!'));
$(newDiv).css({width: 100, height: 100, background: '#f90'});
document.body.appendChild(newDiv);

delegate()

Another shortfall of live() is that, unlike the vast majority of jQuery methods, it cannot be used in chaining. That is, it must be used directly on a selector, like so:

$('#myDiv a').live('mouseover', function() {
	alert('hello');
});

But not…

$('#myDiv').children('a').live('mouseover', function() {
	alert('hello');
});

… which will fail, as it will if you pass direct DOM elements, such as $(document.body).

delegate(), which was developed as part of jQuery 1.4.2, goes some way to solving this problem by accepting as its first argument a context within the selector. For example:

$('#myDiv').delegate('a', 'mouseover', function() {
	alert('hello');
});

Like live(), delegate() binds events both to current and future elements. Handlers are unbound via the undelegate() method.

Real-Life Example

For a real-life example, I want to stick with DOM-scripting, because this is an important part of any RIA (rich Internet application) built in JavaScript.

Let’s imagine a flight-booking application. The user is asked to supply the names of all passengers travelling. Entered passengers appear as new rows in a table, #passengersTable, with two columns: “Nameâ€� (containing a text field for the passenger) and “Deleteâ€� (containing a button to remove the passenger’s row).

To add a new passenger (i.e. row), the user clicks a button, #addPassenger:

$('#addPassenger').click(function() {
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var input = document.createElement('input');
	input.type = 'text';
	$(td1).append(input);
	var td2 = document.createElement('td');
	var button = document.createElement('button');
	button.type = 'button';
	$(button).text('delete');
	$(td2).append(button);
	$(tr).append(td1);
	$(tr).append(td2);
	$('#passengersTable tbody').append(tr);
});

Notice that the event is applied to #addPassenger with click(), not live('click'), because we know this button will exist from the beginning.

What about the event code for the “Delete� buttons to delete a passenger?

$('#passengersTable td button').live('click', function() {
	if (confirm("Are you sure you want to delete this passenger?"))
	$(this).closest('tr').remove();
});

Here, we apply the event with live() because the element to which it is being bound (i.e. the button) did not exist at runtime; it was DOM-scripted later in the code to add a passenger.

Handlers bound with live() are unbound with the die() method.

The convenience of live() comes at a price: one of its drawbacks is that you cannot pass an object of multiple event handlers to it. Only one handler.

5. .children() vs. .find()

Remember how the differences between parent(), parents() and closest() really boiled down to a question of reach? So it is here.

children()

This returns the immediate children of an element or elements returned by a selector. As with most jQuery DOM-traversal methods, it is optionally filtered with a selector. So, if we wanted to turn all <td>s in a table that contained the word “dogâ€� orange, we could use this:

$('#table tr').children('td:contains(dog)').css('background', '#f90');

find()

This works very similar to children(), only it looks at both children and more distant descendants. It is also often a safer bet than children().

Say it’s your last day on a project. You need to write some code to hide all <tr>s that have the class hideMe. But some developers omit <tbody> from their table mark-up, so we need to cover all bases for the future. It would be risky to target the <tr>s like this…

$('#table tbody tr.hideMe').hide();

… because that would fail if there’s no <tbody>. Instead, we use find():

$('#table').find('tr.hideMe').hide();

This says that wherever you find a <tr> in #table with .hideMe, of whatever descendancy, hide it.

6. .not() vs. !.is() vs. :not()

As you’d expect from functions named “notâ€� and “is,â€� these are opposites. But there’s more to it than that, and these two are not really equivalents.

.not()

not() returns elements that do not match its selector. For example:

$('p').not('.someclass').css('color', '#f90');

That turns all paragraphs that do not have the class someclass orange.

.is()

If, on the other hand, you want to target paragraphs that do have the class someclass, you could be forgiven for thinking that this would do it:

$('p').is('.someclass').css('color', '#f90');

In fact, this would cause an error, because is() does not return elements: it returns a boolean. It’s a testing function to see whether any of the chain elements match the selector.

So when is is useful? Well, it’s useful for querying elements about their properties. See the real-life example below.

:not()

:not() is the pseudo-selector equivalent of the method .not() It performs the same job; the only difference, as with all pseudo-selectors, is that you can use it in the middle of a selector string, and jQuery’s string parser will pick it up and act on it. The following example is equivalent to our .not() example above:

$('p:not(.someclass)').css('color', '#f90');

Real-Life Example

As we’ve seen, .is() is used to test, not filter, elements. Imagine we had the following sign-up form. Required fields have the class required.

<form id='myform' method='post' action='somewhere.htm'>
	<label>Forename *
	<input type='text' class='required' />
	<br />
	<label>Surname *
	<input type='text' class='required' />
	<br />
	<label>Phone number
	<input type='text' />
	<br />
	<label>Desired username *
	<input type='text' class='required' />
	<br />
	<input type='submit' value='GO' />
</form>

When submitted, our script should check that no required fields were left blank. If they were, the user should be notified and the submission halted.

$('#myform').submit(function() {
	if ($(this).find('input').is('.required[value=]')) {
		alert('Required fields were left blank! Please correct.');
		return false; //cancel submit event
	}
});

Here we’re not interested in returning elements to manipulate them, but rather just in querying their existence. Our is() part of the chain merely checks for the existence of fields within #myform that match its selector. It returns true if it finds any, which means required fields were left blank.

7. .filter() vs. .each()

These two are concerned with iteratively visiting each element returned by a selector and doing something to it.

.each()

each() loops over the elements, but it can be used in two ways. The first and most common involves passing a callback function as its only argument, which is also used to act on each element in succession. For example:

$('p').each(function() {
	alert($(this).text());
});

This visits every <p> in our document and alerts out its contents.

But each() is more than just a method for running on selectors: it can also be used to handle arrays and array-like objects. If you know PHP, think foreach(). It can do this either as a method or as a core function of jQuery. For example…

var myarray = ['one', 'two'];
$.each(myarray, function(key, val) {
	alert('The value at key '+key+' is '+val);
});

… is the same as:

var myarray = ['one', 'two'];
$(myarray).each(function(key, val) {
	alert('The value at key '+key+' is '+val);
});

That is, for each element in myarray, in our callback function its key and value will be available to read via the key and val variables, respectively.

One of the great things about this is that you can also iterate over objects — but only in the first way (i.e. $.each).

jQuery is known as a DOM-manipulation and effects framework, quite different in focus from other frameworks such as MooTools, but each() is an example of its occasional foray into extending JavaScript’s native API.

.filter()

filter(), like each(), visits each element in the chain, but this time to remove it from the chain if it doesn’t pass a certain test.

The most common application of filter() is to pass it a selector string, just like you would specify at the start of a chain. So, the following are equivalents:

$('p.someClass').css('color', '#f90');
$('p').filter('.someclass').css('color', '#f90');

In which case, why would you use the second example? The answer is, sometimes you want to affect element sets that you cannot (or don’t want to) change. For example:

var elements = $('#someElement div ul li a');
//hundreds of lines later...
elements.filter('.someclass').css('color', '#f90');

elements was set long ago, so we cannot — indeed may not wish to — change the elements that return, but we might later want to filter them.

filter() really comes into its own, though, when you pass it a filter function to which each element in the chain in turn is passed. Whether the function returns true or false determines whether the element stays in the chain. For example:

$('p').filter(function() {
	return $(this).text().indexOf('hello') != -1;
}).css('color', '#f90')

Here, for each <p> found in the document, if it contains the string hello, turn it orange. Otherwise, don’t affect it.

We saw above how is(), despite its name, was not the equivalent of not(), as you might expect. Rather, use filter() as the positive equivalent of not().

Note also that unlike each(), filter() cannot be used on arrays and objects.

Real-Life Example

You might be looking at the example above, where we turned <p>s starting with hello orange, and thinking, “But we could do that more simply.” You’d be right:

$('p:contains(hello)').css('color', '#f90')

For such a simple condition (i.e. contains hello), that’s fine. But filter() is all about letting us perform more complex or long-winded evaluations before deciding whether an element can stay in our chain.

Imagine we had a table of CD products with four columns: artist, title, genre and price. Using some controls at the top of the page, the user stipulates that they do not want to see products for which the genre is “Country� or the price is above $10. These are two filter conditions, so we need a filter function:

$('#productsTable tbody tr').filter(function() {
	var genre = $(this).children('td:nth-child(3)').text();
	var price = $(this).children('td:last').text().replace(/[^\d\.]+/g, '');
	return genre.toLowerCase() == 'country' || parseInt(price) >= 10;
}).hide();

So, for each <tr> inside the table, we evaluate columns 3 and 4 (genre and price), respectively. We know the table has four columns, so we can target column 4 with the :last pseudo-selector. For each product looked at, we assign the genre and price to their own variables, just to keep things tidy.

For the price, we replace any characters that might prevent us from using the value for mathematical calculation. If the column contained the value $14.99 and we tried to compute that by seeing whether it matched our condition of being below $10, we would be told that it’s not a number, because it contains the $ sign. Hence we strip away everything that is not number or dot.

Lastly, we return true (meaning the row will be hidden) if either of our conditions are met (i.e. the genre is country or the price is $10 or more).

filter()

8. .merge() vs. .extend()

Let’s finish with a foray into more advanced JavaScript and jQuery. We’ve looked at positioning, DOM manipulation and other common issues, but jQuery also provides some utilities for dealing with the native parts of JavaScript. This is not its main focus, mind you; libraries such as MooTools exist for this purpose.

.merge()

merge() allows you to merge the contents of two arrays into the first array. This entails permanent change for the first array. It does not make a new array; values from the second array are appended to the first:

var arr1 = ['one', 'two'];
var arr2 = ['three', 'four'];
$.merge(arr1, arr2);

After this code runs, the arr1 will contain four elements, namely one, two, three, four. arr2 is unchanged. (If you’re familiar with PHP, this function is equivalent to array_merge().)

.extend()

extend() does a similar thing, but for objects:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(obj1, obj2);

extend() has a little more power to it. For one thing, you can merge more than two objects — you can pass as many as you like. For another, it can merge recursively. That is, if properties of objects are themselves objects, you can ensure that they are merged, too. To do this, pass true as the first argument:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(true, obj1, obj2);

Covering everything about the behaviour of JavaScript objects (and how merge interacts with them) is beyond the scope of this article, but you can read more here.

The difference between merge() and extend() in jQuery is not the same as it is in MooTools. One is used to amend an existing object, the other creates a new copy.

There You Have It

We’ve seen some similarities, but more often than not intricate (and occasionally major) differences. jQuery is not a language, but it deserves to be learned as one, and by learning it you will make better decisions about what methods to use in what situation.

While there are strict rules these days for writing semantic and SEO-compliant mark-up, JavaScript is still very much the playground of the developer. No one will demand that you use click() instead of bind(), but that’s not to say one isn’t a better choice than the other. It’s all about the situation.

Related Posts

You may be interested in the following related posts:

• Seven JavaScript Things I Wish I Knew Much Earlier In My Career
• The Seven Deadly Sins Of JavaScript Implementation
• Developing Sites With AJAX: Design Challenges and Common Issues

We appreciate the feedback of our Twitter followers who reviewed the article before it was published.

(al)

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

They say a picture is worth thousand words. And we can proudly add that a video (picture in motion) is worth trillion words. We can express all we want to say through videos. Our friends designers and animators have been showcasing this beautiful gift of creativity and they use it to its fullest potential in some truly outstanding animated videos.

Today we are presenting some mindblowing and eye opening animated videos which display all the various colors of human life. These animations showcase love, hatred, sadness, jealousy, praise, beauty and ugliness. And all these animations are a true example of talent and hard work of animators and designers.

Beautiful Animated Videos

Ryan
What is more powerful: art or money? Does an artist need acceptance of his creativity from others?

Magic Night
Although without sound, still a nice Aladin’s story like animation.

Sebastian’s VOODOO
A story about love, sacrifice and protection of loved once.

Alarm
You will surely love this animation. Great quality and crisp story.

A Day In The Life Of An MC Escher Drawing (Short Film)
Winner of Best Short Film and Best Concept, 2006 Chicago Horror Film Festival, October (Chicago, IL).

True Beauty: A message about Alopecia
An educative video conveying A message about Alopecia.

When The Day Breaks
Do we all connected to each other? Watch this animation.

Good Vibrations
A good story where a drilling on road side captivates onlookers for a hilarious reason.

A Day In The Life Of An MC Escher Drawing (Short Film)
An animated comedy short striy will make you laugh.

Kiwi!
Story of a kiwi who wants to fly.

RAM – Amazing 3d Animation
Are we really getting addicted to the technoligy?

The Chair Not Taken
A short tale about politicians, seats and struggles in a Parliament.

Reach
A story of a robot who has just one limitation.

The Devil And Smoking
This is a video made from the idea of the commercial against smoking and other bad habits that made a TV channel.

Hungu
An tribal based animation showing love of a mother.

The Danish Poet
Can we trace the chain of events that leads to our own birth? Is our existence just coincidence? Do little things matter? Get answers here.

Mourning
A dark animation on a person’s different reactions on death.

Oxygen
Learn a little bit of basic chemistry while watching Oxygen try to make friends in Element-ary school.

Animation Clip – Beautiful
An visionary animation with melodious music.

Replay – Amazing Animated Short Film
In a destroyed world, the only glimpse of hope is the memory of a forgotten past.

Hang up and Drive
Do you use phone while driving? watch this video.

Oktapodi (2007) – Oscar 2009 Animated Short Film
Two cute oktapodis helping each other to save their lives.

Hair is Important: A message about hair loss
An educative video conveying A message about hair loss.

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability.

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?

Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

No Ad Clutter

Advertisement clutter is a major issue for mobile platforms, the user ends up viewing more of the advertisements than content, if the layout has not been destroyed already. There is an easy fix to hide this clutter without creating a mobile specific version of your website. You can either use the css’ handheld stylesheet type or simply detect resolution size.

Either one you use, using a simple display:none on the obtrusive advertisements will eliminate them from view and clear things up. You should always remember that most handheld mobile devices have limited real estate, meaning the screen size can only fit a few things, and those few things should be the content the user visits your site for.

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.

If a user is accessing your website from a mobile phone and is not connected to a land based network connection, bandwidth will definitely be a limitation, which means the user will select through the sites he or she wants to visit rather than visit the sites they would on a desktop.

What this means is that you need to make sure your website utilizes a small amount of bandwidth during mobile browsing, which means images should be limited, and text content should be focused. What if your site is based on imagery content?

If your website is mainly based on imagery, it is in your best interest to create a separate mobile website, one that is optimized for that platform which can size down the imagery and highly compress them. An alternate way is to create mobile applications for applicable mobile devices that allow third party applications, as this could be a helpful tool for your users.

Cross Platform Friendly Links and Effects

As new web tools and effects continue to expand, it is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.

Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.

Keep Your Pages Short and Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages short and compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.

Thorough Navigation

As you know, typing on most mobile devices is a real a pain as the keypad or virtual qwerty keyboard is not going to be easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly. If you offer a genre of content, you need to assure users can get to them via browsing and not through using a search engine. If you cannot get to certain parts of your website without searching, chances are, they will not either.

Large and Clear Content

Today, many new mobile devices are touch screen, which means users will be using their fingers to navigate about their device and your website. If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

To easily prevent this, try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.

Short and Sensible Links

This is another typing related issue; when users have to type in a long URL to get to your site, chances are, they will not. As mentioned earlier, using a keypad or virtual qwerty keyboard is not ideal for typing long text blocks, so make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.

“The need is constant. The gratification is instant.” That’s from the American Red Cross, and it was copy that I plugged into a poster for a blood drive at a comics convention. Sitting beside an image of the sexy and well-endowed Vampirella, the words took on a different meaning. Oops!

But I was struck by how these words are a perfect assessment of our society. We want it all, instantly and as cheap as possible. We are a Walmart culture. Fast and cheap have entered our every pore and changed our society, our lives and our livelihoods. Compounding our daily worries and pressures, we now fight to keep our industry professional and profitable. Clients want our blood for free, and the “hacks� are designing us out of existence.

Most people blame the laptop and easy-to-use software. Many blame art schools for favoring quantity over quality. Can any of these be blamed merely for doing business? If someone who has no idea what they’re doing wants to purchase a computer and a slew of graphics software and call themselves a designer, then they’re in business.

All you need is a computer, software and beard and you are an ARTIST!.. Right?

Should we call this “competing in the marketplace� or just “giving it away… and eroding respect for what we do in the process�?

Every freelancer who has dared to provide an actual estimate for their work has heard in reply, “I can get it done cheaper.â€� And the client can. The job, which requires thousands to be done properly, can be delivered for hundreds, and its horridness would never be noticed by the client. They will not notice the lack of a return on their investment or the consumers avoiding their service or the people making sport of their new logo online. And if they do — which would likely happen after they’ve gone out of business for making all the wrong, cheap decisions — they will blame graphic designers. All of us.

When a staff designer makes a blunder — even if only a perceived one — all designers need to have a watchful eye. We are the weird kids, the ones who drew pictures in math class while the kids who became marketing directors and account managers told on us. Yes, we need watching.

If you ever wondered how the practice of presenting several ideas in a meeting gained such a foothold in our business, just imagine some of the incompetents in the Floogelbinders Guild in the 7th century who really screwed up and codified the practice… before their heads were chopped off and their limbs burned. Ah, the good ol’ days, when they really knew how to maintain professionalism.

[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

What Exactly Is A “Hack�?

Let’s take a look at dictionaries. Hack: noun.

1. A horse used for riding or driving; a hackney.
2. A worn-out horse for hire; a jade.
3. One who undertakes unpleasant or distasteful tasks for money or reward; a hireling.
4. A writer hired to produce routine or commercial writing.
5. A carriage or hackney for hire.
6. A taxicab.

Those who responded to my query in social media had great insights and varied opinions on what is a ‘hack’.

Wrote one designer:

It is not as regulated as other professions, such as interior design and architecture or accounting for that matter. To call oneself a designer, there is no apprenticeship required, no test to pass, no certification to obtain. If you have access to the software, it’s open season.

One creative director wrote some very kind words:

I view hacks as part of the overall ecology of what drives business when it comes to design and branding. On the one hand, hack has a connotation as it relates to businesses that are starting up or struggling to survive or that simply don’t take design seriously — the kind of business-folk who just look for the lowest bidder. Then there are the sincerely talented designers who simply lack ambition, business savvy or both, and who do not get past five years in their careers. Either situation actually helps cultivate a wonderful ecology of design business, in my opinion.

Surprisingly, an editor-in-chief of a well-known news service responded with an outrageous number of typos and grammatical errors (corrected here):

Every industry has hacks, but most artists I have met (most, not all) really do strive to be original and to use their imaginations to come up with new ideas. Very few jaded ones will rehash old stuff or try to peddle work that is derivative. It is always “buyer bewareâ€� in this case. If the guy seems like a slick used-car salesman, find someone else with whom you can work. On the other hand, artists look out for people who don’t want to sign contracts, people who can’t tell good art from bad, people who can’t make up their minds after being presented with 20 different sketches, and people who will not pay an advance or a set-up fee.

A well-known writer, checking in as “misery-loves-company,� added:

There are hacks in every discipline. Try working as a professional writer. Anybody with a keyboard and the ability to type can claim this for a calling.

A gentleman with the title of “Business Development� added another view that creatives might not hear often:

I’ve thought about the definition of hack. It is conceivable that a person with no formal training or someone who did not do well in design school could rise to the top of their profession. They would have to be driven to succeed and committed to quality, I am sure.

But there is no guaranteed correlation between the eliteness of one’s education and the quality of their current work.

Is “CrowdSourcing” and “Fixed-Price” Online Shops the Future?

I was once invited to witness what crowdsourcing could do. I guess I was being lined up for the next firing squad and lured by free pizza. I honestly thought I was attending a gathering of designers at a promotional advertising company. Mmmmm, nope!

The owner described the projects, mostly logos, and showed what a source of 8 “designers” could design. Seems that was the unpaid part. The “best designer” would get paid for finishing the project, which might not be his/her logo but a mashup of every design the owner, who now also owned all of the unpaid designs, decided to create…because he was so creative. “That’s a win-win situation” he closed with. I could hear him from the supply room, where I was helping myself to my “out-of-court settlement” for having been dragged to this thing.

HOW Magazine’s July issue has an article on crowdsourcing. Quotes from two authors on the subject in that article say:

Perhaps, as Debbie Millman writes, this trend does devalue our services. Perhaps, as David Baker observes, it weeds out the low-level clients we shouldn’t be working with, anyway. Is crowdsourcing really “stealingâ€� work from professional designers — or has it simply replaced the quick-print guy and the executive assistants?

The editor adds:

One answer to that question may be: Let’s reinvent crowdsourcing so it works to the benefit, not the detriment, of both parties in the exchange. Maybe we could invent a way for a small group of designers, vetted for their expertise, to engage with a client, present their ideas, earn compensation for those ideas — and then the designer whose concept is chosen is further paid to fully develop and execute that idea. Talented creatives from all over the globe could participate in a project they would otherwise have no access to. Designers and clients have an opportunity to interact, so the solution isn’t derived in a vacuum (as is often the case with crowdsourcing). Clients can connect with a range of qualified creative thinkers to build their business. It doesn’t have to be cheap. Everyone gets paid. The client chooses the best solution.

Aside from other glaring mistakes in the article on business practices, the editor is quite obviously fond of glowing rainbows and unicorns. Every creatives’ guild or organization is against this practice because companies use it to their best advantage financially and people continue to provide work. Those attending this cult-fest of design suggested the same thing the HOW editor outlined, to the crowdsourcing person who called us to the ill-fated meeting. Pay MORE money for the same work? It wasn’t going to happen in non-unicorn world. HOW? How MUCH, is more like it.

“Mommy, I hate designer’s guts!” “Shut up and eat!”

To their credit, they did mention the position of organizations, which they totally ignored when sprinkling pixie dust on the subject and presenting it to readers who want to know “HOW?”

Professional organizations must tread lightly in advocating against unpaid work, as AIGA discovered in the 1990s, when the Federal Trade Commission ruled that any statement or code of ethics that advised members not to work for free amounted to price-fixing. Its current position supports fair compensation for design work, and delineates between spec work (where a creative works for free in hopes of compensation) and unpaid work like pro-bono projects or internships (where services are willingly given away). The Graphic Artists Guild warns its members against competitions where the sponsoring organization retains all rights to all submissions, and helps creatives avoid unfavorable contracts.

Surprisingly, Forbes aired an article on crowdsourcing and of course, the self-appointed “capitalist tool,” seemed more impressed with it as a business model, rather than a threat to an industry. To be fair, they were balanced in exploring a few quotes echoed by other professionals in the field.

Mix crowdsourcing, the Internet and a huge pool of underemployed graphic designers, and the outcome is a company that’s grabbed a great deal of attention. In the two and a half years since it launched, Web startup 99designs out of Melbourne, Australia, boasts that it’s helped to broker 48,000 graphic design projects for big name clients like Adidas and DISH Network as well as for thousands of small businesses.

Personally, I’ll be sure to remember that when I need new sneakers or satellite TV service. Will other creatives?

Acting as a middleman between business owners and graphic designers, the 99designs site hosts contests in which clients post their needs — website design, logos, print packages — and designers compete to fill them. Instead of bidding for the job, designers submit finished work tailored to the client specifications in the contest listing. 99designs calls it a win-win scenario: Its clients gain access to the site’s pool of 73,000 active designers, while the designers are given a chance to compete for “upwards of $600,000 in awards paid out monthly.”

So, if my math is correct and every one of the 73,000 designers won just one competition a month, each would get $8.22. Sure not every one will win with the four to six entries they must submit to each contest…assignment…act of piracy on the high digital seas…whatever, so some designers will get $16.44 or maybe $32.88 per month? If I lived in Bali…and was stealing someone else’s electricity, I could live well. Well…live.

“99designs is something akin to a Walmart,” says Dan Ibarra, industry veteran and co-founder of Aesthetic Apparatus, a Minneapolis design studio. “It’s not necessarily dedicated to bringing you good work, but to bring you a lot of it. That’s not necessarily better.”

Ibarra’s thoughts echo the general response from designers to a 2009 article Forbes ran on a 99designs look-alike called Crowdspring.com. Many critics of Crowdspring’s business model directed readers to NO!SPEC.com, an online campaign dedicated to educating the public about the risks of speculative work — which is, as defined by NO!SPEC, work in which the designer “invests time and resources with no guarantee of payment,” a “huge gamble” for designers competing against thousands of others.

Other professionals I have spoken with on the subject feel it’s just not a threat to the “design experience” or the “personal touch.” Several feel it just separates the serious design clients from the casual small business.

You have to remember that everything is consumer driven. What I mean is that the consumer is the one that dictates how we set our prices. If a consumer is unwilling to spend $100.00 for an original work verses spending $50.00 for one located on-line…what can you really do?

I really hope that it’s not. I think (and hope) that there will always be a market for those of us who don’t have quite a structured pricing plan, and who are willing to pay more for quality instead of quantity.

I’m still waiting for the day graphic design is held in the same regard as auto mechanics and plumbers… you don’t get fixed rates with them, and they’ll laugh at you if you ask for it. There’s a price for parts and and an hourly rate for service, end of discussion. You can give a flat rate by estimating (to yourself) how many hours it will take and then padding that for how many revisions the client will ask for. If you fall short, remember that the next time, but don’t penalize the client. Keep good records of your time. And… you obviously can’t charge the same fee for logo design for a company on the scale of Coca Cola as you would for Joe’s Landscaping down the street. It’s a different value to each. Large corporations get much more use and ROI from a logo than a one man show. That’s my story and I’m sticking to it.

With regards to fixed vs hourly, we almost always do fixed. Even on big application development projects. Sure, there are concerns with client requestitis and scope creep but thats part of the consideration. With hourly you are always guaranteed to be punished for your efficiency and experience by getting paid less.

As for cheapo logos and web templates? Go for it I say. It’s nothing new. The clients that find that type of thing valuable are the ones I don’t have the time to educate on the real value of thoughtful design.

It’s the future for clients that have a “checkbox mentality”, where a logo, a brochure, a website, are just things on a list to check off, rather than key elements of their business strategy.

Those clients have never been good clients. They’ve never paid well, or been good to work for. For a brief time, as design exploded and became available to businesses that couldn’t afford it previously, they had to buy more than they wanted, and employ real designers. Now that the supply of “designers” has also exploded, these design-blind clients can buy what they actually want, which is a cheap template with their words and photos stuck in it.

They’ve never wanted real design, the market has evolved to give them what they want.

The market for clients that do want real design is still there, and still very profitable for designers with the right skills and talents. But the bar for that market is very high, and people that can’t reach it are stuck in a no man’s land between the heights of success and the pits of mass-produced junk design.

Since clients have variable needs and budgets, there is definitely room in the marketplace to offer low-cost design services online. The clients who use these online design resources may not be a good fit for those of us who are answering this question, but they have a need with a tight budget and online creative services seem to fulfill that need.

Traditionally, junior designers and recent graduates have had access to the low budget projects more experienced individuals have passed on. I think the online sites provide a similar outlet. Students may benefit from putting their hat in an online ring to get experience – especially when they will (most likely) be charging similar low rates. Established creatives and businesses probably have other methods of finding work (the Internet is a great tool for getting business, but does not replace all other traditional marketing/networking/prospecting) so I do not think fixed-price online creative sites will completely ruin our ability to maintain a viable business.

Does Art School Make You A Professional?

Being an art school drop-out myself (12 credits shy, and going back over a decade later to get them) and having much success without a degree, I naturally understand this point about art school. Many echoed this sentiment: that creativity has nothing to do with a degree. I was teaching at Parson’s School of Design long before I went back to take the four art history classes I needed to graduate. My work for major corporations did, however, require a four-year degree. Guess the “accomplishment level” can mean something. Ah! but is it art?

“HA! As the sole surviving creative, I can charge $50 for a logo!” (it’ll still be argued down to $20).

It is a popular major, though, as one designer noted:

I asked nearly the same question to the owner of the art college I eventually graduated from: “Do you think similar two-year programs are flooding the market with graphic designers?� His answer was a resounding “No,� and he followed that with, “Talented artists will always find work when untalented artists don’t.� With the designers I’ve met or worked with and the ones I’ve read about, I’d have to I agree.

Naturally, sticks and stones were thrown:

From what I understand from meeting other students, the quality of education is lacking. Apparently, many educators simply like to take home a pay check for doing the least amount of work. A lot of the students suffer from not having any mentorship from a qualified teacher. However, the top students always find their way through the educational maze to get the cheese.

Should art schools teach online fixed-price business to students? Most people say, “no!” Shouldn’t an art school prepare a student to enter the field from day one with all the material and professional skills needed to enter the field as a peer and not a “hack” who lowers the bar for fees and professional demeanor?

Mediocrity runs rampant in today’s society. I don’t think design schools should teach the principles of online stores but make their students aware of what is out there and what they will come up against in the real world. Unfortunately many will go that way. But a true designer is worth their weight in gold, and will always cost more than Walmart pricing.

I’m sorry but I’m still laughing too hard at keeping a straight face while typing about art schools training students to enter the field. Pile on the insults as you will but I rarely see graduating portfolio shows that aren’t frightful, not due to the talent, but to their ideas on what they expect once they graduate. Several months ago I received a request for an essay of 2,500-5,000 words a dean at a Chicago art school wanted to “relay” to students. Naturally he was shocked I wanted to be paid. Guess those students stepped into a world of do-do. As a student commented on the question of fixed-price:

There are some pros and cons for hourly and fixed. However really as a designer you might benefit more from fixed pricing. Example: You design a logo at $20 an hour. Let’s say for the first time you do this logo it takes you 5 hours.

The next time you do the logo, you get it done in half the time. 2.5 hours. You just cut your profit in half.  Now the designers that are charging $50, should wake up and realize there offering a service that is worth WAY more than what they are charging.

In the beginning of starting my own design business I charge fairly cheap as well. I wanted to build a portfolio and clientele list. Once I had references and a portfolio to show, my rate can go up, because I can prove I’m worth it.

Yes, $20 an hour and $50 logos will shore up the prices she was going to command one day. No, it will set the bar with anyone you quote those prices to while I’m trying to charge a fair market rate. You have lowered that fair rate. Thanks for learning how to run a business within an unlicensed industry that relies on a standard of practice not being taught anywhere. AAAAAAAH! I’m still wondering what kind of logo is created in 2.5 hours. Oh, a “hack” one!

A Solution To Reconcile These Views?

Would a guild or union distinguish between an apprentice, a tradesperson and a master craftsperson? Some have tried. Years ago, I was a member of the board of the Graphic Artists Guild, along with several legal rights groups for artists. The prospect of unionizing was a constant buzz. Every meeting, time was set aside for the subject. There was discussion of joining established unions if no plan could be found to successfully create a union hierarchy and stop those who do not belong dead in their tracks. Neither plan would ever work.

Unions on the whole no longer have the clout or power they once commanded. The removal of organized crime really hurt them. The mob knew how to get things done. Now politicians try to do the same but without any efficiency. No union would take on the cause of an entire industry with so many holes as ours. No organization could ever stop the incursion of single-person home studios and $99 logos… or the equivalent on the Internet.

“Billy tried unionizing his art class in school. The other kids were heavily punished. I hope they learned a lesson, too!”

In an effort to establish standards and set pay levels for professional positions and freelance projects, the Graphic Artists Guild publishes a annual book entitled The Pricing and Ethical Guidelines. I highly recommend it to those starting out. It’s loaded with contracts, pricing, rights and considerations we must all apply to every job, so that both parties come out of a project eager to work together on the next one.

We are an unregulated business — anyone can join. I believe had we adopted the tactics of organized crime, we would be living the life of Las Vegas celebrities, and I get to be Elvis! Family heads, lieutenants, enforcers — face it, the mob gets things done. Can you imagine an enforcer negotiating with a client? Many years ago I tried pitching a comic feature to design magazines about a mob boss in the witness protection program, set up in a secret identity as an illustrator’s representative. “Zip Atoné & the Bull Pen Boys” was Goodfellas meets the publishing/advertising world.

Client: “I don’t sign contracts!”

Zip Atoné: “Well, that’s too bad because either your signature or brains is gonna be on that contract when I leave!”

Wouldn’t that be great!? Back to reality…

Design Contests Erode The Industry

The Graphic Artists Guild, along with every other professional creative organization, is against “contests,� in which the creative submits a design, illustration or photo (which become the property of the contest runner) in the hope of winning some measly prize that is not even worth the fee their work would have earned in the open market. But these contests get floods of entries. Who are the people who enter them? AIGA has a form letter on its website encouraging people to post when contests come up. A noble effort.

These contests are not advertised on cereal boxes. They appear in the inboxes of creatives. They are advertised on design blogs and websites. They are run by the same corporations that earn millions by selling us burgers and sodas every day. So, winning an iPod seems like a fair trade-off… in Bizzarro World! Getting our money and putting toxins in our bodies just isn’t enough for them.

Your “prize” is equal to what this costs…a stroke and your eternal soul!

In the end, we are the regulators of our own unregulated industry. If business is this cut-throat, then are we being lax by not making the removal of hacks and crowdsourcers from the industry our primary concern, or have they been doing the same to us, successfully, and we didn’t see it until it was too late? Does it just provide a cheap alternative for customers who don’t know quality, branding, marketing, customer appeal and retention? If, as mentioned in the article on Forbes, big companies are now getting into crowdsourcing, is there to be any leverage for freelancers or design and development firms?

We will never be unified by a union or organization but we can listen to our peers either through networking or organizations like AIGA and the GAG for some semblance of order. The experienced creatives need to mentor those entering the field. Art schools need to focus on business and professional practices as much as technique and other creative skills. There will continue to be clients that want it for nothing and will get what they don’t pay for. There will be plenty who understand the need for quality and that it costs a fair wage, sort of. Please, just keep the previous from calling me!

(al)

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

By Callum Chapman

Over the past few months, the use of extreme textured images in web design is starting to die down. It was used so excessively that is was almost everywhere we looked when browsing the web. Other developments, such as the use of minimalism in web design and various other styles have slowly pushed the dramatic use of texture out of the window.

It does however still play a big part in the world of designing for the web, as this showcase presents. Although there are still some pretty excessive use of texture in a few of the following designs (but hey, it does look good!), the majority of them use texture as a subtle touch-up to their backgrounds, headers or footers, adding that minor but ever-so-important touch of visual interest — why have a plain white background when you can add a tiny speck of texture that just makes your design pop?

This showcase presents thirty-eight fresh examples of texture in web design, from creative design agencies, modern restaurants and even plastic film packaging companies. Let us know your favourite design!

Living For Art

Jasmin’s Living For Art portfolio uses a very delicate crumpled paper texture in the background of his web design, making the sharp, white typography pop from the page.

Progressive One

The Progressive One design uses a texture and pattern combination to pull of this great dark-themed website, making superb use of contrast to make the site easy to view.

In Safe Hands

In Safe Hands is a very light and simple site, with a strong illustrated style, featuring a vector style logo. The background uses a very light texture, only very slightly darker than the main background color. This helps add a little more interest to the design, keeping it fresh and modern.

Grafitio

Grafitio is one of the heavier-textured designs in this showcase, which is very suitable for the type of site it is and makes it incredibly easy to remember. Heavy texture is used throughout the whole design, but is especially heavy on the left-hand side of the site and in the header, bringing out the best in the logo and navigation. Texture is also used for the area beneath the header, making it seem like the design is in fact produced using real-life elements such as paper.

Aggressive Panhandler

Aggressive Panhandler, in my opinion, manages to pull off textured design, sleek design and minimalism design all in one go. The design uses some great newspaper style typography, with sleek sidebar headers and all topped off with some nice textures used in both the content background and main background.

No Creativity Blog

The No Creativity Blog is quite an odd design, but works perfectly well, making use of scaled-down textures to create a collage style background, fitting in nicely with the digital header collage.

Urban Influence

Urban Influence don’t actually use texture in their design, but do however make use of it in their image slider in the header. Using texture in these images really helps add some depth to the site, and makes it much more visually appealing. The images also make use of bright attention-grabbing colors that only help to add more interest to the design, and also helps to bring out the gorgeous oranges, blues and browns used throughout the design in the headers and active links.

Clickfarm Interactive

Clickfarm Interactive I’m sure would just be a drop-dead beautiful design without the texture – with it, it’s even more amazing! The texture used in the background image brings the clean content background out from the rest of the design, and overall just complets that “farm” look.

Douglas Menezes Blog

Douglas Menezes Blog design is probably one you’ve seen before, known for its dramatic use of opposite color’s and geometrical shapes. The texture makes this design go bang though. As the texture has been applied to the design using the Overlay Blending Mode (or a blending mode very similar to) in Photoshop, it adds some different shades to the color’s, making it indescribably excellent.

No Sleep For Sheep

Dark designs are sometimes hard to pull off, especially when trying to embed strong, heavy texture. No Sleep For Sheep, as well having an interesting name, have a really interesting design, making use of a blue grungy texture to act as the sky behind the silhouettes of a curvy hill and plenty of sheep.

Maverick Ads

Maverick Ads have gone for a elegant grunge look, using swirls and curvy line vector-style elements alongside textured stone images to produce an interesting and unique style.

Creative Spaces

Creative Spaces have a rather strange but very creative design, featuring floating objects, walls with clouds, a human with a deer head and several great uses of texture, including a grainy stone texture for the walls, and real wooden flooring to make the design seem as (strangely) real as possible.

Crush Lovely

Crush Lovely is a very simple, sleek and modern design, but makes great use of a subtle noisy texture background to make the clean objects and bright images pop from your screens.

Five Points Interactive

Five Points Interactive use the much-loved notepad-style design, using real paper textures and watercolor textures alongside beautiful floral patterns and paperclip images to pull together a lovely theme.

Michela Chiucini

Michela Chiucini’s design is another one that uses scanned in textures to produce a life-like theme as if it had been put together using physical objects you would see and touch almost everyday. The use of cardboard texture is used for the footer design, setting a lovely backdrop for a list of recent articles and a Flickr feed.

CSS Tinderbox

This newspaper-style design features some great vintage-looking typography and images, and is very minimal, mainly depending on it’s strong typography to attract and keep viewers. It does use a pretty subtle paper texture though, which helps draw out the typography, and adds a lot of visual interest to the design.

Blackwave Creative

Blackwave Creative’s site would look perfectly great without any use of texture, however it does really suit the design, and helps to bring out the typographic navigation bar at the top of the design, as well as some other elements such as the curling piece of paper pinned to the header.

The Man In The Sea

The Man In The Sea have yet another minimal and simple design, making use of some sweet typography and columns to add some unique visual interest to the design. The use of heavy texture merging into a much more subtle texture in the header/main background makes the rest of the design look even better, especially as it is greyscale, making the strong orange typography even more beautiful.

Maxim Design

Maxim Design (again) use a pretty strong, greyscale textured background to help the large distorted header typography stand out.

Gnutoff

Gnutoff have a very unique and slightly odd design with a lot of empty space in the middle of the page. The design is very limited in terms of color, sticking to just black and red for the images and typography in combination with a washed out yellow textured background with red splotches.

Street Youth Couture

Street Youth Couture’s website is possibly the only one here that may use texture a little excessively, however it does suit there grungy look and graffiti-style logo very well, and therefore is just about pulled off. The greyscale, low opacity brick texture looks great behind that large logo and distorted, grungy typographic navigation menu.

Giraffe

Giraffe (a big restaurant chain in the UK) is one of my favorite website designs in this showcase. The restaurant focus on great food and the music culture, therefore leading to a magnificent design making good use of a strong and very colorful color palette, great effects and of course that subtle texture throughout the site in the background and various vintage-style images.

Fundo Los Paltos

Fundo Los Paltos’ design is very nature inspired, with some great header images, a colorful logo and some silhouette-style branches over hanging the top of the design. A soft-grunge texture is used in the background to complement these features, and it works great!

Papini Plast

Papini Plast uses a repeating, subtle paper texture, adding some lovely depth to the overall design and helping to bring out those awesome images.

Cesky Culibrk

Yet another newspaper style design, and this one also uses a crumpled paper texture to make the newspaper look like a real-life newspaper you’d buy from the shop. The newspaper itself is also placed on top of a texture, giving the whole design more depth and the ability to use more realistic highlights and shadows.

Agencia De Publicidade Brasilia

Agencia De Publicidade Brasilia uses a subtle and slightly noisy crumpled paper texture in the background of their very blue design to add a bit of interest and to help those clean-cut vector shapes stand out from the background.

Digital Vision Queenstown

Digital Vision Queenstown’s web design uses some sleek navigation and buttons in their design, as well as a couple of other web trends. A lined paper texture has been used in the background to produce some low-opacity vertical stripes in combination with a noisy texture to help bring out that gorgeous grey typography.

The Bold Italic

The Bold Italic design has a very popular vintage-style trend going on, using a bunch of low opacity textures built upon each other to produce one awesome looking theme. The use of bold typography and a black and white portrait photograph really tops it all off!

DNA to Darwin

DNA to Darwin is another vintage style design, but focusing on a completely different (older) decade to the website featured directly above this one. This theme uses sepia style photographs, washed our color’s and a similar style of texture in the background to make them all fit into the design nicely. There was no such thing as white back in the day of Charles Darwin!

Design Swap

DesignSwap’s main trend used in their design is “vintage”, making use of large, bold typography with hard, subtle drop-shadows to make the headings very appealing. All of these great features themselves are set on a lovely creme-colored, noisy textured background, helping to finish the design off nicely.

Slavik Dizajn

SlavikDesign use a grungy red/brown texture in their background to help bring out their clean and bright typography and content area.

Pixel Creation

PixelCreation is yet another site that use paper and cardboard textures in their design to produce what looks like a hand-crafted website, using real cardboard and everyday elements to create a friendly and fun environment for their site.

WeGraphics

WeGraphics use the ever popular subtle-noise texture in their background to help bring their content to life. Unlike others however, they also use another texture at the same time, making some areas of the clean textured background lighter in some places, and darker in others, creating more depth and visual interest.

David Hellmann

Guess what? You’re right! David Hellmann’s design is one more that uses grainy cardboard textures to create an interesting textured background for his web design. This works tremendously well with the other colors in the design, as well as that collage-style look with the wonky thumbnail images in his portfolio section.

14 Styles

14 Styles do something a little different. Their site is very clean and actually quite minimalist compared to most here, making use of white space in the main content area and clean typographic elements. The header features a nice blue/grey checkered pattern, and is complete with some noisy texture graphics to just give it that little bit of extra “oomph!”.

The Tate Movie Project

The Tate Movie Project site is a very new one, and uses a bunch of really cool, interactive elements, including the header which is one big clickable-experience to get the users interacting and spending more time on the site. The site features loads of textures in a bunch of different places, such as the main background, the content background, and each little element within the sites content.

New Adventures in Web Design Conference

The official website of the New Adventures in Web Design Conference (held in England early next year) uses some superb CSS effects to create interactive elements, and pulls the whole vintage-style look off with some superb grainy card and paper textures used in the main background of the site.

DesignGiveaways

DesignGiveaways is a very clean and minimal site, using a very subtle but noisy tile-able texture in the main background of the site, helping the main content area and menu stand out more.

If you enjoyed this post, you’ll probably like (and want to check out) some of the previous posts from the Smashing archive:

• Showcase of Beautiful Textured Web Designs
• 100 Beautiful Free Textures
• Textures in Modern Web Design
• Textures and Patterns Design Showcase