The difference

• VPS hosting options limit the number of users on a server and offer them a pre-determined minimum amount of access to hardware. In most cases, VPS servers can be virtually rebooted, meaning that any and all websites owned by a single customer can be reset remotely if necessary. While VPS hosting tends to be more expensive than shared web hosting, it is usually less expensive than colocation hosting.
• Colocation hosting is when a client sends their own server to a facility that specializes in hosting, and the server is managed both remotely by the client and often personally by the staff at the facility.
• Dedicated hosting is similar to colocation hosting in that customers get complete access to a single computer server, but that computer server belongs to the hosting company and not the customer.
• Finally, self-hosting requires the customer buy their own server, pay for an ISP to allow connections to that server, and a host/DNS routing account to ensure that traffic from the Internet is connected directly to that server.

When to use that?

Some web hosting customers use different kinds of web hosting options for different types of projects. For example, parked pages with simple affiliate links do not require a lot of space or resources, so they are often placed on shared web hosting accounts or low-end VPS hosting accounts to increase profitability.
More complex sites that manage databases for thousands of daily visitors require dedicated, colocation, or self-hosting options unless extremely robust VPS options are available. Most companies with serious web hosting needs prefer to use multiple companies to ensure that a single hardware failure does not take out mission critical websites or infrastructures. The downside to that is that using multiple web hosts is usually more expensive than upgrading a plan or stepping up to a more powerful type of hosting solution with a single web host.

Web designers and developers often offer hosting options for their clients, which helps them build residual incomes after their initial project is complete. This also helps ensure ongoing revenue in the form of future work as many clients may be unaware that they can change service providers without losing their relationship with their design and/or development team. The downside to developers and designers that offer such services is that they generally become the immediate go-to contact whenever something goes wrong with a host. Fortunately, changing hosts is generally fairly easy so long as customers have read through the process of changing domain names from one host to another. Generally speaking, clients signed up for anything but shared web hosting can receive substantial assistance in transferring their existing website from one host to another, often at no additional charge.

Things to consider

When determining web hosting needs, most people compare computing resources, storage, and bandwidth allocations. Most shared hosting plans offer unlimited storage and bandwidth, but very limited and typically unspecified access to computing resources.
VPS hosting plans and higher all generally offer finite or minimum specifications for computing resources, but generally have finite storage and bandwidth limits. Storage and bandwidth limitations can usually be increased for an additional fee. Most people plan their computational resource needs for worst case/peak usage scenarios and then add a little bit of overhead for the proverbial rainy days.

La crème de la crème

Host Gator offers an amazing array of shared web hosting plans as well as some great low to mid-range VPS hosting options, and it is no surprise the developers and customers alike appreciate the combination of performance and price that Host Gator’s plans typically offer.
VPS.net has some truly amazing VPS plans that are incredibly reliable. In fact, some customers claim that their VPS.net VPS accounts are more reliable than many low-end dedicated hosting plans, and many companies absolutely require stability when it comes to their hosting.
Media Temple may be one of the most popular dedicated hosting options today, and its reputation for rock-solid reliability is second to none. That type of reliability does not come cheap, but nothing worthwhile ever does. Designers and developers love Media Temple as clients that choose MT for hosting almost never have to call and complain about server downtime, and the same is true for VPS.net options that are only slightly less powerful.

And the winner is …

WEBBOgrafico
Congrats!

The other precious feature is the easy way to track the time you are dedicating to a project.

Billings also won the Apple Design Award at WWDC in 2009.
See some creative testimonials

The prize

1 Billings license

How to join

To participate just leave a comment saying why you would like to win the giveaway.
Use a valid email address

Winner will be announced on Monday, May 24th 2010!

This giveaway is kindly offered by MarketCicle.

We are going to see a step by step tutorial and how to apply it on a live example.
At the moment you can enjoy the animation only in webkit browsers (Chrome and Safari)

See the demo

Download the full example

The markup

We have a very simple page coded in HTML5, below there is the portion of code involved to achieve the effect.
<body>
<div class="balloon-container">
<figure>
<img src="images/air-balloon.png" alt="" />
</figure>
</div>
<div id="wrapper">


Basic CSS

Before to see the animation properties in detail, let’s take a look at some CSS properties required to prepare the ground.
In this case we need the overlapping of two different background images and to put the animated image between them ( see image below)

First of all we need a background image of the sky and some clouds
html {
background : #8ac2e5 url('images/main-bg.png') left top repeat-x;
}

The next will be the container of the image we want to animate
.balloon-container {
height : 500px;
top : 0px;
width : 100%;
z-index : 1 ;
position : absolute;
}

And finally we have the .wrapper div with the rest of the page content and some other clouds as background.
#wrapper{
position : relative;
width : 960px;
margin : 0 auto;
background : transparent url('images/page-bg.png') 30px 105px no-repeat;
z-index : 2;
}

The position property allows the overlapping between the .balloon-container and the .wrapper

z-index property specifies the stack order we need to achieve.

Define the three animations we need to move our air balloon

With the first animation called position we are just setting the start and end coordinates of the animation, in other words the exact position we want it starts and ends in the page.
Of course this is a particular case, indeed you can also set intermediated phases (eg . 20%, 31% and so) if you need to move the object along a different path.

@-webkit-keyframes position {
0% { top : 220px; left : 0%; }
100% { top : 146px; left : 75%; }
}

The second animation is called fade and sets the opacity during the animation phases.
@-webkit-keyframes fade
{
0% { opacity : 0; }
10% { opacity : 1; }
80% { opacity : 1; }
100% { opacity : 0; }
}

The third and last animation is called reduce
We want a depth effect as the air balloon goes away, so we reduce the size of the image with the –webkit-transform property.

@-webkit-keyframes reduce {
0% { -webkit-transform : scale(1) ; }
40% { -webkit-transform : scale(1) ; }
60% { -webkit-transform : scale(0.9) ; }
100% { -webkit-transform : scale(0.5) ; }
}


Start the animation

Positioning this element with top: -300px, the image will be invisible in a browser that doesn’t support animations and will improve the animation behaviour avoiding a sudden reappearance of the air balloon at the end.

—webkit–animation–name associates the animation(s) at the air balloon image
—webkit–animation–duration set the duration of the animation in seconds
—webkit–animation–iteration–count set the number of times we want to repeat the animation
—webkit–animation–direction set a no return trip
—webkit–animation–delay set the delay, if needed, before the start of the animation.
—webkit–animation–timing–function a smooth curve defined by a mathematical function, more examples of other keywords for this properties and their value here
—webkit–transform–origin

.balloon-container figure img{
position : absolute;
top : -300px;
-webkit-animation-name: position, reduce, fade;
-webkit-animation-duration : 30s;
-webkit-animation-iteration-count : 1;
-webkit-animation-direction : normal;
-webkit-animation-delay : 0s;
-webkit-animation-timing-function : ease-in-out;
-webkit-transform-origin : 50% -100%;
}

Finally we have our animation fully working.

See the demo

Download the full example

Conclusions

I preferred to leave a flexible area width for the animation, so, if you resize the browser window, you can experiment different overlappings.
This animation has been created exclusively with CSS, sometimes this can be enough, sometimes we need Javascript to handle other particular events

Further readings and examples

• CSS3 transition are we there yet
• Pure CSS3 Animated AT-AT Walker from Star Wars
• CSS3 animations and their jQuery equivalents
• CSS Animation
• Controlling animation using CSS3
• Supported CSS Properties

To view some others of her shots you can visit her flickr page(while waiting her website will go live)

I like in particular her work with decadent subjects, but now let her introduce her shots

In this package you will find some “experiment shots” I’ve taken to try my camera. They are not intended to be masterpieces, I choose them because I think there can be some useful shape or element easy to edit and “re-use”. Michela asked me to make some textures as well, I liked the idea even if I’m new to this kind of photo. The result is not perfect because this is my first time to catch textures and recently I’m short of subjects! I hope you like them anyway and the next time I plan to find new and better material for Webislove.

All photos are free for personal and commercial use

Download subjects 59,4 MB

Download textures 90,5 MB

And now some previews:

Subjects

Textures

Download subjects 59,4 MB

Download textures 90,5 MB

I think the best way to describe the negative space (or white space) in design field is to compare it to the pause in a musical song.
A well calculated pause will put the right emphasis on the music that will follow.
It permits to create what is called invisible design; just think to everyday experiences and you’ll notice that backgrounds
tend to be unseen. Going back to the musical metaphor , you don’t listen to the pause, you listen to the music even if the pause is part of the composition.

White space is a fundamental communication tool. I’m not saying just to abuse of it. It has multiple purposes and implications and must be calculated with the same care of the graphic elements. Too much white space can cause communication issues as well as a cramped one.

How to decide the right amount of negative space?

Deciding the right amount of negative space requires a great visual sensitivity and skill.
The choice is mostly dictated by the context as well :

• the mood you are trying to obtain ( a luxury website will need more space than an informative one )
• the quantity of information you have to deliver (negative space is expensive)
• the medium you are designing for (print, web browsers, smart phones…)

Negative space in practice

Let’s see some best practices and their related purposes…

To separate independent groups

In Simon Collison’s blog we can see how negative space is cleverly used to separate different groups(pink coded areas) of information. Less space to separate similar groups in the left column , more space between two different articles (on the right ) and some more between sidebar and the main content to indicate the two macro-sections of the blog.
Actually, you can see some more sub-grouping work inside the pink areas (post title, post date, main text, metadata).

To give a stylish mood

In the Garrard website negative space is used to enhance a luxury mood.

Another stylish example is the header of Nation website

Mark Boulton’s article on ALA gives a closer look at brand positioning trough negative space.

To eliminate visual tense and give some rest to the eyes

Look at the difference between the same page with and without negative space to separate sections.
Notice that I just modified the margins of the sections, the leading is the same in both images.
In the second image it’s harder to understand where a message ends and the next starts.

To catch the attention of the viewer

In this example we can see how powerful is the isolation of the text (combined with contrast) in the pink coded area. Here we have a compelling call to action, a very effective use of negative space.

To improve the reader experience and understanding

This research shows how margins and leading do affect reading performance and text comprehension.

So have you got some good and effective examples of negative space to share?

These methods are very flexible and work very well when it comes to vintage and grunge style or simply when you need to achieve a more realistic effect without using brushes.

A preview of the final result

What is needed to create this?

• A paper texture(1)
• The PNG mophed photo (taken with my Black Berry) or something else you like
• A grungy texture
• Kelvinized font

The source file?

You can download it here

Step1: create a new document

Create a new document (Ctrl/Cmd +N) with size of 600 x 800 pixels

Step2: create the background

Open the paper texture image in Photoshop, copy it into the document and resize it.
Let’s call this layer paper

Step 3: the moped

Open the file vespa.png ad copy it into the document. Call the layer moped

Step 4: Lab treatments

Now we need to create 2 new layers.
We’ll use the Lab method to create 2 duplicates of the moped.
The Lab method has got a Lightness dedicated channel and we’ll work with this.
So with the moped layer selected, choose Duplicate layer from Layer menu

Set the new document with these values

Document : new
Name : lab

In this new document image>mode>lab color

In this new document, select the channels tab and select the Lightness channel

With this channel still selected , filter>sketch>photocopy and set
Detail : 1
Darkness : 15
You should end with a result similar to this

Select the image (Ctrl/Cmd + a ) , copy it (Ctrl/Cmd +c) and put it on the top of the moped layer (Ctrl/Cmd +v) in moped.psd

Call this layer photocopy

Now in the lab.psd, select the history tab and go back to Lab Color state

Apply a new filter to the image (filter>sketch>halftone pattern) and set

size=1
contrast=5

Paste the resulting image in moped.psd on the top of the photocopy layer
Call this layer halftone

At this step the halftone layer hides the layers below…don’t worry about it!

Step 5: advanced blending – the funny stuff

Back to the moped.psd, hide temporarily halftone and photocopy layers, double click on the moped layer and set blending options :

Blend Mode = overlay
Opacity= 80%
Blendif = gray

Then split the arrows in blendif panel (Alt/Opt + click ) and move them to these values

Now activate the photocopy layer, and repeat the same step with

blend mode= multiply
opacity=100%
Blendif=Gray

and the Blendif settings like below

Finally repeat the same step with the halftone layer

Blend mode=multiply
Opacity=55%
Blendif=gray

and the Blendif settings below

You should result with something like this

Step 6 : add a worn effect

Now it’s time to add some worn effects
Open subtlegrunge2.jpg and copy it above the paper layer.

Set
Blend mode = color burn
Opacity = 20%
Then with a soft round eraser polish the moped area

Step 7 : add some text and fancy stuff

Now add some text, shapes, play with their blendif settings and you are ready.

Conclusions

I think the Blendif option is often overlooked, but it’s a very useful and flexible technique to achieve a realistic effect.
Tip : using this technique, you can obtain many different results simply changing the blend method of the layers

Not just a link…

Citizens Theatre

Technically speaking it’s just a link treatment , is the way it’s used that improve the general look and feel and also permit to know at glance what the link is about.
The finesse here is that the colour of the link speaks about the nature of the content: red for Youtube videos, pink for Flickr images, cyan for Twitter statuses and so on.

Visit Phily

Not just a mega drop-down menu, but an immediate preview of every section complete with images, weather forecast, news titles and so on. The visitor has high chances to reach what he’s looking for with just one click.
To say nothing how this mega drop-down menu is beautifully crafted in visual terms.

Engaging forms

Analog

The contact form is apparently just on one row. What we’d expect is a scrollbar appears while we are writing . Well this doesn’t happen, the textarea grows while we are writing the text.
We saw this behavior so many times on Facebook, but it’s really pleasant to see it on a website.

Information Highwayman

Here we have another contact form beautifully crafted.
The cue is a conversational and informal approach supported by a great copywriting. The result is truly engaging and to fill the form is a funny task

Future of Web Design

The newsletter text field uses the rgba color property to obtain a transparent background that fits better with the website until you don’t focus on it. In that moment the text field gets a solid background to help the visitor to fill the form properly.

Wonderful scrolling

Fresh01

There are 2 fixed blue bubbles on both sides of the text. While you scroll the page, the background of the bubbles scrolls highlighting the date on the left and an icon indicating the kind of content on the right.

Tick Talk

While scrolling down the page you’ll see the sand in the hourglass flows through the narrow tube into the bottom bulb. This gives you an idea of how much content remains to read in the page. The hourglass here has a double purpose : enhance the concept and drive the visitor.

Inspiration

The main inspiration came from In the Bottom of My Garden, an early work by Andy Warhol. I was fascinated  in a visual sense of course, but also with the atmosphere of a pixiesque world.
Some other influences came from Alice in Wonderland: in particular I have always loved the White Rabbit.

100% crafted by hand

The look I was trying to obtain was informal.
I also think it’s important to bring a human feeling to a digital medium, so I really liked the idea of using my hands to create every element in this website. I jumped on Illustrator and Photoshop only after the stuff was sketched on paper. To say nothing of all the fun I had creating the dummy head.

Yep, I think pleasure is a must while we are crafting our own work

Typography

The choice of Clarendon font face, put togheter 2 of my great passions: the Old American West and the fifties/sixties era, both periods where this font was widely used in posters and advertising.
A bit more complex was the choice of the second font face. Finally, Syncopated Script was the typeface I was looking for. It was inspired by the work of painter Stuart Davis, a bridge between cubism and Pop Art.
I like Georgia, it fits well with the 2 above and it’s a web–safe font, so I decided to use it for the main text.

Progressive enhancement and CSS3 stuff

I really like the idea of progressive enhancement. However, the tricks I used here are very minimal because the style of the website simply didn’t require too much effort in this way.
So just some rounded corners and transitions for link hover effect.

Conclusion

Well, I really hope you’ve found a nice place to stay and you feel as much at home here as I do.