With the steady influx of “smart” devices on the market, people are able to access the Internet anytime, from any place. Tablets, pads, and smart phones now enable users to connect at-will for a drive down the Information Superhighway, and this trend will only increase as these technologies become more and more ubiquitous.
As a result, web developers are faced with the challenge of creating web content that can be viewed at numerous resolutions and navigated via mouse, keyboard and touch-screen. Unchecked, most websites that work at the office on a 24” flat-screen will more than likely prove to be an iNightmare whence viewed via the latest smart-gadget. Enter “responsive design”.
Responsive Web Design centers on the notion of design responding to a user's viewing environment; specifically where screen size, orientation, platform, and overall best practices are concerned. It is a concept that usually involves a mixture of flexible layout grids, content optimization and scaling, and use of “media queries” via CSS (Cascading Style Sheets). As a website visitor changes from desktop to laptop, or from tablet to smart phone, a “responsive” site also changes... adapting in size and shape to the new viewing environment. Put another way, the goal is a website that “responds” to the myriad visual frameworks of its user. Below is a basic demonstration:
Samples of how this version of BenKeszler.com looks when viewed at some of the common device resolutions.
Until recently, a developer's solution to a multi-resolution audience was to either
- a.) create multiple versions of a client site, each one specifically catered to a given resolution, or
- b.) design for the most commonly used monitor settings and “hope for the best”.
But as the “smart_____” trend continues to boom, it has become clear that neither path is acceptable. And so the challenge becomes how to effectively construct websites that are flexibly accessible in both form and function. Simply put, how a user interacts with web content changes as drastically as how said content is viewed from device to device. This becomes evident when specific focus is placed on mouse vs. touchscreen navigation demands, the restructuring (and optimization) of information hierarchy, and how general usage agendas differ.
POCKET-POWERED RESULTS:
Smartphone users access the Internet in a much more "results-driven" manner than the traditional desk-bound web surfer. The former are more often than not seeking immediate answers, directions, or real-time services/transactions while on the go, and therefore need a streamlined path to get from "A" to "B". As a result, clear, concise content is even more paramount, while visual design aesthetics (such as detailed background images, crispy logos and spiffy animated menus) not only lose their former luster, but in fact interfere with the user's web experience. Fear not friends, for the responsive site addresses this once again with media queries. Looking again at the above image, we see how a responsive site displayed on the smaller devices not only scales to fit, but also strategically omits graphical content while adjusting the information hierarchy.
NAVIGATION:
As the view-able area of a site shrinks from the office flat-screen to the pocket smartphone, it goes without saying that the inherent value of said real estate increases. I decided to address this by first redesigning and relocating the navigation area with two primary objectives... to
- a.) free-up as much prime real estate as possible for smartphone visitors, and
- b.) to more accurately resemble the interaction methods already built-in to the smartphone.
My solution? Fixed-position navigation moved out of the "upper-fold" yet remain readily available in both landscape and portrait smartphone views (below).
Also worthy of mentioning, this revised navigation does NOT include any sort of rollover animation or highlighting, for such things have no place in the touch-screen universe!
FINAL STREAMLINING:
Lastly you will notice some changes (or rather 'omissions') where site imagery is concerned... which not only creates more upper-fold space, but also allows the smartphone version to be smaller in size and load quicker; two ESSENTIAL considerations that MUST be made for your mobile audience.
And so we have an introductory practical example of responsive design at work. Whether or not similar design strategies should be implemented on your website is a choice left to you. It is however a decision that should be made only after carefully considering things like your user demographic, traffic analysis, and overall web product/service provision goals.
-b
