Scratching an Itch: The Gaug.es iPad Edition

Two things up front. I love stats, and I love Gaug.es. I love Gaug.es so much, I have it open as a tab 100% of the time on both my development machine and my iPad. What I don’t love is using Gaug.es on my iPad. There are two small issues that bug me while on the iPad.

  1. I can’t drill-down to the browser detail in the Technology section
  2. The layout is fixed-width and doesn’t work well in portrait

Like I said, small issues. As we developers tend to do, I decided to write a little hack to fix these issues.

Why I Stopped Using 8 Decimal Point Widths and You Should Too

Flexible grids, flexible media and media queries. The three basic building-blocks of Responsive Web Design. And though most of the public debate lately has focused on the second, developers have quietly grumbled about the first. Not an outcry by any means, but minor complaints and frustrations. One of these complaints is centered around browsers and the differences in their rounding of our lovely six to twelve decimal widths. In some of my early responsive sites, I spent way too much time fighting these rounding errors, and some to no avail. Which leads me to a topic I’ve wanted to discuss for some time, but have been holding off until I was positive about my views. But today’s post by John Albin Wilkins has prompted me to get something down in writing.

A Case for RESS

On the new ND.edu we used a combination of server-side detection, media queries and javascript to determine content. We made the decision that not all content needed to be initially loaded for mobile devices, and instead made it available through top-level navigation. This allowed us to drastically reduce the amount of resources that are initially downloaded and the result is a very fast mobile experience. They say a picture is worth a thousand words, so I’ll leave you with an image of the site on a phone next to a 70″ display and some stats.

Hi-res/Retina Display CSS Sprites

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.

Simple Feed Caching with PHP

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

iOS 5.1 Position Fixed Bug

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.

CSS3 Multi-column lists

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.

Emergency Notifications: Getting the word out at Notre Dame

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.

HighEdWeb 2011 Slides and Notes

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.