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.
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 - developing responsively with complex page interactions is neither simple, nor easy - but I hope this rundown has communicated the amount of thought and development that went into realizing a relatively simple site.