Category Archives: Geekery

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?

Fixing Inaccessible Content

Accessibilty Conference 2012 SlideDeck: Fixing Inaccessibile Content

Slides

https://speakerdeck.com/u/seanyo/p/fixing-inaccessible-content

Links

1674721777_ffcf817ad2_z

Agile Training

I did a day of agile training today. One way I took notes was twitter; here the highlight reel from those notes:

  • In Agile training today…
  • Agile is a learning system. Don’t know where to start, not sure how to do it, don’t have a good working system? Use #agile.
  • Nothing is sacred in Agile – continually question and re-evaluate the process and change if there’s a better way #agile #kaizen
  • Agile and Time Tracking are incompatible; Agile is designed to get faster – TT has no incentive to get faster. #agile via @mberteig
  • Face-to-Face communication is best – agile teams work best in the same space with no barriers #agile @mberteig
  • The better the communication, the more effective the self-organization #agile @mberteig
  • Great ways to build efficient teams: step one let them self-organize #agile #teams @mberteig
  • Remove dependencies; let people start at the same time & work independently to work @ their best pace #agile #teams @mberteig
  • Check roles and titles at the door; teams need to be skill-sufficent and aspire to being cross-functional #agile #teams @mberteig
  • Have a shared queue for all tasks: people work @ best pace by choosing work from pool of available tasks #agile #teams @mberteig
  • Beware of confusing commitment and estimation – commitments aren’t a gamble, which makes them discrete and small #agile
  • Scrum is good for orgs in crisis, building a new product. Scrum is hard to do, esp. zero defects. #agile @mberteig
  • Return on Investment, Time To Market and Client Satisfaction are the foundation of success metrics #agile
  • Task switching ++decreases productivity. Having >1 project in-flight at a time sounds good, but trades focus for mediocrity #agile
  • If you don’t have crisis early in a new Agile team, you’re probably not doing it right. #agile
  • 1 Team. 1 Project. 1 Room. Zero headphones. You’ll have better communication and be more productive. #agile
  • Do It Right, and the change comes fast. Get it Done and there’ll be no change at all. #agile

If I have time, I’ll add some of my other notes as well.

5909642457_0c21334ae8

Meet BitCoin

If you haven’t heard of BitCoin yet, you need to.

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.

http://bitcoin.org/

Bitcoin has the potential to be a hugely disruption technology – changing business, commerce and politics. Here are some hand-picked articles about BitCoin:

Drupal Club

At my work we brought on board some new interns and I had the chance to work with them as part of their on-boarding. We’re a Drupal shop, so one of the things I did was put together a short presentation on how we think about and use Drupal. It started off as a Zen of Drupal idea, but then I made a Fight Club joke on one of the slides and it was all downhill from there.

And, thus, I present Drupal Club:

[zdvideo]http://eclecti.ca/wp-content/uploads/2011/06/DrupalClub.flv[/zdvideo]

 

website-accessibility

The Cost of Accessibility

Recently, my friend Mike Gifford wrote a great article about Accessibility Tips for Management.  In it, he writes:

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

Accessibility Is Cheap

CMS'esThe 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.

Accessibility is Expensive

Woodworking ToolsUltimately 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.

bugFixCostGraph

Planning for 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?

 

DrupalCon Keynote: State of The Drupal Address

I have found Dries’ State of The Drupal keynotes to be great both times I’ve seen them.  It is fantastic that these presentations, along with all the sessions from DrupalCon are available on Archive.Org.  If you want to skip the intro material, Dries starts his talk at

Below are some notes I made summarizing Dries’ keynote address.

Drupal 7 Highlights

  • Drupal is 10 years old
  • 1 million+ sites use Drupal
    • Governments, Fortune 500, Universities and Non-Profits
    • 1.7% of all sites on the web
  • D7 took 3 years from Feb 08 – Jan 11
  • Lead – Dries, Co-Maintainer – Webchick
  • Major Initiatives: Fields, Overlay, DB, Registry
  • 1000 contributors – 30% more than D6
  • Contributions match a long tail curve
  • 30 Contributors responsible for 50% of D7 core patches
  • 7925 modules, 947 themes, 4322 developers
  • Drupal.org relaunch
  • In Feb 2011: 5 million visits, 25 million page views, 130k unique visitors/day
  • Migrated to Git
  • 1 million+ sites use Drupal, Governments, Fortune 500, Universities and Non-Profits
  • 1.7% of all sites on the web
  • Community of 551 392 people in 228 countries using 186 languages
  • 3000 delegates at DrupalCon 2011

D7 Successes

  • Test Driven Development
  • Updated Development Documentation
  • Usability Team
  • Development Snapshots – Including during Code Freeze
  • Accessibility Team

D7 Problems

  • Empowerment
  • Release Cycle Predictability
  • High Bandwidth Communication
  • Better Priorites
  • Too Many Critical Bugs
  • Performance First

Drupal 8 Process

  • Move from CVS to Git
    • incremental work in Git sandboxes
    • Bigger changes moved into core
  • 5 Gates to pass to move into core
    • Performance
    • Accessibility
    • Usability
    • Documentation
    • Testing
    • No Critical Bugs
  • Larger initiatives will be phased to break into chunks
    • Each chunk must pass the gates
  • No more than 15 Critical Bugs in Core
  • Move from Co-Maintainer to Initiative Owner
    • May still appoint a Co-Maintainer
    • Initiative Owner is like a Mini Co-Maintainer
    • Dries will work with IO and others – not just IO
    • Designed to provide regular High-Bandwidth meetings with IOs
    • First IOs will be appointed in a few months

Drupal 8 Initiatives

  • What is the world Drupal 8 will need to live in?  “The Future is being anywhere at any time, reaching any information or people needed on any device”
  • Clear shift from fixed devices to mobile devices
  • “If we were to start Drupal scratch, we would design for mobile first and desktop second”
  • Drupal 8 need to output content to a wide range of devices
    • Desktop – HTML
    • Laptop – XML driven Flash
    • TV – XML
    • Tablet – HTML5 & CSS 3
    • Phones – Native App
  • 5 Strategic Initiatives for Drupal 8
    1. Multi-Device Publishing will be key – Markup Free Core
    2. Interoperability - Mail, ID, Commerce, Docs, CRM
    3. Drupal needs to deliver a Delightful ExperienceSimplicity and Power are Increasing
    4. Configuration ManagementExportables, UUID
    5. Content Staging
  • Ecosystem
    • Be careful – The future is not just about features
      • “The battle devices has now become a war of ecosystems.  Our competitors aren’t taking our market share with devices; they are taking our market with an entire ecosystem”  - Stephen Elop, CEO Nokia
    • Between equal platforms, the one with the better ecosystem will win
    • We need to continue to invest in the ecosystem around Drupal
    • Ecosystem is what will matter the most