Responsive Design: What Could Go Wrong? Well, a Lot.

Responsive design sounds like a cure for everything that ails your website, right? I mean, all you need is one code base to program your website to fit itself on whatever screen — whether a 27” monitor or 3.5” smartphone — a particular visitor is using, thereby negating the need for a separate mobile site.

We are big advocates of responsive design. But we do see some people using responsive design badly. Studies show that as much as 30-40% of visitors will come to your website from mobile phones and tablets in 2013. These numbers make it imperative that you make sure your website shows up well on the top 3 screens: desktop, mobile, tablet.

But responsive is no easy task. To prevent any major snafus, here are six potential problems that can happen to your website if your agency or developers don’t know what they are doing when it comes to responsive design.

1. SLOW LOAD TIME

There is a right way and a wrong way to code up your site for responsive design.

The right way is to use conditional media queries.

The wrong way is to use media queries that set “display: none” for content that you want to display only on mobile. This requires that visitors to your site download a single set of code regardless of where they are viewing your site – on mobile, on an tablet computer, or from a (regular) desktop or laptop computer.

2. DEVELOPERS & DESIGNERS DON’T KNOW WHAT THEY’RE DOING

We try to hire developers and designers who have prior experience or actual education in modern site coding using CSS3 and HTML5. Lots of front-end application developers don’t have the requisite experience or training because they’ve probably spent the last 18 – 24 months working heads down for you developing a killer SaaS application. Though this makes them awesome at building the front-end of web applications, it doesn’t mean they’ll be awesome at developing websites designed to be responsive and persuasive on all 4 screens.

Your current development team is great – we’re sure – but aren’t these the same people who are a) overworked and b) juggling a huge backload? Passion for a project is great. But it’s your time and money your internal developers will be spending as they learn the ins-and-outs of a very new, very cutting edge, and somewhat tricky technology. (HTML5 – for example – is not yet an official standard – which means that every HTML5 site needs to be tested with a great deal of care across various browsers and device types.)

3. NOT MEETING DIFFERENT EXPECTATIONS

Smartphones, tablets and desktops are different devices that encourage very different visitor behavior. But catering to these different expectations is expected. The key is crafting an experience optimized to the device without compromises.Tablet and desktop users expect a ‘lean back’ experience where they can conveniently browse websites and spend time viewing content or researching a purchase.

In contrast, smartphone users are impatient and expect websites to deliver a more abbreviated experience (in general), so that they can “get in”, “get out” with minimum fuss and clicks. Simply, visitors from a smartphone don’t want to be bothered with all the content that one would expect to see on a full desktop site.

However, studies show that many web searches start on smartphones and end up on the desktop and vice versa. That’s why it’s best practice to give visitors from a smartphone the option view your entire website.

4. SCROLLING, SCROLLING, SCROLLING

This may be an issue of poor design rather than responsive design, but re-scaling desktop pages for smartphone screens often results in very long pages that require a lot of scrolling.This obviously isn’t a great user experience and also isn’t great for SEO, as it leads to a page that lacks focus around a handful of keywords.

One of the key design features of smartphone optimized sites is that they don’t require a great deal of pinching and scrolling.

5. IMAGES ARE NOT SCALED TO THE GRID

This is one of the main problems that smartphone developers are battling with at the moment. The basic issue is that an image that suits a 27” desktop screen probably isn’t what you’d choose for a 3.5″ smartphone screen. For example, say you’re showing off a brand new product – on a desktop screen you might show an image of somebody using the product, but on a smartphone screen where space is tight you’d probably choose a more functional, close up image. Set your images to scale with your grid and/or use conditional queries that substitute a different sized image on mobile. This sounds (and is) basic but you’d be surprised how many responsive-device sites we review that don’t do this routinely.

6. FLASH PROBLEMS

We can’t tell you why people do this. But yes some so-called “responsive websites” incorporate assets in Adobe Flash.

Flash won’t display properly on any iOS device. While Android devices predominate in the rest of the world, in the US, iOS remains a VERY IMPORTANT platform. Don’t get left out in the cold. There is virtually nothing you can do in Flash that cannot be done as a Javascript effect that will run flawless on iPhone and iPad.