letscounthedays » Tutorial

CSS3 Support with Modernizr

Shay Howe — Wed, 09 Mar 2011 03:59:37 +0000

Designing with CSS3 Support & Alternative Fallbacks

CSS3 is a hot topic these days. Designers and developers are starting to widely utilize CSS3 and new tutorials are popping up nearly everyday. As a designer it is an exciting time to be at the forefront of it’s development. There are, however, many designers and developers that see browser support for CSS3 as insufficient. In their defense, not all clients are open to letting their websites look moderately different from browser to browser.

Thankfully Faruk Ateş, Paul Irish and Alex Sexton have developed a script, Modernizr, that detects CSS3, as well as HTML5, browser support and allows us to take advantage of CSS3 in compatible browsers while providing alternative fallbacks to incompatible browsers. The script adds a unique class to the html element of a page specific to each CSS3 property supported. As an example, in browsers that support CSS3 border radius a class of borderradius will be added to the html element, while in browsers without support for CSS3 border radius a class of no-borderradius will be added to the html element. This opens up a world of opportunities, giving us just what we need to fully implement CSS3 without worrying about incompatible browsers.

View a Sample CSS3 Menu with Fallbacks

Best viewed in Safari or Chrome.

Putting Modernizr and CSS3 to Use

I built the following sample navigation to demonstrate how Modernizr works with CSS3 and how to build out fallbacks for incompatible browsers. With the help of Modernizr, the benefits of this navigation include:

100% compatible with all browsers
No images and no flash for modern browsers with CSS3 support
One image for depreciated browsers without CSS3 support

The Code

Step 1: The HTML Structure

<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Navigation</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<h1>Sample Navigation</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>

<script src="modernizr-1.7.min.js"></script>
</body>
</html>

The HTML here is pretty cut and dry. We have the basic structure of an HTML5 document, including a heading and an unordered list with a set of links. A few things to note here:

The no-js class on the html element
The last class on the last li element within the unordered list
The Modernizr script included at the bottom of the document

Once we include the Modernizr script at the bottom of the document we need to set it into action with adding the no-js class to the html element. The last class on the last li element is in place for older browsers which do no support the :last-child pseudo-class.

Step 2: Adding General Styles to the Heading

h1 { 
color: #222;
font-size: 15px; 
line-height: 36px; 
margin: 0;
padding: 0 10px; }

Before we jump into the CSS3 and specific property support we declare the general styles for the heading.

Step 3: Declaring Heading Styles for Browsers with CSS3 Support

.cssgradients h1 { 
background: -moz-linear-gradient(#f5f5f5, #d9d9d9);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#f5f5f5), to(#d9d9d9));
border: 1px solid #bbb;
-moz-border-radius: 4px 4px 0 0; 
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 #fff; 
-webkit-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
height: 34px;
width: 198px; }

First up we use the Modernizr class of cssgradients to target browsers who specifically support this CSS3 property. Equally, we could use a borderradius or boxshadow class since we will be using these properties as well. We will be using CSS3 gradients later on so we will choose the cssgradients class to keep everything consistent.

Within this CSS3 please note that we are using the old WebKit gradient syntax. The new WebKit gradient syntax will mirror that of the Mozilla syntax however at the time of publish the new syntax is only viewable within the WebKit Nightly builds.

Step 4: Declaring Heading Styles for Browsers without CSS3 Support

.no-cssgradients h1 { 
background: url("bg.png") 0 0 no-repeat;
height: 36px;
width: 200px; }

To target browsers without CSS3 gradient support we use the no-cssgradients class. In place of all of the CSS3 declarations we used before we now use a background image instead.

Step 5: Adding General Styles to the Unordered List and Links

ul { 
list-style: none;
margin: 0;
padding: 0;
width: 220px; }

a {
border: 1px solid #bbb; 
border-bottom: 1px solid #ccc;
border-width: 0 1px 1px 1px;
color: #3690cf;
display: block; 
font-weight: bold; 
line-height: 30px; 
padding: 0 10px; 
text-decoration: none;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out; }

a:hover {
background: #fff;
color: #222;
padding: 0 10px 0 18px; }

As with our heading before, we will declare all of the general styles for the unordered list and links. These styles apply to all browsers and are unspecific to browsers with or witout CSS3 support.

Within the a element CSS rule set we use the CSS3 transition property. This property will be ignored by browsers that do not support it however using it here will prevent us from having to use another CSS rule set specific for CSS3 links. Additionally it is worth noting that the transition value is set to all, which will transition all of our priorities including color, background-color, padding, opacity, and more.

Step 6: Declaring Unordered List and Link Styles for Browsers with CSS3 Support

.cssgradients li {
background: -moz-linear-gradient(#fff, #f2f5f5);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#fff), to(#f2f5f5));
position: relative; }

.cssgradients a:before {
border-bottom: 4px solid transparent;
border-left: 4px solid #666;
border-top: 4px solid transparent;
content: "";
display: block;
height: 0;
left: 10px;
opacity: 0;
position: absolute;
top: 11px;
width: 0; }

.cssgradients a:hover::before {
opacity: 1; }

.cssgradients li:last-child a {
border: 1px solid #bbb;
border-width: 0 1px 1px 1px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px; }

Keeping in pace with our cssgradients class for CSS3 support we declare all of our styles for the unordered list and links. Here we kick things up a bit with different pseudo classes and elements, along with a combining the :before pseudo-element with the :hover pseudo-class.

We start this block of code by declaring our styles for the li element, including a CSS3 gradient and a position of relative. You may wonder why we are declaring a gradient background on the li element and not the a element. The reason for this is because CSS3 background gradients are seen as background images and we are currently unable to transition a background image within CSS3. What we have done is declared a background gradient on the li element and then declared a solid background color to the a element upon hover. This way the a elements background will transition on top of the li elements background gradient giving the impression that the gradient is smoothly transitioning into a solid white. The relative position on the li element is necessary to properly position our arrow, which we will build next with all CSS.

We use the :before pseudo-element to attach the arrow to the beginning of all of the links. Building the arrow using CSS borders is not too difficult and is actually pretty fascinating. We do set an opacity of 0 to the arrow to hide it until hovered upon. We then combine the :before pseudo-element with the :hover pseudo-class to display arrow when a link is hovered over by setting the opacity to 1. Right now we could technically combine the two rule sets into one under the .cssgradients a:hover::before selector and omit the opacity property altogether since the transition property does not yet apply contents of the :before pseudo-element. However we have left them separate because transition support for the :before pseudo-element is coming and when available the opacity property will provide the perfect transition.

Lastly, we use the :last-child pseudo-class to select the last li element and round the bottom corners and change the border.

Step 7: Declaring Unordered List and Link Styles for Browsers without CSS3 Support


.no-cssgradients a {
background: url("bg.png") 0 -36px no-repeat;
height: 30px; }

.no-cssgradients a:hover {
background: url("bg.png") 0 -66px no-repeat; }

.no-cssgradients li.last a {
background: url("bg.png") 0 -96px no-repeat;
border: none;
height: 31px; }

.no-cssgradients li.last a:hover {
background: url("bg.png") 0 -127px no-repeat; }

Finally to wrap everything up, and to provide a fallback for browsers without CSS3 support, we use the no-cssgradients class. Using this class we use a background image fallback for the CSS3 gradients, border radius, and pseudo classes and elements.

Wrapping Up

View a Sample CSS3 Menu with Fallbacks

Best viewed in Safari or Chrome.

Hopefully this short tutorial has opened you up on how to use CSS3 while still providing support for older browsers. Modernizr is a fantastic tool and can be used far wider than what has been outlined here.

CSS3 Animated Owl Tutorial

Shay Howe — Tue, 25 Jan 2011 03:58:07 +0000

CSS3 Transforms, Transitions, and Animations in Action

As with any inquisitive web designer or developer I am always looking for ways to experiment with the latest HTML and CSS source. This past spring I got engaged and set off to create a wedding website, providing me just the opportunity to play with CSS3 transforms, transitions, and animations.

My fiancé loves owls so my idea was to have an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Nope. However, exactly what I was looking to do with CSS3 transforms, transitions, and animations.

View the Demo

Best viewed in Safari or Chrome.

CSS3 transforms, transitions, and animations altogether are not yet wildly supported. (Transforms themselves are fairly well supported, transitions are on the rise, and animations are currently only available within webkit browsers.) The idea was to create something that was amusing for users that could view it but something that would not limit the users who could not.

The Code

Step 1: The HTML Structure

<a id="owl" href="#">
<img id="rays" src="rays.png" alt="Rays" />
<img id="bod" src="owl.png" alt="Owl" />
<img id="rt" class="wing" src="rt-wing.png" alt="Right Wing" />
<img id="lt" class="wing" src="lt-wing.png" alt="Left Wing" />
<img id="eyes" src="eyes.gif" alt="Eyes" />
</a>

The HTML is about straight forward as it gets. An a element wrapping several images. The images each have a unique ID and are broken out into the background rays, the owls body, a right wing, a left wing, and then the owls eyes. We will use CSS to position them correctly and add in all of the embellishments. For now, note how they are vertically stacked from the furtherest image back at the top, the rays, to the foremost front image at the bottom, the eyes.

Step 2: Stylizing the Link within CSS

a#owl {
display: block;
height: 210px;
margin: 0 auto;
position: relative;
width: 210px; }

#owl img {
border: none;
position: absolute; }

The CSS starts off with setting the dimensions of the a element and setting the position to relative so that we can absolutely position all of the containing images. Since all of the images will be absolutely position we create a default style for all of them as well.

Step 3: Positioning All of the Images with CSS

#owl #eyes {
left: 81px;
top: 74px; }

#owl #lt {
left: 65px;
top: 98px; }

#owl #rt {
left: 128px;
top: 98px; }

#owl #bod {
left: 70px;
top: 58px; }

#owl #rays {
left: 0;
top: 0; }

Easy enough, we set positions for all of the images within the a element.

Step 4: Moving the Wings with CSS Transforms and Transitions

#owl #lt {
left: 65px;
top: 98px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right; }

#owl #rt {
left: 128px;
top: 98px;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left; }

#owl .wing {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }

#owl:hover #lt {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg); }

#owl:hover #rt {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg); }

We add a CSS transform property within the links hover attribute so that the wings only change position when the owl is hovered over. Since we want each wing, left and right, to rotate from a different origin we declare the the transform-origin within each individual wings ID. From here the wings will pop up and down, however we want the wings to raise and fall smoothly for a more lively feel. To accomplish this we use the .wing class and create a CSS transition. Within our CSS transition property we set all of the properties to transition at a duration of .4 seconds with a timing function of ease-in-out so that the wings move gradually. Now the wings raise and fall naturally.

Step 5: Animating the Rays with CSS Transitions and Animations

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% { 
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); }
}

#owl #rays {
-webkit-animation: spin 10s infinite linear;
left: 0;
opacity: 0;
top: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }

#owl:hover #rays {
opacity: 1; }

First we change the rays opacity to hide them until hover. Then we add a CSS transition property to gradually fade them in and out when hovered. Similar to how we did with the wings. The only difference this time is that we are transitioning the opacity property in place of the transform property. To get the rays to spin we create a CSS3 keyframes animation titled spin. The animation is called within the rays and set to infinitely rotate the rays image from 0 degrees to 360 degrees, completing a 360 rotation every 10 seconds.

Completed!

Now you should have a fully functional owl.

View the Demo

Best viewed in Safari or Chrome.

Additional Notes

You can download a vector version of the owl from Shutterstock. The eyes are an animated GIF, not CSS animations. The eyes certainly could be developed using CSS animations however for this demonstration I wanted to keep it fairly scaled back. Lastly, if you are curious to learn more about CSS3 I would highly recommend picking up Andy Clarke’s Hardboiled Web Design or the A Book Apart CSS3 for Web Designers by Dan Cederholm.

Hyperlink CSS Attribute Selectors

Shay Howe — Wed, 31 Mar 2010 23:26:12 +0000

Document Links Styled with CSS Attribute Selectors

With CSS3 gaining popularity so are CSS attribute selectors. CSS attribute selectors have been around for some time however CSS3 adds more selectors to the mix bringing new light to subject. Increased browser support, with nearly every major browser currently supporting attribute selectors (Internet Explorer 6 still struggles), has also added to the popularity.

So what benefit do CSS attribute selectors have to adding style to document links? CSS attribute selectors allow you to quickly and easily add styles to document links while keeping your code clean and clutter free. Ultimately, the more attractive looking your links are the more clicks they will receive.

PDF Hyperlink Example

HTML Code

<a href="#.pdf" title="PDF File Link">PDF File</a>

CSS Code

a[href$=".pdf"] {
	background: url(acrobat.gif) no-repeat left center;
	padding-left: 20px;
}

Output

PDF File

Breaking Down the Attribute Selector

You start your CSS just as if your were to style any other hyperlink. Directly following the a element comes the attribute selector, in this case [href$=".pdf"]. The attribute selector will always be wrapped in [] brackets and will always sit right next to the element to which it applies to without any spaces in-between the two.

Within the [] brackets the href attribute is declared as we are specifically targeting hyperlinks. Next we insert the $= selector, which specifies that we only want to target hyperlinks ending with the file format value to follow. For this example we are using a PDF document making the value .pdf, which is wrapped in "" quotations.

To target any other type of document just change the value to what ever file extension you wish. As an example, to target Microsoft Word documents just change the .pdf value to .doc.

Taking It a Step Further

Chris Coyier from CSS-Tricks has put together and outstanding resource on CSS attribute selectors in his article “The Skinny on CSS Attribute Selectors”. To learn the full potential of CSS attribute selectors this article is a must read as it does a great job of breaking them down for you.

If you are worried about the lack of support for Internet Explorer 6 you can, with a some additional work, use CSS attribute selectors via jQuery. Zac Gordon has written a great tutorial, “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery”, on how to do so.

Adding an icon to your document links is a great way to quickly draw more attention to the link. InstantShift has put together an article packed full of icons. If you would like some to use on your website check out the article at “75 Free Useful Icon Sets for Web Designers and Developers”.

Strategizing Web Content

Shay Howe — Tue, 12 Jan 2010 23:33:45 +0000

Writing for the Web: The Right Strategy

When it comes to designing a website, content is often overlooked, but why? Very rarely do users browse the web looking for a good design or decent experience. Users come for the content. Not giving them what they want with poorly written content will frustrate users. Not only does it waste their time, but your time as well.

Writing for the Web: The Right Strategy presented by Shay Howe

Refresh Chicago, January 12th, 2010

The Problem

Online content is bad. Real bad.

Generally speaking, the Internet is lacking when it comes to quality content. People are not properly taking advantage of the opportunity in front of them and commonly fall short with insufficient content.

Content is low priority.

All too often we get caught up in the design and development of a website to pay attention to the content. We understand that the website will have a blog, about page, and contact page, but that is as far as we get. From the introduction of a project content takes a low priority.

Content is last minute.

Some people do not even think about content until the day that the website is completely designed, developed, and ready to be rolled out. The wireframe, site map, and graphics are all water under the bridge by now. The only thing missing at this point is the content. All too often the content has not even been assigned or allocated to anyone at this point.

Users notice bad content.

If your copy is updated, cheerful, and friendly users will not notice. If your content is sterile and resembling a textbook, users will notice and you will hear about it. The second your product description starts to drag users will jump ship.

Mint – Mint has welcoming copy that often goes unnoticed because it is good, friendly content.

Make your content work.

The only way to overcome this horrid content is to make your content work harder. Before you begin any wire frames or development sit down as a whole and put together a content strategy. Initiate a strategy that will outline the metrics needed to keep your content moving forward.

Developing a Strategy

Kristina Halvorson has written an amazing book, “Content Strategy for the Web”, which goes into great detail on how to create a content strategy for the web. The following section summarizes some of her most important points. Please support her and purchase her book for more information.

Create, publish, and govern.

When putting together a content strategy it is important to understand that your strategy needs to cover not only creating and publishing the content, but governing the content as well. Once a website is live and time passes by content will become obsolete and need to be updated. This includes images and videos as well as the text itself.

Think “lifecycle” not “launch”.

Typically a website is launched everyone involved moves on to bigger and better things. We need to break the “launch” mindset and focus on the “lifecycle” of a website rather than the initial lift off. Plan to have an individual or team in charge of occasionally updating and checking the content.

Stop the separation.

Who is really in charge of creating the content? Designers and developers? The client? Marketing and research? Information architects? Truth be told, we all are in charge. Bring everyone together to work on the content strategy as a whole and the content will take life.

Stop using lorem ipsum.

Lorem ipsum will not, at all, resemble your actual content. Stop using it as a placeholder within your design or wireframe as it will be mismatched to the real content that will be delivered. While you are all together initiating a content strategy think through the content and any implications you may encounter. Know how to handle multiple levels of headings, ordered list, blockquotes, and other situations a head of time.

Answer more than just what.

If all your content does is tell what the website is about you’re missing the point. Quality content will answer the what, why, when, where, how, and who. Go over the website inside and out and cover your tracks. Make sure any possible questions a user may have are answered upfront.

Set goals.

Measuring your success can be difficult if you do not set goals. Figure out what you are looking to achieve with your website and exactly how your content can play a role in helping. Outline your goals and use them as motivation moving forward.

Determine accomplishments.

Figure out exactly what you want to accomplish with your content. Maybe it is to help sell a specific product, to build brand recognition, or to drive form conversions. Whatever you are looking to accomplish, define it now and then, work towards accomplishing it within your content. Knowing what you need to accomplish is easier than taking a stab in the dark.

Recognize risk.

Try to recognize any potential risk involved with developing content. Are you worried about being too edgy or too dull? Figure out exactly what your pressure points are and then plan on how to overcome the risk.

Flickr – Flickr avoids being dull by welcoming users in a different language every time they visit their profile.

Outline content structure.

All websites need to have a structure to their content and this structure needs to be carried out through every single page on the site. Outline a content structure that covers your headings, body text, linking between pages, as well as your narrative, tense, and flow. Really go over your content structure and determine how you will stay consistent throughout the entire website.

Identify roadblocks.

As with every other part of the project you are bound and determined to run into a few roadblocks when creating content. Is user research going to hold you up from getting a proper start on the content? Is marketing going to come down on you when they feel that the brand is not properly being carried out? Or, is legal going to tell you to completely scrap entire sections of the content? Identify what roadblocks you may encounter and figure out how you will move around them.

Determine overall messaging.

When putting together the content strategy this is the best time to determine the overall messaging of the website. This is a hard question to tackle so getting a head start on it now makes all the difference. Put together some recommendations for the overall messaging and tone of the website and how it should be conveyed. Chances are you will not completely iron out the messaging and that is fine, but getting a head start is crucial.

GIANT Creative – GIANT Creative has a great overall messaging that is carried out through the entire website.

Assign launch priorities.

Since the website will be a work in progress and you plan to continually make updates to the content, figure out where you want the content to be at launch. A lot of projects are time sensitive and getting off the ground is very important. Decide what needs to be completed before launch and what can be incorporated after launch. Do not, I repeat, do not launch a website for the sake of getting it live with the mindset that you will review the content later. This happens all too common and the content is never defined after launch.

Decide content hierarchy.

Now is also the time to decide your content hierarchy, meaning in what order do you want to present your messaging to users. Put your most important messaging first then move users back within the site for more information if they wish. Throwing all the content you can at users all at once will not work. Decide in what order you wish to present the content to the users.

Prepare sub page recommendations.

A content strategy should include recommendations for the home page all the way down to sub pages. Outline if some sub pages will receive specific templates to better convey messaging. Also determine how the sub pages will carry out the top level messaging, stay consistent from one page to another, and how they will all link and interlace.

In general, your strategy needs to provide all information needed to make any decisions when producing and creating the content. While developing the strategy you need to reach out to all of those whom may have some input. Gathering their input now, rather than later, will hopefully help prevent any roadblocks from occurring later on. Furthermore, use this time to set guidelines on to how the content will be maintained and updated moving forward.

Writing Quality Content

There are many different factors that all play into writing quality content. Many of which I addressed in my article “Writing User Friendly Content”, including:

Give users a summary.
Get to the point quickly.
Use small sentences.
Limit one thought per paragraph.
Use bullet points.
Use sub headings.
Do not over use exclamations!!!
Drive emphasis with repetition.
Drop unnecessary adjectives.
Use details, be specific.
Use hyperlinks.
Use a personal tone.
Be unique.
Escape content overload.

These are just to name a few. Please refer to the article for further details and complete explanations. In addition to these points I would also like to add:

Forget the sales pitch.

Online users are used to the typical sales pitch and can spot it from a mile away. It is commonly tasteless and users hate it. Instead, present them the facts in a friendly manner and let users decide for themselves.

Keep content understandable.

Having clear and understandable content is easier said than done. What may be understandable to you may not be to someone else. If a user struggles to find what they are looking for or to understand any of the content they will pounce on the back button like no tomorrow.

Communicate conversationally.

Communicate conversationally with a more casual tone and voice to allow for a friendlier and easier reading experience. Users will be extremely happy with content they can understand and you can rest assured you avoided them any frustration.

Carrot Creative – Carrot Creative uses a friendly tone and characteristic content to provide for very enjoyable reading.

Do not brag.

No one likes a showoff and the same goes online. Do not brag or boast about how popular you are or how well you did last year. You must earn your users trust and any pompous language will not sit well.

Avoid industry slang.

I could ramble all day about front-end and back-end development along with different content management systems, but would my audience understand me? No. Speak in terms that everyone will understand.

Bringing Content to Life

Apply your hierarchy.

Take the hierarchy you decided on within your strategy and apply it using different headings, text sizes, and typefaces. As before, put your most important messaging first and show users where to begin. From there guide them through the rest of the website.

37signals – 37signals uses a creative design to apply their hierarchy and to guide users down the page.

Make content able to be scanned.

One of the most important things to take into consideration when creating and stylizing your content is to make sure that it can be scanned. Users do not read content online, they scan it. Make sure you break up your text using multiple headlines, bullet points, short paragraphs, and descriptive links.

HUGE – Huge adheres to all reading types by breaking up their content with paragraphs, list, and other grid based elements.

Stylize your text.

Make use of common text styling elements like bold, italics, shadows, and so forth as they help to bring life to your content. A little bit of an added touch can go a long way so be sure not to overdo it. Too much style and your content can start to look gaudy.

N.Design Studio – N.Design Studio uses a variety of text effects including multiple typefaces, colors, sizes, strokes, and more.

Play with different fonts.

Online we are commonly limited to a specific number of web friendly fonts. However with the improvements of @font-face and services like Typekit the number of fonts is quickly growing. Use different fonts to help deliver your content in a more aesthetic manner. As with adding stylization to your text, be sure to pick a font that will compliment your design.

Viget Inspire – The Viget Inspire blog uses multiple different typefaces for an added touch, easily taking the design to the next level.

Use contrasting colors.

Using black text on a black background probably is not a good idea. Pick colors that fit well with your layout and design. A bright contrasting color has the ability to really draw a user’s attention. Use colors within your content to your advantage.

Friendly Duck – The contrasting orange color on Friendly Duck sticks out amongst the dark background and really draws users attention.

Apply clean rags.

Each line of unjustified text should be as close as possible to the same length as the other lines above and below it. Any large spaces at the end of a line will create a large gap that is hard to follow when reading. Further more, having text hanging out on the end of a section of text within the last line creates an unpleasing arrangement and is often over looked.

Happy Cog – Happy Cog is aware of their rags and has taken the additional effort to make them as pleasing as possible.

Exercise white space.

A fair amount of white space in a design allows the content to breathe and makes it easier for users to read and follow. White space can also be used to build a grid within your layout and design. Which, in return, may help your content establish a rhythm for easier reading.

Elliot Jay Stocks – Elliot Jay Stocks uses white space to help sculpt his layout while allowing users to easily read and follow the content.

Make graphics and text coincide.

Excellent text and a strong graphic can communicate a powerful message, a message that has the ability to leave a lasting impact on users. Use graphics that work well with your text. Simply adding graphics to a page for no apparent purpose is distracting and aggravating for users.

Housing Works – Housing Works makes use of emotional images to add a powerful impact to their messaging.

Take advantage of CSS.

Cascading style sheets give you the potential to not only add outstanding effects to your text, but to also set a content standard for text across an entire website. Setting standards in CSS ensures the consistency of your typography across an entire website.

You Need Excellent Content

Developing a strategy, writing quality content, and bringing that content to life take a tremendous amount of energy. The majority of companies do not have the resources, let alone the time and effort needed to develop great web content. Quality content requires a detailed procedure and hard work which will end up being worth it.

Having a content strategy along with quality content in place allows for a strong user’s experience, better brand regularity, up to date working efficiency, improved risk management, more powerful search engine optimization, and more advantageous personality and targeting.

Stop acting like content is secondary nature, of which can be touched up at a later date. Start your projects with creating quality content and start today!

Very special thanks to Kristina Halvorson on her amazing contributions to educating the importance of web content. Please visit her at Brain Traffic or purchase her book “Content Strategy for the Web”.

Smart Email Marketing

Shay Howe — Mon, 09 Nov 2009 01:46:26 +0000

Strengthen Your Email Marketing Performance

One of the most valuable resources you have is sitting right under your nose and you may not even know it. What is this indispensable resource you may ask? Email marketing. For those of you who are currently practicing email marketing you may already know of the potential benefits at hand. For those of you who are not, please take note, this may greatly increase the performance of your business.

Many companies are profitable simply from their email marketing campaigns alone. With help of these time tested methods and a touch of your own fine-tuning you too can earn extra profit as well. Broken down here are the two parts to smart email marketing: Sending and Ensuring Delivery of Emails, as well as, Considerations for Designing Emails.

Sending and Ensuring Delivery of Emails

Send Emails on a Consistent Time Table

When you send your emails on a regular basis you create a pattern of which readers will become familiar with. The less likely you are to catch readers by surprise the lower your non-subscription rate will be. Internet service providers (ISPs) will also take note of regular sending patterns and credit you accordingly.

Find A Happy Sending Medium

It is important to find exactly how often you should send emails. By sending emails too often you will annoy users and by sending emails not enough users will forget about you. In either situation, they are likely to unsubscribe.

Readers are Most Receptive Tuesday and Wednesday from 2-3 PM

On Mondays everyone is running around trying to catch up on an inbox full of emails from the weekend. On Thursdays and Fridays everyone has one foot out the door looking forward or preparing for the weekend. Studies show that readers are most receptive to emails on Tuesday and Wednesday, and specifically after lunch from 2-3 PM. (View source.)

Steer Clear of Spam Filters

Internet service providers (ISPs) have caught on as to how spam email is created and delivered. In their detection of spam they have developed diligent spam filters. One of the best ways to prevent an email from being flagged as spam is to completely leave out words like "Free", "Promotion", "Sale", "Discount", and so forth.

Use the Current Date

Spam filters will often look for a recent date within an email. If they do not come across one the email may potentially be flagged as spam, or pointed in the direction of the spam folder. Using the current date will also provide relevance to the reader as well.

Be Personable

Treat readers as your friend, even address them by their name if possible, and you will see open and click-thru rates skyrocket. No one wants to be addressed by "Hello there" or "Dear Subscriber". If I get an email address as "Good afternoon Shay" I am most likely going to open it. Any good email marketing service will allow you to address users by their name by using a tag similar to "[subscriber_name]". Check your specific service for instructions.

ALWAYS Use a Double Opt-in Subscription System

When a reader signs up for your email or newsletter send them a confirmation email. Once they confirm the subscription, then and only then, add them to your email list. Doing so ensures that they really want to be on the list and will be susceptive to your emails. This will also prevent you from adding people to your list that have accidentally entered the wrong email address or even purposely entered a fake email address.

Do NOT Buy and Sell Email List

The quickest way to get black listed is to buy and sell your email list. Your emails will regularly be flagged as spam and your delivery rate will plummet. Most email delivery services will also refuse to send out your email campaigns if your list is purchased.

Stay in Touch with Readers

After a user has signed up for your email list, and has double opt-in, send them a welcome or thank you email with a 10% off coupon. In another week send them another email outlining some resources available on your website. Staying in touch with users ensures them that you are trustworthy and may later help you complete a sale.

Write Captivating Subject Lines

Once an email lands in a reader's inbox they have two choices. Read the email or disregard the email. Most commonly, the only opportunity you have to influence them to open the email is by the subject line. Do not title your email "FREE EMAILING ADVICE". Instead use "Company Name Newsletter: Smart Email Marketing" or "Company Name Newsletter: Issue 12".

Write Related Emails

If someone signs up for an email newsletter pertaining to web design and development and you send them an email about cheap auto insurance your non-subscription rate is going to explode. Keep your emails relevant and avoid continuously sending out sales pitches. Give your readers valued content.

Check Your Links

Before sending out your email be sure to check all of the links, both websites and email addresses, included within the email itself. Any links to spam or blacklisted websites is sure to set off spam filters. Be sure to only link to creditable sources.

Provide Benefits to New Subscribers

One of the best ways to build your email list is to give new subscribers an added bonus. Let readers know that by subscribing to your email newsletter they will receive a free e-book or even a 10% off coupon. Of course, make sure you use the double opt-in service to ensure that people are not providing you with false information.

Send Emails at a Slow Delivery Rate

Attempting to blast your email list instantly will throw up quite a few red flags and more than likely cause your email to head straight into the spam folder. Use a professional email delivery service that will send out the emails at a recommended effective speed in order to get all of your emails out in a reasonable time without causing any interruptions.

Encourage Users to Add You to Their White List

The best way to ensure your emails make it a reader's inbox is to encourage them to add your email address to their contact list, or white list. Not everyone will do it but those that do are your most dedicated readers and are sure to get your emails on a consistent basis without having to worry if the emails get flagged as spam. Additionally, internet service providers (ISPs) will count the number of times your email address is added to a white list as an account of creditability.

Delete Inactive Subscribers and Bounces

Any readers that are not opening and reading your emails are most likely marking them as spam. Removing these subscribers will help you lower your spam score. Furthermore, delete any hard bounces or undelivered email addresses. Repeatedly resending to these address may likely be considered as spamming.

Check Your Replies

Some users are going to reply to your email asking to be taken off of your email list. This is fine and it is in your best effort to listen to them. You may also receive replies from readers providing you with valuable feedback. Either way, checking your replies is to your benefit.

Considerations for Designing Outstanding Emails

Use Plain Stylization of Links

Readers browse their email differently than they do web pages. While it is tempting to stylize your links in attempt to make them stand out, you are more likely to better results by using a plain stylization of links (blue, underlined, bold). Even if you think you can do a better job of making your links stand out by adding images and other visual effects there is no guarantee that the email client your reader is using will even display the correct results.

Provide a Clear One-Click Unsubscribe Link

May users may argue that you need to place your unsubscribe link within the header of your email. I do not think this is completely necessary, however it is necessary to make your unsubscribe link evident and easily noticeable. When users unsubscribe make this process as easy as possible, preferably with one click from the email. Dragging out the unsubscribe process may frustrate users and provoke them to mark your email as spam.

Encourage Readers to Forward to a Friend

Readers do not need a button or link to let them forward your email to a friend, however a little encouragement will never hurt. If they do forward your email the chances of you getting business from a referral from a friend is much higher than not.

Use a Strong Call to Action

Using a strong call to action will dramatically increase your click through rates. Do not use "click here". Instead, use intriguing text or an unmistakable button to drive your main call to action.

Stay Around 600 Pixels Wide

A good majority of email clients will limit the width of an email and because of these limitations the most optimal width of an email falls within or close to 600 pixels wide. Before creating your next email masterpiece make sure you do so with a width of 600 pixels in mind so that all readers may enjoy it.

Check Popular Preview Panes

A lot of popular email clients, Microsoft Outlook specifically, provide a preview pane from which readers are able to see the beginning of an email. When designing your email make sure that the top of your email is captivating enough to get readers to view the rest of the email.

Make Your Email Legible with Images Disabled

For many email clients, most notably Microsoft Outlook and Hotmail, will disable images within emails by default. This makes it important to make sure that your email can still be comprehended even if the images are disabled.

Use Plain Text to Accompany HTML

If you decide to send your emails in HTML you need to make sure that you also attach a plain text version as well via MIME-Multipart-Format. In doing so you make certain that readers without HTML support are able to view your email. Keep in mind, your HTML and plain text versions should contain the same text. Your HTML should contain more content than markup language and in total your message should be between 20 and 40 Kb.

Utilize CSS Carefully

Only use CSS to stylize the text and some of the minor elements of your email. When doing so you are better off if you decide to use CSS as an inline style. Do not use CSS for the layout of an email, as most email clients will not support a CSS layout. Unfortunately, instead you should refer to a table-based layout.

Reduce Intricate HTML and Images

Most email clients are not able to render complex HTML, while a handful of email clients block images by default. A high percentage of HTML tags may also be flagged as spam. In general, the cleaner and simpler your emails are the better performance you will see from your emails.

Include a Signature

One of the easiest ways to be personable is to use a signature on all of your emails. On top of adding a personable measure to your email it will also help drive traffic to your website. Be sure to include a name, company name, website, as well as a link to unsubscribe from the newsletter. Here is a good example of a signature:

Regards,
Shay Howe
Freelance Web & User Interface Designer - letscounthedays
Visit me online at http://www.shayhowe.com/
Unsubscribe from this newsletter anytime at www.shayhowe.com/unsubscribe/

Include a Link to Your Privacy Policy

Ensure your readers that their email address and personal information was obtained in a moral manner and that this information is safe with you. Do your best to make it clear to them that you will not rent or sell their information and the more likely they are to stay subscribed to your email list.

Include Your Address and Phone Number

Federal legislation requires that a physical mailing address be included with any commercial email newsletter or campaign. Take this a step further and include your phone number as well. Giving readers multiple methods for contacting you provides them with extra insurance.

Use an Online Version for Support

No matter what you do there is no guarantee that your email is going to come through and be displayed the way you want it to for all email clients. To combat this, provide readers with an online version of the email for support.

ALWAYS Test Before Sending

Each email client will render your email a little differently. Do your best to check as many email clients as possible before sending. You may be surprised at how differently each email client will interrupt your email.

Inspirational Email Gallery

Apple

Backpack

Cabedge

Eye Design Studio

Fresh Books

Mindful Metropolis

SxSW

Threadless

Tri-North Builders

Typekit

Unmatchedstyle

uPrinting

Virb

Virtuosa

Wufoo

Writing User Friendly Content

Shay Howe — Mon, 19 Oct 2009 23:59:13 +0000

How to Write Quality and Attentive Online Copy

When it comes to online copy content is king. And this king is one of the determining factors in how successful your website is. Simply enough, if your copy is not up to par users will not read your content nor will they do business with you. Furthermore they are likely to never return to your website. Having good content will make a world of difference.

Qualities of Great Web Content

1. Give Users a Summary

Before diving into the nitty-gritty give users a summary of what they are about to read. This will allow them to make sure your topic is worth their time. If you have written your summary successfully they will continue to read.

2. Get to the Point

If you take away anything from this article let it be this. Users online do not read, they scan. Get straight to the point in the least amount of words possible. Do not beat around the bush. Simply get your point across quickly.

3. Use Small Sentences and Paragraphs

Using smaller sentences and paragraphs makes your content easier to comprehend and take in. Users will not take the time to read long sentences or paragraphs. They will continue scanning down the page. By using short sentences and paragraphs you can pull them in and work them down the page without making them scan too much.

4. Limit One Thought Per Paragraph

Attempting to cram 5 thoughts into one paragraph is not only going to look like you are rambling, but you are also going to confuse all of your readers. As mentioned before keep it short, precise, and to the point.

5. Use Bullet Points

There are many advantages of using bullet points. Many of which include:

They are easy to scan.
They break up the flow of the page.
They draw users in.

6. Use Sub Headings

Sub headings break up the flow of your content and provide a very intuitive way for users to scan the page. Not to mention, sub headings provide a great benefit to search engine optimization. The most effective sub headings are descriptive and if possible make use of a few good keywords.

7. Stay Organized

Ease users into the content and then keep them reading by staying organized. It is difficult to talk to someone who is jumping from one topic to another. Most of the time you can hardly understand what they are trying to say. The same thing goes for online content.

8. Stylize Your Content

Adding a little stylization to your content will allow you to add emphasis to key statements. Using bold and italics are both great for capturing user's attention and driving your point home. Avoid using underline for anything but links. Underlining any text that is not a link can be very frustrating for users as they are preconditioned to think they are links.

9. Do Not Over Use Exclamations

Using exclamation points here and there can really help add emphasize, however using them after every sentence is only going to annoy users. You will sound like a loud advertisement that no one cares to hear. Keep your exclamation points to a minimum and use them only where effective.

10. Remember Users are Pessimistic

There is so much garbage and hoaxes online that users are immediately skeptical of any and all content published online. Write using unbiased language and avoid any sales pitches. Build your creditability and cite any sources if available.

11. Do Not Worry About Contingency

Do not pad your sentences in attempt to cover all your bases. While using a more daring statement may not convey the strict truth, it will make a stronger impression. For example, "The majority of monkeys prefer to sleep at night." is weaker than "The monkeys sleep at night."

12. Use Repetition For Emphasis

Using repetition is an effective method of getting your point across. Using repetition is an easy way to create a pulse within your writing. Using repetition is simple to do, however it is also simple to overdo so practice with care.

13. Drop Unnecessary Adjectives

There are a million different ways I could explain my love for cupcakes, however no other is more effective than "I love cupcakes." If your adjectives are not providing any significance or additional information to your content then drop them.

14. Use Details and Be Specific

No one is really interested that your product or service is "new and improved". Tell users exactly what is new and improved. The more descriptive you can be and the better explanation you can give, the more likely users are to continue reading.

15. Use Links Within Your Copy

Remember this is the internet after all and linking from one page to another is acceptable. Links will also standout amongst the other content on your page and help users to quickly scan the page and identify what the page is about.

16. Use A Personal Tone

Writing your content as if it is a law document is boring and will put users to sleep instantaneously. Make your content personal and users will be able to relate, furthermore allowing them to trust you. I must warn you though, going too far can make you seem immature and unprofessional (ya' meanz omg lol). Speak to your readers as if they are next to you and you will find a happy medium.

17. Be Unique

One of the best ways to stand out is to be unique. Give your content some personality, make readers laugh, and enjoy reading your content. If you can do this you have struck gold as users will continue to come back for more.

18. Escape Content Overload

Too much content can overwhelm visitors and furthermore drive them away from your page. Upon landing on a page of your website, users are typically going to scroll down to see how much text there is to read. If it looks like a wall of text odds are they will leave before even reading the first line.

19. Always, Always Proofread

The last thing you want is a potential client or customer to come to your website and start pointing out your spelling and grammar errors. Yes, updating copy online can be accomplished quickly and easily, however by the time you notice the errors so have thousands of others. Always proofread your content.

How To Stay Motivated

Shay Howe — Thu, 15 Oct 2009 00:22:52 +0000

Inspiration vs. Motivation

These days finding inspiration is easy with help from hundreds of design blogs. With a few simple clicks you have an endless supply of inspiration right at your fingertips. The real trick is finding motivation and, further more, staying motivated. Please do not get the wrong idea. Inspiration can serve as great motivation, however there is more to it. Staying motivated is a practice and requires more effort than ambiguously cruising for inspiration.

You Know Inspiration, Let Us Try Motivation

1. Do Not Overwork Yourself

Working too much is a sure fire way to put a screeching halt to any and all of your motivation. Constantly working too much will put you in a rut, of which may become too deep to dig yourself out of. Use a timeline with every project to ensure you have allocated enough time for the work entitled.

2. Pace Yourself

On top of not overworking do not try and fit too much work into one day. Doing so will not only stall your motivation but even worse it will produce unacceptable work. Create a reasonable daily schedule and do your best to stick to it. If a daily schedule is not your style perhaps try a quick to-do list instead.

3. Set and Beat Your Deadline

Once you have your timeline and daily schedule in place work to set a goal to beat your deadline. A lot of people have their productivity peak right before closing in on a deadline and until the deadline is insight productivity is minimal. Use multiple deadlines for every project and benefit from completing them early.

4. Get a Good Start

Getting a good start to a project will help to keep you motivated throughout the duration of the project. On days when you sleep in you typically do not tend to be very productive. Same thing goes with web design. Do your best to make a solid effort at beginning every project.

5. Disregard Any Interruptions

Email, Twitter, instant messaging, and other interruptions are just as big disadvantages as they are beneficial. Taking a few minutes here and there to check your RSS feeds or email will quickly add up in the course of a day. Blocking out and limiting these interruptions is the only you are going to be able to willingly meet your deadline.

6. Make Good Use of Your Spare Time

Staying motivated requires you to make good use of your spare time. If you are able to truly enjoy your time away from work the happier you are going to be when the time comes to get some work done. Being happy and having a good attitude can stretch a long way when it comes to staying motivated.

7. Rotate Work Environments

Sitting in front of a computer day in and day out will take its toll. A good way to mix things up is to move to another location or environment. Heading down to your local coffee shop, bookstore, or café once a week to work can brighten the day and provide something to look forward to the rest of the week.

8. Put It Off If Possible

If you get a rough start to a project or hit a roadblock put it off for a little while when possible. Sitting there and spinning your wheels without any results is only going to put you further back on your feet. Learn to set a project aside and move on to another for the time being if possible.

9. Follow Your Progress

After working on a project for a while it is easy to lose track of your progress, at which it begins to feel like you are just plugging away for an unreachable ending. Keep an eye on your overall progress and make sure to note when you reach desirable points.

10. Take Productive Breaks and Vacations

A change of scenery for a while can do wonders for one’s motivation. Breaks can be as simple as heading out for lunch, walking the dog, or as delightful as taking a vacation. Not only do you work hard to earn these breaks, but you also come back refreshed and ready to get to work afterwards.

11. Work With Others

If there comes a time when you get stuck, look for a second opinion or help from others that will provide you with the added push you need to continue. If possible develop a network of people you can look to for advice on difficult projects. Even help from others completely outside the industry can provide an additional insight you may have previously missed out on.

12. Take Another Approach

Sometimes we get jammed and that is all right as it is a natural process of being a web designer. Rather than go insane and throw your hands in the air take a look at the work from another angle or take a different approach. Working around the holdup can help you continue working without wasting any valuable time.

13. Have Fun

One of the best ways to stay motivated is to have fun. Turn your work into fun by adding a twist to it, making it competitive, or getting others in on the action. If you are doing landing page testing make bets with others around you as to what page will perform the best. Adding a little competition or twist to your work can be just what you need to make it more enjoyable.

14. Eat Lunch or Grab a Snack

Not only does eating give you a break and time to clear your head but it also provides you with much needed energy. If you are working and come to a barrier too high to breakdown go eat lunch or grab a snack then come back full force ready to break the barrier down. Along with eating, stay hydrated to avoid fatigue and stay ahead of the game.

15. Go Exercise

The benefits to exercising are endless. In regards to staying motivated, exercising will allow you to release endorphins, blow off work stress, and ultimately detoxify yourself. After exercising you will be able to relax and in return increase productivity and motivation at work.

16. Drop the Dead Weight

More times than none you are going to have to deal with a dysfunctional client and they can make you absolutely hate your job. Do your best to work with the client and turn the relationship around. However; if all else fails and you have the option, drop them. No amount of money is worth driving you insane and making you hate your job.

17. Reward Yourself

Rewarding yourself is one of the easiest and most important ways to stay motivated. After every small task you complete reward yourself by taking a break or getting some coffee. For the larger tasks or projects you complete go home early or buy yourself something new. No matter what you decide to do make it meaningful for yourself and recognize your accomplishments.

18. Keep Your Head Up

At times we all feel like throwing in the towel and calling it a day. Fact of the matter is quitters never win. Everyday is a new opportunity and it is up to you to make the most of it. Learn from your mistakes and do not let things get the best of you. If you can do that you will be all right.

What Keeps You Motivated?

Everyone is different and I believe I have only touched on the surface of what can keep you motivated. I would love to hear what you do to stay motivated. Please share your tips and advice with us below in the comments.

Working With A Bad Client

Shay Howe — Sat, 26 Sep 2009 20:08:42 +0000

10 Tips For Communicating With A Difficult Client

As a web designer you are bound and determined to at one point and time come across a troublesome client. There are know-it-all clients, the low-tech clients, the day-late clients, and many more. No matter what their nature may be they exist and seem to come by all too often. Learning how to communicate with these clients can immensely change the outcome of your day-to-day productivity as well as your overall success.

Above All, Communication is Key

1. Start With a Fresh Slate

Carrying an attitude with clients is quickly going to ruin your career. Every time you approach a discussion, email, or call from a client you should do so with a good attitude and a positive mindset. Working with a bad attitude is only going to produce bad results and further fuel the flames. Keep your head up!

2. Look Between the Lines

When a client asks you to make the logo larger could they really mean they would like a stronger branding presence? Be sure to completely understand what your client is requesting before jumping to conclusions. Ask respectful questions and get to the bottom of what the client is really looking for.

3. Keep a Level Head

A lot of times you will receive an email or message from a client that seems to be a little pushy or assertive. Take a step back and realize that this may have come off the wrong way, perhaps because the client is not familiar with industry lingo they do not know how to effectively communicate with us without sounding somewhat bossy.

4. Learn to Renegotiate

As a project progresses clients can tend to get more involved and in a result often ask for things out of the scope of the original project. Rather than doing the work for nothing (and becoming ticked in return) or refusing to do the additional work altogether learn to renegotiate the contract. This will eliminate frustration on both sides and hopefully increase the overall efficiency of the project.

5. Communicate with Purpose

Try your best not to get in the habit of shooting off quick messages looking for answers. In return you’ll get quick answers that are not thought out which may carry back-and-forth, eating away at time you could have saved by sending one detailed message. Make it your goal to only send messages with some medium and detail.

6. Pick Your Battles

Putting up a fight is important in ensuring that you clients are getting the best possible results. Pick the battles that will win the war and learn to take the hit on the others. This may take some practice in figuring out exactly what to figure for with each client but once you do figure it out it will make your life easier.

7. Provide Support to Decisions

If a client is a little weary or questioning one of your decisions back it up with proven examples, case studies, or performance metrics. Clients will question you from time to time and it’s only to ensure they are really getting the best possible website. Be ready and willing to provide support behind your decisions.

8. Put it in Writing

I work best when I have something to reference or fall back on. Keeping all of my discussions in writing not only helps me stay on track but also allows me to reference previous discussions if any questions arise. Whenever you talk to a client over the phone or meet to go over the project send them an email recapping your discussion. They will appreciate the summary and it will allow you to stay organized.

9. Interrogate the Client

When push comes to shove and you are truly struggling with a client interrogate them to find out what they are genuinely looking for. Do it tastefully and do your best to really get the client thinking. The harder they think the better they are at being able to express what they have in mind.

10. Never Stop Communicating

Always keep the communication line open between you and the client. Keeping them in the loop and allowing them to ask questions will ensure them that you are doing your best work and ultimately care about their project. In the end they will be in a better mood and you will be able to sleep better at night knowing your client is happy.

Checkout Process Design

Shay Howe — Wed, 22 Apr 2009 21:03:20 +0000

Checkout Process: Designing Profitable Websites Part 6

The checkout process has become widely known over the years on the internet and making purchases online is fairly common for most households. With such popularity you would think the checkout process has been nearly perfected, however astonishingly 59% of all users abandon the checkout process. This could be for a number of reasons but the most important being users are not given a clear direction through the process. This leads users to get confused, frustrated, and abandon the process. Ideally an easier, friendlier, and dependable checkout process will do the trick and increase conversions.

Checkout processes are fairly dynamic and span across multiple pages. Making a change to one step may affect another. While designing a checkout process it is important that you take all of the steps into consideration and design the checkout process all the way through, not skipping any steps in-between. A few design suggestions to take into account include:

Acknowledge common checkout process goals.

While the checkout process is most commonly used for the exchange of money for goods or services, it can also be used to accept donations, take membership payments, or to even transfer money into a virtual equivalent. Make sure you know the primary goal and function of your checkout process.

Be aware of, and address, visitor's questions.

When completing a checkout process users need comprehensible direction and answers to any questions that may arise. A few questions to be aware of, and provide answers to, include: "Where do I start?", "How much will shipping cost?", "What payment methods are accepted and are they secure?"

They have a troubled past.

The checkout process has a deep and rigorous past including some elements that are now dampening its future. For example, it used to be helpful to have users create an account when making purchases for order fulfillment. This is no longer true. If using an out of the box checkout process for free make sure that you disable or remove many of these unnecessary features.

They can stop working.

The checkout process is developed within hard code connected to a database. Problems can, and often do, arise. Since the checkout process is vital to the outcome of a website be sure that you have the proper facility in place to monitor the process, ensure that it is working and looking for any potential issues.

They are rarely straightforward.

Sometimes checkout processes will jump from one website to another confusing users along the way. With all of the identity theft and security risk on the internet this will turn away users. If you need to use a separate or third party site for the process that is fine, but do so smoothly and securely.

Follow form fundamentals.

The same design guidelines for forms apply to forms within the check out process. Some of the most important guidelines being: Cut out nonessential fields, center user focus on the form, show tips and help, supply progress or steps guide, and provide users with confidence and security.

Remind users what is in the cart.

Believe it or not many users will forget what they have added to their shopping card and other users just want to double check their items to ensure they choose the correct size, color, etc. Giving users a thumbnail image, clean heading, and small details on the products in the shopping cart will allow them to view what they have selected without having to leave the checkout process.

Place buttons within a hierarchy.

Many out of the box shopping carts will give the same amount of attention to the clear cart button as the check out button, all the while using confusing labels. Keep your buttons organized with descriptive labels, intuitive placement, and intelligible visual design.

Supply progress or steps guide.

Letting users know where they are within the checkout process is vitally important no matter how many steps are involved. Users are at ease when they know where they are, where they are going, and exactly how much longer the process may take.

Omit user registration.

The largest abandonment rate within the checkout process occurs when users are required to create an account or register with a website. If it is necessary for users to create an account to complete the checkout process integrate it within the process itself. This stops you from having to ask users for the same information repeatedly and will decrease your abandonment rate.

Minimize and clarify process.

The fewer fields required completing the checkout process the more conversions you will see. However it only takes one confusing step to throw a wrench in the whole process. Minimize and clarify the checkout process at the same time, ensure only necessary information is being collected and that nothing is being left out or overlooked.

Complete within one page if possible.

The easier the checkout process is to complete the better. If you have the option or possibility to complete the entire checkout process within one page do so as it will boost conversions. Gathering all of the needed information within one page can also be simplified using Ajax, jQuery, and the alike to stylize the process.

Provide users with confidence and security.

As with any form, and even more so with the checkout process, you want to provide users with a strong confidence and security. To accomplish this place a stamp, seal, or icon within the checkout process that verifies all security measures. If possible have this stamp, seal, or icon linked to detailed security information or privacy policy – perhaps in a pop up window if applicable to keep users within the checkout process.

Display shipping and return policy details.

More times than none users want to know what are the shipping and return policy details. Their questions arise as what to do if a product is faulty, broken, or even just the wrong size. Providing shipping and return policy details will ease users and allow them to easily make the desired purchase.

Website Form Design

Shay Howe — Wed, 22 Apr 2009 04:33:42 +0000

Forms: Designing Profitable Websites Part 5

Forms are the biggest areas of abandonment on the internet. Reason being they are boring, ask for too many personal details, and are only a step toward the end. However much of the internet is widely based around forms including everything from login to contact forms and online purchase to social networking comment forms. All in all the more satisfying forms you design and the easier they are for users to complete the better results you will see.

Forms are supposed to be practical and serviceable, not an artistic expression. The main purpose behind designing a form is solving a problem including how to get users to input their information in the easiest way possible. It is not to say that forms should not be pretty, they should. It is all a matter of putting everything together. A few suggestions to follow when putting together a form include:

Acknowledge common form goals.

The main goal for any form is to be filled out and submitted. Different forms will have different specific goals, for example a newsletter subscription form has the primary goal of obtaining marketing information, especially an email address. Be aware of the forms broad and specific goals.

Be aware of, and address, visitor's questions.

While some forms are easier than others to complete, they all provoke questions amongst visitors. Knowing where to start, how long it will take to complete, and if the questions are fair are all questions that will arise. Knowing what questions may be asked allows you to answer them now and allows more users to complete the form.

They can look strenuous.

All too often forms look strenuous and typically not worth the effort. If you are requiring users to input a large amount of information make sure that the end result is worth the effort.

They can get lengthy.

Limit the number of fields within a form as much as possible. For each additional field required a decent percentage of users will abandon the form. Keep forms sleek and omit the nonessential fields.

They are rarely straightforward.

Forms are rarely straightforward and all too often they are spread out across multiple web pages teasing visitors the entire way. You will accomplish the best results if your form can be completed on one page with one submit button, getting straight to the point.

They can stop working.

There are no guarantees that a form will always work correctly. With so many moving parts, all-relying on the other, it is not uncommon for forms to stop working. Keep a close eye on your forms and ensure that they are always working to their full capability.

Center user focus on the form.

The best way to get users to fill out a form is to make it stand out on the page. Doing so will allow users to find the form quickly and thus fill it out quickly as well. For best practice use a light background color for the field so that the text is easy to read, however stylize the form with a border, arrows, field box colors, and so forth.

Implement a well-defined design.

A well-defined and clean layout will make the form easier to understand and subsequently easier to fill out. A few tips on designing around a form include using enough white space, removing anything that will not contribute to the completion of a form, using left-aligned text and fields, and having easy to read content.

Cut out nonessential fields.

A widely known rule states that the more fields you have the less chance of completion you have. As a designer, negotiate with a client to come to a safe number of fields and remove the fields that are unnecessary and irrelevant.

Provide advantages for users.

If a user is filling out a form there needs to be a strong motive behind it, and in general the bigger the form the bigger the motive needs to be. Do not let visitors forget the advantage they are going to receive by completing a form, especially if they happen to get distracted.

Make use of understandable and detailed labels.

Writing understandable and detailed labels is easier said than done. Common fields such as first name, last name, and email are easy however asking users for a username can cause some difficulty. Is this a new username, an alias, or an email address?

Use verbs if practical.

If you are afraid that users may not understand what is being asked of them, consider using an active verb within the label. For example, instead "Password" use a label with an active verb such as "Add a Password".

Use sentences or sentence completion if practical.

When using an active verb is not enough and you need more detail to communicate the question consider using a complete sentence, complete question, or the beginning of a sentence. Examples include: "List your favorite colors.", "What is your name?", "I am currently:"

Show tips and help.

There is no doubt users will have questions when filling out a form and if no one is around to help them it can be a deserted experience. Providing users with tool tips and help icons can be of great use and ultimately allow them to complete the form. Having your tips and advice pop up in new windows or off to the side of a form is not ideal as too much content on a page may confuse visitors. Only show users a tool tip or help box when the users select each individual field or when they ask for it.

Permit approximate or estimated fields.

Some forms may require some detailed information not readily available to the user. This is a huge roadblock and will mostly likely stop any further completion for the user. If an approximate or estimated answer is allowed make this clear to the user.

Answer all possible fields for users.

The faster you can move users through a form the better results you are going to have. Prefilling and answering all of the possible fields for users ahead of time will dramatically speed up the process. If you already know the majority of the users are from the United States this could be as simple as selecting the country for them within the address field.

Supply progress or steps guide.

If a form is going to span across multiple pages, show the progress or steps involved. Doing so allows users to see the end and know that they are not being lead down a long and lonesome road. Research shows that users are more likely to abandon your form when not knowing where the end is.

Provide users with confidence and security.

Viruses, spam, fraud, and theft have spread like wildfire. Users are aware of this and thus are reluctant to give out any of their information, including something as simple as their email address. If possible purchase the VeriSign and TRUSTe stamps for your forms, if not a simple line of text reassuring users that their information is safe and secure may work as well. Users have grown to look for these stamps and icons, having them will only provide them with added confidence and security.