Just Write

Part 2 of 2

Part 1 was pub­lished last week.

• MM:

You describe your role as “web devel­oper and infor­ma­tion archi­tect” includ­ing “Cold­Fu­sion, Javascript, HTML IA choices? Did you use any per­sonas or wireframes?

• DL:

Orga­niz­ing the con­tent can often be tricky, and there’s been a num­ber of dif­fer­ent struc­tures over the last sev­eral years. We knew we needed to clean things up, and we wanted to group the con­tent together more over­all. In the col­le­giate world, there are a lot of phrases that maybe aren’t the best but are com­mon­place and expected, so we did a lot of research to see what kind of lib­er­ties we could get away with. We ended up with two wire­frames, and con­ducted some focus groups and user test­ing to see what was most successful.

• MM:

Tell us about “Biola red.”

• DL:

Pan­tone #185. Biola’s col­ors are red and white, so our web sites need to fea­ture that color in some capac­ity. Usu­ally it’s just in the mark, but on the Under­grad site it’s used more prominently.

• MM:

One of Godbit’s pre­mière inter­view­ers, Yan­nick Lyn Fatt, had some ques­tions for you on the forum:

what was the inspi­ra­tion for the design (also the print design since the web­site was based on that)? I’m guess­ing the fact that the Uni­ver­sity is in SoCal had some­thing to do with it (cor­rect me if I’m wrong) but the design is cer­tainly unusual for a school website.

• DL:

Here’s Jes­sica Nel­son on that:

The gen­eral con­cept behind the design was the idea of con­ver­sa­tion. We wanted the stu­dents and par­ents to feel like the uni­ver­sity was invit­ing them in to Biola’s cul­ture. The mor­ph­ing that occurs in a lot of the illus­tra­tions comes from the idea that Biola is a uni­ver­sity whose faith is inte­grated into every major – and that the cam­pus on the whole is very inte­grated. We wanted to com­mu­ni­cate the com­mu­nity that exists here, and the crossover between majors

* YL:

Also what was the message/​feeling that you wanted peo­ple to get from the design of the web­site. Did the prin­ci­pal and other admin­is­tra­tors give you and your team free reign over the design? Did they play a role in giv­ing you ideas for the design?

• DL:

I’ll let Brian Miller, who was the project man­ager for the entire Biola Under­grad cam­paign, answer that one:

When stu­dents visit our web­site or read our ads or print mate­ri­als we want them to expe­ri­ence a high level of qual­ity, pro­fes­sion­al­ism and clear com­mu­ni­ca­tion that leaves the dis­tinct impres­sion that Biola is a uni­ver­sity focused on its mis­sion to equip men and women to impact the world for the Lord Jesus Christ. The design style itself is not intended to be the focus, but rather the back­drop to the mes­sage we want to communicate. We believe the design and lay­out will serve to draw peo­ple in and set a back­ground tone that enhances a curi­ous student’s expe­ri­ence with Biola as they explore.

Biola admin­is­tra­tion has been very sup­port­ive of our endeav­ors to cre­ate qual­ity mar­ket­ing materials. They have empow­ered us to make deci­sions that are in the best inter­est of the uni­ver­sity and we are very thank­ful for that.

• MM:

Your blog men­tioned the lack of “an ele­gant Cold­Fu­sion solu­tion”, that you “needed some­thing new”:

fol­low­ing the MVC/​MTV as much as I could (it’s the Django influ­ence on me) and the cus­tom tag I designed merely includes two files. The first is some­thing like a Django view except of course it doesn’t deter­mine which tem­plate will be called; it just sets up some vari­ables that the tem­plate will have access to. The sec­ond is the base tem­plate that the con­tent page is extending.

So, is that a cus­tom CMS, or what exactly in the backend?

• DL:

It’s not a full-​fledged CMS because most of the con­tent sit in html files on the server and are browsed to directly. That’s why it’s only mar­gin­ally sim­i­lar to Django tem­plates. Pieces of con­tent are man­aged by a Cold­Fu­sion solu­tion I designed (a “per­son­al­iza­tion sys­tem” for lack of a bet­ter name). All the links in the footer and the coun­selor greet­ings and pho­tos are from that sys­tem. Of course that makes it com­pli­cated when some of your con­tent is in the file sys­tem and some is in a data­base. But when you’re deal­ing with a server that doesn’t have regex URL han­dling… well you do what you can.

• MM:

The “per­son­al­iza­tion sys­tem” sounds inter­est­ing, as a way of per­son­al­iz­ing the site based on each person’s activ­ity. You say “It’s cur­rently only being used in a few places; one of the unfor­tu­nate real­i­ties is no one has a lot of time to sit and think about what’s pos­si­ble.” Any thoughts on how it works and whether it can that be automated?

• DL:

It’s based on the infor­ma­tion the vis­i­tor gives us as well as basic visit pat­terns, and on the con­cept of “goals” that the admis­sions staff wants each vis­i­tor to accom­plish (which could be com­plet­ing a form or just vis­it­ing a spe­cific page). The value, or pres­ence or absence, of any one of these bits of data can be lever­aged to influ­ence pretty much any­thing on the site.

For exam­ple, every fea­ture on the home page could be adjusted to adver­tise events or con­tent that is most likely appro­pri­ate from where you’re at in your research and inter­est in Biola. Or, every sin­gle stu­dent quote could be from stu­dents that are from a sim­i­lar eco­nomic or cul­tural back­ground. There’s a lot of poten­tial. Ulti­mately, I think the sys­tem will need to be imple­mented in some­thing like Django in order for that poten­tial to be real­ized. Split­ting up con­tent between data­base and file sys­tem is a hindrance.

• MM:

Any spe­cific chal­lenges bring­ing the print design of the cam­paign to the web?

• DL:

One of the tougher chal­lenges was keep­ing file size down. The many graph­ics and tex­tures made that very dif­fi­cult. In the end, it’s still a pretty hefty down­load but it could have been worse.

• MM:

I noticed the default blue+underline links; is that for acces­si­bil­ity purposes?

• DL:

One of our high­est pri­or­i­ties was to make the infor­ma­tion easy to find. The cre­ative ele­ments and illus­tra­tions are very impor­tant, but we wanted the con­tent itself to be clean and read­able, and links to be obvi­ous. I think that’s why we didn’t stray far from the default blue.

• MM:

Elas­tic lay­out, very nice.

• DL:

Thanks! That was a fea­ture I was very inter­ested in adding. I cre­ated an ear­lier ver­sion of the core lay­out CSS, and it used em-​based dimen­sions so that the lay­out would enlarge or dimin­ish based on the font size you had set. We quickly real­ized that sort of approach wasn’t best for our core audi­ence, and Tim worked on imple­ment­ing the elas­tic lay­out you see now. It’s one of my favorite ele­ments, espe­cially the ban­ners at the tops of the main pages that adjust to the size change.

• MM:

Search­ing the site for “web design” yields zero results. Does Biola teach web design/​development, and do they teach web standards?

• DL:

Unfor­tu­nately you’ve stum­bled across a weak­ness there: it’s not a full-​text search, just keyword-​based and we’re miss­ing a few key­words. Biola does in fact have an excel­lent art major BFA and a design empha­sis. While tra­di­tion­ally much more print-​oriented, the web courses are get­ting better.

A friend of mine has started teach­ing the classes and he’s very standards-​aware and teaches CSS and valid XHTML. I had the oppor­tu­nity to guest lec­ture last year, and will be involved again this year so I’m really look­ing for­ward to that. The inter­est in web design is grow­ing, and I’m really hop­ing more stu­dents come into the pro­gram with the pas­sion to learn and excel. Look for great things to come from Biola-​trained web designers!

• MM:

Any rec­om­men­da­tions for new web design­ers? How did you learn, and how should new web design­ers learn?

• DL:

The desire to learn is most impor­tant. Get your hands dirty. Learn how to write semantically-​meaningful markup (you need good source mate­r­ial). Start play­ing around with as much CSS as you can. Don’t know what a spe­cific prop­erty does? Find out! And get inspired by scour­ing the web for great designs. Fig­ure out how they did what they did. Then start adding to your arse­nal with things like DOM script­ing and frame­works. The more you know about the big­ger pic­ture of web devel­op­ment, the bet­ter a designer you’ll be. Oh, and attend Biola.

• MM:

Thanks again.

• DL:

Thank you, Michael, it’s been a plea­sure.

This arti­cle is © Mont­gomery 2007. Some rights released with a Cre­ative Com­mons Attribution-​NonCommercial-​ShareAlike 2.5 License.

Also pub­lished at God­bit.