Responsive Design Great for Web Sites Hard for Mobile Devices

Responsive Design: Great for Web Sites, Hard for Mobile Devices

5 minute read
Barry Levine avatar

Responsive web design (RWD) is generally regarded, as CMSWire writer Tom Murphy noted today, "just fine for now." But a new survey from Trilibis, a provider of mobile development solutions,claims mobile performance on responsive design websites is often "unacceptable."

Four out of five RWD websites provide suboptimal page weight and load time on mobile devices, according to the survey, "Responsive Web Design: Why Image Optimization Is Crucial for a Mobile-Friendly Customer Experience."

The survey examined 155 responsive websites. Of these, Trilibis found only 21 percent loaded in less than four seconds on a smartphone. Nearly a third required between eight and 48 seconds to load, with equivalent connectivity.

The Culprit

The culprit: image size, the former bugaboo of websites before virtually everyone got high-speed access. Images were more than half of the overall page weight for 69 percent of the sampled sites. If the overall page weight was greater than one megabyte, the survey found, the load time became unacceptable. And 61 percent presented a home page that weighed at least one megabyte.

As might be expected from the company that conducted the survey, Trilibis claims it has a solution.

The remedy is its server-side processing solution called Snow, which performs image optimization with the targeted mobile device in mind. Average page weight among all sampled sites was 1.8 megabytes, which Snow reduced to 789 kilobytes for desktop, 470 kilobytes for tablets and 420 kilobytes for phone. Page load times were reduced by 28 percent to 54 percent.

Suntae Kim, Trilibis' vice president of professional services, told CMSWire that Snow conducts a two-step image optimization process. First, there's optimization of all images on a web page, creating and storing an optimized version for each of three device groups – desktop, tablet and mobile browser. Then, he said, "when a web page is requested by a device, Snow will detect the device and serve up" an image optimized for its device group.

Starbucks - jpg.jpg

Trilibis: a 28 percent reduction in Starbucks load time with image optimization.

RWD provides one URL, one code base and one set of content, which is then rendered for a target device's presentation and features through the use of fluid grids and cascading style sheets (CSS). Trilibis claims that CSS detects the screen width on the client side, but that Snow detects device characteristics before the content is sent. Additionally, Kim said, CSS reformats layout and scales the image on the device side – after the image has already been sent and caused any loading performance issues.

Adaptive Design

By comparison to responsive design, an adaptive design approach builds different sites for different devices – a smartphone site, for instance, in addition to a tablet site and a desktop/laptop site.

There are some notable downsides for responsive designed sites. Any change to one version will ripple through all of them, it's a time consuming process, and older desktop browsers do not always support responsive design.

But adaptive design has a major SEO disadvantage. You need to have one URL for the different versions, which means your mobile device goes first to the desktop/laptop site and is then redirected to the mobile site – a likely performance hit. Otherwise, there would be separate URLs for essentially the same content, something that Google and other search engines are likely to consider spamming.

Ted Verani, senior vice president for sales and marketing at Trilibis, pointed out to us that his company's survey "was only for responsive sites, because adaptive sites have already been optimized" for each of its targets.

Learning Opportunities

He confirmed a growing sense among the web development community that there is "an explosive trend toward responsive web design," because of the single code and content base, the consistent visual identity, and the SEO issue. Forrester Research has reported the same trend. But, Verani said, "the biggest issue is performance" on mobile devices.

'Number One Offender'

"We're saying do responsive design," he added, "but add this [server-side optimization] to the mix."

When asked how his company's server side processing differed from other server side processing, he pointed to device detection, on-the-fly resizing and compressing, an all-in-one packaging that compares to the custom-programmed server side processing for many sites.

Peter Sheldon, vice president and principal analyst at Forrester Research, has extensively followed the responsive and adaptive design space. He told us he fully agreed "if you don't do anything to plan for [too-large images on mobile devices when using responsive design], absolutely the download time can be horrifically slow."

Images, he said, "are the number one offender." But he noted that there "are dozens of tactics you can do" – including employing Trilibis or several other vendors, such as Akamai, that optimize images for better device-specific delivery.

Sheldon gave us a preview look at an upcoming Forrester Research report on this subject, "Optimize Your Responsive Web Site Performance to Overcome Mobile Hurdles." Among other things, it points out the responsive designed sites can also hurt mobile performance because they force "devices to download more content than they will display," and they make "excessive service calls." We expect to review that report in more detail when it comes out.

Responsive website design is gaining popularity as a solution to accommodating a multi-device world, but, as Trilibis and Forrester point out, there are still mobile-specific issues to keep in mind.

Title image by MIMOHE / Shutterstock. Secondary image from Trilibis.