letscounthedays » Usability

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”.

Defining A Multivariate Test

Shay Howe — Wed, 10 Feb 2010 00:42:30 +0000

Getting Started with Multivariate Testing

Multivariate testing (MVT), testing multiple elements of a live web page at a time, is becoming more and more popular amongst the web design and development community. Understandably so, multivariate testing allows you to test a large amount of combinations and see exactly how those combinations stack up against one another. You will quickly find out that the smallest changes can produce the biggest results.

What elements should you test?

When deciding exactly what elements to test within a multivariate test you are going to focus on the call to action. Determine what you want users to do upon landing on a page and then outline all of the key elements in and around the desired call to action. Any element a user will have to interact with to complete this action is an element you are going to want to run the multivariate test with. A few of these elements may include:

Brand Awareness

Depending on how popular, or unpopular, your brand is may impact conversions. If you have a well-known brand it may help encourage conversions where an unknown brand would not. On the other hand, having too much brand presence on a page may get in the way of users trying to complete a conversion. Figure out what you would like to accomplish with your brand awareness and then test it.

Headings

Headings are the first section of text a user will read on a page and if they like it they will continue on. Perhaps they will continue reading, maybe they will scan the rest of the elements surrounding the call to action, or if you’re lucky they just might jump straight to completing the desired call to action. Either way, testing different headings will allow you to determine which has the best positive outcome. Not too sure headings can make that big of difference? You do not have to take my word for it; 37signals have had significant results all from testing headings.

Text Content

Not every user is going to read the text content surrounding a call to action, however those who do are only going to be interested in helpful and useful content. Creating a few different blocks of text to test against one another can give you an insight as to how your users think and what will work best with them moving forward. While you may not see a very sizable difference in your conversion rate from testing text content you will gain a tremendous amount of awareness.

Images

The eye is naturally drawn to images on a page, especially striking images. How you present your call to action can be dramatically affected by the images used around it. As an example, if you are selling an e-book that is to be downloaded, try using an image of an actual book against an image of a PDF icon. You may be surprised to find that your users like to see a tangible product over a file icon. The right image or images can work wonders on your conversion rate.

Buttons

Buttons may very well be the most important part in completing a call to action. Simply put, buttons are one of the easiest ways for users to take action, an action that is often important in determining the overall success of a website. Does your button actually look like a button? Is it instinctive and easily recognizable? Put together multiple button combinations and test them against one another. It may take a few different tests, but soon enough you will have a shinning star.

How should you test these elements?

Within a multivariate test you will need to visually design multiple combinations of the elements surrounding a desired call to action. I recently wrote an article, 4 Simple Design Elements Behind a Good Call to Action, which goes into great detail on how to visually craft a strong call to action using size, shape, color, and position. Using size, shape, and color, you are able to create an extensive array of elements to test, all of which will help lead you to the preferred conversion rate.

Size

The larger you make your call to action, the easier it is to recognize. Furthermore, the larger an element is the more importance it will signify. You want to find a good balance between how large your headings and images are as compared to your button. Headings should not be so small that they do not stand out over the other copy, meanwhile a button should not be so large that it is the only item on the page.

Shape

A good call to action will use shape to its benefit. Make the corners on your button rounded so that it looks more like a button and instinctively clickable. Use an arrow or another object to draw attention to the button. Do not be afraid to break a grid in order to make a call to action stand out. On a page full of straight lines the curved one is sure to stick out so use shape to your advantage.

Color

Every color is going to catch a user’s attention a little differently. Additionally, each color is going to provoke a different emotion for each user. One of the biggest things you can test, and continually test, is the color of your headings, buttons, text, and so forth. Honestly, the options are endless! Test and work with colors that will standout, provide a high contrast, and encourage users.

Position

Logos are commonly found at the top left of a page for a reason, it is where they are most easily recognized and successful. Position plays a very important role in gaining conversions. How does your call to action perform placed within the left side of the page as compared to the right side? In addition to that, how does your button perform on the top of your call to action as compared to the bottom, left, or right? The position of your call to action needs to be in an instinctive location and clearly obvious to your users.

Multivariate Testing Example: Smashing Magazine

I recently wrote a review on The Smashing Book and in doing so I was visiting the Smashing Magazine website quite a bit. I started to notice that they are running a multivariate test on how they advertise the book to their visitors. Outlined below are a few of the different examples and combinations I was able to identify. I do not know how well each of these is performing, nor do I know anything about the parameters of the test. I would love to hear more about the test if Smashing Magazine was to share. Maybe they will release a post about it sometime in the future (wink wink)?

Variable: Text – Simple enough, these two combinations are strictly comparing the call to action text.

Variables: Text and Button – These combinations are slightly different from the first set. Here the call to action text is different as they have added a button into the mix, and the Smashing brand is down played a little from the previous examples.

Variable: Color – Here is a new set of combinations, of which the strong variable is the colors of the buttons. The color of the buttons changes along with the text within the buttons as necessary. Also notable, the color of the text “Smashing” within the bottom two examples changes to emphasize the brand within the bottom right example.

Variables: Position and Size – Within these two examples Smashing Magazine mixes testing position along with size. The image of the book switches from the right hand side to the left of the call to action. Additionally, the size of the button is increased within the example on the right.

Variables: Text, Size, and Color – Paying attention to the small details, this example tests the effectiveness of different context. In doing so, they slightly change the size of the text. Notice the text on the right example is just a tad larger than the left. In addition, the color of the pricing is different from one example to the next.

Variables: Random – These are just a few of the additional examples I found thrown into the mix, each of which is testing a random combination of elements.

The multivariate test by Smashing Magazine is a great example of a multivariate test as it is testing a wide array of elements. The test does a fantastic job at testing the brand, headings, text, images, and buttons. In doing so, they often change the size, shape, color, and position of different elements. There was a decent amount of planning put into this test and it is obvious that Smashing Magazine knows what they are doing.

The Smashing Book in Review

Shay Howe — Fri, 29 Jan 2010 01:13:06 +0000

Does the The Smashing Book Live Up to the Hype?

Smashing Magazine is one of the largest web design and development blogs online. They publish high quality content on a regular basis and are often seen as one of the most reliable sources within the industry. When they started kicking around the idea of creating a book the community widely encouraged it. After much talk the idea of creating a book, The Smashing Book, became a reality and Smashing Magazine went to work. To say that it was a difficult process for Smashing Magazine would be an understatement. As with every project they had their fair amount of roadblocks and then some. Regardless of what was put in from of them Smashing Magazine managed to release a book filled with excellent content written by none other than their own community.

Each chapter is written by a different author or authors, of which has appeared on Smashing Magazine before. Perhaps they have written an article for the blog before or maybe they have appeared within the articles themselves. The authors of the book are well established within the community and are experts in their line of work. Each chapter is well crafted to the personal style of the author(s) and is packed with valued content. Let’s start from the beginning, shall we.

In Review

Opening/Preface

The preface to The Smashing Book was very short and there was no introduction chapter disclaiming who the book is or is not for. The book does not waste anytime and quickly gets right to the content. I loved the fact that I did not have to wade through a chapter with an unnecessary introduction. Perfect!

Chapter 1 – User Interface Design in Modern Web Applications by Dmitry Fadeyev

The first chapter, User Interface Design in Modern Web Applications, written by Dmitry Fadeyev was a great opening to the book. Dmitry starts out by giving us an overview of the building blocks of visual interface design and how they relate to developing a quality application. In doing so, he covers things such as layout and positioning, size and shape, as well as color, contrast, and texture. Moving from building blocks into the practical techniques Dmitry discusses how different elements of a user interface can play a large part in the success of a web application. A few of the design techniques he mentions include whitespace, rounded corners, color, shadows, and more. He also touches on other elements outside of design including using verbs as field labels, auto focusing inputs, using help messages, and so forth. I won’t give all of Dmitry’s techniques away as this is definitely a chapter worth your while.

“Even if someone uses an interface for the first time, certain elements can still be familiar.” Excerpt from Chapter 1

Chapter 2 – The Art and Science of CSS-Layouts by Jacob Gube and Kayla Knight

Jacob Gube and Kayla Knight tackle The Art and Science of CSS-Layouts in the second chapter of the book. They explain the differences between fixed-width, fluid, elastic, and hybrid CSS-layouts. The chapter gives a detailed explanation of each layout type along with the pros and cons behind each. Their explanations include the basic principles behind each layout type as well as where each layout type is most commonly suitable. Apart from the solid explanations the chapter also provides a few CSS examples to get you started. Some people may argue against different types of CSS-layouts but after giving this chapter a read I believe you may be more open minded to giving other layout types a try.

“The question of optimal layout doesn’t have a single answer. Depending on the context, the time constraints and designer’s skills, each layout type has its purpose.” Excerpt from Chapter 2

Chapter 3 – Web Typography: Rules, Guidelines, and Common Mistakes by Alessandro Cattaneo, Yves Peters and Jon Tan

Web typography has been a hot topic as of lately, so it is no surprise that the third chapter, Web Typography: Rules, Guidelines, and Common Mistakes, was a massive one. I understand the idea of covering a different aspect of web design and development in each chapter, but I feel like this chapter could have been split into two as it is nearly twice as big as all of the other chapters. That being said the content of this chapter was superb.

When it comes to web typography there is a lot to talk about and Alessandro Cattaneo, Yves Peters and Jon Tan leave no stone unturned. They discuss different elements of typography such as legibility, readability, measure, tracking, and leading, as well as giving us an overview of all of the different typography terms and what they actually mean. Beyond this they also talk about the different techniques used within typography to really add value to the content. They do so by talking about font sizes, white space, building a grid, vertical rhythm, hierarchy, typesetting, paying attention to details, and so forth. It is obvious the authors of this chapter know what they are talking about and whether you are a seasoned typographer or a beginner there is something to learn from within this chapter.

“In its essence, typography is a powerful medium that allows for precise, effective communication. On the Web, typography can be used to enhance content, turning lifeless chunks of data into vivid, elegant conversations.” Excerpt from Chapter 3

Chapter 4 – Usability Principles for Modern Websites by Andrew Maier and David Leggett

Chapter four, Usability Principles for Modern Websites, comes from some of the good folks over at UX Booth, Andrew Maier and David Leggett. Really breaking down the core elements for usability within modern websites is a challenge. Doing it within one chapter is an even bigger challenge, kudos to Andrew and David for pulling it off successfully. The chapter covers everything from how users think to how important user testing is. Along the way you learn about some of the core usability rules and principles including putting content first, honoring standard usability conventions, and how to really plan out and design your interface. This chapter is jammed packed with information, worthy of a second read to pick up on things missed the first time around.

“Creating a great user experience takes a little bit of skill, a little bit of luck and a lot of detailed work.” Excerpt from Chapter 4

Chapter 5 – The Ultimate Guide to Fantastic Color Usage in Web Design, Usability, and Experience by Darius A Monsef IV

Color just may be the most under rated element when it comes to web design. All too often designers are given a logo and from that they pick a few complimentary colors and run with it. Darius A Monsef IV explains how to pick great colors in chapter five, The Ultimate Guide to Fantastic Color Usage in Web Design, Usability, and Experience. Darius give us the basics on color theory and explains the different color models commonly used today. From there he quickly moves on to providing fantastic examples of different color schemes and palettes used within modern websites today. The examples are amazing and it is obvious that quite a bit of time went into finding the examples. Furthermore, Darius finished the chapter by explaining how different colors can relate to usability, engagement, and experience. It is difficult to say, but this chapter just might be my favorite.

“Even when your website has a lot of colors, you can draw users to a certain element by giving that element a color unique to the page.” Excerpt from Chapter 5

Chapter 6 – Performance Optimization for Websites by Rene Schmidt

Rene Schmidt does a great job explaining helpful ways in which we can optimize the performance of our websites in chapter six, Performance Optimization for Websites. The chapter starts by laying out a few simple suggestions that almost any web designer and developer could implement. A few of these suggestions include paying attention to your file and image sizes, using CSS sprites, potentially using a content delivery network, using only external CSS and JavaScript (no inline styling or scripting), validating your pages, and so forth. After this Rene gets into the more technical side of performance optimization providing ways to tweak and speed up your server by directly modifying the server. This part of the chapter is not applicable to everyone, however it is very informational. The best part about this chapter is that after each tip or suggestion given Rene highlights exactly why it is helpful and why you should take it into consideration.

“Slow and unresponsive web sites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you.” Excerpt from Chapter 6

Chapter 7 – Design to Sell: Increasing Conversion Rates by Dmitry Fadeyev

Dmitry Fadeyev, whom also wrote the first chapter, tackles how to increase your conversion rates online in chapter seven, Design to Sell: Increasing Conversion Rates. Dmitry talks about the 4 principles needed to increase conversions, attention, interest, desire, action, or AIDA for short. In doing so he outlines quite a few recommendations including really showing the product (possibly using video to do so) to users, provide users with comprehensible lists, give back to users who convert, add testimonials and product recommendations, always provide the next requested action, drive demand with limited time offers, promote money back guarantees, provide shipping cost, and most importantly make your interface instinctual and easy to use. Dmitry does a great job explaining his recommendations and the benefits behind them, making this chapter especially educational.

“You need to break down the barriers that customers will put up when evaluating how valuable your product is to them.” Excerpt from Chapter 7

Chapter 8 – How to Turn a Site into a Remarkable Brand by Chris Spooner

Inside chapter eight, How to Turn a Site into a Remarkable Brand, Chris Spooner gives readers 5 guidelines or tips on how to make your website memorable and your brand stand out. The first guideline covered is to produce a unique design by using stunning visuals and breaking the mold while still following universal design principles. The next guideline is based on producing quality content that is not only interesting, but useful as well. The third guideline focuses on exploring new concepts, being unique, and making your brand entertaining. The fourth guideline is something we can all agree with, become part of the community. Last, Chris talks about building a buzz around your brand by advertising, creating link bait, and really getting inside people’s heads. Chris has created a solid brand for himself and within this chapter he does a great job of sharing how he built his brand, allowing us to learn from him.

“Building a remarkable brand takes constant and daily effort and attention. Be confident in your content, help others, spread the word and you’ll be on your way to a remarkable high-profile brand of your own.” Excerpt from Chapter 8

Chapter 9 – Learning from Experts: Interviews and Insights by Steven Snell

Chapter nine, Learning from Experts: Interviews and Insights, by Steven Snell is kind of an odd chapter, however very helpful. The chapter basically breaks down into a question and answer with some of the top designers and developers in the industry including Jason Santa Maria, Paul Boag, Andy Budd, Elliot Jay Stocks, Chris Coyier, Dave Shea, Nick La, and more. The questions are broken into 4 categories: Designing and Development, The Design Process, Self-Improvement and Skill Development, and Business and Freelancing. The questions and answers are both well thought out and descriptive. While this chapter is not the most exciting chapter in the book it is very interesting and a great way to bring together what has been talked about in all of the previous chapters.

“Web design is still relatively new when compared to the rest of the disciplines in the ‘big d’ design field.” Excerpt from Chapter 9

Chapter 10 – Behind the Curtains: The Smashing Magazine Story

The final chapter, Behind the Curtains: The Smashing Magazine Story, is an excellent way to close the book. For those strictly reading the book to learn about web design and development this chapter probably is not for you, but those who are genuinely interested in Smashing Magazine and would like to learn about them this is the time. This chapter covers it all including how Smashing Magazine started, exactly how they got to be as successful as they are and how they stay successful, as well as what happens behind the scenes. Last, Smashing Magazine thanks everyone within the web design community, stating if it was not for us they would not be where they are today. I would personally like to say the same. I would not be where I am today if it was not for the help of Smashing Magazine, thank you Smashing Magazine.

“Our job is not only to contribute to the design community but to help maintain this fertile environment in which ideas are born, insights are exchanged and discussions take place, making the lives of designers and developers easier and richer.” Excerpt from Chapter 10

9 Stars Out of 10

The content of the book is next to none. All of the chapters are greatly detailed and well written. I cannot say enough about the authors and content of the book. My problem with the book is the amount of time it took to release as well as the physical quality of the book. I pre-ordered the book on August 5, 2009 and did not receive it until January 2, 2010, almost five months later. Smashing Magazine has been admirably honest and admits they had numerous setbacks while publishing the book. I also recognize that I did pre-order the book, at which time the release date was not set.

As for the physical quality of the book, the binding on the book fell apart. During the course of reading the book the binding began to split and pages started to fall out. Luckily, Smashing Magazine has recognized the bad binding and have stopped shipping this version of the book. They have fixed the binding and are now strictly shipping the second, fixed binding, edition of the book. Smashing Magazine was nice enough to send me a copy of the new edition of the book upon hearing my troubles.

In all, the book is outstanding and I highly recommend picking it up! It does not matter if you’re a veteran designer or new to the scene, you can definitely benefit from purchasing this book. Thank you Smashing Magazine for yet another satisfying experience.

You may view the all of the links and resources included within the book over at Smashing Magazines list of links.

Universal Website Usability Rules

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”.

Designing A Non-Profit Website

Shay Howe — Tue, 15 Sep 2009 02:07:15 +0000

Ultimate Checklist for Designing A Non-profit Website

Part 1: Content

One of the goals behind a non-profit website should be to inform visitors and provide them with valued content, ultimately motivating them to take action or to be encouraged by your undertaking, accomplishments, and possibilities.

Does the website:

Provide a mission statement that is easily accessible.
Provide an inspiring statement from executive director, president, or person in charge.
Provide a featured organization importance on the home page.
Provide a who, what, why, when, and where behind the organization.
Provide a history and origin behind the organization.
Provide informative material related to the organization.
Provide a list of board members and their positions.
Provide a list of principal staff members and their roles.
Provide a date of the most recent update to the website.
Provide a calendar and/or news to highlight time-sensitive material.
Provide a list of recent updates to the website.
Provide the most recent annual reports.

Part 2: Dependability

Upon visiting the website visitors should feel that the organization is attentive, perceptive, proficient, virtuous, and responsible.

Does the website:

Have correctly functioning internal and external links.
Have routinely fresh content.
Contain only correct and proper spellings.
Have appropriate and functioning pictures.
Supply a "Privacy Policy" for individual information.
Display the non-profit position of the organization.

Part 3: Interaction

An essential behind a non-profit website is providing a strong call to action or form of interaction for visitors to help support and promote the organization's mission.

Does the website:

Provide an address and phone number for the organization.
Allow visitors to filter their contact request to the correct person.
Ask for visitors email addresses.
Allow visitors to contribute by commenting or emailing.
Allow visitors to contribute by a form of social media. (Facebook, Twitter, etc.)
Provide a list and explanation of positions for volunteers.
Describe how and where funds will be used.
All for visitors to make donations online.
Explain if any donations may or may not be tad deductible.
Provide visitors' ways of how to help outside of donating.
Provide any success stories from those helped by the organization.
Clearly outline the services and goods provided by the organization.

Part 4: Visibility

An organization's website needs to be visible to all visitors regardless of their physical or mental abilities.

Does the website:

Pass accessibility standards.
Use valid HTML/XHTML code.
Look and function correctly across all major web browsers.
Perform correctly when being accessed by screen reading programs.
Have appropriately written content for the intended skill level of the audience.

Part 5: Interface

A good interface can dramatically improve the production and presentation of an organization.

Does the website:

Load without showing a splash page or advertisement.
Load swiftly for those with a broadband connection.
Perform correctly on an array of different screen resolutions.
Have a clean and friendly layout and design.
Prohibit pop-up windows on the home page.
Have a comprehensive and eligible navigation.
Provide all content within three or less clicks from the main navigation.
Provide a site map or search feature for large websites.
Have the logo or organization name on all pages.
Use proper titles and headings for all pages.
Use suitable named URLs.
Provide pertinent content without having to sign-up or register.
Allow a printer-friendly option for longer pages.
Use web friendly content. (Short paragraphs, bulleted list, etc.)
Use an appropriate contrast in order to read text (even when projected).
Visually separate hyperlinks from regularly styled content.
Use email addresses as links.
State the type and size of a file before being downloaded.
Use authentic graphics and images of which support the content.

Additional Resources

You may also find the following resources beneficial. Please enjoy!

Universal Website Usability Rules

Shay Howe — Sun, 19 Jul 2009 22:03:05 +0000

10 Usability Rules You Need to Follow

Present Information and Media in a Recognizable Manner

Provide Text Alternatives – Any images, videos, or non-text based media presented to the user must have a text alternative or accompanying text.

Make Content Adaptable – Today information is spread across a wide spectrum including computers, mobile devices, and so forth. Make sure your content is adaptable to all of these spectrums without losing information or composition.

Make Content Distinguishable – Your content should be recognizable to users and provided in a way that makes it easier for them to see and hear. The best way to accomplish this is by using color (more importantly contrast), size, and other stylizing elements. For any audio, video, or active media make sure to provide controls to start and stop the media.

Present an Operational Interface and Navigation

Use Keyboard Shortcuts – Many users prefer not to use a mouse, in which case they browse the web using their keyboard. Allow your website to fully function from a keyboard and provide shortcuts where possible.

Give Users Time – If you are using any videos or animations on your website that contain text or comprehensible parts give users enough time to read or take in these elements. Moving too fast will frustrate users and in retaliation they will leave your website.

Do Not Use Annoying Media – Anything that blinks, flashes, or may produce anxiety will frustrate users. General rule, anything that blinks or flashes more than 3 times a second can be considered annoying.

Provide Multiple Ways to Navigate – Give users complete control of your website by allowing them to navigate located information and direct where they are at all times. To do so provide users with internal links, titles and headings, breadcrumb navigation, search features, and other navigation components.

Present Information and Media in an Understandable Manner

Use Readable Text – Make your text readable and understandable by using correct grammar and pronunciation. Present your content in a manner that would be understandable to a third grader.

Be Predictable – The layout and design of your website should be consistent throughout and the way information is presented should be predictable by users. The easier it is to access information the better.

Provide Assistance – Help users stay away from any potential errors and fix any mistakes that they may have made. Do so by providing tool tips, automatic spell checking, and providing descriptive error messages when feasible.