Design Opus

Online magazine redesign project: Grid

2009-11-02T22:36:19Z

This post is part of the Free Liberal open redesign.

In my last post I talked about setting goals for the design, and I mentioned the challenge of translating these goals into objectives that move the project forward. Building an online magazine site with thousands of articles could demand work on several scales. One of the first tasks is to determine what features will deliver the most immediate value to the site editors and readers.

In a nutshell, the biggest problems with the old site are the haphazard presentation of content on the homepage that fails to showcase the most important content, and the overwhelming lists of links that fail to help users find what they need. Both of these stem from the original blog-bound design that has served the site for six years, but we can do a lot better now that we have clear communication goals. So the first things we’re working on are migrating old articles into the new site, building a layout with a clear hierarchy of communication needs in mind, and making a meaningful site map that ties the content together through a focused navigation system.

I’ll come back to content migration in a moment. Fire up your browser to check out a draft of the new hompage layout.

Layout objectives

Before we talk about the tactical decisions that inform the redesign, let’s look at the current Free Liberal homepage again to see what we’re working with.

The original Free Liberal homepage

The overall look and feel of the current Free Liberal homepage is of a special interest political blog surrounded by miscellaneous content and links:

The main content area showcases syndicated columns instead of features that express Free Liberal‘s unique voice and vision.
The bulk of content in the sidebar areas is third-party content tangentially related to the site’s communication goals.
The header area and <title> tag both unnecessarily present the site’s URL instead of rich branding or useful content.
The main navigation links mostly refer to the defunct print edition.
A Google search box provides the only full index of Free Liberal content, but it is separate from the main navigation and site search is not selected by default.
Apart from the convention of underlined links, there are no affordances to highlight the function of various features. A signup form for Free Liberal eMail updates is hidden below the fold sandwiched between miscellaneous content.

After discussing the design goals at length with the editorial team, I have three main intentions for the new homepage layout:

Eliminate the miscellaneous content, outdated navigation, and peripheral material— start with a clean slate.
Put the spotlight on Free Liberal features, rather than the syndicated columns; the homepage should tell readers immediately what this site is about and guide their eyes to the fresh content they are looking for.
Establish a flexible sense of order by using a grid system for layout, keeping layout styles separate from graphics and colors to allow for issue- or section-specific theme development.

Designing that magazine look and feel

I already had a good idea of the layout I wanted before I began sketching in HTML and CSS: a big content block for Free Liberal features, highlighting content from the current issue, with a smaller space devoted to syndicated columns and the Free Liberal blog. All the content above-the-fold is serialized, divided into sections based on frequency. The current draft illustrates those specifics— without any treatment for type or graphical accents.

Early homepage layout for the Free Liberal

Let’s take a look at what is going on under the hood.

First of all, this site uses the emerging HTML5 standard. I usually build sites on XHTML 1.0 strict, using only meaningful markup to format the content, but HTML5 offers several advantages:

Many cutting-edge browsers and assistive technologies, including mobile devices, already recognize the new semantics offered by HTML5 markup, giving site users a much richer experience.
These features degrade gracefully in browsers that don’t recognize the new markup— most users won’t know that they are “missing” anything, since the content will remain accessible. Scripts such as Modernizr can enhance the interface for legacy browsers such as Internet Explorer and early versions of Firefox’s Gecko rendering engine.¹
HTML5, unlike XHTML, is being developed on the broad consensus of browser developers and web technologists, and using HTML5 will make the Free Liberal site interoperable with the next generation of web applications and semantic web technologies.²

I’m also using microformats to extend the markup into richer, more meaningful content for search engines, browsers, and other web technologies; specifically hAtom and hCard. hAtom provides semantic hooks for browsers and aggregators to help users archive and subscribe to content. This is especially useful for the Free Liberal homepage, which features serialized content almost exclusively. hCard renders contact information machine-readable so that search engines and assistive technologies can make the information more useful. In addition to providing the hooks for authors in hAtom format, hCard also gives us added meaning for the names and address in the site’s footer.

The layout for this site is driven by stylesheets instead of the semantically meaningless table markup that frames the current site. This gives the site a much lighter code-to-content ratio, speeding up page-load times while keeping the content accessible to the growing variety of browsers and devices.

Using Compass and Susy, building a custom layout grid for the homepage was a snap— all without cluttering up the markup with meaningless class attributes.

Early homepage layout, showing grid alignment

Compass streamlines my CSS development by eliminating repetition— it allows me to define styles as abstract mix-ins that can be reused later. I’ve used Compass for fixed-width layouts on several sites, including this one.

But the Free Liberal redesign uses a flexible-width elastic layout— it sits comfortably even on a scant 800 pixel display (handheld displays will be targeted using a separate stylesheet, but the current layout works fine in the mobile browsers I have tested). Normally the complex calculations involved in designing an elastic layout would scare me away or make my brain blow up. That’s where Susy shines. In essense, Suzy is a robot that does the mathematical heavy-lifting so that I don’t have to manually calculate the width, padding, and margins of each column and element.

The result is a simple, dynamic, layout that is ready for the next step: typography, color, and graphical accents. This layout reflects careful preparation of the design for diverse graphical styles that may be applied on an issue-by-issue, section-by-section, or seasonal basis, even using the publishing platform’s built-in stylesheet manager.

Migrating old articles into the new site

Importing the old site’s data into the new database was a simple task, but getting that content ready for re-publication will take some time and thought:

Editors will have to sort the articles into new sections and categories. They also have the option of adding other tags to make articles easier to find.
The CMS will generate clean, human-readable links for each article, but other websites and search engines currently link to static files on the site— some of which rank highly in search results. For each article, someone will need to set up a redirect to forward the old links to the new URLs.
Because of these requirements, publishing the old content on the new site will go gradually. Until then, we’ll continue linking to an archival copy of the site’s current homepage, even while all new articles are being published in the new system. This seems the best way to preserve sanity during the site migration.

Luckily, several people on the editorial team are savvy enough with the technology that this doesn’t have to fall on one person’s shoulders. I recommend starting with the site’s most crucial content— those articles and features from the site’s history that most potently express the site’s identity, vision, and values, and those that are most meaningful to Free Liberal readers. For this reason, I asked the Free Liberal community for feedback on the site’s best content.

Next steps

Along with the homepage, the site will also need templates for individual feature, column, and blog articles. Then, Textpattern’s API hooks will be coded into these templates to allow site updates and other dynamic data to power the site.

But more importantly, we need to turn our conversations about categories and site sections into a site map, which is necessary to build the navigation system. I shall submit a draft site map to the editorial team later this week.

It is also necessary to convert our communication goals into clear affordances for action, the visual accents and graphics that help site visitors intuit how to use the site and identify what to click on. I have a great idea for the standard visual theme for the site, but bringing more affordances into the design will dictate the parameters.

Feel free to add your comments and questions below!

Footnotes

¹ At the time of this writing, I haven’t implemented anything for the older versions of Gecko affected by this— which accounts for less than 1% of all Free Liberal readers according to the site’s visitor logs. If you see anything amiss with the design, and you’re using Camino or Firefox 2, that’s why.

² HTML5 can also be served as text/html without upsetting the handful of MIME-type puritans on the web who care. Since I’m designing for human users, my main concern is what will work in their browsers rather than such fine technical nuances (I have blatantly served valid XHTML as text/html for years).

Online magazine project, day one: Goal [2]

2009-10-28T19:48:57Z

This post is part of an open redesign project I mentioned on Friday.

Before taking on a new project, I always work out a clear vision of the client’s communication goals. This includes focused queries and brainstorming about the character and identity of the site, the needs and interests of its community or audience; it also includes an overview of the content, with attention to how people will use the site.

Listening, sensing & communicating vision

My questions come from training in mediation and my background in visual storytelling, in addition to daily experience as a web developer. It may sound navel-gazey, but part of my purpose is to gain a sense of the project’s spiritual direction by clearly stating and clarifying its big picture goal:

The word goal is used here in the special sense of the overarching purpose, the big dream, the visionary concept, the ultimate consummation which one approaches but never really achieves. It is something presently out of reach; it is something to strive for, to move toward, to become. It is so stated that it excites the imagination and challenges people to work for something they do no yet know how to do, something they can be proud of as they move toward it.

— Robert K. Greenleaf, from Servant Leadership (emphases mine)

This process is challenging for clients who are used to submitting a list of their requirements and getting a quote— but I’ve found this step crucial to crafting a proposal that addresses the real needs of a project, and delivering creative work that solves real problems for site owners and their communities. The process almost always gives everyone new insight into their shared vision and values, or exposes conflict in a constructive way.

Redesign goals of the Free Liberal

On the other hand, it’s not enough to understand the goals of a site— we also have to make a plan for action based on the resources, opportunities, and time available. That means reducing the big dream to concrete actions and focusing on the limited scope of the present.

My Free Liberal project assessment is seasoned by my friendship with the site’s publisher Kevin Rollins, and my acquaintance with the editorial team and other contributors. When Free Liberal was still a print publication, Kevin commissioned me for cover illustrations; since then, I’ve attended several Free Liberal board meetings and social events, giving me a stronger sense of the Free Liberal community.

Moreover, Kevin and I have talked at length about his evolving vision for the Free Liberal as an online magazine, and Kevin included me in the recent ongoing conversation with the editorial team, focused on the Free Liberal‘s identity, branding, communication goals, and redesign objectives.

Those goals were stated most clearly and cogently by Free Liberal science advisor Carl Milsted —here’s my summary and comments.

Be more magazine-like: The new design must project Free Liberal as an online magazine rather than a web log. Brand building will be a major part of this: developing a strong style guide that incorporates colors, typography and various visual standards (graphics, photography, etc.) to communicate the site’s identity through look and feel. Further brand stewardship will fall on the site’s editorial team, by publishing great content.
Organize the site into meaningful, effective navigation: The new site must include easy-to-use archives of content indexed by section, category, and author, cross-referenced with individual articles so that readers can easily find related content.
Cross-platform accessibility and SEO: This is a matter of applying the standardized best practices of building professional websites. By combining meaningful content with light, semantic markup (HTML) and microformats, using only stylesheets (CSS) for visual design, readers can enjoy the site content regardless of what browser or device they’re using. Configuring the site’s content management system to generate human-readable URLs with a clear content hierarchy, along with site maps in XML and HTML, will contribute to strong standards of accessibility and meaningful search engine rankings. The first rule of search engine optimization is to publish great content that engages human readers, which is up to the editorial team, but setting up the site to expose its content to robots is a matter of design professionalism.
Be in the conversation: Invite users to share the site using various social media tools. This again creates a responsibility for the authors and editors to interact with their readers through those tools— setting up social media invites without watching the conversation is poor brand stewardship. But if authors show care, social media tools can offer a great platform to build the Free Liberal community.
Give keys to the authors: The new site should offer authors access to a publishing platform that enables them to easily draft and submit content, relieving editors of some of the data entry. This lightens the burden of site maintenance, allowing editors to select, edit, and publish new features instead of diluting their energy in webmastering.

Next steps: sorting content, site structure, & layout

All the site’s existing content has been imported into a fresh installation of the awesome Textpattern CMS at our development site.

Behind the scenes, Free Liberal editors are developing expressive categories for the site’s content in line with Kevin’s immediate and long-term communication goals. This will help organize both existing and future content into meaningful, effective navigation that is lacking on the current site. With a working idea of the site’s taxonomy, editors can go through the old content, tag it appropriately, and highlight the best article’s from the site’s history.

Related to this is finalizing the major divisions of content into a site map and realized navigation. The top priority here is to separate features from the site’s guest columnists, giving more priority to features in the design.

Aha, the design! I’m currently drafting a layout for the site’s homepage based on the all the above. This layout includes no treatment for the typography, colors, graphical accents, or even content for the site footer— those will come later. In my next post, I’ll write about the tactical decisions that inform the homepage design, and other stuff.

Feel free to post your comments and feedback below. You can also follow @freeliberal on twitter for updates on this open redesign.

Free Liberal open redesign [2]

2009-10-23T19:53:12Z

Free Liberal is an online magazine dedicated to social and cultural entrepreneurship based on the transpartisan liberal values of innovation, trade, trust, and the sanctity of life. Online since 2003, Free Liberal began as a web-based supplement to a print periodical of the same name, using a bare-bones installation of Movable Type to power a simple blog.

Over time, the site gained over ninety registered users, an active community of bloggers and over 140,000 page views per month. Although there have been several patches, the site still uses a modified version of the original Movable Type template— with many of the links, and much content, hard-coded. Apart from articles that appear in the main flow on the homepage, it has become nearly impossible to navigate the site, with Google being the only tool to find old content. Furthermore, the site’s original content is routinely displaced by syndicated columns that the current site give’s center stage.

Back in May and June, we surveyed Free Liberal readers and bloggers and the Free Liberal Tribunal* mulled over the site’s vision, goals and identity.

I met with Free Liberal publisher Kevin Rollins on Saturday, and we talked about steps we could take right away to move the Free Liberal toward the team’s vision of an online magazine. Kevin enthusiastically sanctioned me to begin an open redesign of the site, focused on three priorities:

Establish a clean interface for browsing and reading the site.
Separate out the syndicated columns from the unique Free Liberal features and give prominence to the site’s unique content.
Unify the site’s visual design and branding with the Free Liberal twitter feed and weekly meetup in Arlington.

Those three things, combined with renewed editorial passion for making great content, should lay a good foundation for developing the subtler nuances of an online magazine site: category navigation, site search, etc.

Views from current Free Liberal site

Follow along at home, just like in the summertime when you watch Bob Ross.

Inspired by other open webdesign projects, I will be crafting the site directly in HTML markup and CSS, which will allow quick transformation of sketches into a live prototype. Feel free to follow along in your browser at home: I’ve put up the 503 safety cones already — construction ahead!

Next week, I’ll be posting some sketches and roughing out the layout. Keep an eye on this site’s feed or follow @freeliberal on twitter here! I look forward to hearing your comments, questions, and other utterances.

*The Free Liberal Tribunal consists of gadabout Kevin Rollins, physicist Carl Milsted, Jr., and bramble-bearded sage Robert Capozzi.

Graceland Farm site design

2009-05-20T17:56:08Z

This project was a fun redesign of a site I built in 2006 for Storm Graphic Arts.

What I did

CMS integration: The original site used WordPress to publish newsletters and other content. In order to make the whole site simpler to use and easier to update, Storm Graphic Arts asked me to install a new publishing platform. Now the site uses Textpattern to make updating the site a snap.
Front-end coding: I also updated the code to support modern web standards, using completely valid, semantic, and search-engine friendly markup and microformats.
Web design: I created a meaningful layout accented by farm-fresh colors, with a foucs on usability.

The Graceland Farm logo was designed by Storm Graphic Arts.

Please feel free to click through some screenshots before and after.

About civil initiative [2]

2009-04-29T14:47:18Z

Arizona herder Jim Corbett died in 2001 at the age of 67. But twenty years ago, Corbett was immersed in a protracted human rights struggle known as the sanctuary movement. Part memoir, and part field guide, his book Goatwalking develops the idea of civil initiative, a philosophy and practice of peacebuilding by creative communities. You may ask “Why should I read about civil initiative?” I’ll tell you:

I don’t know.

Civil initiative establishes law through the exercise of natural rights.

Civil initiative is peacebuilding in its most essential form: community action that brings recognized rights into social norms and legal practice.

Civil initiative is designed to protect natural rights by incorporating them into accepted social standards. Instead of depending on government plans or international enforcement, civil initiative focuses on community powers and voluntary effort. Communities that build basic rights into their way of life can bond into networks that extend peacebuilding— across frontiers, ghettos, and war zones where states cannot or will not uphold the rule of law.

“Our central concern is to do justice rather than to petition others to do it.”

In Goatwalking, Corbett explains civil initiative in direct contrast to the uncivil obedience asserted by Thomas Hobbes, the civil disobedience of Henry David Thoreau and the political jujitsu of Saul Alinsky, all of which shatter the bonds of civility and accountability that form the basis of human rights.

Indiscriminately fused with civil disobedience, civil initiative would become do-gooder vigilantism. Civil initiative means doing justice, not just resisting injustice. […] After meeting thousands of victims of civil war over the course of the last seven years, I have come to feel a deep respect for the humanity as well as the realism of Thomas Hobbes. Few disasters are worse than the shattering of civil society.

— Sanctuary, Basic Rights, and Humanity’s Fault Lines (emphases mine)

In action, civil initiative is almost identical to the satyagraha pioneered by Mohandas K. Gandhi¹:

Civil initiative must be societal rather than organizational, nonviolent rather than injurious, truthful rather than deceitful, catholic rather than sectarian, dialogical rather than dogmatic, substantive rather than symbolic, volunteer-based rather than professionalized, and based on community powers rather than government powers.

— Goatwalking (106, emphases mine)

Corbett expands on each of these points in his definition of civil initiative practiced by several civil society organizations that operate on the Arizona-Mexico border.

The principal focus of civil initiative is concrete action to meet the basic needs of victims— for security, subsistence, and liberty. This is bound up with accountability to civil order.

Unsubjugated covenant communities

Unlike the social contract of Thomas Hobbes, civil initiative is both proactive and creative; instead of merely reflecting on the civil bond, civil initiative employes the society-forming covenant as a means, forming bonds of civility without ceding natural rights to the Leviathan:

Social contract philosophers such as Hobbes and Locke use the idea of the society-forming covenant retrospectively, as a mythological explanation of the civil condition’s origins. The covenant community uses it prospectively, as a way to overcome friend-enemy divisions. Covenanting across the divisions that separate “the people” from “the aliens” is the way to establish universal human rights, which governments will then, eventually have to recognise.

— Goatwalking (109)

Questions for you

Civil initiative aims to integrate natural rights into social norms, with a focus on the needs of victims. But I’d like to hear from your experience:

What do you see as the center of your work: the state, the individual, the community, or something else? How does that center affect your efforts?
What roles can art and storytelling play in this form of peacebuilding?
How do you balance expressive peace witness with the substantive needs of victims?
What are the weaknesses, problems, and challenges in civil initiative?

You can leave your questions, comments, and other words below!

I have a few other topics in mind for future letters related to civil initiative and visual storytelling. You can sign up here for updates and other special content. Let me know what ideas you’d like me to delve into.

yours in friendship,
John Stephens

Footnote

¹ In Goatwalking, Corbett writes: “Gandhi comes close to formulating civil initiative rather than civil disobedience, but he misses at the crucial point… By asking to be punished for violating the law, he is forfeiting recognition that basic human rights are the law” (106).

He picks up this theme in Sanctuary, Basic Rights, and Humanity’s Fault Lines: “The most notable distinction is that Gandhi’s indifference to legal defense would forfeit the very laws civil initiative attempts to preserve” (1988).

Again from Goatwalking: “With this proviso that Gandhi was wrong in pleading guilty to violating the law, Gandhian civil disobedience could serve as a procedural guide for civil initiative” (106).