10 Responsive Design Questions Answered
In last week's webinar The Truth About Responsive Design <--- available on-demand now, we had a surplus of insightful questions we didn't get a chance to answer live, so we're answering them here!
Q: On the subject of site speed/performance, you spoke about how responsive might NOT positively affect things. How often does the adverse affect take place - slow things down? In theory, more code needs to run, correct?
A: The earliest responsive sites were notoriously slow loading because focus was on making the design work across breakpoints, and performance was an afterthought.
Optimizing for performance using image compression, reducing your number of scripts or using a content delivery network is critical for responsive sites, but an equally tuned adaptive site, because it can eliminate any code that doesn’t need to be there, is always going to be lighter and faster (redirects to mobile-specific domains can eat up some of the time advantage).
However, the degree that a responsive site is plagued by performance lag depends entirely on adherence to best practices, and the priority that performance takes when making design decisions. As mentioned in the webinar, responsive design may not be right for you if you’re not prepared to make the sacrifices (in content, features, etc) required to ensure a fast mobile experience.
Q: What about RESS? Do you not consider that responsive design?
A: Yes, RESS is certainly responsive design, though an advanced approach.
For those unfamiliar, RESS (Responsive design with server-side components) is a proposed concept of Luke Wroblewski’s which aims to bring some of the advantages of server-side adaptive into responsive design. It’s primarily responsive design in that it uses one set of templates residing on one set of URLs, but it uses device detection to deliver an optimized source order, for example (e.g. placing a menu at the bottom of the page for mobile rather than the top), or smaller images designed for the small screen, not simply just scaled down from desktop.
Being that this is an advanced approach and given our time constraint, we chose to cover the high-level differences of responsive vs. adaptive in our webinar. But this is definitely an approach that can potentially improve performance for responsive sites and offer the design and optimization team more control over their mobile UIs.
Q: What would be the advantage of Adaptive Design over Responsive Design?
A: The three biggest advantages are:
1) Lighter code which translates into faster page load, which is important for keeping and converting visitors.
2) Speed to market – it’s faster to build a mobile site without having to consider how the template works at multiple breakpoints. The time savings may, however, be eaten up longer-term with site maintenance, especially during new code releases on your main site – your mobile site must be updated in a similar manner, which may push back release dates or cause an inconsistent experience between domains.
3) You have a higher degree of control over content and UI when you build specifically for a device type. RESS as discussed above can improve your control whilst using responsive design, leveraging server-side delivery for pieces of your content or experience when necessary.
Q: What are the merits of choosing a framework (like Bootstrap or Foundation) vs writing your own custom code to make your site responsive?
A: Any time you can leverage frameworks built by others to skip a learning curve and hit the ground running, you’re going to save time and money (depending on the cost of the solution). What you want to consider when choosing between frameworks or deciding whether you want to work with a framework is how will it fit with what you’re already doing and what programming languages and technologies your team is currently working with.
Q: Has anyone encountered difficulties integrating social media feeds to a design, given the new (large) fixed format specs given by Facebook and Twitter?
A: This is a tough question for me to answer as I’m not a developer, but yes, your layout can “break” at certain breakpoints. I did some research and found this thread which offers a number of workaround options (for Facebook), your mileage may vary.
Q: A few discussion points - responsive design & conversion rates: We feel it most certainly SHOULD increase conversion rates. That's a primary objective of responsive design, to remove barriers to conversion, no matter what the metric. Second, 'starting small' with a Home or LP is kind of risky, presenting an inconsistent UX across pages, which could bomb for users lead to customer dissatisfaction.
A: I’ll address these separately:
1. Increasing conversion rates?
A lot of the cases you’ll find out there about conversion rate improvement measure conversion rates sequentially against a non-optimized site, rather than a true A/B test that can compare 50% of traffic sent to a responsive site vs to an adaptive. If the offers, design and user experience is identical between responsive and adaptive, the main non-UX variable that impacts conversion is page load speed – and sadly, responsive is at a disadvantage here.
So responsive design isn’t a solution to conversion problems (design, merchandising and performance tuning is). Rather, it’s a solution to the business’ need to satisfy mobile users across devices, and from a business’ perspective, doing so in a more scalable, efficient and consistent way across devices. Moving from no mobile optimization to an adaptive or responsive site will definitely increase conversion.
2. Starting small
When redesigning a site for responsive, the larger the number of templates, the more work you need to do converting them over. You may choose to launch with a smaller set of responsive templates, like home, category, product and checkout process, leaving other areas like community, about pages, or blog for future phases. Some sites like Microsoft have rolled out a responsive home page and progressed from there to other areas of the site, which is an approach far less common but possible.
A responsive landing page tied to a specific campaign can be connected to product or content pages that are responsive (think microsite / guided process). This way you can keep the experience consistent, and you can test it against similar, non-responsive campaigns.
Q: Is there a particular ecommerce industry/vertical that has adopted responsive design faster than others? Fashion?
A: I recently surveyed the Internet Retailer 500 and found only 2% currently have a responsive retail site (as of May, 2013). Keep in mind, 38% had NO mobile optimized site. It’s a small number among the largest sites, and no one industry stands out. However, the larger the site, the more complex, lengthy and the responsive design process is. I’m observing more smaller ecommerce sites picking up on the trend faster. In fact, the smallest sites that use pre-built responsive templates have the quickest and cheapest route to responsive. And of small to mid-market, I see a lean towards fashion (apparel and accessories) being early adopters.
Q: Shopping apps have become very popular and have launched a new trend for “Showrooming.” Google recently stopped their support for their Google Shopping app. In light of this, where do you see the future of shopping apps going (Red Laser, PriceGrabber, Amazon Price Check, etc) versus using their websites if we assume all major sites will have responsive design in the future?
A: Because responsive design is a browser solution, it doesn’t replace the utility of or benefits of apps. HTML5 is more of a threat to apps as having an HTML5 site that is app-like to serve all devices rather than develop for each native platform is an attractive and lower cost solution for many businesses. Some sites choose to support both native apps and HTML5 to cover all the bases, as some users simply prefer to use the web than download an app for every site and brand they like.
Responsive design and HTML5 are different technologies, and you can build a responsive site with or without using HTML5. With regards to showrooming, having a responsive site is beneficial in a few ways:
1) Shoppers using marketplace shopping apps search for products, click links and want to be redirected to usable pages, not to mobile home pages or unoptimized sites.
2) Advertisers are paying for referrals from these sites in many cases, so it pays to make the most out of these visitors, and to ensure they are directed to mobile friendly pages.
3) Showrooming behavior benefits online sellers, as customers turn online to find the best price or missing size. Mobile search ranking can be affected by your bounce rate and also your technical implementation of redirects (for adaptive sites), for example. Responsive design can help your mobile SEO, and conversion from showrooming behavior.
If apps decline, I predict it will be because either users show a stronger preference for the Web, or device fragmentation becomes so complex that coding for each platform becomes unprofitable.
Q: As responsive design grows, what is the future of third party partners who provide mobile website optimization for ecommerce retailers? It sounds like they will need to reinvent themselves!
A: There will continue to be a market for 3rd-party solutions for sites sites that determine responsive is not right for them, whether it’s cost, speed to market or some other reason, but that market is certainly shrinking. Many of these solution providers are making their move to providing responsive solutions to avoid being disrupted.
Once again, you can catch the full responsive design webinar replay including the questions we did cover on-demand.