After a year of deliberation, planning, designing and building, e-retailer Skinny Ties launched a responsive web design site in October 2012. Its among a small number of e-commerce companies taking the leap with the new web site design technique that uses one set of web content and one code base to display a site in ways that custom fit the size of the screen on the devices requesting pages. Responsive design is the alternative to building a mobile commerce site for smartphones and a specially optimized site for tablets.
Comparing the responsive site October 2012 through March 2013 with the previous standard e-commerce site October 2011 through March 2012, Skinny Ties has evidence that the highly flexible responsive site is paying off. The number of transactions grew 57%, units sold 78% and average order value 21%. Sales through desktop and laptop computers jumped 77% and via smartphones and tablets 211%. Android revenue is up 187%, iPad sales up 224% and iPhone revenue is up 473%.
“The responsive site has had a significant impact on the company’s bottom line,” says Brendan Falkowski, an independent web and mobile technology consultant who serves in an ongoing e-commerce and m-commerce capacity for Skinny Ties. “Every arrow went green in a positive direction. We didn’t have any negative aspect to the change.”
24% of traffic to Skinny Ties comes from mobile devices, with smartphones registering more traffic than tablets, the e-retailer says. “Phones are higher than tablets due to our demographic, which is younger people for whom a phone is the first device they go to before a tablet or desktop computer,” Falkowski says.
Skinny Ties has discovered something that more retailers are coming to learn: iPhone shoppers are far more valuable than Android shoppers. Consumers using iPhones were responsible for 5.3 times more revenue than those using Android smartphones, the e-retailer reports. “We focus a lot more resources on iPhone shoppers because they are the most important segment of our mobile customer base,” Falkowski says.
The alternative to responsive web design, and the more popular route to m-commerce among retailers, is to build an m-commerce site for smartphones and, less frequently, a specially optimized site for tablets. Merchants can add mobile apps to the mix. Skinny Ties eschewed this more popular route because it wanted to stand out among its fellow e-retailers.
“We wanted to make more of a technology showcase out of our site, because responsive hasn’t really been proven for e-commerce and the whole e-commerce industry has been trending toward mobile-specific sites,” Falkowski says. “The reason retailers are doing mobile-specific sites is because e-commerce content management systems aren’t built for making multi-device platforms. Skinny Ties uses Magento, which is a really strong platform because it’s open source, but it’s still built for a desktop-centric worldview. However, the freedom Magento allows to reassess and change the underpinnings of its front end made a responsive site practical, but only through stubbornness and heavy lifting.” Magento is a unit of eBay Inc.
Moving to a responsive site meant reconsidering content, features and functions so the site would look and work better on tablets and smartphones, Skinny Ties says.
“It meant throwing out things that weren’t really useful,” Falkowski says. “We removed a lot of things that are sometimes valid for e-commerce stores, but simply weren’t used by Skinny Ties customers, like gift cards, sharing by e-mail and advanced search. This helped reduce clutter at key points in the purchase flow and reduced the footprint of features we needed to support.”
Responsive design is in essence a collection of modules that get shifted around, up and down, left to right, to best fit a screen. Each module contains different content, features or functions. Retailers have to prioritize which modules will rise to the top when designing a responsive site and how large they will appear on screens of varying sizes.
“The big way we did this was thinking mobile-first, a design philosophy that has been paired up with responsive design over the last couple of years,” Falkowski says. “Instead of planning out the look of a site on a big screen, where you have a lot of space to move things around and make decisions, we looked at content on the small screen first, where you don’t have that freedom.”
Skinny Ties determined that Add to Cart was the most important action it wanted a consumer to take on the product page, so it grouped the product image and title and the Add to Cart button together and made sure that module appears first when a responsive page renders.
“Then supplemental stuff like product details and related products you can push down the page, they are not as important,” Falkowski says. “You do this for the home page, the checkout page, every type of page on the site. Different things are important in these different areas.”
Skinny Ties built the responsive site in-house. It says no special skills were needed for the project.
“All the responsive stuff is what you need for a general front-end skill set today,” Falkowski says. “You have to understand mark-up and Cascading Style Sheets, you need to know JavaScripts and be able to deal with design and usability issues.”
Skinny Ties declines to reveal the exact cost of the responsive site. The retailer says its cost for the site is not a good indicator of costs because it was simultaneously upgrading the e-commerce platform and rebranding the site, and because it built a responsive site when there were few responsive role models in e-commerce. As a result, every stumbling block required invention.
“Responsive design is still in its infancy, especially for e-commerce,” Falkowski says. “When I speak with companies today, $30,000 to $75,000 is the ballpark for a responsive design and build with Magento. If executed properly, the returns speak volumes about responsive design not as a cost but a value-generator.”