Embrace the Web’s Fluidity with Responsive Design

Stylized computer with blocks flowing out from the monitor.

There’s so much change happening right now in Web design that I have visions of designers in therapy sessions.

“You’ve got to let things go, Bill! You have baggage and it’s holding you back,” the therapist quacks. “It’s time – move on. Responsive Web is here. It’s not Y2K anymore.”

“But, what about control?” I question. “I’m used to being in control. Isn’t responsive design trying to strip this from me?”

“It’s not about control, Bill. You need to revisit your Web design past,” he croons. “Remember, the Web is fluid and does not like to be contained.”

This is the mantra we all must embrace. The Web is fluid. It does not like to be contained.

Let’s Shed Some Baggage Together – Don’t Fear the Scroll

For years we thought all good content must be above the fold – anything of importance should be at the top of the page, visible on the monitor.

In the early days of the Web we were trained to fear the scroll. Why? Remember dial-up? Slow CPUs and primitive browsers? In thosedays, scrolling meant waiting for content to load. Chunk, chunk, grunt, flicker, stutter, grunt.

Today’s Web content can be viewed on dozens of devices – all with different screen sizes and aspect ratios. Today’s responsive Web pages do not have a fixed width or height. They respond – conform to the device they are being viewed on. As pages are viewed on narrower screens, they generally become longer. As well, swiping and pinching change the way we look at page limitations. Consumers are universally schooled in how to manipulate a page with these new gestures.

If we were to continue designing for “the fold” it begs the question, “where is the fold – and on what screen size?” Fast Web connections, CPUs and browsers (even on mobile) make scrolling a non-issue.

Let this one go. Breathe in. Breathe out.

To Understand Our Responsive Design Future We Look to Our Past

A mobile-first approach to Web design forces us to prioritize content so that it’s optimized for a small screen.

People tend to build out to their constraint. In other words, we fill the space we’re given. For example, a desktop Web experience is often deep and broad, much like a brochure – big photos, lots of content, and lots of pages. A mobile website is more like a billboard. It has the same underlying concept and aesthetic as the brochure, but we concentrate on the one thing. We only add content as the screen size allows for a broader view.

Ironically, as we build great mobile Web experiences, we are inherently revisiting our past. We are eliminating bandwidth. We are reducing clutter. We are embracing fluidity.

And we are becoming comfortable with things we can’t control. Which reminds me of this quote:

The control which designers know in the print medium, and often desire in the Web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the Web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’

– John Allsopp, “A Dao of Web Design

Thank you Mr. Allsopp. Your statement is timeless and brings clarity.

The Web is fluid. It does not like to be contained.

Repeat.

Plusone Twitter Facebook Email Stumbleupon Pinterest Linkedin Digg Delicious Reddit
This entry was posted in Design, Mobile by Bill Basler. Bookmark the permalink.
Bill Basler

About Bill Basler

Named Ad Person of the Year. Adjunct professor of graphic design. President of an advertising agency. Yeah, Bill has a pretty impressive background. But what’s even more impressive is his ability to consistently deliver outstanding creative. His team wins awards for design and usability, but more importantly they know how to “wow” our clients with both eye-catching design and jaw-dropping results. Bill has spent the last 25 years on the agency side, first as a senior art director and then an associate creative director for two regional firms, and most recently as president of his own design agency. He is also an active member of the Advertising Federation of Cedar Rapids and an adjunct professor of graphic design at Mount Mercy University. Bill holds a bachelor’s degree in graphic design from Iowa State University and while he cut his teeth on designing award-winning print campaigns, he is equally comfortable designing across platforms including Web, social media and video. This father of six is married to a radio D.J., likes antiques boats and is the only one at Geonetric that insists on using a Mac.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.