Visual Design

Constructive Activism Badges

In the previous article, I illustrated how a portal could be specially designed for activist efforts. Now I want to turn my attention towards enhancing activism badges, in order to address some of the needs that have come up among the Free Alaa supporters.


Badges are graphics that bloggers and website publishers representing generally affiliations. Traditionally, they are image references which point to graphic files, such as GIFs.

the Constructive Activism Portal

Here’s a couple of ways to design community websites. On the left are some schematic layouts of front pages to websites; the colors are there for illustration and don’t have any semantic meaning.

Introducing the New Design

If you’ve been reading Civilities through an RSS reader, as 79 Bloglines subscribers presumably are, you may be missing some of the design changes I’ve introduced today. I really wanted to make the front page more pleasing to read on its own, and also get ready (or rather, procrastinate) for the long-overdue Drupal upgrade.

The logo is sharper. The old Civilities logo was a

The Webzine Drupal Module

This is a technical design document for the Webzine module for Drupal. It will be updated in an ongoing basis as I work with other Drupal developers.

The Webzine Format: benefits for online publishing

A decade ago, the term webzine came into vogue simply to mean a web-based magazine. I’d like to breathe new life into it to describe an alternative format to the weblog for online publishing. Whereas the design fundamental of weblog is the reverse-chronological format, the design fundamental of the webzine is separate departments based on the style of the writing. I’m going to describe here how this would be useful for online communities/publishers.

The Elegant Vote Predictor

In spite of the convention hoopla over blogs, there’s still some terrific non-blog sites out there for the campaign. Have you seen Electoral Vote Predictor 2004? 72,000 people did the other day. It’s the one political website I read everyday. Now, the NYTimes has a slick interactive electoral map that gives a slew of information about not just the Presidential race, but House, Senate and Gubernatorial (I love that word; they don’t use it) races. Not to mention a key map of the Nader factor — which stage Ralph is at in getting on the ballot in each stage. But, interactive as it is, it doesn’t tell me anything new.

Best resource for Javascript help — QuirksMode

I’ve updated the discussion systems to leverage dynamic HTML better– namely, by making the message bodies collapsible. See a page where users have responded.

I’ve made my best effort to make them multi-browser compatible, with the help of QuirksMode, a website by PeterPaul Koch of Amsterdam. In every (web-browser) generation there comes along a website which clearly and plainly illustrates the different ways that each browser implements web standards (javascript, DOM, CSS). QuirksMode is it today, and for the foreseeable future. Koch’s illustrations are simple and elegant.

The utility of headlined news

How important is it to use headlines to organize a community/news website?

It’s hard to think of a world without news headlines as we know them today, but that existed before 1889, when Joseph Pulitzer stretched headlines beyond a single column and thus made them a more prominent part of the front page.

Story types

This describes the story types (akin to departments in magazines) used by Civilities to drive the layout, and help the reader know what’s what. This is in contrast to the all-content-is-blog-posts mentality pandemic through the blogosphere.

Web design, part II: Why are they not called weblongs?

A look at the visual growth of weblogs.

Web design, part I: setting a good width

Web pages should fix their width to a size that the reader is used to; in printed publications, this is usually between 60 and 75 characters. Here we compare the paragraph widths of some popular media websites.
Syndicate content