Responsi(ve/ble) Design

There’s no shortage of discussion about responsive web design right now, and in an industry that changes every day, how do you ever keep up on this ever-evolving internet eco-system? Do you keep up on every new browser vendor possibility and prefix? Or dumb your website down so far as to be a 90’s era site that is completely flexible – but also looks completely “un-designed?” As with most things, I think the answer lies somewhere in the middle. As designers and developers, we should be aware of new and upcoming technologies, while at the same time actively strip out some of the “pop” and excess that may not have been needed in the first place.

The hot topic of flat design vs. skeumorphism is a relevant discussion that ties into where responsive design is at. I think that, at its core, this argument is all about what design should be and how to make purposeful decisions that communicate a specific message

Skeumorphic designs tend to have all this “jazzed up” stuff, which clients usually love, but often becomes excessive noise that detracts from the real message trying to be communicated. For example, instead of displaying a simple Help icon, we would rather show how great we are at realistically rendering a person in a call center with voice headset on, crammed into a 3D beveled, rounded square. There will be certain cases where this is a good design choice, but more often than not, we’re just adding another layer of noise.

I see the current shift from skeumorphic to “flat” design as more of a maturing process rather than a revolt to the former one. Smartphones and tablets put interaction at people’s fingertips-literally. Initially, it may have been necessary to guide people into pressing buttons as you would on an elevator, but users have adapted. They don’t need a reflection, shadow and texture to highlight points of interaction. That being said, I believe it ties back to responsive design in that we need to remember to communicate the right message no matter the point of delivery. Maybe the graphic-heavy, weighty home pages designed for the huge widescreen displays have become as unnecessary as excessive skeumorphism.  Ask yourself: does every homepage need a full-width hero image carousel with five different selling points? Maybe not.  A common problem with the huge, above the fold, hero image is that when it’s scaled down to a mobile device it gets really hard to see what neat features you have, or read any type that scales down with it.

Design Blog 5.24.13-outlined-02

If we really are on the cusp of mobile browsing being the main form of browsing, it may be time we give mobile viewports equal (or even more) importance than the traditional desktop. Perhaps before we figure out all of our work arounds, floats, snap points and flexible grids we can start by asking and answering these simple questions: What is the most important message we need communicate and how do we do that on as many devices as possible?

There are already hundreds of different browsing devices out there and more are released every day. With so many different devices available, the idea of pixel perfect design may start to seem archaic and, potentially, a hinderance to someone using a small screen. If I have to pinch and zoom in on your beautiful design to find your distressed, rasterized address, only to discover that the text looks terrible and can’t be copied, my experience has become a failure.

It’s not only screen sizes we need to keep in mind, but screen resolution as well. I think it’s safe to say from this point forward the days of 72 dpi are numbered. Thinking scalable, flexible graphics is a must. We can’t just expect to throw extra pixels at every situation; we need to consider how we implement, svgs, icon fonts, canvas objects, etc.; ideas and concepts that will scale with resolution on any device that might be in our user’s hands. And it’s only going to get more complicated as companies continue to increase their screen’s resolutions as quickly as possible, which will soon leave our X2 retina graphics in the dust. We need to make use of the scalable graphics that uphold their visual integrity in any resolution while keeping file sizes down for those viewing them over slow cell phone networks.

In writing this, I want to pose that question to myself and to all of us creating in this Wild West of the internet: Are we designing to make our great design fit, or are we being responsible to the message we’re communicating? In the very least I hope to help challenge some of us to re-assess how we approach designing in this digital age.

*Thanks to Eric Jorgensen for the conversations and edits.

Sign Up

Sign Up for our newsletter here. We’ll send you cool WordPress tips, tricks, and news. No spam, we promise.

  • This field is for validation purposes and should be left unchanged.