The use of responsive web design (RWD) really exploded in 2013. We’ve talked about it a lot on this blog and at LawLytics University. All of our law firm websites are built using responsive design, so we’re clearly strong supporters and believe it offers the best mobile user experience for potential new clients seeking attorneys online.

What is it?

Before smartphones and tablets, web designers only really had to design for desktop computers with a set of known screen sizes and resolutions in mind. These fixed layouts were optimized for a desktop viewing experience, because nothing else existed or mattered. Fast forward a few years and suddenly smartphones made it necessary for web content to be optimized for a growing mobile audience.

If you want a mobile-optimized site, you will have to choose between a dedicated mobile site and responsive web design. We explain the differences at LawLytics University.

How does it work?

In short (slightly technical paragraph incoming), responsive web design works on fluid grids* using code called media queries to change the appearance of your site depending on the viewing environment (essentially your screen size, browser window size, and/or resolution), while flexible elements respond proportionally. At specific points where the layout “breaks” (or stops appearing optimally), designers use these media queries to change how the site looks as the browser window occupies a smaller space, the website’s content will respond to ensure it all appears correctly. The idea is to provide an optimal experience on all screen sizes and resolutions, because developers can’t control what devices people use when viewing the site.

If you are reading this on a desktop or laptop, drag the edge of your browser window horizontally. Notice how the appearance changes as the window gets smaller? That’s responsive design.

Where do sites go wrong?

Needless to say, responsive design has caught on quickly. It’s ideal for law firms, because it only requires a single site to serve content to any visitor. While those engaged in e-commerce would likely benefit from a dedicated mobile site (or even a mobile app), most law firm websites just need to provide potential new clients with information and make it easy for people to contact the firm. Responsive design makes this easier by having all of the content on a single site that is simply styled differently depending on the viewport size. There is no need to maintain content on a separate mobile site. Simple, right?

Apparently not. The increasing popularity of RWD has led to a lot of responsive misuse. It’s simple in theory, but you can’t just decide to make a site responsive after the fact. Well, I take that back. You can, but don’t expect it to be easy or look good. Responsive sites need to be planned that way from the start, because it presents an entirely different way of thinking when you put the mobile user’s needs first. Many designers actually start with the mobile experience and build up from there. This is known as mobile-first design, which carries a few other principles with it.

So what is bad responsive design? I don’t want to call out specific sites or vendors for doing bad responsive design. But there are plenty, and there are a lot of downsides to using responsive design incorrectly. From creating unwanted vertical spaces to having buttons too small to click to displaying images weirdly, there are a lot of things that can go wrong if you don’t know what you are doing. Instead of a seamless transition from the desktop to mobile experience, poorly-designed responsive websites look unprofessional and can confuse visitors. It’s very clear when someone creates a responsive site simply for the sake of having a responsive site and puts little thought into the actual mobile experience.

On the next website you visit, drag the edge of the browser window and test it for yourself. You’ll be able to quickly tell if it’s responsive. How does the site handle it? Is the experience on a mobile device just as enjoyable as on a tablet or desktop computer? I’ve seen a lot of attempts at responsive design that don’t offer anything near an optimal experience on mobile devices. It’s really enjoyable navigating to a site that is properly responsive while browsing on a smartphone.

Adopting responsive design is a step in the right direction, but if your responsive site looks like the mobile experience was an afterthought, then you’re definitely doing it wrong.

*A fluid grid displays elements relative sizes, including margins, padding, fonts, images, etc.