design

Life is a Prayer - Looking great on your smartphone!

For the first time ever, I decided to make one of my personal sites look good on mobile phones by incorporating 'responsive' design. Basically, I use some spiffy CSS to say "when you're viewing Life is a Prayer.com on an iPhone, or Android phone, or a window smaller than x pixels, change the layout of the site so it's a LOT easier to read.

Lifeisaprayer.com - Responsive design on iPhone 4s

So, if you have a mobile phone that runs iOS or Android, whip it out really quick, head over to Life is a Prayer.com, and tell me what you think (even the comment form works great now!).

If you don't have a smartphone, but you use a modern web browser, try making the browser skinnier until you see how the content on the site re-flows (and images resize) so they fit the window a bit nicer!

Advent Wreath - Vector Illustration

I was recently inspired by Jeffrey Miller's embeddable Advent Wreath widget to try my hand at illustrating and animating an advent wreath in HTML5 with the <canvas> element or by animating an SVG.

My heart was in it for a while, but I ultimately gave up on the project due to the fact that I had already spent a couple hours on it and wasn't happy with my progress...

Advent Wreath - Vector Illustration by Jeff Geerling

However, I did end up with a fairly good illustrator/vector wreath and candles (I spent a bit of time trying to get the flames looking just right), and also created a brush to create the actual wreath, making it look somewhat like an evergreen wreath.

Problems with Android's Back Button

Android's back button is a problem. A big problem.

Others have already identified this in a broad sense, but I wanted to give a few concrete examples of why I (as a guy who wants to simply port a couple apps from the iOS platform to Android) think the back button (especially) is a bad idea.

Disorientation

Mobile phones, and tablets especially, require a lot of UX work in the area of interface orientation. For my extremely-basic CNL app, I've spent hours tweaking little interface elements that change when the interface is rotated from portrait to landscape.

The tendency in iOS is to use a 'back' button with the label of the previous function/screen in a given app in a navigation bar at the top of the current screen. This allows a user to freely move about inside an app, and is pretty much consistent across all apps. Additionally, this 'universal back button' is always at the top left of the screen—just like a web browser.

Best Practices and Tips for In-App iPhone or iPod Touch UIWebView Browsers

Or... "Best Practices of In-App Web Browsers"

Being the usability nut that I am, I have decided that my goal of making a perfect in-app browser for various iPhone apps is an impossible task. But, judging from what I've been able to do so far, and from many different Web View examples I've seen from around the web, there are some basics that every in-app browser should get right.

I'll start by showing the in-app browser in two very well-known iPhone apps: Facebook and Twitter.


Facebook's Browser

Twitter's Browser

Fundamentally, and functionally, these two in-app browsers are the same. And, after looking at maybe a few hundred other browsers, It seems like the list of essential features of a usable in-app browser are:

Moving from Drupal 6 to Drupal 7 - A Themer's Perspective

The transition from Drupal 6 to Drupal 7 has taken a bit of time, and I (like many others) simply haven't had enough time in the past few months to do D7 testing while in the midst of tens of other D6 projects.

I've committed, though, to building out three Drupal sites in Drupal 7, now that we're at beta-3, and I will be posting a few reflections, mostly from a themer's perspective on some changes—the good, the bad, and the confusing.

A New Default Theme - Bartik

Just like Drupal 5/6's default theme, Garland (which is in use on this site right now :-/), Bartik will be seen on thousands of quickly-built sites around the web, and I think the theme is robust enough for this purpose. I'm actually building one site's theme directly on top of Bartik, just modifying CSS through a single stylesheet added by a custom module.

But it's nothing amazing, in my opinion. I think it would've been awesome to have some sort of dropdown menu support in core by this point—but it looks like that will wait until Drupal 8 at least. This is probably the number one most requested feature I get on a lot of the smaller sites I'm asked to build, and having the feature in core would be über-cool.

Druplicon Golf Ball (DrupliGolf)

After having seen DrupliBacon and DrupliCake (there are other great adaptations of the Druplicon as well!), I decided I wanted to get some creative juices flowing this weekend. I present, DrupliGolf!

DrupliGolf - Druplicon on a Golf Ball

Drupligolf is the result of a round of golf, an addiction to Drupal, and a love for the best OSS mascot in existence. (The latter reason will definitely strike a chord with anybody who's shared a drink with the Druplicon in #drupal... and actually drank).

Column in the Review: Catholics should be leaders in online communications

I recently had the first of, I hope, many columns on Catholic online evangelization in the St. Louis Review. I will post the column here for archival purposes, but you can read the column on the Review website as well:

The Digital Continent | Catholics should become leaders in online communications

by Jeff Geerling

The status quo is no longer acceptable.

That was the gist of the two keynote talks during this year's Catholic New Media Celebration in Boston. The Catholic Church needs to become a leader in online communications and social media — and it needs to do so now.

Father Robert Reed, director of CatholicTV, an online and broadcast television network, suggested Catholics practice the craft of media production and web development as a skilled craftsman would fabricate a chalice: As the craftsman labors over every detail and creates a work of art, which leads the priest and those present at Mass to ponder the mysterious and divine Presence within, so should we communicate and design our websites so as to allow Christ's love and beauty shine.

There must be a professionalism to our craft. We cannot settle for anything less than the best, most useful, functional and interactive websites and service on the Internet.

Users Are Stupid - a Guiding UX Principle

About a week ago, a road near my condo was closed off due to construction. Prominent signs were placed at three separate junctions warning drivers to take a detour. Judging by these signs, a rational individual would get the hint and turn right, avoiding any unnecessary danger to his life or his vehicle.

Unfortunately, users (and drivers) are NOT rational when it comes to most decisions. They have a goal, and they'll do whatever they think is best to achieve that goal, whether or not it's allowed, legal, and/or rational.

Case in point: I sat outside and watched car after car go completely around not one, but three glaringly obvious barriers to avoid a two minute detour.

Here's the first warning, at the first intersection:

Road Sign #1: Road Closed
Pretty obvious, eh? Would you drive around this sign?

And, after that gauntlet (5 different signs saying "DON'T DO THIS!"), here's the second warning:

Using Google's New Font Library for Headings...

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.

Dancing Baby (Illustration)

NFP Dancing Baby

Creighton model NFP students will recognize the dancing baby above. I am starting work on a project related to NFP, and I was in need of the image. So, being handy in Illustrator, I snapped a shot of my fiancée's chart, zoomed in on one of the dancing baby stickers, and hand-traced the lines in Illustrator.

I might clean it up a little more sometime, but for now, this will do. After a second glance, it almost looks like a cage-fighting baby. Hmm...