View demo Download source

Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.

There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. By using hidden checkboxes, we can control the opening and closing. Alternatively, we can also use radio buttons if only one section should be open at a time.

So, let start!

Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use.

The Markup

We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Everything will be wrapped in a container with the class ac-container. For each item, we will have a checkbox, a label and an article which is the content section of that item:

<section class="ac-container">
	<div>
		<input id="ac-1" name="accordion-1" type="checkbox" />
		<label for="ac-1">About us</label>
		<article class="ac-small">
			<p>Some content... </p>
		</article>
	</div>
	<div>
		<input id="ac-2" name="accordion-1" type="checkbox" checked />
		<label for="ac-2">How we work</label>
		<article class="ac-medium">
			<p>Some content... </p>
		</article>
	</div>
	<div><!--...--></div>
</section>

Note that we need to give each input an ID which we will then use in the for attribute of the label. We need this in order to check the checkbox when clicking on the label.

Each article will have a class that will help us determine to which height we it to expand to. (Optimally, we could use ‘auto’ as the expanded height value, but unfortunately it will not animate like that.)

Let’s have a look at the style.

The CSS

I will omit all the vendor prefixes, but you will, of course, find them in the files.

Let’s define a width for the accordion and center it:

.ac-container{
	width: 400px;
	margin: 10px auto 30px auto;
}

Next, we’ll make the labels appear as clickable buttons by giving them some slick background gradient. With multiple box shadows, we’ll create a subtle border and an inset effect. We’ll also set the z-index to 20, to make sure it will be on top of the content section:

.ac-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 2px 2px rgba(0,0,0,0.1);
}

On hover, we’ll make the label white:

.ac-container label:hover{
	background: #fff;
}

When we click on a label, the checkbox get’s checked and when that happens we want the respective label to have the following “selected” style:

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
}

As you can see, we are using the adjacent sibling combinator to select the label since it is directly preceded by the checkbox input.

Let’s add a little arrow icon on hover. For that we’ll simply use the pseudo-class “after” so that we don’t add unecessary markup:

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;
}

For the “selected” item, we want to show the up-pointing arrow:

.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}

And since we don’t want the inputs to show, we’ll hide them:

.ac-container input{
	display: none;
}

The content area will have an initial height of 0px and any overflow will be hidden. We’ll add a transition for the height and for the box shadow. The transition that we are adding here will act upon “closing” the item. We define another transition for the selected item. So, we can basically control the two behaviors by doing this. As you can see, we will make the closing a bit faster than the opening.

.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
	transition:
		height 0.5s ease-in-out,
		box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

Let’s style the content a bit:

.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Now we define the three classes for the different heights. These are the heights that an item’s content will animate to:

.ac-container input:checked ~ article.ac-small{
	height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 180px;
}
.ac-container input:checked ~ article.ac-large{
	height: 230px;
}

As already mentioned, “auto” height would of course be the best option here, but since we can’t animate to that, we need to set some heights for the transition.

Please note that in some mobile browsers, clicking on a label might not trigger the checking or focusing of the associated input.

Demos

1. Demo 1: Using Checkboxes
2. Demo 2: Using Radio Buttons
3. Demo 3: Using Checkboxes (default open)

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

Almost any website or design project will include the use of type. From a few words to a page filled with text the font choices you make in the early planning phases will carry through the project. Fonts can help create and establish a mood and set the tone for how your work is received.

Do you want a modern look and feel? Or is the desired effect more classical? Is text being used primarily as art or in logo design or does it need to meet readability standards? All of these are questions you should answer before selecting typefaces for a project.

Keep in mind that each typeface on its own can say almost as much about the project as actual words on the page (or screen). Carefully evaluate typefaces so that each represents projects in the proper way.

Project Goals

The first step with any design project is to determine what you expect as a final outcome. Think about how type will be used. You would not use the same font on a wedding invitation as for a wanted poster, right?

Stick to simple typefaces that are highly readable for projects with large blocks of text. In web design the trend is to use a sans serif body font – think Arial, Tahoma and Verdana. Using a simple choice will take the emphasis off the look of the text so that it is easy to read, such as the simple sans serif font used on this website. Look for a font with average width strokes and lines – stay away from super thin or thick letter forms – to ensure readability.

Consider the impact of type on images as well. If the image is driving the design, keep type simple so the image stands out. Caravan Restaurant & Bar does this with a striking image of its interior on the landing page while using simple type to direct you to other parts of the website.

More engaging font choices often work best when used sparingly and when they can stand on their own. Use a funkier font for items that will be used as artistic elements or that do not rely on readability. Old style, cursive, script and display typefaces can quickly establish a mood and work best when used at large sizes.

For example, “Good Design” establishes a light mood for this site. The same goes for the company name, Indubitablee, in the top left corner. The typefaces have curvy, loose styles and look fun. Now imagine either of those typefaces while trying to read this article. It would be a lot less fun and would be difficult to read.

Moods

Although there are many factors that contribute to the overall feel of a website, some type choices alone can set the mood. (Although some fonts, such as Helvetica, are considered “moodless.” This means these letter forms take on the feel of other typefaces.)
Font selections can feel formal or informal, light or dramatic, modern or traditional and warm or cool. Fonts are not limited to a single mood and combinations of typefaces can create different mood associations.

The Team Fannypack website combines traditional and dramatic typefaces for a very old-style feel but with hints of modernism (not the icon in the top left corner).

AdPacks.com uses scripts and sans serif typefaces to create a page with a look that mirrors the theme “classy” the site is pushing. The old-style image and background in combination with the type creates a harmony in what the page says and its visual identity.

WakWAW takes a completely different approach. It uses a very dramatic typeface to catch your attention and the font is used throughout for headers and as a navigational tool. It combines with a “moodless” font that is easy to read but does not take away from the chaotic feel of the site.

Consider Established Themes

Keep in mind that establishing mood and feeling is pretty complex and can come across differently based on each person’s experiences. While there are some pretty universally accepted moods – think back to that “Wanted” poster – others are not so clearly defined.
Developing a mood based on distinct type selections from certain time periods can help. Using a typeface with an established identity can create an instant mood.

Font Diner uses a 50’s theme, with the main title having the look of the logo from a classic Chevrolet. This visual association is quick. With just a glance you are instantly taken back in time. And the site name, Font Diner, further expands on that theme.

Script and cursive type choices instantly create a feminine mood and are commonly used on websites targets at women. (Think of how many wedding and party invitations use this brand of typography.) Cake Sweet Cake and Addy Meira each use a collection of cursive and italics to create a lights and delightful moods on sites with woman-appeal.

Trends

With the number of items competing for your attention on websites, font choices are becoming increasingly dramatic. But at the same time, type driven sites are opting for more traditional sans serif choices to set them apart.

High impact, high drama fonts are not always readable and can create a sense of intrigue or chaos. These type selections can do one of two things: Bring in new people to the site because of interest, or confuse and turn them away. Make sure to use “super moody,” bold choices with strong images that help convey a message if the type falls short.

“Greetings Earthlings” is a great example of a moody choice paired with a strong image and nice supporting type. It immediately sets a space odyssey feel with an image and typeface on the landing page but the rest of the site uses an easy to read typeface. Site developers merged impact and readability.

Adding Color

Mood can sometimes be about more than just a font. Think about color choices and how just a simple hue change can alter how you feel. Traditional color mood rules still apply and should be considered to avoid an inadvertent emotional association.

Reds and blacks, especially when paired with dramatic typefaces, can create a sense of passion or anger. Blues and greens are more peaceful, with blue also sometimes establishing a sense of melancholy and greens linking to nature. Yellow can be cheerful or comforting and oranges are also exciting or energetic. White emphasizes emptiness or space.

Look, just because you know Photoshop, Illustrator and Indesign really well, doesn’t make you a fantastic designer — it makes you a really great Photoshop, Illustrator and Indesign user. I constantly struggle with design, it’s sort of a never ending three sided war: my imagination vs. design knowledge vs. design tool proficiency. But I came to a realization a while back that most of us rely too heavily on the last part — the tools — and forget what actually makes a quality design.

How many designers do you know (or maybe even you) that will instantly get into a pissing contest about what Adobe product is best for web design? But, as soon as somebody brings up “hierarchy” or “typography” those designers tend to duck back into their cubes. Despite our proficiency with the tools of the trade, web designs are not created by these programs.

Really great designers aren’t users, they are creators. To them, designs are created way before they grab their sharpie or click open Photoshop. For me it’s the classic rivalry between Kurt Cobain and Joe Satriani — alright, there’s no rivalry here, but trust me it’s an awesome analogy. Satriani is arguably one of the most polished and skilled guitar players in the universe. He does amazing things with a piece of maple and redwood; nobody on the planet would ever say he “sucked” at the guitar. Where Satriani is a calculated master guitarist, Cobain is a mediocre guitarist at best. So then why was Cobain able to create one of the most unique musical revolutions in the last forty years? Among other things, Cobain was not simply a user of the guitar, but instead he was a creator who used the instrument to express his ideas.

The Disease

I affectionately call this type of disease the “user designer disease”. The disease usually starts early and usually infects newer designers: designers who first graduate college or first start to work in the business. Becoming a user designer starts innocently enough. You learn how powerful these great tools are and you start to build a dependency on them. You start to realize that these applications can do so much that you start to toss away your sketchbooks and notepads. Anytime you have a creative thought you start to pop open your Mac, launch Photoshop and start playing around with the pen tool.

As a recovering user designer I now see the disease all to well. It’s like buying a new luxury car that can parallel park for you, it’s sounds great when you use it, but eventually you start to realize who is really in charge. The disease is a designer killer. It’s a skills killer and most importantly it’s an imagination killer. Like the chicken pox, the “user design” disease is something we all need to get in order to become healthy, happy designers. You’ll experience many different effects when you have the disease, but there are two main, horrible effects that can and will cripple your growth as a designer: deterioration of versatility and reproduction.

The Effects

Being a great designer doesn’t simply mean learning how to use the tools of creation, it’s about being able to create despite the tools of creation. Often times our proficiency with design tools becomes a crutch for us: propping us up and helping us get around, but never allowing us to run.

There are some bad effects to allowing yourself to use creative tools as a crutch, aka, become a “user designer”. The first major effect is the deterioration of versatility and imagination. When you start to use the tools as creative devices and allow them to take over your creative process you start to limit your expression to what you are only capable of doing in the application.

Real design is not limited to how you can create something in Illustrator; rather, design should only be limited to the delivery of the design and the needs of the user (or client). When you limit your creative expression to the tools’ abilities, you are only as versatile or imaginative as the tool itself.

The second horrible and awful effect of being a user designer is reproduction. Instead of finding clever design solutions to your client’s or users’ requirements and finding a design solution that is best for all parties involved, it’s much easier to copy what other popular sites are doing and using nifty Photoshop techniques to accomplish it. That is not design, that is reproduction. Reproduction is a bi-product of buying into popular trends and limiting your process to the tools of the trade. Cookie cutter web designs are simply the designer’s inability to express themselves and solve design problems.

The Cure

Don’t worry, there is a cure for the disease that is becoming the “user designer”. Depending on how far the disease has spread you may have a long hard road to recovery. Now, I’m not the greatest designer and I have some major weaknesses when it comes to design. But in my experience, the best way to throw down the crutches and run is to continually learn, continually grow and continually be aware of your strengths and weaknesses. This takes time, energy and most importantly the ability to be open to new ideas.

Overcoming the itch to rely on design tools and replicate only what is trendy at the time, starts with going back to the basics:

• understanding design principles/elements
• understanding what makes a design good or bad
• be willing to drop your own personal bias
• step out and experiment; fail when needed
• continually study the craft
• don’t copy, find inspiration from others

Proficiency of the tools isn’t a bad thing however, I’m not saying that you shouldn’t spend time learning the power behind the applications. But be careful with them, don’t let them start become your creative process, rather, let them be a part of your creative process. Going back to the Cobain vs. Satriani analogy, you don’t have to become one or the other. Instead, set your goals higher and work towards both — become Jimi Hendrix instead.

The three winners of Conceptboard’s giveaway will get a professional account with unlimited coworkers free of charge for one year.

(This contest is closed.)

What is Conceptboard?

It’s everything you ever wanted when working on your drafts with coworkers or clients. Conceptboard is a versatile space to upload images and documents combined with simple but powerful scribble, highlight and commenting tools. It’s wrapped up in real time collaboration features such as presentations and guest access.

Check out the sample board of a photo shooting or create a new demo board to play around with.

How to use it

• idea visualization & decision processes
• brainstorming & mind mapping
• design & document review
• task management & approval
• mock-ups & sketches

Features

• upload concepts, drafts & office documents
• scribble, highlight & underline
• take screenshots with the integrated tool
• work with your team in real time
• start ad hoc presentations
• make precise comments & assign tasks
• use your own corporate branding
• manage your staff
• work together with freelancers and customers

To enter the giveaway, simply add your comment below and tell us why you’d like to try Conceptboard.

Good luck to everyone!

This giveaway ended on the 23rd of February 2012 at 4 p.m. GMT+0.

The Winners

We are happy to announce the following winners of the giveaway:

• Mary Makowsky
• David Benton
• Mack Richardson

Congratulations, you will be contacted shortly!

Thank you!

Setting type effectively in any project requires a little more thought than just selecting a font and point size. The way the letters relate to each other can be just as important of a consideration.

Type can be manipulated to be shorter or wider, have large gaps or lack thereof between letters, and have lines with varying depths of space between them. Each of these attributes affect the readability of a project and whether certain modifications work for your project or not can hinge on the message you are trying to convey.

Take time to play with various type options before settling on a final selection with each type driven project.

TRACKING AND KERNING

Tracking and kerning refer to the horizontal spacing between letters. Although many people choose to use these terms interchangeably, they are different.

When making changes in tracking the horizontal space between each letter increases or decreases for all letters in a block of text. Tracking can be used to slightly tighten a paragraph to remove widows or orphans in text or add very loose spacing to create a more artistic effect. Tracking is measure in plus and minus units. Plus units add spacing while minus units tighten letter spacing.

Kerning is the reduction of space between a pair of letters. Some letter pairs such as AV, will have awkward gaps between the letters when using certain typefaces. A kerning adjustment will close the gap so the spacing looks more like the other letters in the sequence.

Changing the tracking and kerning directly affects the readability of type. For large blocks of type sharp tracking and kerning changes should be avoided. These techniques work best in large blocks of text when letter spacing is altered slightly. In projects where type is used as more of an art element, loose or tight tracking techniques can be effective.

Web designer Josh Hemsley and Kitchen Sink Studios each use tracking techniques to achieve optimal line spacing on their pages. Hemsely uses tighter letter spacing for “TWITTER” but lets the letters breathe more with “DRIBBLE.” Alternating letter spacing adds visual interest when used with just a few words. Kitchen Sink Studios uses the same technique, alternating between tight and loose tracking to add emphasis and draw the eye to certain parts of the page.

LEADING

Leading is the vertical space between lines of type and refers to the distance from one baseline to the next. Leading is measure in points, just like a font, and the distance between baselines directly corresponds to the font being used.

Tight leading refers to any measure where the space between lines is at least two points below the size of the font being used. Normal leading is equal to or within a point size of the font and loose leading is anything greater than that.

Leading also affects readability. Normal leading or somewhat looser leading is used in most applications where large chunks of text must be read. Using slightly looser leading with small text can make it easier to read, such as in book publishing. Leading that is extremely loos or tight can be hard to read and works best when used with only a few words.

Look at the use of tight leading from LeaderBe Consulting. The letters overlap to create an art element while ensuring that text remains readable.The website for the book “What Happens Next?” uses the opposite approach. Using loose leading for the copy makes a large block of text easy to read and less intimidating.

SET WIDTH

Set width is the measure of a letter and the space next to it and changing the set width results in the stretching or squeezing of typefaces. Many type purists disapprove of changing the set width of any font.

Set widths are measured in percentages. A normal set width of 100 percent is how the font was produced and intended for use by the designer. Set widths of less than 100 percent make a font narrower and more condensed. Set widths of more than 100 percent expand and make a font wider.

SUBSCRIPTS AND SUPERSCRIPTS

Subscripts and superscripts are most commonly used in for fractions and in scientific writing applications. Subscripts drop a letter below the baseline, while super scripts appear above it. Characters are 65 percent to 75 percent of actual size and have a slightly increased stroke. Most publishing software will also allow for the vertical movement of subscripts and superscripts.

EXTRA EFFECTS

Some designers also use a variety of other tools to manipulate type, such as word spacing, drop caps and even shadows and embossing.

Word spacing and drop cap techniques can add emphasis to certain parts of a type project and are common type modifications. Word spacing changes can affect readability and tight spacing should be avoided when large blocks of text are used because words can seem to run together. Drop caps are a great tool for adding emphasis and navigation through heavy text.

Shadows and embossing effects added to text are sometimes controversial. Typographers and designers do not always see eye-to-eye on adding effects to type, with the font design camp arguing that each font should stand alone. Designers see these effects as another tool in their repertoire. Regardless of your philosophy, shadows and embossing are most effective when using type as an artistic element and can be difficult to use effectively in applications with many words.

Appvita uses shadow effects on text to create its logo and use it as an art element. The site also uses shadows on small blocks of text for emphasis such as “New & Improved!” The shadows are most effective because they are used sparingly; too many shadows can make text difficult to read.

Featured Image Credit:
Abstract Vector Image By Vectorportal.com

View demo Download source

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Please note that this will only work in browsers that support CSS 3D transforms.

How it works

The following HTML structure is used for the gallery:

<section id="dg-container" class="dg-container">
	<div class="dg-wrapper">
		<a href="#">
			<img src="images/1.jpg" alt="image01">
			<div>http://www.colazionedamichy.it/</div>
		</a>
		<a href="#">
			<!-- ... -->
		</a>
		<!-- ... -->
	</div>
	<nav>
		<span class="dg-prev"><</span>
		<span class="dg-next">></span>
	</nav>
</section>

And this is how the gallery is initialized:

$('#dg-container').gallery();

Options

The following options are available:

current		: 0,
// index of current item

autoplay	: false,
// slideshow on / off

interval	: 2000
// time between transitions

I hope you enjoy it!

View demo Download source

Only a few years ago people were getting rich spamming and scamming our Grandma’s and Grandpa’s AOL email boxes. Today, people are smarter and now understand that the Nigerian Prince really doesn’t want to give them ten million dollars and only if you claim it in the next ten minutes. But email creatives are still a very important part of legit online marketing campaigns of high quality products and services.

Email ads and newsletters are still big converters mainly because you can directly reach your target audience and keep them informed of new products and services you are offering. However, even though people are smarter, the methods of building and rendering email creatives are not. Tables layouts, catchy subject lines and clear call to actions are still the email creative standards so let’s talk about some ways to design and build better email creatives and campaigns.

I’ve sprinkled great email creative examples throughout the article that demonstrate these principles and hopefully offer some inspiration for your next email design project.

Marketing Campaign Basics

There is a lot of trial and error when it comes to developing a successful email marketing campaign, but there are a few elements that have been proven to work time and time again. Despite whether you are sending out a monthly newsletter to your users or sending out a creative to promote your new product release, these elements will all contribute to a successful campaign.

• Attention-grabbing subject line
• Relevant, useful content
• Beautiful imagery
• Consistent branding
• Strong call to action
• Social icons and/or feeds

The first rule to good email marketing is a strong, attention-grabbing subject line. Email marketing is a two step process: click to open the email and click to your site. If the subject line isn’t compelling or interesting enough, no one will even get past the first click. You know your customers/users best, so make sure your subject line grabs their attention and gets them past the first click.

After the customer/user clicks to open the email because of your awesome, ridiculously interesting subject line — it’s now your job to get them to that all important second click. The first thing to get them there is content, relevant and useful content. Whether it’s a newsletter or ad, the content needs to be relevant to them, it needs to be useful and it also needs to be informative enough (but not too much) so that your users will trust your expertise and want to learn more.

Along with relevant content, images are an excellent way to communicate your message and an easy way for your customers to engage with the email quickly. It’s a myth that images in emails are worthless because “most” people have images turned off or that “most” email boxes don’t render images properly. We’ll discuss this more below in the design section, but “most” people I know don’t even know you can turn images off in the first place. Don’t be afraid to use images, cool fonts or anything that will catch the user’s/costumer’s eye.

Branding is the best way to tie your site, service or product into your email creative so make sure your name is all over the thing. Consider the email creative as a mini website. Brand the header with your logo and/or name, brand the footer with your logo and/or name and use your color scheme throughout the email to stay consistent.

Without a clear call to action the email creative is worthless, despite your attention grabbing subject line, informative content, its beautiful imagery and clear branding. Use contrasting buttons to guide the user to the next step. Take advantage of visual hierarchy methods to guide the user to where you want them to go. Any design methods you use to entice the user will be worthless if they don’t know what the next step is or where they need to go.

Another thing to consider is building trust with your new customer/user. People don’t buy into scammy pitches and cheesy testimonials anymore. The best way to build trust is to show them that other people use your product or service — hopefully their friends. Add your social icons or even feeds to your email creatives so that they can see you’re not just some sneaky snake oil salesman. Social feeds and social proofs show to your future customer/user that you care about your product or service. Give them a chance to see what others are saying about you.

Email Design Best Practices

Designing and building an email creative can be a beast — and you thought it was hard to build a website browser compliant. Try email boxes that don’t even render CSS. The first rule of email creative design is just to make things simple and the second rule is to keep things simple. But we all know creating simplicity is the hardest thing to do.

HTML Only

So, forget everything you know about modern web design layout and stay away from using any CSS if possible. If you do use CSS it should be inline. I know, it goes against everything you stand for as a web designer. But with so many email rendering agents out there, it’s impossible to know whether any of your floats or display properties will render correctly. Don’t guess, just fall back to your old table layout, HTML only design layouts — even if it breaks your heart.

Grids/Columns

Since CSS layouts aren’t cool anymore and table layouts are back in now, stick to grids and columns so that your creative will be presented in the way you designed it — no matter what email box your user is using. Plus, grids are all the rage in web design these days so average users won’t know that you’re using tables to lay it out.

Besides making it easier for you to render your email creatives, grids also offer a better way to present your content and layout your information and images in a clean and methodical way. Columns and grids separate and present content in an easy to read and easy to scan way, so that your user doesn’t have to work hard to pull your message out.

Don’t Skimp on the Images

Like we talked about above, images are awesome elements for email creatives, so don’t be afraid to use them. As long as your images are hosted on a good public URL and are embedded via the HTML img tag, you’re safe, so go ahead and use them. Keep in mind, email creatives are kind of an older beast so there’s really no need to have live text unless where necessary. It’s totally cool to use embedded text in images so take advantage of this and be as creative as you want.

Because CSS can be hard to work with in emails and because tables are also hard to work with, try to avoid background images. Usually, you’re safe to use a body background or table background, but beyond that try to use inline images so you don’t run into more bugs.

Don’t forget to optimize your images also. Despite the fact that your images are most likely gonna be hosted on your public server somewhere, don’t make the images so large that they take a second to load. Once your user opens that email make sure they see those beautiful images and not just the dreaded “x” mark where the image should be. Stick with JPGs and GIFs instead of PNGs — some viewers still don’t like PNGs… I know, pretty lame.

600px

That is the max width your email should be. Don’t go any wider than that. Unlike the flu browser, most email clients don’t have the luxury of wide screens. Typically, most clients use up to about 600-700px of their real estate to the email viewing window so avoid going too wide. Also, consider designing your table layout to be flexible (if you can) so that when someone shrinks their email client they will still be able to view your entire email.

Quicker the Better

Beyond optimizing you images and content so that your email creative loads quickly, design you email to be scanned quickly by the reader. Take advantage of visual hierarchy to guide the user through your email, use bullet points and headers, use infographic style imagery or other visual cues to present you message and always design a clear call to action.

Basically, you want your user to scan down your email in a few seconds and still understand the overall message you’re presenting. If you can grab their attention in those few seconds, they may stick around to read the email in further detail and hopefully click through.

Test, Test, Test

The last thing you want to do with your email creative is to test it to death. Load it up and hit it in as many email clients as humanly possible. Although it may not be possible to test it in every inbox, the more the better. Even if you think you have everything covered and you’re confident that everything will work beautifully, you’re guaranteed to find a bug or two in a few clients. If you just don’t have time to test a bunch of inboxes, make sure you hit the major web clients like Gmail, Yahoo and Hotmail — then make sure you hit the major desktop clients, Outlook and Apple Mail.

Consider Mobile

Okay, I didn’t forget about mobile email boxes — well, I sort of did. Mobile inboxes are just an entire beast all by themselves so they may actually require a whole new article to tackle them. But just consider how your email will be presented on a mobile phone. Make sure you are using proper alt and title tags for your images if you embedded important text into them. Like I said, mobile email creative best practices probably deserve an entire article to themselves so stayed tuned for that.

Our friends over at ThemeFuse wanted to share 3 WordPress theme licenses with our readers, so if you are using WordPress that’s awesome because the winners of today’s giveaway will be given access to download an original WordPress theme of their choice from Themefuse free of charge.

(This contest is closed.)

Following are some examples of themes designed and developed by ThemeFuse. You can visit their site for a complete list.

VideoGrid

Showcase your lifetime work or blog like you never blogged before with this insanely great multimedia WordPress theme.

Sportedge

The versatile SportEdge Magazine is the best Sport WordPress theme we could have come up with, that’s a given! See for yourself.

Medica

Probably the best WordPress theme when it comes to Doctor’s websites, Health Clinics, Dentist’s Offices or anything medical related.

Writer

Writer has all it takes to be a really great option for bloggers that want a stylish and premium look for their personal WordPress blog.

Brand Crafters

The ultimate corporate WordPress theme that will guarantee to make your business website stand out from the crowd.

MobilityApp

A theme best suited for smartphone developers that need to promote their iPad, iPhone or Android mobile applications.

Qlassik

Be it your corporate business website or your personal web design portfolio, Qlassik will definitely deliver in both situations and more.

Lifestyle

An online magazine oriented WP theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.

Welcome Inn

If you need a hotel oriented wp theme, you have to try our latest project. It comes in 2 additional flavors: ski resort and spa. Enjoy!

Freshfolio

An original, awesome and efficient way for showcasing photography, design, illustration portfolios’ or even paintings and art.

Envision

Try our most complex wp theme to date. It has shortcodes, 5 different sliders and a bunch of awesome features. You name it, we’ve got it!

WebStudio

This theme can be used to showcase photography, illustration, design, paintings or art, in a simple, awesome and efficient way.

Exquisite Works

WP theme designed for someone who needs a classy and stylish presence on the web for their corporate website.

Clean Classy Corporate

Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.

Art Gallery

Showcase your art, photography, design work or even print. If you think of your work as art, this is the wp theme for you.

Creative Juice

We’ve crafted this wp theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.

SiliconApp

We’ve built this wp theme with a software application wordpress template in mind, be it a mobile or a standard desktop product.

Bon Apetit

This wp theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.

All you have to do is to comment below and mention why you’d like to win a theme.

Good luck to everyone!

This giveaway ended on the 9th of February 2012 at 6 p.m. GMT+0.

The Winners

We are happy to announce the following winners of the giveaway:

• Aubrey C.
• Maurice Griffin
• Martin

Congratulations, you will be contacted shortly!

Thank you!

View demo Download source

In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover.

The unordered list will look like this:

<ul class="tt-wrapper">
	<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
	<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
	<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
	<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
	<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
	<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

The list elements will be floating left and the anchors will have the following style:

.tt-wrapper li a{
	display: block;
	width: 68px;
	height: 70px;
	margin: 0 2px;
	outline: none;
	background: transparent url(../images/icons.png) no-repeat top left;
	position: relative;
}

Each anchor will have a different background position for the background image:

.tt-wrapper li .tt-gplus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
    background-position: -340px 0px;
}

The span will work as our tooltip and we will “hide” it by setting its initial opacity to 0. The effect I want to share with you is the tooltip fading in and appearing from the top, so we will give it a bottom of 100px, placing it above the anchor:

.tt-wrapper li a span{
	width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	left: 50%;
	margin-left: -64px;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
	color: #719DAB;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid #fff;
	background: rgba(255,255,255,0.3);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
    pointer-events: none;
	bottom: 100px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	transition: all 0.3s ease-in-out;
}

Since we will make the tooltip appear on hover over the anchor (and the span counts as part of the anchor) the tooltip will also appear when hovering over the area above the anchor (the span is still there, it’s just the 0 opacity that makes it invisible).

For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a black rgba value with a low opacity:

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0,0,0,0.1);
}

The :after pseudo-element will be placed a pixel away and we’ll make it white, just like the border of the tooltip itself:

.tt-wrapper li a span:after{
	bottom: -14px;
	margin-left: -10px;
	border-top: 10px solid #fff;
}

So, on hover, we will make the span move from the top and fade in:

.tt-wrapper li a:hover span{
	opacity: 0.9;
	bottom: 70px;
}

And voilà! Very simple animated tooltips! In the second demo, you can see an alternative style for the tooltip (a funny circle) which scales up from the anchor and in the third demo the tooltips are rotated. The forth demo shows another neat effect.

The beautiful social icons in the demo are by Emir Ayouni (growcase.com).

I hope you enjoyed this little effect and find it useful!

Needless to say, this will only work in browsers that support pseudo-elements and CSS transitions.

View demo Download source

Image Credits:
Abstract Vector Image By Vectorportal.com

View demo Download source

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

The Dribbble shots used in the demos are by Matt Kaufenberg. Check out his Dribbble profile or visit his An Illustration-a-Day Blog.

Markup

The HTML will contain five main divisions: a header and the four content sections. Each of the content sections is going to have an ID and the class panel. Moreover, we will add another division inside which will have the class content. The first content section which is #home will only have the content class and will not require an extra division:

<!-- Home -->
<div id="home" class="content">
	<h2>Home</h2>
	<p>Some content</p>
	<!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
	<div class="content">
		<h2>Portfolio</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
	<div class="content">
		<h2>About</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
	<div class="content">
		<h2>Contact</h2>
		<p>Some content</p>
		<!-- ... -->
	</div>
</div>
<!-- /Contact -->

In the header we will have the main heading and the navigation:

<!-- Header with Navigation -->
<div id="header">
	<h1>Page Transitions with CSS3</h1>
	<ul id="navigation">
		<li><a id="link-home" href="#home">Home</a></li>
		<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
		<li><a id="link-about" href="#about">About Me</a></li>
		<li><a id="link-contact" href="#contact">Contact</a></li>
	</ul>
</div>

The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently.

Now, the main idea is to use the pseudo-class :target in order to add a transition to the current section. In this example, we will be sliding up and down our sections.

CSS

First we will give style to our header and the navigation. We want to keep these on the same spot at all the time, even though everything else will be moving.

#header{
	position: absolute;
	z-index: 2000;
	width: 235px;
	top: 50px;
}
#header h1{
	font-size: 30px;
	font-weight: 400;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	padding: 20px;
	background: #000;
}
#navigation {
	margin-top: 20px;
	width: 235px;
	display:block;
	list-style:none;
	z-index:3;
}
#navigation a{
	color: #444;
	display: block;
	background: #fff;
	background: rgba(255,255,255,0.9);
	line-height: 50px;
	padding: 0px 20px;
	text-transform: uppercase;
	margin-bottom: 6px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-size: 14px;
}
#navigation a:hover {
	background: #ddd;
}

All the sections except #home have the panel class. Here we will be using the transition whenever an element with this class gets “targeted”. The trick is to use a negative margin in the “normal” class and no margin at all in the :target pseudo-class. Adding a transitions will make the panel slide from the top whenever one is “selected”:

.panel{
	min-width: 100%;
	height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: -150%;
	position: absolute;
	background: #000;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
	z-index: 2;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

Next, let’s style the content class that all our sections have:

.content{
	right: 40px;
	left: 280px;
	top: 0px;
	position: absolute;
	padding-bottom: 30px;
}
.content h2{
	font-size: 110px;
	padding: 10px 0px 20px 0px;
	margin-top: 52px;
	color: #fff;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
	font-size: 18px;
	padding: 10px;
	line-height: 24px;
	color: #fff;
	display: inline-block;
	background: black;
	padding: 10px;
	margin: 3px 0px;
}

In order to change the color of the current item in the navigation, we’ll use the :target pseudo-class with the general sibling selector to “get to” the respective navigation item:

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
	background: #000;
	color: #fff;
}

And that’s all you need. Check out the demos and you’ll see other examples of how you can do this.

Hope you liked this tutorial and maybe you can experiment with your own effects.

¡Hasta la próxima!

View demo Download source