Hints and tips for the styling and layout of your text content

With the vast amount of text being posted online and via social media these days I thought it would be beneficial to share this very brief tutorial for how (and how not) to style all that great stuff you’re sharing online. These tips apply anywhere you might post text—whether it be in one of our content management systems, Wordpress, Facebook, Blogger or even old fashioned MS Word, these simple design principles will help insure your message gets the credibility that it deserves.

1. Learn to use <shift><enter> (Windows) or <shift><return> (Mac) to insert line breaks with no vertical spacing. This practice helps insure you maintain close proximity of related content and greatly aides in readability.
   People often just hit <enter> between lines of text which adds awkward and undesirable vertical space.

   Example using <shift><enter>	Example using <enter> only
   My mailing address: RisingLine 111 S. Broadway St STE 101 Boise, ID 83702	My mailing address: RisingLine 111 S. Broadway St STE 101 Boise, ID 83702

2. Don’t change typefaces (fonts). In fact you cannot change fonts/typefaces in our CMS text editor but many other text editors allow you to do so. The typefaces for your Website are specified in a single Style Sheet that was developed specifically for your site and insures consistency across all pages of your Website. Consistency in the presentation of your content is a cornerstone of good design.
3. Don’t change typeface colors. For a professional consistent presentation of your content the colors are controlled through the Style Sheet. Emphasis colors (such as the color of your hyperlinks) have been selected by your professional designer specifically to harmonize with the color palette of your Website.
4. Use the "font size" selector very very sparingly. Avoid at all costs using the "font size" selector to increase text size. This practice will invariably create inconsistent and amateur rendering of your content which cannot be controlled from the central style sheet. The only reason we retain the font size selector is for those rare occasions where a line of text needs to be reduced in size.
5. Avoid using "U" Underline to emphasize inline text. People will think the underlined text is a hyperlink. Rather use the "B" (Bold) or "I" (Italic) icons to emphasize a word or sentence.
   

   For professional and consistent presentation of your content…
   Do	Do Not
   News and Announcements We are extremely pleased to announce the opening of our second storefront in the beautiful city of San Jose, California. Please join us for our grand opening on April 3rd.	News and Announcements We are extremely pleased to announce the opening of our second storefront in the beautiful city of San Jose, California. Please join us for our grand opening on April 3rd.

6. Use the "Format" selector to change heading text size and create a logical hierarchy of content. Using this method allows consistent presentation for your site which is controlled by the Style Sheet.

The content of your Web site is crucial and should be developed to quickly answer the basic questions and needs of your specific target visitors. Research shows that you only have a few seconds to entice your visitors to stay so it’s vital that you present obvious choices for them to find the information they need. In addition clear and compelling navigation options need to be present that allow your visitors to easily recognize where they should click to proceed through the sales/information process.

If your visitors become confused about what your site is about or how it applies to them, they are likely to just leave and look elsewhere. The goal of your front page is to allow visitors to qualify themselves as prospects for your business or organization and to proceed through the sales process by accepting a call to action that you offer.
Actions can include purchasing online, contacting you for an appointment, subscribing to your newsletter/blog or whatever the specific next step is in your sales process.

The Essential Questions Visitors to Your Site Will Need Answered:

• What do you do? One of the most common mistakes that sites make is not being clear on exactly what they are providing. The more complex of solution you offer the more important it is to provide this answer in easy-to-understand language. The essence of what you do should be the basis of your organization’s mission statement, but answering the “What you do” question will also include the specific products or services  you’re offering.
• Why you do it? This is related to an organization’s vision statement but needs to be expressed in concise language free from industry jargon. Telling visitors “why you do it” is a means of establishing credibility and positioning yourself as an expert adviser for recommending a solution to their needs.
• Why are you the best choice? This question is the most vital for new prospects and should be answered by your unique value proposition. Your unique value proposition is simply a concise statement of how you
  meet their need better than anyone else.  In addition to stating your unique value, you need to back it up with real-life examples. The most effective support will be testimonials, portfolio’s of your past work, and third party reviews or endorsements if available.
• What can I do? This is the question you want most asked because it means your visitor is satisfied (or at least intrigued) with the answers to their first three questions. They are asking how to proceed through your sales process. This doesn’t mean they’re necessarily ready to buy, but they’re willing to take a step closer. Your site needs to present unambiguous action items for your customers to answer their question of “What can I do?” by providing conspicuous “call to action” links in the body of your front page and the navigation menu.

How To Provide the Answers

Here are a few key principles for answering your visitors’ questions :

1. Be concise. Paragraphs of text on your front page will bury the answers to your visitors’ questions and result in a high abandon rate. Your front page, and navigation bar, should be thought of as a map that clearly directs people to more detailed information on the destination of their choice, without them having to think twice about their choices. While, supporting pages will provide more detailed answers the still must avoid verbosity to be effective.
2. Communicate in layman’s terms and avoid your industry’s jargon. Realize that much of the internal language your organization uses may have no relevance for your visitors.
3. Provide clear call-to-action choices for all types of visitors. The fundamental questions presented above provide answers for newly aware prospects through “trial” or first-time buyers. If you anticipate clients, customers with an ongoing relationship with your organization, to be frequent visitors you need to accommodate the needs of these visitors. Other visitor types can include press, investors or employers. The answers to each type of visitor questions need to be presented in proportion to the importance they have towards achieving the overall goals of your site.

To my recollection, I’ve never made mention on this blog of a specific Website as an example of being truly great. While no one has elected me as the design judge of the Internet, nor will any great people likely take notice of this post, I am compelled to call out a Website that I’ve been captivated by for some time and that serves as a great example of the principles that we here at RisingLine advocate every day.

No, it’s not RisingLine.com (although I have to admit I think quite highly of that design), and before I continue I should disclose that I have absolutely no ulterior motive in praising the site I’m about to mention . . . no referral fees, or kickbacks of any kind.

So enough with the rambling, MediaTemple.net is the site to which I am directing my compliments. The first thing a visitor to their site will notice is that graphic design is extremely powerful but not overpowering. . . minimalist, detail oriented, clean, modern, just plain classy. It does what a graphic design is supposed to—provide a professional backdrop to the content of the site which beams credibility without distracting from the message.

I have to assume by the continued proliferation of shabbily designed sites on the Web that many don’t realize just how important design is. As we like mention, over and over, research has shown that a shockingly high percentage of people make a judgment call about the credibility of a company within seconds of visiting a Website based primarily on the graphic design (see the Stanford Web Credibility Research site for more insight on this topic). While my high school history teacher did not find it amusing when I offered to turn in a picture instead of the assigned 1,000 word essay, it really is true that a picture (or for our purposes a design) is worth a 1,000 words of credibility, and all that communicated in the blink of an eye.

A very common misconception is that an effective design is one that has a lot of swirls, colors, moving things and flashy graphics. While those types of sites might be appropriate in some instances (although I can’t think of any of the top of my head) professional Websites have a demanding purpose to concisely communicate value propositions and persuade their prospects to buy. Much Web design we see out there does more to distract from those goals than reach them. Media Temple offers us a great example of a well refined goal-oriented design that delivers their message with just a touch of panache.

Even the best graphic design is of no real use without concise messaging, clear communication flow and easy to understand navigation. These disciplines are collectively known as usability and are achieved exceptionally well by Media Temple. What’s even more impressive in this accomplishment is that the unique value of Media Temple’s hosting solutions are considerably more challenging to communicate than their competitors because they really are unique. Media Temple provides virtualized hosting accounts that are spread across a grid of resources as compared to the typical shared hosting company that sticks customers on a server in their farm to fight with the other squatters for finite resources. Based on my experience using their product, Media Temple’s solutions live up to the grand impression they make on their Website.

While I’m not going to get into the details, the usability of their client-side administration panel and knowledge base impresses me even more than their front end. I recently spent some time in Media Temple’s Grid-Service environment testing the CMS platform we develop on (coincidentally their hosting platform provided the most consistent high performance of any of the many shared hosting environments we’ve tested in) and I had a hard time tearing myself away from their administration panel when our project was complete.

Hats off to Media Temple for their great achievement and many kudos for providing us all a great example of what the Web should look like.