Category Archives: Web Development

4263193267_fb5cee0c57

Writing for the Web

Writing for the Web is different than other kinds of writing. That’s because people don’t read webpages, they scan them. Not only that but people give a webpage about three seconds to convince them to keep reader.

When a near-limitless number of alternatives is a single-click away, going back to a list of search results, your opportunity to engage the reader is very small. Writing for the web is very different than other kinds of writing.

But don’t worry, you’re about to learn how to write for the web, to connect with your audience and keep them engaged from your first line to your last.

I help people get their message online by building them a website. It’s fun and rewarding and I still get excited when I can help someone new move their converstations online. When I’m finished my work, and they have a new website, the real work of the website is just beginning. A website is only as good as it’s content and no matter how great a site I build, the people I work with still need to fill it with awesome content.

There are four key things to keep in mind when writing for the web:

  1. Make Your Text Scannable
  2. Keep It Short and Simple
  3. Quality Counts
  4. Have a Great Call To Action
[box size=large]At the end of this article, you can get my Free Writing For The Web Checklist to help make sure you follow these steps everytime you write for the web.[/box]

Make Your Text Scannable

People don’t read webpages, they scan them. Research shows us that most people don’t read from left -to-right, top-to-bottom when reading a webpage. They read in an “F” shape, like this:

This means we need to shape our web content to fit this pattern. This of course is for English readers, which are left-to-right, top-to-bottom readers. If you’re working in a different language that is right-to-left, like Arabic or top-to-bottom, such as Chinese, you’ll need to match those reading patterns.

Here are some things we can do to match the F Pattern:

  • highlighted important words and phrases
    • use links, bold, typeface and colours to highlight
  • bulleted lists help make content easy to scan
  • Keep each paragraph to only one idea.
    • If you put more ideas in, they will get lost when readers skip over them
  • Put your conclusion first and then explain it
  • Use half the words as conventional writing.

Links

Want to learn more? Check out these links:

Keep it Short and Simple

People read the web to solve a problem and they are looking for the best answer. Part of they measure “best” is how easy it is to read your content. Unline a book or magazine, where the reader has committed to reading with time, space and maybe even money, webpages don’t require the same committment. They are fast and easy to switch and are most likely free.

Lead with your conclusion and then explain it. This is often referred to as the inverted pyramid pattern. This will place your most important content at the top-left of the page, where the most time is spent by F Pattern readers.

Links

What to learn more? Check out these links:

Quality Counts

Taking the time to proofread isn’t some sort of secret sauce for writing for the web. It’s just part of good writing. But that doesn’t mean you can skip it when writing for the web. Email and status updates might be looser on the need for proofreading, but if you’re trying to engage your reader, look your best and make sure your content is well written and error-free.

I think two great books on this topic are the classic Elements of Style and On Writing Well. Every writer should read these books at least once, in my opinion, and preferably once a year.

In particular, a key writing strategy to focus on quality is to write in the active voice. The opposite of the active voice, is the passive voice. Passive voice writing is longer, more complicated and less engaging. Active voice writing is shorter, simpler and engaging. Here’s an example:

Active Voice: You wrote the web page.

Passive Voice: The web page was written by you.

The exception to this rule is when writing the passive voice helps deliver great titles, headings and summaries by making the first two words highly relevant. As reported by the Neilsen/Norman Group, “recent findings from our eyetracking research emphasized the overwhelming importance of getting the first 2 words right , since that’s often all users see when they scan Web pages. Given this, we have to bend the writing guidelines a bit, especially for elements that users fixate on when they scan — that is, headlines, subheads, summaries, captions, hypertext links, and bulleted lists .”

Links

What to learn more? Check out these links:

Have a Great Call To Action

Readers on the web aren’t just reading your content. What they are reading is part of a flow of information. They will be quickly shifting to the next piece of content that is part of their flow. To increase engagement, it is very important to provide a clear call to action for your reader. Traditionally thought of as an e-commerce strategy, where the call to action is to buy – it has become clear that an effective call to action is very useful for all web content.

Ask yourself “What is the next thing I want my reader to after reading my content?” It could be buying something, it could be signing up for a newsletter, following you on twitter or even just inviting them to comment on your article. Whatever that action is, you need to provide the call to action in a clear and compelling fashion.

How can we make our call to action compelling? Here are 5 things you can do to have a great call to action

  1. Use clear, active language like: Call, Buy, Register, Subscribe and Donate
  2. Keep it short and simple
  3. Avoid adverbs
  4. Have a call to action on every page
  5. Make it stand out: position, colour and size

Links

What to learn more? Check out these links:

The Checklist

Now that you have the tools, you’re ready to write awesome content for the web. To help you when you write for the web, use my Free Writing For The Web Checklist.

 

What You Think?

Tell me what you think about writing for the web. Comment below or tell me on Twitter.
sprites

Learning About CSS Sprites

CSS Sprites are a method of improving web site performance borrowing an image optimization technique from video games – the sprite. This technique was ported to web development around 2003 and a decade later its still a strong practice to be using. Using sprites on your website requires a few steps, from building your sprite image to using it in your style sheet.

One of the key advantages of CSS sprites is that it replaces image slices and javascript, still providing the benefit, but requires just CSS. If you want to get started with CCS sprites, here where I suggest you begin:

 

And a neat tool for finding x-y coordinates on a CSS sprite image

globe_flags

Javascript Internationalization

Websites are available to the world…but that won’t matter if your audience can’t read your message. I’m spending some time looking at tools for javascript internationalization, commonly referred to as i18n (because 18 characters are replaced).

If you haven’t heard of this issue, check out the Wikipedia article.

If you’re not sure how complicated the issue is, here’s a list of the pluralization rules for different languages.

If you’re a coder, here’s what you need to know, at a minimum

If you like stackoverflow, here’s what they’re discussion on the issue.

Here are the tools I’m currently looking at – after sifting through a dozen or so options:

  • Javascript gettext
    simple, based on GNU gettext, which is the classic pattern
    about 3 years old
  • Jed
    “Gettext Style i18n for Modern JavaScript Apps”
    Made by a coder of Modernizr
    Doesn’t graceful handle a missing translation as per StackOverflow 
  • JavaScript Internationalisation
    A bit old, but still interesting pattern. Very readable code using a “_” function
    Checking in with author if he’s still using the pattern
  • i18next
    Looks like this approaches complete
    Uses JSON resource files
  • i18njs
    Works with Rails translations
  • jsperanto
    requires JQuery
    Similar to Rails
    better featured than other jquery options

Other links:

 

Example of Paper Prototyping

Paper Prototyping

I am embarking on some paper prototyping. It’s been a awhile since I’ve done this work, so I thought I’d brush up the technique with some reading. Of course the standard book on the subject is Paper Prototyping: The fast and easy way to design and refine user interfaces.

If you haven’t heard of paper prototyping, here’s an explanation of the process from Wikipedia:

“Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create software that meets the user’s expectations and needs – in this case, especially for designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products.”

I’ve done extensive work with paper prototyping the past and I love it. The best part is that changes can be made as fast as you can write them up; it is the best way to iterate through the evolution of a design while being guided to real user feedback. Developing with paper prototypes first and then wireframes before developing production code is Living The Dream for me.

Here are a few other articles, presentations and videos on the topic that I like:

 

Have you used Paper Prototyping? How did it work for you?

Never tried it? Does it sound like a good idea to you?