design

For anyone involved in web development for news publications, one of the most important aspects of the website is its textual layout. Your site must be readable on a variety of devices, and, failing that, you should try to make it look great on at least one platform (usually the desktop browser)—typically other platforms will follow.

There are a few things to watch out for:

1. You can have lines too close together—use line-height to give proper spacing/breathing room between consecutive lines of text.
2. You can have paragraphs too close together—add some margins between paragraphs so they are divided visually.
3. You can have too narrow a viewport for your content, meaning users spend more time scrolling than reading. (However, you don't want to have it too wide either—sometimes a semi-fluid layout can be useful).

I just spent a few hours working on making a better print.css file for the Archdiocese of St. Louis' website, and, imho, it was time very well spent.

In a meeting just last week with the St. Louis Review staff, I noticed that three different people on staff had printed out pages from archstl.org, and those printed pages looked like junk. I had neglected spending much time with the Archdiocese's print styling (in a print.css file) when I originally designed the site, and I decided it was time to work on it a bit.

I first hid all non-essential elements (graphics, search, navigation, sidebars), then worked on styling the main body of the page a lot nicer. Now, it prints relatively well across Safari, Chrome, FireFox, and Internet Explorer. However, there's a weird bug in FireFox that causes some pages to print with a blank leading page, then with cut-off content on the second page.

At least it looks pretty :)

I think you'd be surprised how many people print out articles and pages from your website—especially if your site is heavy on written content. It's a good idea to cater to them just as you would to mobile readers and those using less-than-ideal browsers (<cough>IE</cough>).

Reposted from Life is a Prayer.com:

Today Google announced they'd help advance web typography by hosting open-sourced fonts on their CDN, and by giving the code to easily embed fonts on websites on a new website, the Google Font Directory.

It was amazingly simple: just copy the <link> code and paste it in your template's header, then set any element on your page to use the Google-provided font(s). I started using OFL Sorts Mill Goudy TT, and I like the look (except for the lower-case y, which seems to be cut off).

(The code simply adds an @font-face declaration via a Google-hosted CSS file... I wonder if it's legit to self-host the CSS and font file; I haven't read through the terms and conditions yet).

I'm thinking of using this library for a few other projects on which I'm working. Much easier than Typekit, and it doesn't require any javascript or flash overhead, like alternatives such as Cufon and sIFR do. (Source).

I finally had a little time today to update the Archdiocese of Saint Louis' 404 Not Found page. Drupal has built-in 404 handling, so I simply created a new node, added in the content of the 404 page in the node body, and went to the 'site information' page to set 404 errors to that node.

In redesigning the page, I wanted to fulfill two goals: Continue Reading »

I was just invited to the Drupal Gardens private beta today, and I have to say, it's a leap forward in terms of building out quick, beautiful, and well-designed websites. But it takes things many, many, many steps further than a simple Wordpress or Blogger site.

Drupal Gardens is built with Drupal at its core, and every site instance you set up is basically an entire Drupal website (and it's completely exportable, so if your needs grow beyond the Drupal Gardens garden, you can re-plant on another server). This means you can have multiple users (with multiple permission levels). You can do relatively advanced theming, right out of the box (and without knowing too much about HTML, CSS, etc.!). You can set up multiple content types and set up specialized databases and queries. There are a thousand and one things you can do with DG much more quickly than by-hand.

From nothing to full site, in about 2 minutes.

There isn't a whole lot missing from Drupal Gardens. I think it will transform the way I approach smaller website design jobs - instead of working locally and starting from scratch, I might as well build out a Gardens site (collaborating with my clients, or whomever I'm working with), then let the client take over and run with it.

Once Drupal Gardens is out of beta, expect to hear a lot more. I think this system could help a lot of parishes in a lot of ways—not the least of which is financially!

I have been asked more times than I care to recall if I know of any good example parish websites, and, if not, what would make a good parish website.

Unfortunately, I don't know of any parish website I would say is "great." A couple "good" or "okay" ones, maybe, but nothing to call home and tell my Mom about. So, what are my criteria for a great parish website? One of which I would be proud to call myself a member?

Design

The website must be pleasing to the eye (just like the Church should be). An ugly, or 90s-looking site, doesn't attract or hold my attention. It must follow the simple principles of design: color, appropriate use of negative space, a common theme, and good font design must all be taken into account.

Design also means the site is easy to navigate. It should have only a few main navigational options, and shouldn't be jumbled with a boatload of information on every page—and most especially the home page. (Read more on this topic).

Organization

Know thy audience. What is the most important information for those coming to your website? Are you targeting your parishioners, or visitors, or both? Is the school website separate, or integral to the parish website?

WAY too many parish websites start with a cruddy 'splash' page that takes a long time to load, looks stupid, and wastes my time. Give me the parish page by default, and let me click over to the school page if need be.

There are a few things which, in my mind, must be one every parish website's home page: Continue Reading »

After reading Seth Godin's simple article on reducing complexity, entitled Fear of Apples, I felt compelled to write  short piece about steps one could take to make users' browsing experience that much nicer.

Basically, by reducing complexity and limiting people's options, you free them to (a) choose easier, and (b) remember what they've chosen.

As a quick example, we start with the Archdiocese of Saint Louis' current website, which gives users a metric ton of choices for navigation:

15 Navigation Options + Search + Quick Links

The way things are, people coming to the site for the first time have over 24 functional choices to make; it's not readily apparent what are the most important navigation options on the page. Continue Reading »