Gracefully Responsive Web Design
Responsive design allows a website to work on a desktop computer as well as on mobile phones and tablets of all sizes — a necessity for today's multidevice world. Responsive websites query the browser for window size and deliver optimized content for varying screen dimensions, but there is an inherent difficulty …
The big design challenge
How can your web pages look good and function well on a tiny mobile phone and also on a huge desktop monitor, not to mention all the device shapes and sizes in-between? Check out a responsive website on a desktop computer and observe as you shrink your browser window all the way down; you'll likely see things abruptly jump around, change size and position, even disappear entirely as the layout transforms to accommodate the diminishing real estate.
Enter gracefully responsive design
Gracefully responsive web design smooths out the lumps and inconsistencies for a more refined and harmonious viewing experience no matter how someone chooses to engage with your content. To be sure, this endeavor involves some creative thinking, forethought and effort. But I like what Ross Perot says: "You can always find 10 ways to prove something can't be done. The trick is finding one way it can be done."
3 ways it can be done
The following are notions to consider as a start toward more gracefully responsive web design.
1. Gracefully responsive navigation: To see how today's top responsive sites handle navigation, you can google "best responsive websites." A quick inspection reveals that navigation links for mobile viewing are often mismatched when compared to the same links on a desktop. For example, the mobile links might use white type on a dark-colored background whereas the desktop links use differently styled black type on a light-colored background.
Since your website navigation scheme is the main portal through which visitors find and experience your content, why would you ever want it to unexpectedly change in look and style?
The example below shows navigation design that's coordinated. 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).
In addition, the above uses animation for an extra graceful transition between vertical and horizontal navigation modes (feel free to see how it works at www.toddlerneradvertising.com). This brings me to my next point …
2. Gracefully responsive touches of animation: In responsive design, things often vanish and rematerialize elsewhere. 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.
Below is an example where three page elements (left) slide from a horizontal layout into a mobile-friendly and scrollable vertical format (center and right).
The above animation is fun to watch, but it also exemplifies the very spirit of responsive design. If this action could speak, it would say: "Resize your desktop screen … rotate your phone or tablet … I'll happily and gracefully adapt to your viewing preferences."
There are many instances where touches of animation can soften the herky-jerkyness of a responsive web page. Type can animate as it changes in size, for instance. And objects removed as a layout contracts can gently fade away rather than unexpectedly blip out of existence.
3. Gracefully responsive overall simplicity: If the following makes sense to you, then the virtue of simplicity in responsive design becomes evident:
- your website needs to work well on a small mobile screen;
- simpler design fits better on a small screen; and
- it's good if your site looks similar on all devices, small and large.
So with the above in mind, instead of starting with a desktop-size website and attempting to cram everything into the space of a tiny mobile screen, begin with a less complex mobile-friendly design. From there you can better scale things up in an agreeable manner.
To save space, perhaps some detailing can be subordinated and accessed hierarchically. Your material doesn't necessarily need to be overly stark, but a discerning attempt at simplicity can go a long way toward achieving more gracefully responsive web pages.
And don't forget that leaner web pages load faster, which is especially appreciated on slower mobile connections.
The following isn't hard to imagine: A prospect finds your website using her desktop computer. Her screen is sized up and down as she multitasks on other projects. Later in the day while on the move she accesses your site from a mobile phone. In the evening she's hanging out on the sofa and shows it to her husband using a tablet.
Now in all of the above situations, don't you want your brand communication to be predictably consistent? As elegant and appealing as possible?
Yes, I'm talking about escalating the complexity of a task that's already tricky, but aiming for gracefully responsive design can reward you with a website possessing a more integrated and flowing seductiveness.
Todd Lerner is the owner of Todd Lerner Advertising. Advertising clients include Disney, The Financial Times, Rolling Stone, Prudential, Microsoft, Radisson, Condé Nast, Shopper's Voice, Time Warner, Hearst, The Danbury Mint, Smithsonian and others. Todd can be reached at firstname.lastname@example.org.