design

Pope exhorts us to reflect in silence during 2012 Communications Day

Pope Benedict XVI's message for the 46th annual World Communications Day has been published on the Vatican website. We learned earlier that his theme for this year is silence, and the message is brief and impactful.

One passage that stood out in my reading was the following (emphasis mine):

Attention should be paid to the various types of websites, applications and social networks which can help people today to find time for reflection and authentic questioning, as well as making space for silence and occasions for prayer, meditation or sharing of the word of God. In concise phrases, often no longer than a verse from the Bible, profound thoughts can be communicated, as long as those taking part in the conversation do not neglect to cultivate their own inner lives.

Making your current Drupal theme responsive, simply

For a few of my smaller sites (like my portfolio website, www.jeffgeerling.com), I've had a little todo item on my list for the past year or so to make the them 'more responsive'—mostly meaning "make it legible on an iPhone or comparable Android phone". Most tablets I've used render traditional 960px layouts appreciably well, including the iPad, Kindle Fire, Samsung Galaxy Tab, etc., so I want to just focus on making the websites usable on smartphones.

What we had, and what we're going for (which one seems more readable and user-friendly on a small screen?):

Life is a Prayer.com - Responsive Design (Before)    Life is a Prayer.com - Responsive Design (After)

I'll show you how I quickly (in less than half an hour) added a <meta /> tag to the site's </code> tag to instruct mobile phones on the width of my site, and how I added a simple <code>@media query to my theme's stylesheet to apply a few layout rules to make the design of the site better for mobile phones.

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: