Blog


Getting a Grip on Responsive Design



Responsive design has become a standard requirement for many law firm websites, included in requirements lists as if it is one of many popular features available. Most commonly, responsive is referred to in the context of mobile-friendly. In reality, responsive isn't a feature, and is not an end-all solution to mobile-ready websites. Responsive design is just an approach to web design and nothing more.

Those who view responsive as a single solution to mobile-friendly are missing some important concepts. Responsive design is important, but responsive design alone is not a viable strategy for mobile.

Responsive = Mobile, but Mobile Doesn’t = Responsive

Responsive designs, in comparison to plain desktop sites, are mobile-ready (at a basic, general level) - they scale to fit on a smaller device screens. However, responsive is not the only way to achieve a mobile friendly website, and it’s not the best way in every case. It depends.

Creating a mobile-friendly experience does not rely on a single responsive methodology. Let me be really clear on that and restate it: A single ‘Responsive Design’ is not the best way to achieve a mobile-friendly website. Semi-responsive sites, adaptive methods, and separate sites, are every bit as valid as responsive – depending on goals and requirements.

A single ‘Responsive Design’ is not the best way to achieve a mobile-friendly website.

For many website projects, these methods are more efficient, cost-effective, and provide a better experience for the visitor. In fact, many organizations decide to use these other methods, and many of the websites you use on a daily basis are not single-site responsive. (New York Times, nytimes.com, for example – not single-site responsive.)

Responsive Sites are Not Automatically Mobile User-Friendly

Responsive sites often have a variety of annoying quirks. Mobile usability issues include slow loading times, jumping pages (where a user scrolls the page and then the page jumps back to the top of the screen as other elements download), buttons and controls that disappear behind on-screen keyboards, or seemingly infinitely scrolling pages due to poorly implemented image scaling. These and other issues are common on responsive sites.

A website that simply scales pages for smaller screens will not provide mobile users with an optimal experience. Positive experiences are achieved in the details. These details require great usability testing, careful thought, and, in a best case scenario, a marriage of adaptive and responsive development techniques. There are no shortcuts.

A website that simply scales pages for smaller screens will not provide mobile users with an optimal experience. Positive experiences are achieved in the details.

Responsive Means Responsive, Not Exclusive

Some say that responsive design means having a single website that caters to every user, with a single set of templates, styles, and other resources. That’s not really true. It’s possible, as well as common and reasonable, to use responsive techniques while maintaining separate sites, or when pursuing a single-site adaptive approach.

All that responsive really means is that a page, or elements of a page, scale based on available screen space. This means that a single element of the page can be responsive, or multiple elements, or the entire layout. It does not mean that you need to have a single set of page templates, images, and other resources used to serve every single website visitor in every case.

Responsive Designs Can Be Adaptive, and Vice Versa

As already discussed above, any element of a page can be responsive – it can scale or change position based on available screen size. Any element of a page can also be adaptive – change out or swap based on screen size.

For example, large format images, so popular today, can be adaptive. That doesn’t just mean that they scale in size on the page (responsive), it can also mean that different versions of images are served on the page based on the screen size (adaptive). A desktop user with a large screen might see a very large image with a larger file size of 500k, while a mobile user, with a small screen, might be served a smaller image of only 50k.

This makes a lot of sense. The small screen doesn’t need a huge image with a large file size, because the available display space is small. Therefore, serving a small version of the image, with a quick download time and a small size of only 50k, will achieve the same desired display while making the page load much faster. Win.

Good Responsive Isn’t Quick, Takes Effort

One of the often-cited benefits of responsive design is that it saves resources – time and money. Is it true? Sometimes, if responsive is the only requirement, but not necessarily, if you want a truly great web experience for all visitors. Responsive, adaptive, and separate site methods all require a lot of decision-making, and still require design, testing, and revisions for multiple screen sizes. Responsive is not a complete solution. There is a lot more to consider, and to work on, when designing for today’s devices.

Responsive is not a complete solution. There is a lot more to consider, and to work on, when designing for today’s devices.

When allocating resources for a new responsive site your budget should reflect the goal of achieving an excellent experience for visitors using any device type, and allow for detailed differences between mobile and desktop experiences.

What Should I Do?

Instead of putting “Responsive Design” in your list of website requirements, think about your intended audience and build general requirements around their needs. After you have done that, you can start to look at the best methods for creating a website that helps your visitors achieve those goals.

Here are a few questions to ask.

Are you ready to redevelop your existing desktop website?

If the answer is no, then a different mobile-friendly strategy may be better. Converting an older web property, which was designed without any thought to mobile, into a responsive design is likely to require as much time as re-building the entire site from scratch. In this case, an adaptive site, or even a separate mobile site connected to the same content database, would be a more efficient and perfectly user-friendly approach. Done correctly, it will not negatively impact SEO and can provide a rich, excellent experience for the visitor.

Does your website need to contain features that would be difficult or impossible to present in a responsive template?

Does your website have specialized tools, calculators, complex or long forms, advanced event registration, or other features that would be problematic on a small screen? Tools that require more visitor interaction or data input are problems for mobile users, not because of the page formats, but because of the level of participation required. That’s not to say that features of these kinds cannot be made mobile-friendly, but complex website offerings may require a completely separate mobile strategy that isn’t really all that compatible with a responsive-only approach.  This is one of the primary reasons that large, highly-trafficked websites often employ various development methods for mobile, including adaptive and separate mobile pages.  

Do you want tight control over the mobile (or desktop) experience?

One of the benefits of adopting a mobile strategy that isn’t based entirely on a single responsive site is that you can tightly control the mobile experience. Separate templates for mobile means that you can create experiences that are wholly independent and not impacted by the rules of larger format considerations. You might also achieve tight control by using a responsive design and also employing adaptive methods along with it.

Takeaway

Methods and techniques are only a means to an end. Don’t get hung up on buzzwords and oversimplified best practices. Think about your clients and visitors and then build a website that creates a positive experience for them using any and all available methods.


Search