Responsive Design: What Is and Is Not
For years developers and designers have struggled to present content consistently across multiple devices, in multiple browsers, and in multiple operating systems. Add in web standards that have been unreliable and error prone and you begin to understand the challenges associated with this aspect of web design / development.
Over the years several solutions have been presented that range from apps to mobile specific websites and all the glorious imaginings in-between. Naturally, along with each new approach comes a wave of debate within the development community with no clear winner.
One solution has begun to stand above the rest however. Of course I’m talking about Responsive Web Design (RWD). Responsive web design can be an incredibly powerful approach but it is not an end game solution, at least not at this point. Above all else, it is an ever evolving technique that is based on pre-existing languages (Primarily CSS and JavaScript). This part is very important because it means that while responsive web design can do quite a bit, it is both limited by the current capabilities of the sub languages and can be interpreted and implemented in many different ways.
Now that we have a little background information and the stage has been set. Let’s dig in and go over the following:
- What Responsive Web Design is
- What Responsive Web Design is not
- Challenges Associated with Responsive Web Designs
what responsive web design is:
Responsive Web Design is a technique, a way of using pre-existing technologies to achieve a fluid design that can span from mobile device resolutions to tablet resolutions to desktop resolutions and pretty much everything in between while maintaining the overall feel and theme of the website. It is also browser based, requiring absolutely nothing extra to be used.
Responsive Web Design works by defining view ports, which are set resolutions. Most commonly, at least one view port is defined for Mobile, Tablet, and Desktop, respectively. These set resolutions mark the transition points for where the design changes, removing content as the resolution and overall space of the page is reduced.
For example, a massive banner may be great for desktop viewers, but not so great for mobile or tablet viewers. So as the resolution is decreased, the banner would also decrease in size to fit the page. This could continue from desktop to tablet, but on mobile it may be better if the banner wasn’t there at all. So as the resolution decreases into the mobile view port, the banner would be removed completely. This would present all three devices with a consistent theme but slightly different layout and content. While this is a very simple example, I’m sure you get the point. Imagine the entire page reacting in this way, growing and shrinking with screen resolutions and space availability.
So in a nutshell, Responsive Web Design is:
- A powerful technique using a combination of languages.
- Capable of maintaining visual consistency across a wide range of resolutions on a wide range of devices.
- Capable of manipulating content for specific view ports (resolutions).
What Responsive Web Design is not
Responsive Web Design is not perfect. It has its own set of challenges and limitations which I cover in the next section.
- Responsive Web Design is not an app. It is not something that your customers will need to download in order to use.
- Responsive Web Design is not a mobile specific website. While it is true that responsive web design can and most likely would cover mobile resolutions, it is not geared towards just these devices.
- Responsive Web Design is not a new technology or specific language. It is a way of coding with pre-existing technologies to achieve a fluid layout.
Challenges associated with Responsive Web Design
Because Responsive Web Design is built on pre-existing languages like CSS, HTML, and JavaScript, it is limited in what it can do. These limitations are based entirely on what the sub-languages can handle.
This is most evident when working with the fluid layouts that make Responsive Web Design what it is. Since the entire layout must be fluid, the end result is normally one that looks as it should in specific view ports, but will vary slightly in the resolutions that are in between view ports. It is impractical and in most designs, impossible, to keep the design pixel perfect from one view port to the next.
Another challenge associated with Responsive Web Design is testing. The time it takes to test a Responsive site is drastically longer than a conventional site. The reason is actually quite simple. For every section of the site, the section must be tested in all agreed upon browsers, devices, and resolutions. When bugs are found, fixing them usually involves modifications to the code that reach far beyond the view port or resolution you see them in, resulting in additional development time and quality assurance time.
Responsive Web Design can also add additional stress to the servers feeding up the site by loading more content then what is actually being viewed. This is a byproduct of the hide what you don’t need approach that is very common in Responsive websites. This is a very serious risk and must be considered constantly throughout the entire project.
Responsive Web Design also presents a challenge when more than one developer is needed to theme the frontend. The issues associated to this type of work can be reduced, but it does take extra effort and consideration.
Like any other technique, Responsive Web Design can be interpreted in many different ways. As a result, it can also be implemented in several different ways. I have not found a single approach that works perfectly for every project and so I would encourage experimentation and research with the goal of finding an approach that works specifically for you.
Summary
Responsive Web Design is a great tool, but it is just one tool, and in the same way we wouldn’t use a screw driver to hammer a nail, we shouldn’t be using Responsive Web Design as a fix all solution. When considering Responsive Web Design I strongly suggest you do your research, weigh the pros and cons for your specific needs, and make sure you or your developer are up to the task of making a website responsive.
