Responsive web design has created opportunities across the board

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?

  • http://www.nadiacweb.com Nadia C.

    Definitely going to try to learn more and get familiar with the opportunities you’ve exposed. Thanks!

  • http://twitter.com/vivalaviolette Viva la Violette

    Great article! I’m currently in the process of doing a website redesign, so this is a great resource for me- thank you!

  • http://twitter.com/vivalaviolette Viva la Violette

    Great article! I’m currently in the process of doing a website redesign, so this is a great resource for me- thank you!

  • http://webdesignandsuch.com Mike ilz

    Great article, really hits home as a designer/developer. You’re so right how there is a ton of opportunity right now regarding adaptive designs. I would imagine a year or so from now clients will actually start to know what that means, so if we as designers don’t start to use these layouts now we’ll be left behind.

    Couldn’t agree more with ‘No matter how much you learn, you always feel like you’re lagging behind.’

  • http://webdesignandsuch.com Mike ilz

    Great article, really hits home as a designer/developer. You’re so right how there is a ton of opportunity right now regarding adaptive designs. I would imagine a year or so from now clients will actually start to know what that means, so if we as designers don’t start to use these layouts now we’ll be left behind.

    Couldn’t agree more with ‘No matter how much you learn, you always feel like you’re lagging behind.’

  • http://webdesignandsuch.com Mike ilz

    Great article, really hits home as a designer/developer. You’re so right how there is a ton of opportunity right now regarding adaptive designs. I would imagine a year or so from now clients will actually start to know what that means, so if we as designers don’t start to use these layouts now we’ll be left behind.

    Couldn’t agree more with ‘No matter how much you learn, you always feel like you’re lagging behind.’

  • Amidude

    having been a designer/developer for many years now it’s finally good to see that responsive design is taking hold.

  • Amidude

    having been a designer/developer for many years now it’s finally good to see that responsive design is taking hold.

  • http://twitter.com/GanimeCreative Anthony Ganime

    Now is definitely the time to embrace these changes and pioneer new trends and ways of handling adaptive layouts that are beautiful as well as user friendly.

  • Neil Pearce

    This is certainly a great opportunity for all web professionals – i don’t think we have missed the boat on this one as it is still very early days. One thing that will hold people back a touch is the choices of either going native or sticking to the web?

    Learning media queries and getting to grips with fluid grids and images is one thing and probably the easiest route – but learning yet another language such as Java, Objective-c and even HTML5 is going to test anyone’s seriousness to this new medium.

  • Neil Pearce

    This is certainly a great opportunity for all web professionals – i don’t think we have missed the boat on this one as it is still very early days. One thing that will hold people back a touch is the choices of either going native or sticking to the web?

    Learning media queries and getting to grips with fluid grids and images is one thing and probably the easiest route – but learning yet another language such as Java, Objective-c and even HTML5 is going to test anyone’s seriousness to this new medium.

  • Anonymous

    Great information on responsive design. I like how you addressed the issue from several different point of views and talked about the opportunities.  Your right about how there are some serious holes in the market as far as tools for developing and testing across multiple devices.

  • Anonymous

    Great information on responsive design. I like how you addressed the issue from several different point of views and talked about the opportunities.  Your right about how there are some serious holes in the market as far as tools for developing and testing across multiple devices.

  • m8

    I think every single web developer should write code that displays an error message when viewing the site on an old browser (more than 1 year old): “Sorry, your browser is old, you should update it to view this site”, with links to download Google Chrome, Firefox and Safari. If every web developer would do this, there would be no problem with compatibility with browsers so old that you simply can’t imagine who even uses them. The people who uses browsers as old as IE6 are probably too ignorant to even enjoy animations and anything that web developers spend ages on creating.

  • http://twitter.com/IrishChieftain Anthony Grace

    If “Responsive Web Design” is just about detecting screen width of devices and narrowing existing sites to fit this space, resulting in forever scrolling, I would encourage any designer/developer to run a mile from it. I advocate “Responsible” Web Design – the recognition that a small mobile device and a 20″ screen are a world apart – necessitating a different approach and site, in each case.

  • http://rolling-webdesign.com Theo

    Really nice article, kind of mind opener, thank you!

  • sam rolfe

    In other words – flash was right all along and this is what people are now trying to emulate with javascript, even though it is no where near as good, and is light years behind.

    Flash solved this crap 10 years ago.

  • http://twitter.com/michaeltroy Michael Troy

    Great post and and I couldn’t agree more. 

    For those interested – Responsive Web Design by Ethan Marcotte, published by A Book Apart, would be the first place to start. http://www.abookapart.com/

  • website design Glasgow

    The information provided by you is really very important as well as helpful to the people who are interested in the field of the web designing.

  • silu

    The people who uses browsers as old as IE6 are probably too ignorant to
    even enjoy animations and anything that web developers spend ages on
    creating. 

  • John

    A great article and pretty much what I’ve been telling/preparing/warning my clients about for almost a year. Also, consider that most clients having projects developed ‘now’ want a website that will last them at least another year/year and a half, and most are very concerned about Google rankings. With all the buzz that Google rankings will soon be significantly impacted by page weight and specific coding practices then most clients need an entirely different type of website than they have now or even imagined existed. Lots of work ahead!

  • Silcon

    I am a beginner of web desigining. i found the article quite interesting.I want to learn more about  web design