4KreationDiseño para andar por casa

Why is content king? We hear about it all the time. The answer is simple, content is a vital part of your website. If your content is not easy to understand and interpret, then you may easily loose your reader. The content of your website will make or break the experience, no matter how easy to use your website may be.

Gauge Your Audience

The first thing to consider while evaluating the copy you’ve written for your website is your audience. For example, on a blog I write about geckos, I tend to use gecko jargon such as ‘feeders’ (insects that geckos eat), ‘hatchlings’ (baby geckos), and ‘herps’ (which could be taken in a dirty sense, but it is short for reptiles and amphibians).

As I use these words in my writing, I have to consider whether or not it is appropriate for my audience. It is important to base your decision of using jargon on the knowledge level of the audience. The key is to know what audience you are trying to reach. If I was to target a general reptile audience, who may not know a specific gecko jargon based word, I would proceed to define it. However, if I was to address an audience who had no reptile experience, I would avoid using jargon words all together.  In addition to knowing the audience, you need to know the spectrum of your audience. If a person interested in geckos, but does not own any yet, and lands on my blog, I want him to understand what he is reading just as easily as a professional breeder. If not, I am limiting my audience.

Overall, knowing your audience sets the stage for other approaches to writing usable content.

Abbreviations Are Too Technical

When you are writing your content, you want to avoid abbreviations. If you must use them, make sure that they are defined somewhere easy and accessible for those who are not familiar with them. Using abbreviations makes sense when extra space is needed. Even then, only commonly known abbreviations should be used.

IRS.gov uses abbreviations on Tax Professional page

One example of this can be found on IRS.gov. Taxes can be a hassle for anyone without expertise in the field. Regulations are endless and stipulations are relentless. While browsing the IRS page for individuals you see very few abbreviations in the titles of each item available to users. If you navigate to the tax information for tax professionals it is a different story. Section 7216, IRSAC and IRPAC? What? The audience has changed on this page. Abbreviations are more prevalent because this page is tailored to meet the needs of people trained in this field.

Make Headers and the Paragraph’s 1st Sentence Descriptive

The first sentence of a paragraph is the most important. People scan content and there is no stopping that. That being said, the more complex and boring a sentence in your paragraph is, the less likely it is to be read. This is why headers and first sentences are so vital. The goal is to include the main idea of the paragraph while hooking your readers in the first sentence.

News websites are a great example of online content that is victim to constant scanning. CNN sets the tone for each paragraph of their news articles in the first sentence so that a reader can easily browse over an article and get the main ideas quickly. This method can be described as the “inverted pyramid” style of writing, which has the most important information at the top of the paragraph or story and the least important at the bottom.

CNN Articles highlight excellent first sentence usage.

Limit Length and Consider Reading Level

When writing, be sensitive of how long each section of content is growing. A lengthy paragraph can often be split up into several smaller ones. A good rule of thumb is to stick to about six sentences per paragraph. By splitting up large bodies of text, the readability and scan-ability is improved.

Another concept to consider is reading level. When Andrew, David and I discuss the article styles we write here on UX Booth, we commonly acknowledge that Andrew writes at a higher reading level than David or I commonly do. The combined style we use works, though. We understand that Andrew commonly writes to an audience who may have a more in depth understanding of our topic, while David and I balance things out by reaching other audiences easier. The variety in our posts fits our varied audience well.

One tool that I included in my 5 Web Accessibility Improvement Tools was a document readability analyzer. This is a neat tool that helps gauge what reading level you’re writing at.

Remember Basic Composition Lessons

For some of us Composition 101 and 102 were not too long ago. The basics that have been taught to you in your introductory English classes should apply to your content writing as well.

One prime example of this is the use of unnecessary exclamations. Luckily we’ve seen a decrease in the trend to TYPE IN ALL CAPS or overuse exclamation points. It has become standard that on the internet this implies that you are shouting. However, people often still abuse the exclamatory typing. It is seen as shouting, yet some still do not understand why its use should be moderated.

Marc Perel comments on application’s use of exclamation points.

In addition to writing in a calm, friendly manner by avoiding caps and punctuation abuse, be sure to write in an active voice. Studies have shown that content presented in passive voice are often read aloud in active voice. Make it easier on your users and write actively, just as you were required to do in school.

Summary and Conclusion

Writing user friendly content can be accomplished simply by following a few guidelines. After establishing who your audience is, writing for your audience is easy.

• Evaluate the experience level of the audience you’re writing to
• Avoid complex jargon and industry abbreviations unless addressing experts only
• Utilize headlines and first sentences of paragraphs to maximize potential for easy scanning
• Be concise and conscious of the reading level you present your content in
• Follow those rules you learned in English class about exclamation point abuse and writing in the active voice.

Rosemarie Fiore’s firework drawings are created by containing and controlling firework explosions. She explains:

“I bomb blank sheets of paper with different fireworks including color smoke bombs, jumping jacks, monster balls, fountains, magic whips, spinning carnations, ground blooms, rings of fire, and lasers. As I work, I create imagery by controlling the chaotic nature of the explosions in upside-down containers. When the paper becomes saturated in color, dark and burned, I take it back to my studio and collage blank paper circles onto the image to establish new planes and open up the composition. I then continue to bomb the pieces. These actions are repeated a number of times. The final works contain many layers of collaged explosions and are thick and heavy.”

We love ‘em. You can see more photos and work here.

Firebug is one of the most popular tools used by web developers. In this article, we’ll take a closer look at ten of its most attractive features.

1. Console

The first thing you’re going to notice when opening Firebug (either from the

status bar or using the ctrl+F12 key combination) will be the Console panel. After a quick look, one might think that it is an alternate version of the Error Console

(Ctrl+Shift+J). Common features between the two are:

• logging of errors, warnings and notices
• ability to run Javascript code

But Firebug extends the Firefox functionality, so it can do

much more, such as:

• logging errors for Javascript, CSS, XML, XMLHttpRequest (AJAX) and

  Chrome (Firefox internals)

• run Javascript code upon the current webpage
• additional Javascript object is put at disposal (console)

Let’s look over some examples built upon the console object. Imagine running the

following HTML file.

<html>
    <head>
        <script type="text/javascript">
            console.time(1);
            console.log('the script section has started executing');
            console.warn('warning message');
            console.error('error message');
            console.info('info message');
            console.log(
                'finishing script execution\n',
                'execution took:'
            );
            console.timeEnd(1);
        </script>
    </head>
</html>

This will generate the following result.

2. HTML

The second panel, and the one in which I’m sure you’re going to spend a lot

of time, is split among several sections which we will review below.

1. This button is equivalent to the “Inspect Element” in a webpage

   context menu. Apart from being helpful with quickly picking elements in page,

   it also outlines the currently selected element.

2. In this section, we have the hierarchy of the currently

   selected element and the ability to perform a series of actions (on every

   individual component of the hierarchy), like:

   • copying inner HTML
   • creating XPath expressions
   • attaching event observer (and logging in the Console panel)
   • deleting element
   • editing element and child nodes
   • moving the element in the DOM tab for inspection
3. The main window of the panel; useful for traversing through the

   HTML document, quick modification of code and spotting broken code (like

   closing a div too early). The contextual menu offers the same set of functionality

   like section nr. 2

4. In this section the computed style of the current page or element are

   displayed. The ability to actively modify styles and inspect CSS

   inheritance are its most valuable features.

5. Through this section one can easily examine the box model of

   an element: content size, padding, offsets, margins and borders.

6. The DOM section upon access generates a list with all, of the currently

   selected elements, methods and properties.

3. CSS

The main difference between this panel and the Style section under HTML is

that here you can work on uncomputed styles. I’ll outline and number the sections

(and features this time).

1. If the page on which we are working contains multiple stylesheets, then we will be able to select the desired stylesheet.
2. The main region where the CSS code is displayed.
3. Easily modify CSS properties.
4. Easily dissable CSS rules.

4. Script

Sometimes, when writing Javascript code, you have to get your hands

dirty. Most of the time, you’ll find yourself working with the

Console panel; only in extreme conditions will that make you jump to the Script

panel. Given those extreme conditions (which are bound to happen), let’s review this panel, and start familiarizing ourselves with it.

1. Dropdown button from which we can select the desired script file.
2. Debugging functions: continue, step in, step over

   and step out. They only kick in when code execution reaches a

   breakpoint.

3. Main window. Here we set (and remove) breakpoints, as well as inspect

   Javascript code.

4. Similar to the DOM panel, the Watch section prints out object methods

   and parameters for currently debugging code.

5. Shows the stackment of functions in real time.
6. List of currently active breakpoints. Only breakpoint removal can be done

   from here.

5. DOM

The same as HTML->DOM. Given the fact that nothing differs from what was mentioned before, we’ll skip to the next section.

6. Net

Curious how long your page took to load? Or do you

want to know which request takes the most time to complete? Thankfully, this, too, can be accomplished via the Net panel.

1. Requests can be filtered according to their type.
2. Every request is shown in this section. At the end of the requests list

   we see a summary of them: number of requests, size, how much was cached

   already and total time they took to complete.

3. More details can be revealed, as: HTTP headers, response and cache (same

   as response)

Performance Testing

Need to test the performance of a specific function or loop? Use the Firebug’s “timer” feature.

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

Three step. We begin by calling “console.time” and pass in a unique key. Next, we insert our code. Finally, we call console.timeEnd, and once again, pass in our unique key.

7. Reference

This is an additional panel provided by CodeBurner, a Firebug

add-on. As its name states, through this panel you’ll have quick access to your HTML

and CSS code. Even if the panel is self-explanatory, we will still look over

it.

1. The searching and filtering section.
2. Here the results stack up, in our case there is only one result.
3. Compatibility panel for the latest major browser versions. Yes, Chrome is

   not in this list, but Chrome uses the same engine as Safari, namely Webkit, so if

   it’s Safari compatible it will work in Chrome as well.

4. And if the information displayed in this panel isn’t enough, you can find more info by accessing this link, like: examples, compatibility in more browser

   versions, description, etc.

8. PixelPerfect

If you’ve ever done PSD slicing, you know how time consuming the measurement

of spacing in between composition elements can be. That’s where PixelPerfect proves it’s

power. Having this add-on in your toolbox will help you perform the perfect slice.

1. With this button we can add multiple overlay images for the current page.
2. Overlays list, from here we apply or delete the overlay.
3. Overlay settings section.

9. YSlow

Another Firebug add-on developed by Yahoo!, which can suggest speed improvements

based on a series of tests performed.

Through YSlow, we can grade our website’s overall performance. We can easily

spot issues which can be improved, and a series of recommendations are available

as well.

Apart from the pie charted statistics, we also have JSLint and Smush.it at our disposal.

10. FirePHP

Our last, but not least, important Firebug component is FirePHP. With this

add-on, we can transparently send information (warnings, errors, logging, info)

to the Console panel from our PHP code. Example usage from FirePHP’s website:

<?php

    FB::log('Log message');
    FB::info('Info message');
    FB::warn('Warn message');
    FB::error('Error message');

?>

Closing

I hope this small list of Firebug panels/add-on will make your life as a

web person easier — as it did to me. In the end, we all know that

bugs are bound to happen, so there’s no excuse for not being prepared.

Follow these links to download the add-ons:

• Firebug,
• CodeBurner,
• PixelPerfect,
• YSlow
• FirePHP