R.A. Ray is a website designer and developer living and working in Plano, TX. (Site still under development.)

ClearMenu Part 3: Page Behaviors

October 19th, 2011

ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. The previous entry focused on the layout development. This third part focuses on the development of the page behaviors.

The Media Query Problem

We’re quickly approaching the point in our industry where designing websites responsively is no longer optional. With the unrelenting rise in internet use on mobile devices the pages we design and build for clients simply need to work well everywhere. Unfortunately, the technology for effecting responsiveness is fractured and we’re still arguing about best practices. So, for this project I spent a lot of time considering the “right” way to do responsive.

Using media queries to switch styles at certain break-points is the default option at this point and they have their advantages. The switch is slick and fast, but you pay a price for it. The first problem is that not all browsers support media queries. An argument that doesn’t really do it for me as I’m fine with leaving the old browsers in the dust. The real problem is that browsers don’t ignore styles they don’t currently need. They instead download everything (including unused background images) and store them in case they are needed.

For my project I decided to try out a technique for creating visually random background images dubbed the Cicada Principle. The diamond pattern with various sports balls is actually made up of three separate images of different sizes layered in such a way as to make the ball pattern hard to discern. (The different colors are generated using RGBa backgrounds on the various sections.).

This technique yields great results (and can be a mind bender to work out) but caused an issue for me. I didn’t want to serve all of these images to mobile devices. I could hide them using media queries but I couldn’t stop the images from being downloaded, eating up bandwidth, and slowing the page load. Media queries just weren’t going to work for me.

Adapt.js

I had another responsive need beyond loading the minimal necessary styles for mobile. My page needed to trigger some very significant Javascript changes at the exact same time that the styles were switched. Luckily for me Nathan Smith wrote the excellent Adapt.js - a small script that would allow me to switch styles and Javascript behaviors using the same logic.

Adapt.js works by using Javascript to read the horizontal width of the user’s screen and then loading only the specified CSS file for a given range of widths. Because it loads only the necessary styles, mobile devices never have to download superfluous resources. In addition, Adapt.js provides a callback option that fires when a switch is made and passes which switch occurred to your callback function. This is what allowed me to adjust my bindings in conjunction with style switches.

To further optimize this process I created a base stylesheet that is on every page regardless of window width. This sheet contains the very basic styles used in the lowest resolution layout. I set Adapt.js to only engage at a higher width, so at the very narrowest widths, no additional styles are added via Javascript.

Contextual Loading

Load time is a huge consideration for designing for mobile users and so is focus. It’s much easier to get lost on a full page of content when staring at a 3.5” screen and navigating with your thumb. To help with this, I set up the SportsBar menu sections to live on their own pages by default. If you pull up say, the “starters” section on an iPhone you will only see that section and can go to other sections (separate pages) using the menu navigation, now located at the bottom of the page. For larger screens, the sections are all loaded into a single large page using Javascript. Mobile users are served a contextual experience that loads faster and has a simpler navigation scheme.

Scrolling Images

Another feature that is loaded via Javascript, and only for larger resolutions, is the image swapping on scrolling. This behavior was a central mechanism to the entire design and caused me no shortage of headaches (more on that in part four). However, I think it is important to note that no images are loaded by default on the page in another nod toward mobile-first development.

The images are discovered by the script and then added to the page. Users on mobile devices don’t see the food images by default and are unencumbered by waiting for them to load. Instead, smaller resolutions can click on an item to get a simple light box presentation.

There are other things that could be mentioned, but I hope this rundown has communicated the amount of thought and development that went into realizing a relatively simple site. Developing responsively with complex page interactions is neither simple, nor easy. I’ll cover some caveats and concerns in the final entry into this series.