Warning: include_once(/home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-content/plugins/wordpress-support/wordpress-support.php): failed to open stream: Permission denied in /home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-settings.php on line 221

Warning: include_once(): Failed opening '/home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-content/plugins/wordpress-support/wordpress-support.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-settings.php on line 221

Warning: Cannot modify header information - headers already sent by (output started at /home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-settings.php:221) in /home/resonantstudios/gratis/eclecti.ca/public/wordpress/wp-includes/feed-rss2.php on line 8
Eclecti.ca » Sean http://eclecti.ca Like The Internet...but smaller Thu, 08 May 2014 18:30:58 +0000 en-US hourly 1 http://wordpress.org/?v=3.9 Writing for the Web http://eclecti.ca/writing-for-the-web/ http://eclecti.ca/writing-for-the-web/#comments Sat, 09 Feb 2013 03:30:40 +0000 http://eclecti.ca/?p=994 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.


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.


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


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


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.
http://eclecti.ca/writing-for-the-web/feed/ 2
MetaLink: Thursday with 5 links http://eclecti.ca/metalink-thursday-with-5-links/ http://eclecti.ca/metalink-thursday-with-5-links/#comments Thu, 31 Jan 2013 17:47:49 +0000 http://eclecti.ca/?p=975 Test Kitchen tips: Stove-top smoking: Sometimes nothing beats smoking a nice cut of meat outdoors on a lazy, hot day — that is, as long as the weather cooperates. But the great outdoors can get a little testy, especially during these winter months. Even in Southern California. – by Noelle Carter – Tags: food – http://www.latimes.com/features/food/dailydish/la-dd-test-kitchen-tips-stove-top-smoking-20130121,0,5552955.story

Peanut Butter Black Bean Brownies: As of a few days ago, I have started counting my calories a bit. Nothing extreme, but I am trying to be more conscious of what I’m eating. This means more fruits and veggies, less bread and less sugar. My body is thanking me, but my brain is not on the same page. – by Amanda K. – Tags: food – http://amandakbythebay.blogspot.ca/2013/01/peanut-butter-black-bean-brownies.html

Week 5: Legumes – Red Lentil Burgers: I love lentils. Lentil soup is my favorite. But I wanted to try something a little different with them, so I thought this recipe would be perfect! I had read it a while back in an issue of Cooking Light, and I found it easily on their website. – by Everythingevil – Tags: food – http://52weeksofnomnom.wordpress.com/2013/01/30/week-5-legumes-red-lentil-burgers/

The Pizza Lab: Foolproof Pan Pizza: It’s time for another round of The Food Lab. Got a suggestion for an upcoming topic? Email Kenji here, and he’ll do his best to answer your queries in a future post. Become a fan of The Food Lab on Facebook or follow it on Twitter for play-by-plays on future kitchen tests and recipe experiments. – by J. Kenji López-Alt – Tags: food – http://slice.seriouseats.com/archives/2013/01/the-pizza-lab-the-worlds-easiest-pizza-no-knead-no-stretch-pan-pizza.html

If Almonds Bring You Joy, Enjoy More For Fewer Calories: Scientists are starting to discover that the standard way of measuring calories, established more than 100 years ago, may not be terribly accurate when it comes to higher fat, high-fiber foods like nuts. But when it comes to almonds, the count may be off by a whole lot. Food scientists at the U.S. – by Allison Aubrey – Tags: food – http://www.npr.org/blogs/thesalt/2012/08/03/158083010/if-almonds-bring-you-joy-enjoy-more-for-fewer-calories

http://eclecti.ca/metalink-thursday-with-5-links/feed/ 52
M3talinks For 12/12/2012 http://eclecti.ca/m3talinks-for-12122012/ http://eclecti.ca/m3talinks-for-12122012/#comments Wed, 12 Dec 2012 15:30:22 +0000 http://eclecti.ca/?p=971
  • Did you know that Ada Lovelace, the illegitimate daughter of poet Lord Byron, is credited as the world’s first computer programmer? Born in 1815, Ada was raised in a strict environment of mathematics and logic as a child, in order to prevent her from becoming anything like the “insane” father who had abandoned her. Sounds like a great soap opera plot, doesn’t it? (Days of Our Lives, if you’re reading this, get a hold of me).

    tags: adalovelace ada computer programmer woman awesome

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-12122012/feed/ 0
    M3talinks For 12/06/2012 http://eclecti.ca/m3talinks-for-12062012/ http://eclecti.ca/m3talinks-for-12062012/#comments Thu, 06 Dec 2012 15:30:21 +0000 http://eclecti.ca/?p=969
  • If you spend a lot of time typing plain text, writing programs or HTML, you can save much of that time by using a good editor and using it effectively. This paper will present guidelines and hints for doing your work more quickly and with fewer mistakes.

    The open source text editor Vim (Vi IMproved) will be used here to present the ideas about effective editing, but they apply to other editors just as well. Choosing the right editor is actually the first step towards effective editing. The discussion about which editor is the best for you would take too much room and is avoided. If you don’t know which editor to use or are dissatisfied with what you are currently using, give Vim a try; you won’t be disappointed.

    tags: vim editor howto productivity

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-12062012/feed/ 5
    M3talinks For 12/05/2012 http://eclecti.ca/m3talinks-for-12052012/ http://eclecti.ca/m3talinks-for-12052012/#comments Wed, 05 Dec 2012 15:30:20 +0000 http://eclecti.ca/?p=967
  • This is a recreation of the original Command and Conquer RTS game, entirely in HTML5 and JavaScript.

    The current version includes several levels in the single player campaign and multiplayer support using Node.js.

    tags: html5 videogames awesome retro

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-12052012/feed/ 0
    M3talinks For 11/20/2012 http://eclecti.ca/m3talinks-for-11202012/ http://eclecti.ca/m3talinks-for-11202012/#comments Tue, 20 Nov 2012 15:30:24 +0000 http://eclecti.ca/?p=965
  • How to make a Möbius bagel: Sliced just right the breakfast snack makes linked halves with curious mathematical properties

    tags: math moebius bagel breakfast awesome

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-11202012/feed/ 0
    M3talinks For 11/19/2012 http://eclecti.ca/m3talinks-for-11192012/ http://eclecti.ca/m3talinks-for-11192012/#comments Mon, 19 Nov 2012 15:30:26 +0000 http://eclecti.ca/?p=963
  • A straightforward reference for inclusive game design
    Guidance, examples and advice on why and how to cater for gamers with disabilities and other impairments

    tags: accessibility guidelines design games awesome

  • Etherpad Lite is a collaborative editor, sort of like a web-based multiplayer Notepad but with some really amazing features and a really developer friendly community and framework. Etherpad Lite is completely open-source and comes with no douchery what so ever attached

    tags: etherpad awesome collaboration documentation tools

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-11192012/feed/ 1
    M3talinks For 11/13/2012 http://eclecti.ca/m3talinks-for-11132012/ http://eclecti.ca/m3talinks-for-11132012/#comments Tue, 13 Nov 2012 15:30:20 +0000 http://eclecti.ca/?p=961
  • When I was at Microsoft, I was the developer tasked with fixing the Favicon story for IE7. The original IE6 behavior was to download the favicon once–when a user made a site a Favorite. I do not want to go too deep into the details of how this craziness works, but the key piece of information to understanding why it seemed so broken is this: a mapping between the url of the site the url for the site’s Favicon would be stored in IE’s History database and the actually bits of the icon would be stored in the temporary Internet files folder. Thus, if you cleared your history or your cache, or the item expired out of either one, the icon would be gone forever.

    tags: code favicon web design

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-11132012/feed/ 0
    M3talinks For 11/10/2012 http://eclecti.ca/m3talinks-for-11102012/ http://eclecti.ca/m3talinks-for-11102012/#comments Sat, 10 Nov 2012 15:30:20 +0000 http://eclecti.ca/?p=959
  • Now that we have the iPad Mini, web designers waste no time in wanting to distinguish between it and the iPad 2. Tough luck.

    Yesterday Max Firtman explained in detail why that is not possible. Briefly, no JavaScript or CSS property, variable or media query is different on the iPad 2 and the iPad Mini. Both are 1024×768, neither has a retina screen, etc.

    tags: css unit web design

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-11102012/feed/ 0
    M3talinks For 11/09/2012 http://eclecti.ca/m3talinks-for-11092012/ http://eclecti.ca/m3talinks-for-11092012/#comments Fri, 09 Nov 2012 15:30:26 +0000 http://eclecti.ca/?p=957
  • Maya and I have been playing through Windwaker together; she like sailing, scary birds and remembering to be brave, rescuing her little brother and finding out what’s happening to Medli and her dragon boat.

    She’s the hero of the story, of course.

    It’s annoying and awkward, to put it mildly, having to do gender-translation on the fly when Maya asks me to read what it says on the screen. You can pick your character’s name, of course – I always stick with Link, being a traditionalist – but all of the dialog insists that Link is a boy, and there’s apparently nothing to be done about it.

    Well, there wasn’t anything to be done about it. As you might imagine, I’m not having my daughter growing up thinking girls don’t get to be the hero, and rescue their little brothers.

    This isn’t particularly user-friendly; you’ll need to download the Dolphin emulator and find a Windwaker .GCM, the Gamecube disk image with this SHA-1 hash:

    tags: zelda girlgamer gender awesome dad

  • Posted from Diigo. The rest of my favorite links are here.

    http://eclecti.ca/m3talinks-for-11092012/feed/ 0