Responsive Design Sameness
The idea that responsive sites all look the same isn’t a new one. It’s a topic that’s been broached many times, and you’ll find some interesting perspectives on it.
- “Have you ever noticed how many websites look the same? How many are just a bunch of rectangles? How many seem to copy from one another? Where’s the uniqueness and creativity?”
- —STEVEN BRADLEY (The Web is a Rectangle, www.vanseodesign.com/web-design/rectangular-web/)
- “I feel like responsive design has sucked the soul out of website design. Everything is boxes and grids. Where has the creativity gone?”
- —NOAH STOKES (http://esbueno.noahstokes.com/post/44088237921/where-has-all-the-soul-gone)
- “I wonder if #RWD looks the way it does because so many projects aren’t being run by designers but by front-end dev teams.”
- —MARK BOULTON (https://twitter.com/markboulton/status/445943150247702528)
The question of “Why do all RWD sites look the same?” is a pertinent one when you consider that diversity in the pre-RWD era was fairly extraordinary. One could even argue that Flash-based sites were the most distinctive of the lot. Today, it’s commonplace to pick out the sites designed in the browser from ones designed in Photoshop et al. This notion is where we get such statements like “It looks like a Bootstrap/Foundation site” and “It’s like they just slapped their logo on a responsive WordPress theme.”
To some extent, there will undoubtedly be shared styles and components from site to site, no matter how original we think we’re being (Figures 4.6-4.8). That’s OK. I’d much rather have a Web that works than one that succeeds in diversity for diversity’s sake. Remember, the originality we established using Photoshop didn’t always translate to the browser in a way that was user-friendly, either. Karen McGrane made this witty retort to the complaint of RWD sameness as it applies to print:
Figure 4.6 Examples of similarities in responsive site design. Common components include “boxy” layouts, white background headers, and hero images with white text overlaid.
Figure 4.7 Examples of similarities in sites designed on the Bootstrap framework. Unadjusted button styles are a clear giveaway.
Figure 4.8 Examples of similarities in sites designed as WordPress themes. Similar content layout is a hallmark of blogs.
- “But why do all the magazines have the binding on the left? And columnar layouts, so tired. Where’s the innovation?”
- —KAREN MCGRANE (https://twitter.com/karenmcgrane/status/515162632551411712)
I’m not sure we can fault responsive design for a lack of uniqueness in sites, but certainly its introduction has added to the number of design considerations we need to make. By extension, new considerations may not always be tested across all screen sizes, so we rely on what “works” and what’s familiar. We’re still getting our feet wet designing responsively; creativity will come.
That doesn’t mean we need to stifle uniqueness or “soul” in the name of being responsively correct. We need to think creatively about being creative.
- “Emulation is a part of the evolution of design. And the web, for that matter. But design sameness tends to fade when one forgets all of the existing patterns, all of the Bootstraps, all of the preconceived design solutions. Design sameness fades when designers stop focusing on which solutions for their problem are out there and start focusing on the problem at hand.”
- —STEPHEN HAY (www.the-haystack.com/2014/03/21/responsive-design-sameness/)
I contend that Photoshop can greatly assist in our efforts to infuse our designs with the unconventional and unique. Where designing in the browser may introduce friction in the creative process, Photoshop can help us focus on the best approach regardless of the amount of code needed to execute it.