Most people don’t understand the concept of responsive web design (RWD). They’ve heard it tossed around casually, and likely assume it’s synonymous with a mobile site. Although that is partially true, there is significantly more to consider with RWD. By its very definition, responsive design demands that a design or layout be flexible enough to respond to any device through which it’s being viewed (ie. desktop computers, tablets or mobile devices).
Have you ever visited a website on your phone only to find the layout to be counterintuitive? Sure, most of us understand how to use the pinch and pan features on our smart phones well enough to interact with any site. But let’s be honest — it’s frustrating to feel cornered into a specific set of actions by a website. After all, it’s the site owner that wants your visit, so doesn’t it fall to them to ensure the best possible user experience?
As a designer, it’s important for me to understand the flow of information to and from an end user and a website. To that end, there are a multiple complimentary concepts in web design that, if not implemented, should at least be understood:
- Mobile-first Framework
- Content-out Layout
- Unobtrusive JavaScript
- Progressive Enhancement
Mobile-first Framework
The concept of mobile-first is arguably the most important aspect of responsive design. This approach considers that content is meant to be viewed first on a mobile device. You can build out from there with grids that adjust to occupy more space in relation to one another. There are many mobile-first frameworks out there including, but not limited to: Bootstrap, Foundation, Skeleton, Kraken, and Cardinal. Personally I prefer Bootstrap for multiple reasons, but we’ll reserve that discussion for a future blogThis term originated as shortened version of “web log” and has come to be known as a regularly updated web-page, often containing news, opinion and personal stories. post.
Content-out Layout
I can think of no better way to explain this than with a quote:
“Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.” – Linda van Deursen
Start with your content, gather up your words and pictures and know, with confidence, exactly what you wish to present to your visitors. The layout should always work to enhance the content.
Unobtrusive JavaScript
Unobtrusive JavaScript is more of a web development concept, but it’s still important to consider the effects in relation to responsive design. At the core of the concept is the idea that JavaScript functionality should always remain separate from a web page’s structure (content and presentation). This dovetails into the next concept.
Progressive Enhancement
Imagine for a moment that you are driving in a car in town. It’s a smart car, something small, easy to park and extremely fuel efficient. So you’re driving, but then you start to merge onto the highway, because you need to visit a different town. Suddenly, your car transforms into a sleek vehicle that can travel at a higher rate of speed more efficiently. Then the vehicle becomes a plane, because you need to travel out of state. It’s impossible, I know, but it’s progressive. The platform evolves to enhance its functionality based on the situation. In our case, and by observing the concept of Unobtrusive JavaScript, we can compartmentalize functionality and call to it as needed. And that’s rather responsive, if I do say so myself.
Why bother?
It goes without saying that daily usage of mobile devices, including smart phones and tablets, is ever-increasing. And chances are that you will get unique visitors to your site who are visiting on their mobile device. So I challenge you to genuinely engage with them. Consider their experience and they will reward you for it with their most valuable commodity, their time.