The Revolution Will Be Designed Responsively

The world of web design is evolving in leaps and bounds, and designers continue to inspire us with their creative ingenuity. Some creative trends come and go–others become the new standards of web design, shifting the industry permanently and for the better. Flat design, white space, flexible typography, cards, more videos, larger graphics, responsive design- these are are some of the trends we’ve seen gaining speed in 2015, over multiple platforms. It’s hard to predict which of these new trends are fads and which will stick around, but with mobile users predicted to surpass desktop users this year, one thing is for certain- the philosophies behind responsive design are here to stay.


Today’s responsive design allows your interface to adapt to any screen size or device, location, time of day, events happening, and user’s history. More and more, websites are being designed for mobile first, and with the help of responsive design, adapted for desktop. This means that businesses can build one website that retains continuity across devices, making for a more fluid experience for users and a lower price tag for web development.


In terms of designing for mobile first, cards are great, because they are tailored to the mobile experience. They can be stacked, queued, sorted, grouped, folded, expanded, even animated. They deliver info concisely, with less text and less steps. Cards are flexible and modular. They’re just one example of how design thinking for the future is all about being nimble.


It’s way more involved than adapting to screen size. Jared Booye, of Zumeo Design talks about incorporating adaptive design into the evolution of responsive design, so that the user can consume content in such a way that works seamlessly with the device being used. The adaptability would not only address issues like screen size across devices, but also adapt to the behavior of the user, depending on the visual medium used to consume content.


Essentially, it’s important to design for change. A great example of this is the rise in live webfont interpolation, or the ability to have font design modify in the browser. This requires fonts to be systematized and content-aware, in other words, flexible and ready to modify themselves at the drop of a cell phone. If we imagine the need for seamless modification, not in just the realm of typography, but in every aspect of web design, we start to understand the need for design systems that built from easy to assemble, self-contained components, that can be swapped out and switched around to order, without throwing the overall design into disorder.


Web Designer Brad Frost is writing a book about what he calls Atomic Design, which is about designing systems of components. According to Brad, “building up to molecules from atoms encourages a ‘do one thing and do it well’ mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.” So the basic idea is to create interfaces with tiny building blocks that can be broken down and shifted around to address any eventuality.


There’s a great example of this type of design system from the past that can be learned from and used in the future–newspapers. Newspapers have hundreds of templates for layouts that can be used and re-used, to respond to the day’s news with articles that are presented in a way that gives each event the appropriate editorial weight and perspective. Just so, interfaces should seamlessly modify themselves across devices and user contexts to deliver the most relevant experience for each user, in real time. This will require the continued creation of dynamic systems that can digest, evaluate and respond to user data, taking into account user preferences, behaviors, environments, social network connections, etc. Again, the idea is to be nimble, to build systems that can be modified in new ways while creating the least amount of disturbance possible. That goes for content management systems as well. That goes for content management systems as well. We’re starting to see the modularity trend catch on with CMSs as well, so that you can work on the front end without disturbing the back end, and vice-versa.


In “A Dao of Web Design”, John Allsopp talks about designing for flexibility. He also claims that designers should “accept the ebb and flow of things”. Some design trends are predictable, others are not. The process of authentication on the web is undergoing change with the rise of cheap biometrics. Therefore, it would be wise for businesses building websites to think about their authentication processes as potentially in flux, and implement a design that’s flexible enough to be easily modified in the event that password-based authentication becomes obsolete. The more open-ended the system, the easier and cheaper it will be to innovate when the time comes, and it always comes sooner than you think it will.


In closing, we believe that the best you can do design-wise is to stay flexible and build modularly. The words of William Gerstenmaier, NASA’s Associate Administrator for Human Exploration and Operations sum it up nicely:


“Things will change over time. To think we know all the technology that will be in place and exactly how things will work, to try to project that 20 years in the future, that’s not a very effective approach. You need to be ready and if some new technology comes online or a new way of doing business is there, we’re ready to adapt, and we haven’t built an infrastructure that’s so rigid it can’t adapt and change to those pieces.”


We’d love to talk to you more about responsive design and how to create flexible design systems for your business.