Erik Runyon

My 2010 article about hi-res background images gave a pretty simple example of how to replace a background image with a 2x version for the fancy hi-res devices that are hitting the markets. In this example, I’ll show you how to do the same, but with an image sprite. And to wrap things up, I’ll leave you with a limitation of the technique.

The latest version of ND.edu makes use of A LOT of external data sources. To make sure the site runs reliably, even in the case of an outage by one of the external feeds, I put together a fairly simple PHP class to handle the local caching of feeds.

It basically works like this:

1. Create the class with the local file-name (whatever you want) and the external source (and an optional expires)
2. The class will check if the local file exists and if it has expired
3. If it has expired, it will try and fetch the remote source
4. If the remote source is a-ok, it will pull a fresh copy and save it to a “cache” folder
5. If remote source is unavailable or too slow, the class will fall-back to the expired (cached) file

While building the most recent ND.edu, I ran into a little iOS 5.1 bug (at least I think it’s a bug). One of the features of the site is a menu with “position:fixed”. Another feature is we load a number of top-level pages on to the homepage for larger screens. So the functionality is such that, if someone is on the homepage, and they click one of the main navigation items, we scroll them to that section rather than loading that page. But we quickly ran into an issue on iOS devices.

Over the past couple of months, our group over at the @NDWebTeam has been redesigning the main ND.edu website. What we quickly realized is that ND.edu has a lot of lists. And since part of our design process was to have the site scale from mobile to wide-screen, we wanted to make use of css3 columns to shiny-up those lists. In the past, we would have floated the list items with set widths, but this is 2012 and we don’t want to do that anymore. Outlined below is the progression our designer Philip Zastrow and I went through to get these lists functioning how they should.

So first thing to do is set the column count and gap. This is where we ran into our first problem.

Back in November, Chas Grundy wrote about our emergency procedure for ND.edu. When we implemented this feature for ND.edu, we based the functionality on a single-source file. This gave the ability to update the message on both ND.edu and emergency.nd.edu quickly and easily. The added bonus to this approach is that we could then use that same file to build a script that could be used on any Notre Dame site to display the emergency message. But I’m getting ahead of myself.

Last week I attended HighEdWeb which took place in Austin, TX. This was my first trip to this conference, and perhaps feeling a little over-ambitious, I co-presented a talk with programmer extraordinaire Jeremy Friesen titled “Feeding the Beast”, which was about encouraging API use around Notre Dame. I also took part in the poster presentation portion of the conference and presented on how we (Marketing and Communications) use a base theme to build all our sites which gives us a jump-start on accessibility and mobile on each design.

The code for Jeremy’s and my talk and the visuals for my poster presentation are up on my GitHub account Also included are Jeremy’s and my notes for the talks we attended. Slides for the API presentation are on Speaker Deck.

As developers, there’s a number of things we should be sure to include into each site we build to help with accessibility. One of the most basic of these is access keys.

A couple days ago in a post-meeting chat I mentioned to my Project Manager Extraordinaire @GtownNick, that I’d like to extend our development time on custom sites by a couple of hours so we could spend a little more time to focus on responsive web design with each build. He responded that just the other day one of our clients was concerned because they resized the browser window on a recent project and elements of the design started to move around on the page. They stated that they would prefer to see a horizontal scroll-bar, rather than have the approved design change with the width of the window. I was confused by this this statement. Why would they not want the site to respond to different size screens?

After some thought I realized that their concerns and subsequent statement was entirely our fault.

It’s All About Sharing Content

One of the basic tenets behind the internet is sharing data. Initially, that was primarily done with HTML. But with the rise of web applications, sometimes plain HTML just won’t do. That’s where API’s and feeds come in. An application with a proper API allows other applications to query it for content and get that content back in a variety of formats, be it XML, JSON, or HTML. Feeds on the other hand are a one-way distribution of data, usually in XML format.

Repetitive Stress Injury (RSI) and I are long-time enemies. For me, it manifests as pain from the wrist of my right hand moving up to near the elbow. This started my senior year of college. Near the end of graduation I picked up my first ergonomic keyboard (an Adesso model) that followed me to my first post-college job as an audio engineer. Since those early days I’ve tried a half-dozen or so split keyboards and wide variety of ergonomic Logitech mice, all the while searching for that magical combination that would reduce or eliminate the aches and pains that is RSI.