There’s a new approach to the up-and-coming responsive web design technique. This approach is gaining steam with some mobile commerce technology providers. Mad Mobile is one such vendor, and it has worked with Bare Necessities to create a responsive site for the lingerie e-retailer using this hybrid approach.
Responsive web design is a technique that uses one set of web content and one code base to create a single site that can automatically render differently to fit the size and shape of any device’s screen, from smartphones and tablets to desktops and smart TVs. In conventional responsive design, a retailer’s server delivers a single file, which can be rather large, that contains multiple versions of the commerce site to the web browser of the consumer requesting the site. All the work of detecting the screen size and pulling the correct version of the site and its content is handled in the web browser, the “client” in technology terms. One common complaint about this approach is that because the file sent by the server to the client is so big, page load times suffer.
The new, hybrid approach to responsive design is called RESS, which stands for responsive design plus server side components. In this approach, the one Mad Mobile and Bare Necessities are using, the different versions of a site are stored on the server. The server, not the client, detects the device’s screen size. The server then sends a responsive template to the client along with only the content and images that are optimized for that particular device. As a result, most of the work in this approach is handled on the server side, with some responsive elements handled in the template on the client side.
“Responsive design has the promise to build once, deploy across multiple platforms: From the C-suite of most businesses, a technology to allow them to spend once and deploy across multiple platforms is highly attractive,” says Jay Dunn, chief marketing officer at Bare Necessities. But, Dunn adds, “I have not yet seen conventional responsive design handle a true retail site. I have 6,000 products and over 24,000 product images, not counting color swatches, marketing, video and animation. I haven’t yet seen the pure responsive design technology that handles that smoothly and efficiently across multiple devices. For Bare Necessities, the ability to employ key elements of responsive design across mobile devices is advantageous.”
For a robust e-commerce site with loads of content and complex functionality, a pure responsive web design approach where on a mobile device you hide desktop elements and throw everything at the mobile browser is a bad idea because performance is slow and the user experience will likely be a one-column view that scrolls endlessly, says Greg Schmitzer, president of Mad Mobile.
“That’s why we advocate an RESS approach, which combines responsive design with server side components for better performance—the user experience responds and resizes to every screen, but the heavy lifting—for example, image optimization—happens on the server instead of in the browser,” Schmitzer says.
Bare Necessities will debut its Mad Mobile RESS hybrid responsive site for tablets and smartphones this summer. Currently 16% of Bare Necessities web traffic stems from smartphones and 15% from tablets, the e-retailer reports.
Vendors using the RESS approach that Bare Necessities employs say it leads to sites loading faster than they would otherwise. That’s because only the content that is needed for a particular device is sent from the server to the client, rather than one big file containing material for multiple versions.
“My smartphone traffic is going up, my tablet traffic is going up, and my desktop traffic is going down. What should I focus my energy on, the desktop site that works fine already on desktops, or the touch-points that are growing exponentially?” Schmitzer says. “Some retailers are starting to say, ‘Mobile first.’”
One of the advantages of this route is a retailer can focus on web page elements specific to a type of mobile device, says Babak Keradman, chief technology officer at Mad Mobile.
“On the fully responsive approach, images needed for desktop, for instance, get loaded to the client no matter the device,” Keradman says. “With RESS, when a client makes a request to the server for an image, the server recognizes the device, says it’s a smartphone, for example, and knows the screen dimensions, and says that client does not need big images, it needs smaller images. The image-optimization process creates a smaller image and sends that to the client, and, for example, may cache it off into a content delivery network to decrease page load times.”
Another advantage Mad Mobile’s RESS hybrid responsive approach has over conventional responsive design is that Mad Mobile is able to separate web site data from the presentation layer, in other words, the templates and Cascading Style Sheets, or CSS, Schmitzer says. CSS is a mark-up language used to define pages and denote where elements appear on a page.
“This gives us more control in terms of caching,” he says. “Things like CSS are considered to be more static in nature, making them ideal candidates for caching on the client device. This means that for many of our server calls, only the data on a page has to be returned and not the rest of the page payload that is typically delivered in traditional responsive design. This results in significantly smaller HTTP server requests throughout the browsing experience, which has a positive effect on performance.”
In the end, RESS beats conventional responsive design in site performance, Schmitzer says.
“Speed translates into conversions,” he says. “The RESS framework we have can deliver a page in as few as 16 server requests in 2 seconds, versus pure responsive web design, where you can have 2 megabyte file sizes, 118 requests, and 17 seconds to load, because you are sending a desktop experience in addition to mobile experiences down to a mobile device.”
Not only is an RESS hybrid approach to responsive design quicker than conventional responsive design, it’s less expensive, vendors who build responsive sites using RESS say.
“It depends on the site complexity, but for Amazon Webstore customers—we’re an official partner for mobile—we’ve offered to extend their e-commerce sites to smartphones and tablets through our RESS approach for as little as $50,000,” Keradman says. “Complex e-commerce sites with personalization and multi-tenant implementations cost more.” Multi-tenant refers to software that is shared by multiple businesses, or tenants. Amazon Webstore hosts e-commerce sites for retailers, and is a unit of Amazon.com Inc.
Atmosol, another mobile commerce technology provider that builds RESS hybrid responsive sites, says it costs $20,000 to create a basic conventional responsive design site and up to $100,000 for a conventional responsive site with extensive features and functions. There is no monthly fee, but maintenance and adding new features incur additional charges. Atmosol’s mComm hybrid responsive site meanwhile costs $8,000 to set up and a $300 monthly fee to host and maintain the site, which includes unlimited support and new features and functions that are incorporated for free as the company introduces them.
The RESS approach is significantly less expensive because a retailer typically isn’t recoding its entire desktop site for responsive design, a costly and time-consuming proposition; rather, it’s serving its standard e-commerce site, as is, to desktops and a responsive site to tablets and smartphones.
Favorite