mobile

Making your current Drupal theme responsive, simply

Submitted by Jeff Geerling on April 1, 2012 - 10:19pm

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)

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

Problems with Android's Back Button

Submitted by Jeff Geerling on November 1, 2011 - 10:46am

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.

CNL - Catholic News Live iOS/Android Mobile App

Submitted by Jeff Geerling on March 22, 2011 - 5:20pm

The second app developed by Midwestern Mac is Catholic News Live, or CNL for short. This app, which is the iPhone/iPod Touch/iPad/Android interface for the content aggregated by the Catholic News Live website, showcases a simple list and map layout on mobile phones and tablets, as well as Drupal's great flexibility.

The Catholic News Live website uses the Drupal distribution Managing News, which allows the site administrator to add news feeds that are automatically imported on a set schedule from websites all around the world. Each story is geotagged with a location (if proper locational keywords exist in the article), and then stories have latitude and longitude values for map display.

The iOS app takes these stories and allows users to not only view and read them in a simple list, but also share any story via any popular social media service (making use of the popular ShareKit for this purpose). Stories can also be displayed in a map view using the iOS MKMapView.

The Android app has similar features to the iOS app, but uses Android's built-in sharing service and the Android MapView.

Catholic STL - iPhone App for Archdiocese of St. Louis

Submitted by Jeff Geerling on March 4, 2011 - 12:30pm

Midwestern Mac, LLC worked with the Archdiocese of St. Louis to build a location-aware, news aggregating, and content submission app for the iPhone and iPod Touch. The app, Catholic STL, has three main features, and leverages many different iOS APIs.

The Parishes view (and subviews) shows all parishes (about 200) in the Archdiocese on a map (MKMapView), as annotations, and when a user taps on an annotation's details, he is shown the parish's address, various parish event times, and more links for the parish website and location. The Parishes view also has two different types of search: the user can enter an arbitrary address, and the map will show parishes around that address, or the user can search for a parish by name or by city.

Parish data is managed through Core Data, and was originally imported using a standard SQLite database, using a template provided by our app's core data model (the Base app for the Mac was very helpful in this regard!). We're working on more advance OTA syncing of this data for a point-release.

Adapting Your Website for the iPhone

Submitted by Jeff Geerling on January 13, 2009 - 8:47pm

In the past year, I have seen more and more mobile visitors to some of the websites I maintain, and the lion's share of those mobile visitors are using Safari on the iPhone or iPod Touch. A few of the sites receive more than 5% of their visits from such devices. For those sites, I thought it would be fitting to give them a little better mobile treatment, optimizing the layout for the iPhone.