Website Evolution >> Exploring "Gracefully" Responsive Web Design
There’s no denying that responsive Web design is a hot topic. RWD is Google’s recommended configuration and has its avid supporters.
Responsive Web design, however, is still evolving, which means there’s ways to avoid some of the mistakes made by early RWD adopters and improve upon the approach in general. The team at Todd Lerner Advertising, which creates online and print communications for national and international brands, like Disney, The Financial Times, Rolling Stone, Prudential, Microsoft, Condé Nast, Radisson and more, are confident they've found one such improvement. Dubbed "gracefully responsive Web Design," Todd Lerner defines it as smoothing out the lumps and inconsistencies for a more refined and harmonious viewing experience no matter how someone chooses to engage with the content. Lerner says that aiming for gracefully responsive design can reward you with a website possessing a more integrated and flowing seductiveness.
Since publishing a thought piece explaining gracefully responsive Web design, Lerner has received many questions about it. He's not sure that most clients understand exactly what he is doing with RWD, as they don't ask specific technical questions, but love how clean their website looks.
One of the main features of Lerner's approach is the navigation scheme. The image below demonstrates how the links in a collapsible drop-down menu for mobile (left and center) look the same as when they transform into an expanded view for larger screens (right).
"Navigation is how visitors find and experience Website content, so for our own toddlerneradvertising.com site we were after the most gracefully responsive navigation we could conceive," said Lerner. "One thing we don't love is how mobile navigation links on so many of today's responsive websites are often mismatched when compared to the same links on a desktop. For example, the mobile links might use white type on a dark background whereas the desktop links use differently styled black type on a light background. We think a brand communication should be more predictably consistent."
Todd Lerner Advertising's navigation is coordinated, so the links in a collapsible drop-down menu for mobile look the same as when they transform into an expanded view for larger screens.
"For mobile on our own website we included the word 'Menu' alongside a 'hamburger' icon so the transition from that to full-words navigation tracks smoother," said Lerner. "But there was still a visual jump between the fully expanded desktop navigation and the collapsed mobile menu link. I said to Glenn Potter of Tocco Creative, our development partner on this project, 'This is working just as we envisioned, but I wish we could smooth out the transition' and he said, 'We can try some animation' and it ended up working out great."
Potter also wrote a little custom script for the mobile drop-down menu, which enters from the top of the screen.
"I like when elements appear from off the screen staging area, or from somewhere that makes visual sense," said Lerner. "I don't like when things arbitrarily appear from nowhere in particular."
Like the transitional movement used in their navigation, there's also a functional reason for employing gracefully responsive animation on their Web pages.
"In responsive design things often abruptly jump around, they vanish and re-materialize elsewhere," said Lerner. "This doesn't merely occur as a desktop screen resizes—it can also happen when someone turns their mobile phone or tablet from portrait to landscape and back again. Touches of animation as things relocate can turn a disconcerting negative into an eye-rewarding positive."
The image below demonstrates gracefully responsive animation. Three page elements (left) slide from a horizontal layout into a mobile-friendly and "scrollable" vertical format (center and right).
The above (at toddlerneradvertising.com/agency) is fun to watch, but it also shows that the page is responsive enough to adapt gracefully to the user's viewing preferences. Another example is how objects can gently fade away as a layout contracts rather than letting them unexpectedly drop out of existence.
At the end of the virtual day, gracefully responsive Web pages require outside-the-box thinking and extra effort, according to Lerner who thinks it's a website-creating evolution worthy of continued exploration.