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:
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:
Want to learn more? Check out these links:
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:
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:
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
What to learn more? Check out these links:
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.
And a neat tool for finding x-y coordinates on a CSS sprite image
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:
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?]]>
If I have time, I’ll add some of my other notes as well.]]>
Bitcoin is a peer-to-peer currency. Peer-to-peer means that no central authority issues new money or tracks transactions. These tasks are managed collectively by the network.
Bitcoin has the potential to be a hugely disruption technology – changing business, commerce and politics. Here are some hand-picked articles about BitCoin:
And, thus, I present Drupal Club:[zdvideo]http://eclecti.ca/wp-content/uploads/2011/06/DrupalClub.flv[/zdvideo]
Without having specialized technical knowledge tied to accessibility, do managers have the skills required to assess if their sites are accessible? In my experience most managers lack the resources to do any accessibility reviews of their sites and so fall back at best reviewing a vendor’s accessibility statement.
Mike makes a very important point here, that we in the Accessibility community need to do a better job of providing information in a broader way and for a more inclusive audience. So in the spirit of moving away from technical information about accessibility, I’d like to provide something of a response or a compliment to Mike’s article, looking at the answer to the question “What is the cost of accessibility?”
The good news about web accessibility is that there are a number of things that limit its cost. Mike’s article lists a number of free, automated tools to provide accessibility testing of websites – auditing your website and comparing it to an accessibility checklist. In addition to these tools, web development best practices can deliver accessibility wins and they don’t cost anything to use, and there are entire organizations dedicated to helping your project identify and implement these types of practices, such as the Web Standards Group. Examples of these practices, to share with your developers, include separating content from display, using semantic code – such as avoiding the use of tables for layout, and using options such as “alt” tags . No only will these practices improve your accessibility, but it will also improve your website’s code quality and Search Engine Optimization. Don’t forget, Google is basically a screen reader; what is good for web accessibility is usually good for search engines as well.
Using Content Management System tools such as WordPress or Drupal can provide significant support for web accessibility. By automating code generation and providing workflow elements such as asking for an alt tag each time an image is uploaded to the website, CMS tools can take on much of the heavy lifting for content developers, allowing them to focus on great content and not getting bogged down in the minutia of accessibility coding. Using a CMS provides many other benefits, making websites less expensive to maintain and easier to manage. Keeping in mind the opportunities to support accessibility when selecting a CMS tool is an important accessibility strategy for management.
The most significant way these practices make accessibility cheap is because they “bake in” accessibility into the foundation of all your web projects. Ensuring accessibility is a core value of your organization and your developers, which means planning for accessibility and measuring for accessibility, is essential to manage the cost of accessibility.
Ultimately web accessibility is not about validation checklists. Checklists don’t have experiences; People have experiences. This doesn’t mean that checklist tools aren’t useful – they are; I use them in every web development project I work on. However, checklists can provide a false positive – that is to say, just because a website passes a checklist, it doesn’t mean the site is accessible. In fact, even if a website can demonstrate that it meets every requirement set out by every accessibility standard, it might still not be accessible, because if someone can’t access the content…then the site isn’t accessible. This makes accessibility a very demanding element of web development and design.
Building accessibility expertise in your team is not simple, fast or cheap. Web develop and design have matured from a task to give as a side-task to a sysadmin or programmer into full, professional disciplines. Building professional websites is now a craft and one of the skills of crafting a website is accessibility, something which wasn’t even a consideration in the early days of the web. Indeed, accessibility itself is discipline rich enough to fill entire books, conferences and careers. This doesn’t mean everyone who builds your website needs to be an accessibility expert. However, proven accessibility expertise is a valuable skill and takes time and energy to cultivate. And, as recommended by Mike, it may make sense for you to engage an external accessibility consultant, such as Ottawa based Further Ahead.
The most common way accessibility is expensive is when it is a project afterthought. Much like security or information architecture, accessibility is a fundamental part of a high-quality, successful website. As work on the website progresses, it will become progressively more and more expensive to include effective and thorough accessibility. Building the value of and expertise in accessibility in your team, through training, hiring and engaging consultants when necessary, all work to help manage the cost of accessibility.
Bill Graham of Wind River, a subsidiary of Intel, writes this about the cost of fixing bugs:
We intuitively know that defects in the field are much more expensive than those found in development. In fact, the difference is bigger than you think. If you find a bug in-house you save orders of magnitude in time and money…Take a look at this diagram (from www.agitar.com). Cost to fix bugs rises exponentially as you move down the development timeline. After you’re shipping your product, the cost per defect has increased 640 times!
What if we consider accessibility problems in our websites the same as bugs in our software? If we take this perspective, then we see accessibility problems as something that is a requirement to fix. Data on the cost of fixing bugs shows us the key variable in managing these costs is doing this work as early in the project as possible. The later in the project a bug is identified, that is to say an accessibility problem is identified, the more expensive it will be to fix it. Now, accessibility fixes may not follow this exact pattern – I’m not saying the cost per defect for accessibility issues is 640 times higher after you ship a website. But I do think the general principle we see here holds true for accessibility issues. It is tempting to thing of functional bugs as something different from accessibility bugs, but keep in mind that if someone on your website can’t access a function, it’s no different than that function being broken.
To plan for the cost of accessibility in web project, it is critical to include accessibility in the project plan from the very beginning.
To plan for the cost of accessibility as a competency on your team, it is critical to include it in your talent development and retention strategies. With legislation such as ADA in the US, AODA in Ontario and other laws in other jurisdictions, it is clear that the legal requirements for accessibility are not going anywhere and will become more strict over time. Adding the accessibility dimension of expertise to your organization will take investment, commitment and time.
I hope this article provides a useful and accessible summary of some of the key issues about the cost web accessibility for managers. What insights do you have? What are the most important things managers need to consider when costing web accessibility?
Below is a list of (mostly) online resource from Quickstarts to Tutorials to Videos and Cheatsheets.
Image Source: http://dribbble.com/system/users/2086/screenshots/121306/shot_1298917103.png?1303485086
The information is clearly in the context of web design, for the most part. However there is quite a bit of information here that is just about visual design in general. I’ve added a few books to the list that I find useful and continue to refer to, a couple of links that I like; in particular I added some links about wireframing.
If you have some links to share, please let me know. I’m think about how this might evolve into a resource page as opposed to a post.
Many thanks to avogadrospimp for asking the question and to materialdesigner and Luchian for the awesome answers.
The Elements of Typographic Style (Book)
Thinking With Type Revised Edition (Book)
Stop Stealing Sheep & Find Out How Type Works (Book)
Web Typographic Guidelines and Techniques
Choosing the Right Font
On Web Typography
Web Design Theory
Principles of Design
The Lost Principles of Design
Principles of Good Web Design
50 Free Lessons in Graphic Design Theory
Teach Yourself Graphic Design
Universal Principles of Design, Revised and Updated (Book)
The Design of Everyday Things (Book)
“I believe Andy Rutledge’s Gestalt series is the best way to grasp the fundamental principles of design. Reading these articles, and many others found on his site, helped me focus on the important aspects in a design and provided a clear understanding as to why elements on a webpage should, look, be positioned and behave in a certain way.” - Luchian
Figure Ground Relationships
Proximity, Uniform Connectedness, and Good Continuation
Design Is History
Designing With The Grid
Outside the Grid
The Importance of Wireframes In Web Design
Ultimate Guide to Website Wireframing
The Importance of Wireframing
Get Wireframing: The All-In-One Guide
35 Excellent Wireframing Resources
Colour Theory in Web Design
The Meaning of Colour
Kuler Theme Generator
0 to 255 Colour Variations for Web Designers
Art Direction and Design
Image from http://www.flickr.com/photos/rohdesign/3307873748 Some rights reserved]]>