It’s no secret that I’m a Quaker. I discovered the Society of Friends in high school through a Quaker teacher, and I was fascinated by the experimental Quaker attitude toward faith and practice, with present guidance from the Inward Light.
I cautiously began attending a Friends Meeting in San Francisco around 1999. My interest in conscious business began around the same time, sparked by working for Ben & Jerry’s. It was the funnest job I ever had, and in my short time there I went from scooper, to supervisor, to managing my own shop.
Before that, I had a fairly negative view of business, but at Ben & Jerry’s I began to appreciate the role business can play in society by creating innovative ways to make life more abundant— and not just in terms of body mass, but through rich relationships and opportunities for creative interchange. The scoop shops where I worked were subject to all the same struggles and pressures that face any business, and much of our day-to-day activity was menial. But the company’s social mission provided many of us— as employees and managers —both inspiration and opportunity to serve our community in concrete ways, at work and beyond.
After my daughter was born, we moved back to Virginia in 2001. There I found a job at Whole Foods Market, another idealistic company that proclaims high standards for its products and customer service, and sets a high bar for team member happiness, vendor relationships, and community support. I worked with Whole Foods Market for nearly six years, and my experience there was both rewarding and instructive. Since then, I’ve continued to follow the writings of co-founder and CEO John Mackey with interest.
My time at Whole Foods spanned a meteoric rise in the stock price which accompanied significant company growth, and these factors no doubt attracted many mercurial and misguided individuals into positions of leadership. I came into contact with more than a few small-minded administrators whose uninspired influence was a stain on the business. But I also worked with dozens of earnest and dedicated team members and leaders, for whom Mackey’s visionary core values offered a meaningful stake in serving our customers and community with distinction.
Whole Foods Market encouraged me to sense the vision and purpose in my work, and to take stock of my own core values. Over time, this inspired me to go back to school— and eventually, to leave the company to pursue a new vision.
Since 2007, I have operated my own business. As a one-person studio, I strive to bring the vision of conscious business to my clients and my community through steady creative work and caring service, but it’s clear I still have a lot to learn.
The word “Quaker” once suggested a reputation for truth that Quakers earned in the domain of conscious business; non-Quakers have capitalized on that reputation by using the “Quaker” moniker in a variety of brands. Quaker heritage and Quaker practice may offer valuable lessons for conscious business, but my journey with the Society of Friends has offered few hints about what those lessons might be.
Contemporary Friends have a lot to say about equality, peace, service, activism, and the inner life that gives rise to Quaker testimonies; but few Friends actively engage the heritage of Friendly enterprise. Our religious education covers the heroic influence of Quakers who championed religious liberty, repudiated slavery, and crusaded for universal suffrage; but the failures and triumphs of Quakers in business are mostly ignored and forgotten.
I would like explore and illuminate this blind spot by looking at Quaker writings on the topic, and examining contemporary writings about conscious business from a Quaker perspective. I have several books in my queue, including John Mackey’s own Conscious Capitalism: Liberating the Heroic Spirit of Business and a couple books by Friend Margaret Benefiel. But the first book I want to review is Servant Leadership by Quaker Robert K. Greanleaf. In Servant Leadership, Greanleaf confronts the trials of a society dominated by large institutions, and outlines a restorative model of governance that is central to understanding conscious business.
The idea for this series came to me in December, but I put it on hold after my dad’s death in January. Though client work is my main priority, I’m eager to begin writing as way opens, and I will post something about Servant Leadership here when I am ready.
]]>But most of what I’ve done for EJW makes the publication run more smoothly behind the scenes: The CMS allows the editor to publish articles in multiple formats with one pass, including Web, PDF, and metadata feeds; previously, the editor had to manually enter the same information numerous times across several documents. The site’s new publishing platform has allowed us to continue pushing subtle refinements and new features with every issue since.
]]>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.
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:
<title>
tag both unnecessarily present the site’s URL instead of rich branding or useful content.After discussing the design goals at length with the editorial team, I have three main intentions for the new homepage layout:
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:
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.
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:
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.
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!
1 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.
2 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).
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.
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.
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.
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.
]]>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:
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.
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.
]]>