All the Tools You Need for Rich Web Typography

Typography has come a long way on the web, but we are still stuck with a fairly limited amount of control over our type and how we use it. Even after exploring fonts that you could use but probably don’t, and learning some advanced css typography techniques, we are left with maybe a handful of additional typefaces and techniques to really make our typography shine.

Luckily there are some tools and methods to improve the typography on the web, and most of them are simple, and scalable.

The Situations

There are two distinctly different situations where we would want to improve our web typography. They require different methods, tools, and needs. These situations are headings and body type. Headings should draw attention, have an impact, and be meaningful. Where body type should be easy to read, clean, and have a consistent flow.

When it comes to headlines we have several options to improve our CSS based typography, or use replacement techniques such as sIFR, flashImage, or CSS Based image replacement.

Body type is much more difficult, we have fewer options to really control and work with out typography. Luckily body type should do little other than be clean and legible. In this situation we really are looking at tools that will increase the legibility of our type.

Headlines

sIFR

sIFR is by far my favorite method of improving the headline typography. It addresses almost every typographic issue that you may run into. Not only can you use any typeface that you have on your computer, but you also have more control over letter spacing, leading, word spacing, font smoothing, and even some stylization.

This nifty tool (and yes I said ‘nifty’) uses javascript to dynamically insert a flash movie into the document where you have text that you would like to be displayed.

Since it is inserted dynamically you still get the semantic and SEO benefits of your H tags with the design and typographic benefits of a tool this powerful.

Of course if a user doesn’t have javascript, they are still able to see the normal HTML text and still have a positive user experience.

Their are some drawbacks however. It can be tricky to configure / install, and sometimes it takes a noticeable amount of time for it to render. It has a noticeable footprint the first time it downloads (afterwards it is cached) and of course will slow down the rendering of the page slightly.

FaceLift

FaceLift provides the same function as sIFR, but uses dynamically generated images instead of flash. Again you have the same benefits of actual semantic H tags, but have the ability to use any font that you have installed on your computer.

It seems to be a bit faster than sIFR and the technology is much less complicated. FaceLift supports transparent headlines for complicated backgrounds through the use of the PNG image format (so IE6 might require some finessing).

Simple and straight forward FaceLift is a great option for beautiful typography. However it does not support some of the advanced functions that sIFR does. Letterspacing, leading, and other stylization such as dropshadow filters and selectable text are available in sIFR but not FaceLift. However it does seem to have better consistency size wise across browser.

CSS Image Replacement

Sometimes there is no replacement for the classic method. If you have complicated typography in addition to some complex styling, it is very likely that neither FaceLift or sIFR will be able to dynamically generate the look you need. In this case you need to create the headlines in photoshop and use CSS to replace your markup. This is called “Image Replacement”

There are several methods of doing this each with their pro’s and con’s. With nine different methods to chose from, finding one that fits your situation should not be all that difficult.

The advantage for using this method for your rich typography will be that you can make it look exactly as you wish and you know everyone will see it in a very consistent way. Of course this method doesn’t work so well if you have a large CMS based site.

Body Type

As stated early there really is one major focus of body type, make it legible and clean. Of course there is some room for picking the right typeface, however with a limited range of choices you should quickly be moving on to more important things such as baseline rhythms and legibility.

Luckily there are some great tools out there to make this job easier, and if you have done it all manually you will be excited about how much time you really save.

Of course the first step is to figure out what font to use and what fonts are safe to use.

PICKING AND WORKING WITH THE FONT

FontStackBuilder makes building your font stack quick and easy. With a great cross section of fonts that are available on windows, mac, and Linux you can easily find and generate the code for a safe and effective font stack. Ensuring you have selected typefaces that all users will be able to read and understand regardless of OS will put you on the road for great typography.

But to really take advantage of typography (even in your body text) you really should have a good idea of how the type looks in all different sizes and states. This way you can make an educated choice in how to display non headline type (bold, all uppercase, etc). If you need a good render of type with out the hassle of save and preview then you need csstype.com.

CSSType.com lets you specify what typeface and words you want rendered and it will give you a whole output of different states and sizes letting you really see a range of options to use in your stylesheets.

If you are looking for more of a playground to work the your typography, have a look at CSSTypeSet.com has a simple interface with easy sliders so you can make fine adjustments on the fly, see how it looks, and get the CSS code when finished.

WORKING WITH YOUR BASELINES

But as I touched on before setting and working with your baselines is probably one of the most tricky aspects of web typography related to your body font. Setting a baseline or vertical rhythm ensures that the bottom of all elements and lines of type line up with each other creating a consistent and integrated composition.

Of course understanding how it works is pretty the first step, but afterwards you may find it quicker and easier to use the vertical rhythm calculator than doing all of the calculations and coding yourself.

Once you have developed your vertical rhythm make sure to test it using Rob Goodlattes great “syncotype” script. The script puts an overlay of the rhythm you are aiming to achieve over your site so you can see if any element doesn’t line up and make tweaks accordingly.

THOSE TOOLS SHOULD BE A GREAT START (OR SPEEDUP) OF YOUR WEB TYPOGRAPHY

Have any other tools or techniques you use to improve your web typography? Let me know so I can add them to this list.

Using Grids for Spatial Awareness

In my last post I talked about the importance of spatial awareness and some basic details about what “spatial awareness” actually is. I alluded to the fact that the best way to refine your designs spatial awareness is to use a grid system, that way all of your placement and spacing of objects and elements is based on the same mathematical system. While subtle, this can have a profound impact on the quality of the design that you are creating.

The first step is developing or downloading a grid for use in photoshop and your mock-up. With so many quality grid PSD’s out there it might not make sense to create your own over adapting one that has been fleshed out already.

Here are some grids you can try:

• Designified 960px Grid
• Critical Web Sample Grids
• Blueprint CSS Grid

I have gotten used to and like the blueprint grid, as I have adapted the use of blueprint and quite like it.

Next Steps

After you have opened up your grid rather than starting to design like you normally would it pays to spend some time to just block up elements and the space that they will use. This will help you see how the visual weight of elements will effect the page in addition to how space is used (and not used, remember that negative space is just as important as positive).

From here you should have a good idea of how elements relate to each other, how does grouping effect elements relationships, etc.

Lets look at the detail closer

As you can see all of the margins, spacing, gutters, etc are all a multiple of the same initial gutter. This creates a very balanced and polished design that would likely feel very different had we just tried to eyeball the spacing.

When two elements have some relationship to each other I only use one length of the gutter (or none), where if elements are of different content/context they use three gutter lengths. This visual separation tells the user that the elements are not related, but by keeping the rhythm of the design consistent it never feels like an element is out of place.

It works for Typography as well

Last year there was a lot of discussion and awareness of the “baseline grid” in typography. Simply put, developing a baseline grid for type ensures that all of the type regardless of size lines up on the same grid. Using these sorts of grid systems helps you develop that baseline grid as well. Here we can see a close up example of two type areas and sizes on the page and how they line up in addition to the spacing and awareness of other elements.

So pay attention to spacing

Even if you are not looking to do a very organized content intensive site the use of grids to help plan and space out your elements will create a much more polished and clean design. The time it takes to actually create proper spacing will pay for itself as your portfolio and quality of work improves dramatically over time.

If you have any tips/hints/resources/ideas related to grids and space feel free to leave a comment below.

Spatial Awareness in Design

Have you ever come across a design that is so simple, so clean, yet so beautiful that it makes you wonder “How are they able to do so much with so little?” If so, then you are probably subconsciously realizing the special awareness of the design. Huge, Inc is a perfect example of the “less is more” approach with outstanding spatial awareness.

What is Spatial Awareness

Spatial awareness is simply the understanding and use of space in an effective way on your canvas. It sounds simple but it really requires a high level of mastering to get correct. This could be taking advantage of whitespace, or even grouping elements close together to create tension.

Those designers who can harness and use space to their advantage will find that elements can be placed in all sorts of unconventional ways, yet still work. Often times beginning designers place elements based on what “looks” or “feels” right, however that is not the best way to use space as accuracy and consistency is very low.

How can I use Spatial Awareness?

The first step to great spatial awareness in a design is developing a grid system. A grid divides your canvas up into small sections consisting of margins, columns, modules, flowlines and spatial zones. The canvas then ends up looking like a a series of boxes with columns (I found an example on google images here).

With this grid you can now find where elements should and can be placed on the page in a way that activates and takes advantage of space. Because you are using space in a consistant mathamatical way the overall composition of the design feels much more consistant and unified.

Taking it to the Next Level

These same principals of consistency can be applied to the typography as well. Because the grid will dictate margins for any element on the page (if a column is 18 pixels in width, then the margins of headings should be 9px/18px/27px/36px/etc…). The line heights off all type should also follow the structure and rules of the grid.

All of these steps to better map out your designs will be a subtle but noticeable improvement in your design over the tried and passable “eyeball it” methods. Note: There are times where you want to break the grid, some designs actually benefit from the chaotic and unstructured feel. However you have to make a decision as a designer that it is in fact what should be done.

I will be posting more about spatial awareness and using grid systems in the future, stay tuned.

Have any experiences with grids or spatial awareness? Post them here!

Writing for Personality Profiles (Optimizing Landing Pages, Part 3)

“Optimizing Landing Pages” is an on going series that will total 20 posts. The series is written by 3.7 DESIGNS and Ross Johnson to help web professionals build sites that achieve specific business goals. This is post 3, and the topic is “Writing for Personality Profiles.”

As much as us designers would like to think that conversion is heavily based on visuals and aesthetics, the truth is that the content of a site is really where you get an opportunity to persuade users to convert or take action. Now that isn’t to say visuals isn’t important, the visuals are extremely important; it is just important at different stages.

Points of Resolution

When a user comes to their site they are always going to have questions that need to be answered before they take the action that you wish them to take (or in other words convert). These questions are called “points of resolution,” and as a web site strategist it is your job to anticipate these questions and answer them.

Some typical points of resolution could be:

• Does this site offer what I am looking for exactly?
• Does this site offer a solution to my problem?
• Can I trust this site with my information?
• Can I trust this situation will work?
• Will I be able to establish a long term relationship with this site?

Personality Profiles

The tricky part of this process is that users are going to have a variety of different questions, and all of those questions will need to be answered despite the fact that they will be different.

To simplify the development of content and prevent the need to stuff the page with more content than anyone will read we look to personality profiles. Using personality profiles we can anticipate the majority of questions that will be raised, and how to answer them in an efficient way.

Methodical

Some people just want the hard facts, and these people are often described as “methodical.” Where others want to know that they will be well taken care of, the people on the phone will be nice, etc… Methodical people are not those types of people. Instead they want data, diagrams, facts, proof. They will sit and read through detailed copy about how your product or service will solve their problem and they could care less about anything else.

Spontaneous

A spontaneous person wants excitement, acceptance, they are flexible and open to new suggestions even if it doesn’t feel like the perfect fit. They are much more likely to make a purchase or action based on the idea that they will gain a higher status or fit in because of it. Reinforcing a strong brand or establishing high credibility through testimonials can really catch the attention of a spontaneous user.

Humanistic

Humanistic users value other peoples needs before theirs. In most cases they are looking for evidence of being able to establish a long term relationship with a company. They don’t want to have to hunt for a new company to work with every time they have a need, they want to have their contacts with in a company and know that they will be taken care of. Consider the use of testimonials to show them that previous customers have been delighted with your service and approach.

Competitive

Competitive people want to win. They are controlling and goal oriented. They are looking for accomplishment, and your product or service needs to be the key to their accomplishment or they are looking elsewhere. They want a guarantee that what you provide will work, no questions asked. Even if it is a personal guarantee it means something.

Putting it all together

Of course you won’t know exactly what type of user is going to be viewing your site, so the trick is to write for all users in an engaging way. That way the user will self select what portions of the copy are most important to them. Further, you can provide in-text links to let them click to more detailed information and answers to their point of resolution.

For example:

You will be excited to know that all of our search marketing strategies use a time tested strategy that ensures success for every client. The approach has helped thousands of companies succeed, and we are equipped to meet any objective that you may have. Beyond the strategy to make it work, we are your partner in success. We are not happy until you see results. You will be accomplish your goals, we guarantee it.

As you can see even if you were to scan the text you could pick up on the important details, and click the in text links to learn more and have your questions answered. No matter what personality type (or mix of personality types) you have the opportunity to get your concerns answered so you can move to the next step and take action.

As designers we need to use more adjectives in our work…

Adjectives? Wait am I confused? Should I be talking about copy writing? No no, I assure you I am in fact talking about design. Like many of you I am always browsing through galleries and assessing new web site launches, because I am interested in seeing what type of working is being done outside my Michigan network. Like me, you may come across designs that are stunning and beautiful, but don’t seem to do a think to enhance the subject matter.

It seems there is a stage that some designers easily bypass, and others tend to get stuck in. That stage is caring more about making something beautiful, over making something that is beautiful in the right context. A marketing professional that I have worked with before by the name of Joe Radding once said “Everything is marketing. A blank piece of paper is marketing. Everything gives you an impression…” This could not be more true when it comes to design, which in turn creates a problem when your number one goal is to make something visually stimulating.

Of course making a design visually stimulating is important and can have great benefits, after all you have on average 3 – 5 seconds to impress a user and convince them they are at the right place before they leave. However you can give the wrong impression, with the wrong design, regardless of how great it might look. The classic example of this is a bold black background white text design, high in contrast and high in impact… used on a site that is trying to communicate higher level knowledge, education, etc (for example, a database consulting firm.)

This is usually the result of not understanding the brand or an ineffective (and sometimes non-existent) design discovery phase. A well done design discovery phase will leave you with adjectives. Oh wonderful adjectives, and they will make your designs sing. These adjectives will describe the FEELING of the design. How should you FEEL when you are creating it? How should you FEEL when you see it? What emotions will be associated with the brand, and what emotions will the user FEEL when they view it?

These are the good adjectives, and they will often be words like:

• Excited
• Bold
• Unique
• Consistent
• Organized
• Open
• Contained

From those adjectives you can derive DESIGN adjectives. It is important not to let the client skip to design adjectives. Your job as the designer is to make that connection, not them. Design adjectives might be –

• curvy
• sharp
• boxed
• rounded
• dark
• light
• clean
• structured
• simple
• minimal
• photographic
• rich
• earthy

If needed use some sort of mind mapping techniques to really break out what the design should feel like and why. What adjectives should be associated with the design, what feelings should be associated with it… then think about how you can connect those feelings and adjectives with visual representations.

Earthy will likely be organic shapes, earth color tones, and an open unrestricted layout (ie: no hard borders). Where structured will likely be a design with a strong visual grid, clear boxes of content, and hard edges.

Take some time to develop a set of questions that you can use to extract these adjectives out of your clients, and then practice developing those adjective keywords into feelings, design adjectives, and design concepts.

The line between inspiration and stealing design…

While it might be strange to hear, I was pleasantly surprised last weekend when I had several readers contact me to let me know that someone had used my site as inspiration for their own in an obvious way (Not only that, but they have been featured on some CSS Galleries for it). I was happy for two reasons really, most importantly that those who read this blog pay attention enough and care enough to take the time to notify me. Thanks Jeff Mackey, Andrei, and Harry. That is huge and I greatly appreciate it!

Additionally I am flattered in a lot of ways. There are some very obvious and clear uses of design elements that I developed for this site, but it is not a pixel for pixel rip off. The color scheme, bookmark, etc… pretty clear where they got those elements. However the fact that someone liked this sites design to the point where they felt they should take elements and modify them for their own really says that this design has enough value to mimic.

I am not ashamed to say that I look for inspiration when I work on projects, and while I try and broaden my inspiration beyond the web there is no doubt I end up adopting techniques and design elements from other websites and designers. Hell, even this site was partly inspired by Airbag Industries. Additionally it doesn’t take much time looking through a lot of the design galleries to see that it is actually widespread, there are a lot of sites that adopt the same design styles and design elements. All of those styles started with one site, other designers liked it and mimiced the effect for their own work.

To say that your work is uninfluenced by anything is a lie, and some people feel they must work closer to what they see and take in than others. Now that is not to say that I am fine with those who steal a design for their own, but there is a level of flexibility in taking a good design and learning from it, using pieces that work, and adopting it for your own. I would love to see people using some of the styling ques of this site more often.

Maybe some day if I reach some level of stardom I will get grumpy and change my mind, but for now thanks and thanks.

What are your thoughts about stealing work? Where do you draw that line? Is this situation too close to my design, or did they alter it enough to make it their own? I would love to hear your thoughts.

Improve Your Creative Process, Better Design, Quicker Approvals

There are two things I struggle with the most in my job, staring at a blank photoshop canvas and having to fight the fourth round of revisions despite the fact that we had established doing only two in our contract. However there is hope, I have found ways that have improved our approval process and improved my designs significantly. Our projects are actually more profitable because we added a few steps to the creative process.

EXPLORATION

Exploration is really two phases in and of itself, as you have two areas to explore and gather information from. One is the clients themselves, learning what they want, their needs, and their expectations is critical. Secondly doing your own exploration and research into the industry, their competitors, will give you a whole new perspective on the project.

Kick Off Meeting

Exploration on the client end usually starts with a kick off meeting. Use the kick off meeting to find not only the technical and information requirements (what exactly is going to go on the site/page), but this is a great opportunity to ask a lot of probing questions as to how the website should communicate and what usability considerations are in play.

Now I avoid saying “how the website should look” because a lot of people who are not trained have passionate opinions on that question and it is not always linked to communication. Instead I want to move deeper, almost into a “brand messaging” level to really get to the core of “What is this group all about?”

Example Questions:

• What should the users first thoughts be after seeing the site design?
• What is the age group of the common user?
• What is their level of technical ability?
• If you had to boil it down to one specific goal, what is the primary goal for the website?
• What are some tasks that users will be performing on the website?
• If the design could say one sentence, what would that sentence be?
• How can we visually communicate that sentence?

The idea is to get them thinking about the message and how that message can be communicated graphically. Now what I have found in many cases is that the untrained people in the meeting might have some vague ideas that may or may not be valid, but this is a perfect way to steer the group towards your expert thoughts and ideas while still letting them feel like it was their group ideas.

External Research

After you have learned as much as possible about the client(s) from their own perspective, it is time to do external research and find out what their competitors are doing and what other people think of them. Their competitors are easy to investigate, simply firing up a web browser and search engine can give you a wealth of knowledge about them ranging from their communication strategy, to reviews/opinions about them.

However to research the client further I will often try and get a list of average customers lined up and give them a quick call and ask them 3-5 unobtrusive questions to see what the general perception of the client is. You could ask them to perform a survey if they are busy, or if you have more than 5 questions to ask. The goal is to really learn the true perception rather than the assumed perception.

Communications Strategy Document

Sometimes this is also referred to as a creative brief, but we tend to call it a communication strategy document simply because we
feel it fits better. This may feel like an extra step but I assure you it saves time in a way you couldn’t imagine. The benefit is really two fold.

1. It requires YOU to think about everything you have learned, what the client wants to communicate, the contradicting perceptions, and HOW you are going to do it. If you have ever found yourself hunting through design galleries or sketching trying to figure out how to get a look and feel that seems to “fit”

   Ask yourself questions, such as “How can I communicate young and edgy, and put that into words?” or “The company is very free spirited and wants to communicate ease of interaction, does that mean rounded flowing design or open and clean?”

2. It also puts the client on the same page as you in terms of how the design should look. When you have a 1 – 2 page document that explains how the website should look and feel and WHY it is almost impossible to say “No, that doesn’t make sense.” Further you can get the client to sign off on it, which will be a subconscious “I agree” on the clients side. This will make it much less likely that the client will object or want to “play around” with the design concepts presented.

You will find that your design revisions drop dramatically, and if there are revisions they will be simple and minor compared to “Lets try a different look” type of revisions.

WIREFRAMES

At this point you have a choice, you could develop wireframes or you should move straight into photoshop. For me this really depends on the client, as sometimes wireframes can feel a bit limiting. There might be 2-3 different locations that the navigation could go and still be completely usable. In this case a signed off wireframe could limit my creativity.

However if I am dealing with a client that has more than 2 – 3 decisions makers, or they seem extremely opinionated and likely to draw out the creative process I will start with wireframes simply because it makes it harder to want to “try” different design decisions. Again the goal of the wireframe is to block out where the different elements of the website will be located and get the client to sign off on it. It is a mental “I agree with what they came up with” and a commitment on the clients part that makes it hard to go back and ask for changes, and if they do you are fully justified in asking for more money (due to increased time on the project.)

DESIGN MOCK UPS

Now I am not going to talk about doing the design mock-ups themselves, rather how you present them. I deeply believe the designs should be presented in person, in a browser, in the form of a web slideshow.

What we do is have an explanation page that links to the mockup page, followed by another explanation page followed by the second mockup page.

Explaining your design decisions before you show the mockup to the client gives you a chance to talk about all of the things you tried that didn’t work, you can re-enforce the communication strategy, and talk about every nuance of the design. By the time you show them the design concept they will both be nodding their head in agreement, but also eager to see the masterpiece you have created. It will prevent you from having to DEFEND your design decisions (which becomes a YOU vs the CLIENT situation) and instead you explain them before hand and they just make sense when the client sees it.

Secondly by showing the client on a screen in a browser you will avoid the situations where the client likes/dislikes something based on the fact that it is not being displayed in its natural environment. The most common situations are when a client prints out the design concept and wants something bigger because it doesn’t take up half the page, or later they find that there is content below the fold and they don’t like that.

If you present the mockup like it is a masterpiece that will move mountains the client will feel like it is too. It gives you a chance to really sell and presell your design in a way that simply opening up a PDF or JPEG could never do. Again this will save countless hours in revisions and you will end up with a stronger design for your portfolio because it won’t be washed out by the opinions of 4-5 different people on the design committee.

CONCLUSION

The real gems that I get out of this process is a better understanding of what I should be communicating, and the process of thinking and writing out what is the best visual way to go about the communication. I have always worried more about creating high quality work than time/budget, however there is the added benefit of a smoother and quicker creative process because you keep the client agreeing with you with out unnecessary design review and justification steps.

Optimizing Your Landing Pages, Part 2 – Copy Basics

“Optimizing Landing Pages” is an on going series that will total 20 posts. The series is written by 3.7 DESIGNS and Ross Johnson to help web professionals build sites that achieve specific business goals. This is post 3, and the topic is “Writing for Personality Profiles.”

Pay Attention To Your Copy

After you have thought about and planned your landing pages sales funnel (as seen in “Optimizing your Landinag Pages, Part I,” you should take a careful look at your website copy. The copy and content of your landing page is going to make or break it, so it is important to consider a few things right off the bat.

MAKE SURE USERS FEEL LIKE THEY ARRIVED ON THE RIGHT PAGE

Have a high bounce rate? Chances are users end up on your site, don’t get a good impression that it is the page/site they were expecting, and press the back button. The first thing your copy should address is ensuring that the users are at the right place. Users often take less than 10 – 15 seconds before they make a judgment to read further or keep hunting.

Here are some ways to do that:

• Make sure the first headline matches the link / source they clicked on
• • Advertisement
  • Search Ranking
  • Print Ad
  • TV Ad, etc
• Have a supportive picture that illustrates how they are on a page that has what they are looking for.
• Bold, or link any relevant text to the topic/niche

At a glance the users should know definitively that your site has what they are looking for, and it is not a waste of time to hunt further.

MAKE SURE COPY IS SCANABLE

The next major step to optimizing your copy is to ensure that it is scanable. Until the user has a very clear sense that you offer what they are looking for they are not going to read, they will simply scan. If you read the previous article you will know you are trying to move them from the attention phase to the interest phase.

Ways to make your text scanable:

• Break up large blocks of text with headings and sub headings
• Anything you can break up into lists (bulleted or numbered) do so
• Bold relevant keywords, ideally you should be able to read all the bold words in a sentence and know what the paragraph was about.

FORGET ABOUT FEATURES, TALK ABOUT BENEFITS

All too often people get caught up in talking about the features their product or service offers. Forget about the features. Features are what the providers are interested in, the end users don’t care about features they care about what they will be getting out of it.

Examples of features:

• 250 Horse Power
• Built on Open Source Technology
• Monthly Reporting Provided
• Built using XHTML / CSS

All of these sound great right? Only if you know what the benefit of those are. The average user isn’t going to have a clue why XHTML/CSS is better than anything else. Instead talk about the benefit they will get.

Benefits of above features:

• 250 Horse Power
  • Enough pick up and speed to get around town safely and still have fun
• Built on Open Source Technology
  • Built using open source technology, which keeps costs down, and you will never have trouble finding someone who can work on your system.
• Monthly Reporting Provided
  • See and monitor the progress and improvements month after month so you can prove to the CIO and CEO how smart this decision was.
• Built Using XHTML / CSS
  • Built using the latest coding practices so that the pages load quicker, are search friendly, and take less time to update and maintain.

Sounds a lot better right?

KEEP THE COPY INTERESTING

When you do get the reader interested enough to read through your copy reward them. Dull copy is hard to read, and if the user doesn’t read they will never desire your product. While every landing page and brand will require their own twist of a brand voice, work with in what leeway you have to spice up the copy so its actually becomes worth reading.

Keep in mind that the headline should make you interested enough to read the first line of the paragraph, and the first line of the paragraph should make you interested enough to read the rest.

ADD A CALL TO ACTION

When you have finished your copy, spell out what you want the user to do. Often times you can get a user interested, and get them to desire your offering, only to leave them wondering what they should do next. Make the call to action a clear link on the page, and specifically tell them what they should do.

Example: Get started by filling out our order form

EXAMPLE, PUTTING IT ALL TOGETHER

LOOK NO FURTHER FOR AWARD WINNING BLUE WIDGETS

I hope you are not one of the people who settle for off color, ugly, and awful craftsmanship in their widgets? Maybe you should just stop and think about how the right colored quality widget could improve in your life. The savings of inferior widgets simply don’t outweigh the benefits over great ones.

• By using the high quality blue color, you are ensured that widgets match your operation seamlessly. This will instill customer confidence, which will lead to more sales.
• Using the latest manufacturing techniques we can create widgets that are nearly fail proof, preventing time and money lost when your production stops to replace widgets.
• Special widget coating prevents wear so you can go up to three times as long with out spending the time or money to replace the widget.

We offer a 100% satisfaction guarantee so there is no risk. Save money, increase revenue, and improve your business today.

Click here to order our blue widgets online

Optimizing your Landing Pages, Part 1 – Initial Planning

“Optimizing Landing Pages” is an on going series that will total 20 posts. The series is written by 3.7 DESIGNS and Ross Johnson to help web professionals build sites that achieve specific business goals. This is post 3, and the topic is “Writing for Personality Profiles.”

In the development of web pages there is an unfortunate trend that places more time and effort on the visual design of a site rather than the usability and sales funnels. There are a lot of great looking websites on the internet that truly are stunning, but fail at all business objectives. One of the first places you can start in the optimization of your sites business objectives would be your landing pages.

A landing page is simply any page where a user is likely to enter into your site. This might be a URL that is on print/traditional advertising, or a URL in which you send a user from a PPC advertisement. If you optimize interior pages for search results those could be landing pages as well.

There is a whole process to getting more out of your landing pages, so I will be splitting this into a blogging series. Today we will talk about planning, the next post will be about developing, and finally I will post about measuring and optimizing.

A I D A S

AIDAS. One of the most important elements to the success of your landing page will be how much planning and thought you put into it. Too many people throw up a landing page and just copy/paste content over with out really thinking what is going on the page and why. Remember, web users have very short patience and are quite fickle. It doesn’t take much for them to hit the back button.

AIDAS is the very first order of business when it comes to landing pages and conversion based websites online. What is AIDAS? It is the process in which every visitor goes through on their journey to converting. People may come into the conversion tunnel at different places in the process of AIDAS, and people may drop out, but it is our job to appease any concerns, questions, thoughts so they can move on to the next stage of the tunnel and eventually convert.

AIDAS = Attention Interest Desire Action Satisfy

AIDAS stands for Attention, Interest, Desire, Action Satisfy. Let’s look at these stages in depth and talk about what we can do to help a user move from one to the other.

Attention

This is the first stage, and it often consists of the user ensuring that they are on the right page or site. When a user is searching for information, a product, or service, they are likely to browse through 5-10 different sites in the quest of finding what they are looking for. If your site doesn’t look like the right one they will be clicking the back button and finding the next site.

The users thought process often follows these points:

• Am I on the page I thought I would get too?
• Does this site look like the type of site that would have what I am looking for?
• Is it worth looking around or should I find another page?

The best thing you can do to appease the attention phase is make sure the title of what ever they clicked through on is the same as the main heading of the page. If your PPC advertisement says “Magic chewing gum” your main headline should as well. If it says something else the user may think that it is not exactly what they are looking for and move on elsewhere.

This is where initial design credibility plays a large part. If your site doesn’t look credible the user might be disenchanted and click away to a different site.

Interest

Once you have their attention they will begin to start looking around for what they want to find. This commonly is referred to as “information scent,” where they are looking for anything about their search that will make them interested. It is your job as a web designer/developer to lead them to the right area of your site or page, and get them interested.

The user is most likely concerned with the following:

• Where should I click to find out more information?
• Is there something on this page that describes what I am looking for?
• Can I trust this website/company with my financial or personal information?

The tricky part here is that users are often in a huge hurry. They are not likely to read through all of your copy, so it is important to use techniques that allow easy scanning of content as well as pictures, diagrams, and videos to get the users interest. There will be more about this in the second installment of this series.

At this point in the stage you want to minimize any and all distractions. This is often why successful landing pages are very focused, preventing users from getting off out of the tunnel accidentally. It is not uncommon to remove traditional navigation bars/elements in favor of targeted in copy text links.

Desire

Once the user is interested they are going to take more time to really assess what it is you are selling to see if it fits their needs or not. If they have gotten to this stage it means that they have found the part of your site/page that describes what you offer. Kudos. Now they just want to know if you offer exactly what they want or not.

They will scan less and read more, take additional time to watch videos, look through pricing, etc. This is where a lot of the work comes in, where previously you were just trying to assure them they were on the right page and they shouldn’t leave; you now must convince them to part with their highly valued money, time, or information.

This is the part where you want to talk about benefits, not just features. Make sure your USP is clearly defined, and you answer any and all questions including price point, support, how to order, shipping information, returns, contact time, etc…

The user will have a lot of questions and objections about your product/service and in order to get them to the next stage you must have all of those questions answered. Some of them might be:

• Does this product/service do what I want?
• Can I afford it?
• If I don’t like it, what happens? Can I return it?
• Can I trust this company if I do want this product?
• Are there other products/service that are better?
• Will this solve my problem?

Action

The action used to be the most important part of the process, however it has been replaced by “satisfy.” I will discuss satisfy. in a few moments. The action is where the user actually takes action to convert. This might be filling out a form, purchasing an item, etc.. The key here is to make taking that action easy and spelling out how to complete that action. This is often referred to as the “call to action.”

This might be “add this item to your cart,” “check out to purchase,” “contact us today to start,” etc…

In order for a user to take action and convert all of their questions and objections must have been answered and appeased in the interest/desire stage. If you don’t then chances are they will be looking to the next site to purchase or take action. If they can’t figure out how to take action or what to do next, then they will be going to the next site to purchase or take action.

Satisfy

This is now the most important step in the whole process. You must satisfy the expectations of the user, meaning they should get exactly what they thought they would when they completed that action. It might be that you contact them in a timely manor with more information, or that they get the product they ordered with in your shipping guidelines. They might expect a specific level of communication through out the whole process.

Failing to do so will result in an unhappy user/customer, and they are likely to tell 10 other people about the experience vs 2 that they would tell if you gave them a great experience.

How much do you optimize your landing pages?

Just a quick question for readers of this blog, if you have a moment I would love to hear your experiences. How much time / effort do you spend optimizing and testing landing pages? Do you only optimize PPC / E-mail landing pages? or do you optimize every page thinking it could be found through natural search?

Additionally, would you read or be interested in a series of articles that discusses methods optimizing landing pages and testing them against each other?