From time to time, an industry experiences fundamental changes that radically alter it. Along with this comes an explosion of opportunity: opportunity for individuals to stand out, for new products to emerge and for entrenched companies to be replaced. Now is such a time in the web community. For as long as I can remember, the primary focus in web development has been on ensuring that websites render the same across all browsers. We took great effort to ensure that a client’s website looked exactly the same in everything from old versions of Internet Explorer to the latest Firefox, all at once. In the past few years, we have witnessed growing interest in what is known as progressive enhancement, which is the technique of serving advanced features and styles to modern browsers but not to older unsupported browsers. This approach never seemed to settle in across the board. Most agencies still strive to make their websites universal. And progressive enhancement was often regarded as an excuse to ignore annoying problems. As it turns out, web people are rather crafty and have created tools that overcome countless browser problems. Some of these developments have led to the notion of “responsive web design.” If you are not familiar with the term, be sure to check out the definitive introduction to it on A List Apart. To sum it up quickly, the gist is that you customize a page’s rendering to suit the user’s device. For a while, this was easy to do: if the user was on a mobile device, they were redirected to a separate mini-site. But with smartphones and especially tablets, the line has blurred. Responsive design has quickly become recognized as an incredibly smart way to build websites. How far you take it is up to you. But one thing is for sure: it is radically changing the industry and is affecting countless practices and tools that we have used for years. Let’s consider the impact of this new approach on some of the basic tools we have come to rely on and on web design in general.

Raising the bar

Almost everyone working on the web has at some point been faced with someone who believes their friend’s teenager could handle their project. This perspective has always been annoying, but there is some light at the end of the tunnel. With responsive design, things just got a lot more complicated. There is now a tremendous opportunity for web professionals to stand out from the herd. There are thousands of web designers and developers around the world, and we are all connected by the magical medium we work in. This is both great and problematic. Given the number of people available for work, standing out can be hard.

The opportunity

There is actually a fabulous opportunity here. If you’re aggressive enough, you could stand out by working your tail off to quickly grasp responsive design and development. Dig in and learn it, update your personal website, and talk about your results. I guarantee if you put up a fresh portfolio that demonstrates this skill set, people will be interested in working with you. But the window for this is fairly short, depending on how quickly other designers get on board.

Budgets

Budgets pose a significant hurdle with this approach. With responsive design, we have to create as many as four variations for every layout, to target smartphones, tablets, netbooks and desktops. Consider a basic website with only two pages: a home page and an inner page. Those two layouts become eight variations when you implement them for four device sizes. Does this mean we should charge four times as much for the work? That hardly seems likely. Obviously, the costs will be incremental, but the time required to prepare the layouts and code them to function properly will definitely increase. Client education will play a huge role. We have to help our clients understand that while iPads and iPhones are cool, those devices are driving up the cost of quality development. Getting clients to understand our costs is tough enough as it is.

The opportunity

If you want to make a splash in the community, create a tool that addresses budget issues. Many have already done so, with tools like 320 and up and the Less Framework. Both of these reduce the time it takes to build products, and they help developers trim time off of budgets. 320 and up in particular is a perfect example of how to capitalize on this opportunity. With the field wide open now, introducing tools to the marketplace that streamline the development process in support of responsive design will be much easier. We could even create tools that replicate existing ones but that are oriented around responsive design.

JavaScript libraries and their plug-ins

One of the many areas that could get turned upside down is the market for plug-ins that work with popular frameworks such as jQuery. The market is stuffed with gorgeous plug-ins that do a vast array of things in the browser: slideshows, photo galleries, forms, pop-ups, the list goes on.

The opportunity

The opportunity here is insane. Take a common plug-in, such as the slick slideshow tool Nivo Slider. This awesome tool is in countless developers’ tool belts. The market is ripe for someone to create a similar tool that self-adjusts to function smoothly across devices using a responsive approach. The same goes for almost any plug-in. If you’re looking for a project that virtually guarantees success, choose a hot plug-in, and create a responsive version that adapts to function properly on different devices.

Browser testing

While this article is more about the development process, let’s consider browser testing. This is a basic part of building websites. Anyone knee-deep in building a website is likely testing stuff in multiple browsers as they go. And at some point, most websites undergo an in-depth test in numerous browsers. But how do we tackle this through responsive design? Should the team own all of the most popular devices? Sure, there are emulators, but most are painful to install and work with. And nothing beats testing with the real thing.

The opportunity

Setting up software on computers to take screenshots on a variety of browsers and platforms is kind of hard. But setting up systems to automatically capture screenshots from the ever-increasing number of devices is really hard. The solutions that do exist are expensive, and I have yet to find a good service for this. This is one of those situations where complexity is an advantage. If someone manages to skin this cat, then it would be rather hard for others to follow. There are many solutions for taking automated screenshots in multiple browsers, but the first person to offer screenshots for devices will have something quite unique to sell. And the community will respond in a big way.

Templates and themes

The market for ready-to-go themes is huge, but responsive design is a monkey wrench here, too. Template providers won’t likely retrofit their designs to accommodate these new requirements. Rather, they will probably add responsive features to future releases. And therein lies the opportunity.

The opportunity

Old templates have not been rendered useless; they are just missing an important component. This levels the playing field for a while. If you’ve been considering jumpstarting your own theme business, this is a great time to do so. Established companies will have to support their legacy templates, and while they enjoy some advantages, the barrier to entry in the market just got a bit lower.

Software services

The community has come to rely on software services for things like wireframing and usability testing. But how do these tools handle multiple devices? Many tools address, say, usability testing, and some new ones even address mobile testing (such as YouEye Mobile), but they solve only part of the problem. In the wireframing niche, there is a common way to handle various page layouts, but I have yet to find a solution that handles a single page layout for various devices. The need is so simple, yet many systems simply break down. Should we create a new wireframe for each device? The answer is not clear.

The opportunity

The market is ripe for tools that support people’s current approaches to working online, while embracing responsive design. You might be able to lure customers away from competitors by offering features that embrace these modern techniques.

Conclusion

Change can be unnerving, even overwhelming. No matter how much you learn, you always feel like you’re lagging behind. But everyone is in the same boat. In times of great change, you can maximize opportunity by diving in and riding the first wave. Do you see any other opportunities to capitalize on the movement towards responsive design?