Gorgeous Headlines With @font-face And Letterpress Styles

June 2, 2010 By Lorraine

Remember when styling website headlines meant choosing between Times New Roman and Arial? How far we’ve come. Today, I want to show you a quick way to jazz up your website or blog headlines by combining @font-face with pure CSS letterpress styles.

You can use your favorite @font-face font, although for the letterpress to shine through you’ll want to stick with a boldfaced font. Go download an @font-face kit of your choice. I’m using the lovely Acknowledgement, which is big and bold and in-your-face, in my example.

This is my sample HTML:

[html]

10 Ways To Jump Over Lazy Dogs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/html]

Now for my stylesheet. First, I want to define my @font-face style:

[html]
@font-face {
font-family: ‘AcknowledgementMedium’;
src: url(‘Acknowledgement-webfont.eot’);
src: local(‘☺’), url(‘Acknowledgement-webfont.woff’) format(‘woff’), url(‘Acknowledgement-webfont.ttf’) format(‘truetype’), url(‘Acknowledgement-webfont.svg#webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/html]

Basically, I’m specifying that the font-family named AcknowledgementMedium can be found in the same directory. Now, for the letterpress style:

[html]
h1.fontface {font: 40px/44px ‘AcknowledgementMedium’, Arial, sans-serif; letter-spacing: 0;color:#222;
text-shadow: 0px 2px 3px #555;}
[/html]

Here, I’m calling the AcknowledgementMedium @font-face, setting the color, and- the letterpress magic bit- the text-shadow.

Remember, the text-shadow element is defined like so (learn more about text-shadow here):

x-offset or the horizontal offset. Unnecessary for this effect.
y-offset or the vertical offset. Two pixels is all we need.
shadow blurriness
shadow color

And this is what it looks like:

You can see the live example here.

Once you have a good grasp of how text-shadow works, the possibilities are endless. Play with different shades of a color, create drop-shadows, all on a variety of fonts thanks to @font-face.

Choosing Web Hosting For Clients: Shared, VPS, Reseller, or Dedicated?

May 31, 2010 By Lorraine

As a web designer and developer, I’m often tasked with selecting the best web hosting plan for our clients. Today I want to take a look at some web hosting options, and what you need to consider when choosing one for your particular client.

Shared

What it is:

The most basic of all hosting types, you’re paying for “shared” space on a server managed by someone else.

Pros:

Most affordable option. You can get good shared hosting for $5 to $10 for a single account.
No hassles. No worries on managing your account, the company will do it for you.
Could be all you need- for now. If your client doesn’t expect to get thousands of hits just yet, starting off on shared hosting might be a good choice. Choose a good, reputable company that will allow you to “grow” through upgrades.

Cons:

Shared hosting is limited, and because you’re essentially sharing one file system with hundreds of other accounts, it’s less secure.

VPS

What it is:

VPS stands for Virtual Private Server and while it is technically “shared” hosting, since you’re on a server with other people, it’s set up like a dedicated server, hence the “private”.

Pros:

A VPS is more secure than shared, and more affordable than dedicated. The account owner also has more power over the account, with the ability to implement secure server configurations, and- of course- root access.

Cons:

You need to know at least a little bit about managing a server- or at least you did in the past. These days, there are many Managed VPS packages that has the web host company doing everything (maintenance, upgrades) for you.

Reseller

What it is:

Reseller packages are popular among business-minded web developers. It usually works this way: rent a large amount of space, market it and resell it to your clients. Different companies have different reseller options, such as white label branding and included tech support.

Pros & Cons:

No worries about setting up or configuring a server- as a reseller, think of yourself more as a marketing arm of the web hosting company, reselling their products. For that reason, you should resell for a reputable host that you believe in and have a good relationship with.

Dedicated

What it is:

One server, completely “dedicated” to you.

Pros:

Obviously, the most secure option of all. A good choice for mission-critical sites, and for those expecting a lot of traffic. Lots more power.

Cons:

With great power comes great responsibility- so unless you opt for a fully-managed account, expect to spend time managing and upgrading your server yourself.

Cloud

What it is:

In all of the above, hosting is done on single server setups. Here, the account is hosted on multiple servers, promising more processing power and the ability to “scale” up anytime (by adding additional servers).

Pros & Cons:

Because of the way it’s set up (think Google), cloud-hosting offers the most power of all, and it should be the answer for mission-critical sites. Its scalability also means that prices can vary widely from very affordable to very expensive. There are concerns about security and privacy.

How do you choose web hosts for your clients?

7 Must-Have Free & Fabulous GUI Vectors

May 26, 2010 By Lorraine

I can spend hours looking through all the free vectors available online- but the truth is that these are the ones I use the most: they’re vectors of various GUI (graphical user interface) elements, and they’re a must-have for any web or app designer for professional-looking presentations.

iPad GUI PSD

One of the very first iPad GUI graphics available, and one of the best. As you can see from the screenshot above, it’s quite comprehensive, and the makers promise to keep it updated with new elements.

Gesture Icons

Great for designing touch-screen interfaces, these vector-based icons are scalable and- because they’re so plain- flexible enough to work with a variety of styles.

iPhone PSD Vector Kit

Great for creating mockups of how an app or website design will display on an iPhone, this “kit” contains six different iPhone interface options as well as several additional elements.

iPhone UI Vector Elements

More iPhone vector elements, from the makers of the USA TODAY iPhone app. They’ve also got an excellent post on why you should build app mockups in vector format.

Firefox & Safari Browser Vectors

When you need a screenshot that’s not technically a screenshot, here are good Firefox and Safari browser vectors that include buttons and locations bars among other elements.

Opera Browser Vector

Here’s a GUI for the Opera browser, fully layered with tabs, icons and so on.

iPad Vector GUI Elements

Some gorgeously rendered iPad elements here, including buttons, tabs, menus, keyboard, chat balloons and more.

25 Desktop Wallpapers For Designers

May 24, 2010 By Lorraine

When you stare at the same screen for hours and hours, it’s important to have good desktop wallpaper. “Good” can mean useful wallpaper- as in the case of developer cheat-sheets or calendars- or inspiring wallpaper, that can motivate you or give you ideas for your current project.

Here are 25 of my favorite desktop wallpapers, all available for free download. If nothing else, I urge you to scroll down to see the last one, currently my desktop wallpaper on my workstation.