Responsive Web Design Archives

Quick Tip: JavaScript Resize Timer

December 29, 2014

I wanted to share a little trick that I use a lot when building responsive sites that can be a huge help for your front-end performance, which I call the “resize timer”:

Imagine the following scenario: you have a series of horizontally-aligned boxes on your page, which should be equal height. Of course, this is easy to pull off with Flexbox, but browser support isn’t exactly where we want it just yet. Use it where you can, of course, but you might still need a JavaScript-based fallback for older browsers.

Continue reading→

T-Pro Solutions

August 7, 2014

In Portfolio

At first glance, T-Pro Solutions is a pretty typical marketing site: hero carousel, big banner images on each page, and a whole mess of calls-to-action. There's nothing wrong with a site like this, but they're not always the most exciting to build. T-Pro's site, however, has a little bit of magic under the hood that's worth sharing.

Continue reading→

Kid Turn In

November 30, 2013

In Portfolio

Before taking a family trip to Disney World in the spring of 2013 with his daughter and nephews, Buckeye Interactive President Brad Griffith prototyped a quick application called Kid Turn In. With the application he would print a temporary tattoo with a QR code that, upon being scanned, would send an alert with the scanner’s location to the adults on the trip. These tattoos were applied to the children in the hopes that if they were to be separated from the group a good samaritan would scan the tattoo (the kids had been instructed to point out the tattoo if they got lost) and the parents would be more quickly reunited with the little one.

Continue reading→

Why Going Mobile Matters

July 16, 2013 @ Why Going Mobile Matters

Digital Strategist Sarah Davis and I talk mobile strategies, numbers surrounding phones and tablets, and the differences between mobile apps, mobile sites, and responsive sites in this free Buckeye Interactive event.

Continue reading→

An Introduction to Sass in Responsive Design

October 4, 2012

In Code

I’ve been wanting to explore CSS pre-processors for several months and re-building this site seems like a good chance to get my feet wet. I’ve been following the debates between the two most popular pre-processors, Sass and LESS, and decided that for my purposes and experience, Sass would be a better fit.

Using a workflow that I learned in the Build Responsively Workshop, I wanted to create separate .scss partials for each of my breakpoints, then import them into my main stylesheet using media queries and @import statements within my main Sass stylesheet (style.scss). Normally I avoid @import statements in my CSS files (which would prevent stylesheets from being downloaded in parallel), but the compiled nature of Sass means that the only time these files are actually imported is when the actual CSS files are generated. Importing multiple Sass partials also a) keeps my styles organized better (with no performance hit) and b) allows me to easily re-use partials for alternative stylesheets.

Continue reading→

Notes from Build Responsively Workshop

July 23, 2012

In Conferences

The other week I attended the Build Responsively workshop, presented by Sparkbox out of Dayton, Ohio. The workshop was two full days of responsive web design evangelism and techniques. Being a geek in a room full of other geeks, I thought it would be cool to write my notes in Markdown, then put them in a gist so I could easily share them while updating them between sessions.

Continue reading→