Bible Gateway Reborn

Several excellent designers have proposed redesigns of notable or popular sites, including a series of proposed redesigns by Andy Rutledge, the Design Eye series, and the Holistic Design team’s panel presentation at SXSW on their Plazes.com redesign.

For purposes of commentary, education (especially mine), and some criticism, I humbly present my attempt at a redesign of the venerable Bible Gateway.

The Bible Search Site

Bible Gateway is the king of online Bible search.

The site dates all the way back to 1993, and provides free access to the Bible in about 90 different languages and versions. This variety includes about 20 different English versions, and so many other languages that I’ve never heard of some of them before. (Did you know that Amharic is the primary language of an estimated 20 million people, mostly in Ethiopia? How about Cebuano, spoken by an estimated 15 million people, mostly in the Philippines?)

The site was developed by a college student named Nick Hengeveld (did I mention this was in 1993?), who apparently still runs it now in affiliation with the Gospelcom.net network.

The site also hosts commentaries, dictionaries, study tools, reading plans, etc. They even have about nine languages/versions in audio formats, all for free.

Bible Gateway has good content to offer , and many ways to search, read and listen to it. Lots of preferences are available to customize your experience. The interface just gets in the way a bit.

Initial Matters:

This is one designer’s proposal for a redesign of the Bible Gateway home page and an example results page. It is only a pair of proposed design comps, showing one possible redesign.

Moreover, this article is based only on the current website and other public information, without any knowledge of their plans and goals, and does not have the benefit of all the information that needs to be gathered during any true redesign project.

Bible Gateway Today:

Here is a screenshot of the current home page, at 40% original size:

This site is very successful, though the current design is rather cluttered. The pages have retained the same basic branding approach and layout for years, while slowly and steadily adding things to the front page.

This gradual conglomeration seems to occur largely without planning or much intentional design. Whenever they add a feature, it’s added to the home page (with a description) without considering the cumulative effect of all that visual weight gain.

This “design by accumulation” has eventually produced currently cluttered pages. There seems to be no obvious visual path through all that content, and they seem to feel the need to describe and explain every single feature, all on the home page.

Please don’t misunderstand: I’m a big fan of Bible Gateway, and use it often. They were the first to offer a searchable Bible online, first to offer audio verses online, and as far as I can determine, they offer more English versions and international translations than any other site.

The point is, the service they provide (online Bibles) is so important, and the site’s content, search engine and features are so rich and deep, why not breathe some life into the design?

Why not offer a “reborn” Bible Gateway?

Some Opportunities:

Top & Center: Give us your money!

At the very top of the home page, a request for money:

I understand ministries have costs (and that accepting advertising on the site would be even worse), but arranging a request for donations first thing on the page only perpetuates a stereotype and gives the wrong impression. In fact, I’m considering donating $20, in hopes they’ll move the donation request to the footer.

Two Search Boxes: Whatever for?

The function of both search boxes seems identical, so I don’t understand the decision to have two search boxes.

Cluttered Navigation

The navigation bar seems crowded and compressed, presenting an amazing thirteen possible navigational choices. In a font that seems too small to suit the purpose.

My impression is that this arrangement confuses people, and they have attempted to improve matters by emphasizing the color of three related advanced search functions.

Brevity being an indicator of clarity, it might help to have fewer choices, with shorter labels, in larger type.

Cluttered Content

The main content area has a lot of text. Too much text.

Tip: Don’t explain your jokes, and don’t explain all of a website’s features on the home page.

Much of the content in the main column should be moved off the home page to deeper pages. For example, an “Advanced Search” page, or a “Resources” page. Perhaps even an “Introduction” page….

Focus requires removing distractions, identifying what’s important and highlighting it. It requires identifying what’s less (or not) important, and diminishing (or removing) it.

International

A British flag is used to indicate the English language. (What about Irish visitors?) A Spanish flag to indicate the Spanish language. (What about Mexican visitors?)

A Spanish version of the site is offered, but several interface items persist in English.

“Printer-Friendly Page”

There’s a print style sheet, so why maintain “printer-friendly pages”?

Color Scheme: Brown, Black and Gray. And Blue and Red. (With a bit of Orange.)

Accessibility activists might applaud links in the default blue, and using red for “New!” And of course orange for the RSS feed.

To me, they seem too bright, and clash with the brown, black & gray color scheme.

By the way, that brown isn’t what I would’ve chosen originally, but it seems to work for the site.

A Proposed Redesign:

Content Architecture

Signal / Noise Ratio

Pathways of the Eye

Contrast

Repetition

Alignment

Proximity

Disclaimers

Logo

The current logo does nothing for me. What is that sinuous swoosh? As far as the golden star, I can understand that, but it doesn’t seem to fit with the rest.

It seems to me that they simply took the logo for Gospelcom.net and changed the words. Or perhaps it was the other way around.

Does the current logo convey meaning? Or trustworthiness?

Universal Christian symbols: the cross, and the book.
Gateway — an open gateway to God’s word. Considered incorporating a gate in the logo, but can’t think of a way to do so without implying the gate can be closed. Which is not a correct analogy.

So, emphasize the cross, and the book.

Also, no initials! “BG” would look strange in many countries. Answer: graphic logo, and an h1: Bible Gateway (which is also a server-side include, so it can be automatically presented in the appropriate language).

Web Standards (and Accessibility, Semantic Markup)

Hmm…, need to do some testing. Quick accessibility test is to view the page without stylesheets, and it’s pretty good. The plain page is as usable without styles as it usually is.

Source order puts the search box(es) and other content first, which is good.

The print stylesheet is quite good, so why also have a separate “print version?” Handheld stylesheet is … there (not sure how good it is).

The javascript includes for verse of the day has a bunch of inline style stuffiness.

Markup

Clearly, they’re trying. The doctype is XHTML 1.0 Transitional, and they validate to it, with no errors and just a few warnings.

They do provide some stylesheet switching options, for changing the font sizes.

There is some inline javascript that is unfortunately not unobtrusive (a term of art leading to lots of negatives).

<body bgcolor="ffffff" onload="">

In a site with no less than nine (!) stylesheets, why would you do this? body bgcolor=“ffffff” onload=”“
Unnecessary span, though the logo does have an alt element.
Relatively well commented.

Here is a screenshot of an example results page, again at 40% original size:

Globalization

Bible Gateway is truly an international site. They do have two interface languages available, English and Spanish, but I wonder why they have more Bible languages than interface languages.

I would make every word on the page a server-side include. This is one site where separation of the “fourth layer” makes sense. The fourth layer is Data, with the first three layers being Structure, Style, and Behavior respectively.

In the beginning, structure (markup) was separated from presentation (stylesheets). Then, behavior (javascript) was separated from both. Lastly, some have suggested separating out the data. By the way, it might be argued that a content management system (cms) merely represents a separation of content (or data) from structure and the rest.

Back to internationalization: if someone is living in Greece, or Japan, France or Israel, and wants to search the Bible translation in their own language, why should the site’s interface language be limited to English or Spanish?

On the other hand, why have 50 (or more) different translated versions of each page? Answer: they don’t. They offer only English and Spanish pages, and the Spanish page still has a fair amount of English.

Rather, why not separate the data from the structure? Write one home page template, in which each chunk of text is an include, selected from the current language setting?

Note: This article is also posted over at Godbit.