Gracefully Responsive Web Design
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.