Online magazine redesign project: Grid

A naked homepage layout

Laying out a homepage for the Free Liberal

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, annotated

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:

  1. The main content area showcases syndicated columns instead of features that express Free Liberal‘s unique voice and vision.
  2. The bulk of content in the sidebar areas is third-party content tangentially related to the site’s communication goals.
  3. The header area and <title> tag both unnecessarily present the site’s URL instead of rich branding or useful content.
  4. The main navigation links mostly refer to the defunct print edition.
  5. 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.
  6. 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:

  1. Eliminate the miscellaneous content, outdated navigation, and peripheral material— start with a clean slate.
  2. 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.
  3. 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.

Free Liberal redesign: Day Two

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.1
  • 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.2

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.

Free Liberal redesign: Day Two, with layout grid

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:

  1. 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.
  2. 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.
  3. 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!


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).

powered by TinyLetter