Scaling a Mountain of Text

Over the last year, I’ve spent a lot of time focusing on responsive web design. Having been a developer of websites and applications for over a decade now, I understand that the landscape is constantly changing, and nothing could be more true for responsive development. This blog post highlights one of my early lessons learned in responsive web development. I’m sure it will not be my last!

Adaptive vs. Fluid

One of my early attempts at creating a responsive site focused too heavily on defining logical breakpoints, and leveraging media queries to get the various design elements to display correctly at each of these breakpoints. It sounded reasonable at the time, but without the proper balance this approach falls apart. There are just too many devices and thus too many variables. When reducing the size of my browser, the layout would jump at each breakpoint rather than flex between breakpoints. This “Adaptive” approach was a common mistake in early responsive development. In subsequent development efforts I used a grid system and made every effort to make my elements “Fluid” so they would resize gracefully between breakpoints.

Images are fairly straightforward to scale using a pure css solution if you don’t mind displaying the same image across various devices (more on this in a future post!):

img {max-width:100%;height:auto}

But text is a little more challenging, particularly if you need the text to maintain the same structural layout regardless of its parent container. There is no css “magic bullet” to force text to gracefully flex like a fluid image.

Fortunately, in these cases there is a jQuery plugin called FitText to do just that. In this example the text on the top is resized using css and media queries, while the text on the bottom is resized using the Fittext plugin. Drag the corner of your browser to resize the contents.  This may not seem like a big deal when you are just looking at the text. Both approaches seem acceptable at first glance. But when you add some context you can see why this becomes more important.

Let’s add an image, with an overlay to contain the text in this second example. When resizing your browser window, notice how the text and overlay on the left jumps up and down depending on the amount of real estate available in its parent container? Depending on the device being used, this can destroy the design integrity of this element.

Determination vs. Realization

Before starting my first responsive project I was determined to get it right. I explored different fluid grid systems, experimented with different techniques, read the latest books by Ethan Marcotte and Luke W. and debated the various approaches with my fellow developers. All of this helped a great deal, but none of this stopped me from making mistakes. In the end there is no greater teacher than experience.