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.
  • I was just browsing to admire the site design, you guys have done an awesome job with this WordPress theme.

    I would love to see svg replace a lot of pixel based graphics in webdesign, but right now there are a lot of situations where svg is not going to render, most importantly on many mobile devices. It’s a messy situation.

    Pixel density wise, really, I don’t see a compelling reason to worry about screens that would go beyond X2, Bigger than X2 and a user won’t be able to tell the difference (only so much the eye can see), so let’s not get carried away. And manufacturers aren’t going to continue to pack more and pixels in a smaller area if it doesn’t make a difference to the consumer. It doesn’t make economic sense. What’s more, a huge percentage of internet users don’t enjoy super fast broadband, so all these bigger images don’t necessarily lead to a better user experience.

    • Thanks for the response Peter. I agree with you on devices going beyond what is necessary for a user’s eye, and at the same time as web creators we can still be affected by manufacturer’s tech. There are already a few devices that have a 300% pixel density (http://screensiz.es/phone), which I can only assume will continue as a trend. The higher pixel densities may not have much affect on our eyes, but I can bet that these tech moguls will continue to leverage this as a marketing feature. The whole “my product is better than anyone else’s” will most likely continue in attempt to gain market share. So with the old 72ppi standard thrown out the window, how do we as creators make something that will render well on any screen? In no way do I claim to know what’s best for the future of web resolution standards, I was only trying to voice alternatives that can provide an alternative unaffected by pixel densities.
      Thanks again for your comment and insight Peter!

    • Thanks Matt! I agree with you, it becomes a blurry line as to what are useful advancements in tech and what becomes extra clutter.

  • Brad Frost recently wrote about the perceived value of carousel sliders versus the actual value. Many other reputable web designers report correctly that carousels are simply a way for all the departments of an organization to get their Very Important Message “above the fold”, a compromise which has diminishing returns with the growing mobile audience.

    It’s funny that you drew the analogy of the Wild West, as I was just thinking about that, and how the pioneers of our industry talk about the early 1990s. It really feels like we are going through the next maturation process, as if the first Golden Age of web design has now ended. The thing we need to realize is our industry is essentially twenty years old, very young by any measure, and definitely changing and growing in ways that we try to anticipate.

    One nuance about the link between responsive web design and flat design that I feel doesn’t get recognized nearly enough is that we are the ones teaching a world of users about the new visual language. It has been a natural evolution that we have a had a large hand in rolling out. As visual clues are adopted (like the “hamburger” icon), they become conventions.

    I don’t think it is always the users, but also ourselves as designers, that help shape the way these experiences are evolving.

    The part of mobile and responsive design that demands thought and study, is what elements and messages are the most important. Studying how users move through a given site can also provide valuable clues. Cutting away the parts that distract from the intended goal becomes necessary on a computer that you hold in your hand.

    Well articulated article, Zach.

  • Hello! Swift query that’s totally out theme.
    Do you realize how you can make a web site portable warm and friendly? My web-site seems odd when surfing from my cellular phone.
    I’m looking for a motif or plug-in that might be able to clear up this concern. If you have any suggestions, please share.
    Many thanks.

Leave a Reply

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

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.