Internet Retailer Webinar: Steps to Achieving Responsive Web Design Success

and I'll be moderating this webinar we'll be talking today about the hottest topic and website design for retailers and that is responsive design this is a technique for building websites that lets a single site adapt to the size and capabilities of the decisions of the device the consumer is using we've gotten also our lip line up of speakers they include mark Grandin a Forrester Research and expert and responsive design and other digital experience delivery technologies Brendan and falkowski founder of gravity department the strategy and design firm that specializes in e-commerce for a mini device world where in the disaster also a contributor to Magento's developer advisory board nigel HSN a director at TTI floorcare who has developed the e-commerce platform for TTI the supplier of such popular floor floor cleaning brands as Hoover and dirt devil he recently developed a responsive design side for TT TTI that's producing a big uplift in mobile sales and Shanon Parker hain director of product marketing at Magento the provider of e-commerce technology that is the sponsor of today's webinar you can ask questions at any time using the question box on your screen and we'll take them at the end and you all get an email afterwards giving you instructions on how you can access the slides or gristick we'll be presenting today you'll get that email in the next 24 to 48 hours so let's begin responsive design is important because consumers aren't just looking at retail websites on computers as you all know there are also very often shopping on tablets and smartphones how many 160 million consumers own smartphones according to comScore and 42% of US adults own adults own tablets according to the Pew Internet research center that translates to 101 million tablet owners and they shop on those devices I took data from a Harris Poll last week and calculated out how many consumers are shopping on smartphones and tablets the answer of 32 million on phones 34 million on tablets and it's not just about selling to consumers on mobile devices also reaching them most of retailers email 59% is now open on smartphones and tablets according to a report released yesterday by Forrester and shop org in fact consumers now open marketing emails slightly more often on smartphones than on PC that poses a quandary for every retailer selling online do you create separate sites for PCs tablets and smart smartphones and make every change your site three times or do you go to responsive design adding a new product or promotion just once and programming the site to display properly depending on the device in our research for the mobile 500 which ranks North American retailers and brands by their mobile sales last year we found 39 in the mobile 500 and responsive sites we're just about completed with our research with the 2015 edition of mobile 500 which will be released in September and the number of mobile 500 retailers of responsive sites this year is 101 the reason for this growth is simple it's easier to make a change quickly when you only have to make it once that's why Hertz one of the first big companies to adopt responsive design two years ago went that route Joey across explained to me last year why he did it and this Court have sums it up he was the CIO of Hertz when it moved to responsive design unveiling its first responsive site late in 2012 but here's the bad news many responsive sites load slowly especially on smartphones here are the results from a study keynote did for internet retailer of the spring comparing the home page load time of 12 retail sites built using responsive design techniques as you can see on average the homepage took 18 seconds to load on a smartphone not many consumers going to be around when that page finally does load and here's one example from one of the retailer studied you can see how the sweetwater site renders differently on a PC versus a tablet versus a mobile phone and the speeds on tablets and PCs are good but a smartphone takes almost nine seconds to the site to load and that is too long so our speakers will explain to you that there are ways to make responsive design work better and we'll move to them right right now I want to remind you that you can ask questions any time we'll take them at the end and that you will get an email within the next two days telling you how to get copies of the slides with that I'm going to turn the mic over to Mark Brennan a Forrester Research thanks Don and thank you everyone for joining today really excited to talk to you about a topic which we've been investing a lot of time and mental energy on which is responsive web design and how it's an important strategy for those building for a multi-device world but I wanted to initially follow up an echo one of Don's points he talked about the overall momentum that mobile is enjoying in the number of devices and and they overall willingness to browse and shop on mobile and this was backed up by our own data which came out in May we forecast that by 2018 the United States mobile phone and tablet commerce sales levels will have skyrocketed over 2013 because in 2013 it represented about sixty to seventy billion dollars in overall commerce sales by 2018 we expect that number to be close to 300 billion and represent over 50% of all ecommerce so with that opportunity in mind we need to start looking at the techniques we can use to deliver and optimized for mobile experiences so to do that today we'll look at responsive web design as a strategy when to choose it and the pitfalls and best practices that surround those projects and lastly how to analyze and measure the value of responsive web design first we need to look at the elephant in the room typically mobile apps many customers that we speak with tell us that their customers are more engaged on mobile apps and they are on mobile web they simply get more attention from their users and this makes sense because it's an analogy I like to draw with Times Square in New York City it's hard to replicate and you can't really pass off that experience anywhere else other than an app store other than Times Square but it's expensive and you're competing for mindshare in a very busy visual environment so it's not necessarily sustainable for all of your mobile initiatives so with that in mind we need to look to alternatives and mobile web is increasingly becoming a good alternative or even better alternative given the business case for your mobile initiatives and mobile browsers now represent more than 25% of overall web traffic by Akamai's numbers and that's just o up over 7 percent year-on-year so 18 percent in 2013 25% in 2014 and those numbers are pretty dramatic for most of the customers we speak with many of you on the call today may have already seen 25 percent and surpassed it a year ago so these kind of numbers are making mobile web a piece of your overall digital landscape that unit can no longer ignore so with that in mind we need to build for mobile web but if we were going to build for each of these device types desktop tablet smartphone or to do that separately the overall content complexity of code and cost to maintain this would spiral quickly out of our reach so with this level of device fragmentation with users coming from multiple devices within the same buying cycle and all these other factors we need to look at ways to manage and deliver content by building a single experience that can respond and adapt to the device constraints in real time it simply isn't tenable to move forward with a device specific approach so we get to the logical conclusion while you're all here today a responsive web and a good way to understand this if you don't already understand it is that with one web experience you can tailor it to the individual device constraints using device detection and that allows you to deliver the experience either responsibly or adaptively and while the end user sees very little difference it will have implications for your design development efforts what you need to know today and a high level is a responsive means the decision is made on the client-side within the browser it downloads everything and decides then what to render or on the server-side whereby device detection tells the server what device is calling and then you deliver the appropriate modules of content for that device so now we have a good understanding of responsive web design within the overall context of optimized web we should understand when to select it and Forrester decided we need we need to get past the emotions that surround many enterprise decision making cycles I used to maybe be on the desktop team or you maybe used to be on the mobile team when we no longer have those silos in place and making the decision to go responsive could be a question of who is more important in the organization so you can break down that emotional context with these seven questions but I want to focus on the top three because they actually shape more of the discussion than the bottom before so first how many devices how many screen breakpoints are you going to support if you're simply tackling mobile for mobile sake and you want to leave desktop intact you could do a mobile only site and and deliver that under a separate URL on a separate codebase and you can even deliver that with some more responsive and adaptive techniques built in but you're not replacing the desktop so that could be one that should be your primary consideration what are we designing for today based on our mobile users and our overall web traffic needs secondly what is our budget because realistically designing for responsive or designing across multiple device types is more expensive if for no other reason then the permutations of content will make development and testing efforts longer and unfortunately we're still in early days whereby talent pools are limited so you're no longer able to leverage the same desktop resources for your front-end development efforts that used to for this responsive efforts you may have to go outside your four walls to a third party like a like an agency or an SI and number three how complex is a subset of content if the device if your content shares all of the same design parameters already then you may not need to go responsive because there's less of a need to streamline that experience across device types however if that content is relatively complex you're probably in need of a content a front-end overhaul anyways and responsive is a better fit because you were already going to undertake a large web or front-end initiative regardless and now you can tackle that long tail of mobile devices that have been plaguing you to date and the bottom four are not unimportant but I want to kind of gloss over them because effectively what you need to do is you need to take a very unemotional approach to deciding whether or not your priorities line up with the strengths of responsive web design and increasingly we're hearing from our customers that they are they absolutely are aligning and they are deciding to build responsibly because mobile and the growth of mobile is just too big to ignore so let's pretend for sake that we all just convinced each other that responsive is the way to go and that we're gonna set our paths on responsive and start to tackle this development project well there's some key pitfalls here and best practices to help us avoid them I want to walk you through those or at least a few examples but first we need a framework rather than walking through this one by one let's look at this holistically and foresters idea cycle is a framework to do just that it was developed by Collett my colleagues who recently released a book called the mobile mind shift and it spawned a stream of research here for Forrester clients but essentially what it allows us to do allows us to break down our development priorities in four key steps identified design engineer and analyze and while this was specific to tackle mobile it is also perfectly acceptable to look at this for responsive web design even if it includes desktop and I'll come back to this cycle in just a moment but I want to acknowledge one other thing before we get started that should be at the forefront of your conversations when you step into a responsive project and that these development project barriers these six items here on the screen from disagreements over context and content priorities all the way through immature tooling those are barriers that you as a Project Lead or maybe your colleagues on the technical side of the house will be facing but they won't necessarily be in line with the business's success requirements and if you can align the technical priorities with the business's success requirements up front you can potentially mitigate a lot of issues we spoke with one client who as a technology vendor they were brought in at the very last minute to mitigate a really big issue with their client the client had rolled out the responsive site and they saw conversion rates plummet absolutely fall off a cliff and that is a nightmare scenario for any retailer because responsive web design is hard and you will work at it for six or nine months potentially before rolling out the site and then then only to see your business metrics not reflect that effort would be a true tragedy so aligning against these requirements and project barriers from the outset will help you get to success for all of your stakeholders so back to the idea cycle the idea cycle will actually allow us to initially tackle some of these pitfalls during the identify stage not only will you be looking at mobile traffic parameters and creating device priority lists and looking at content you also need to understand what's been slowing you down to date leveraging best practices where possible to accelerate your project and I chose this image picture of barnacles on a boat propeller because when you start to look at your overall information architecture and content strategy it's very likely that you'll find content that has no real relevance in your new responsive web design environment and if you can do what the director of a digital media practice that a financial services firm we interview did you could potentially gain the same benefits of paring down your content from 20,000 pages across languages down to eight and that content audit that information architecture investigation to streamline their content and move forward for responsive actually allowed their overall web practice to move faster going forward in the same way or moving barnacles off the bottom of the boat would allow you to move faster and that's just one best practice amongst many to help during the identify phase but I think it's critical for those of you who are taking your content in math and moving it to a new front end it actually would behoove you to look at your content upfront before the project gets underway or maybe in parallel with some of the other requirements gathering to help you move faster down the road now second during the design phase there are many barriers here it's not to mention skill sets and other things we've mentioned already but one key barrier I wanted to call out here is the fact that your design teams are not necessarily on the same page as your development teams and you can bridge this gap to make that communication smoother and you should because it'll allow you to accelerate through this phase and come out with a more quality result on the other end and this is due to the fact that your designers may have been developing static PDFs to throw over the wall for the development team to build out and that doesn't bring design intent with it especially if the design is meant to fluidly flex adapt or responds to the device types so there are some tools out there or frameworks that your teams can collaborate with and allow them to move through that design development cycle faster with better results and one of the CEO is one of these products we spoke with told us their client their enterprise client moved from a three-month design development cycle to two weeks and that kind of time savings will have dramatic impacts on your ability to tackle the long tail of testing requirements or other requirements down the road and give you that kind of slack that you'll need to make sure that this site is performing well and will meet your business's requirements and again just 1-bath best practice out of many third during the engineering phase of the idea cycle many folks underestimate the long tail of requirements and I chose an iceberg here because for those of us who remember this lesson back in grade school 90% of the mass of an iceberg sits below the waterline and similar for that mobile carries a lot of baggage with it that can impact your overall engineering requirements because your existing systems your content management systems or your underlying data management solutions your your web architectures your network architectures may not be up to the task of scaling towards mobile requirements and specifically for speed and Don called this out really well earlier look how slow this sites loading on mobile 18 seconds no way anyone sticking around for that well that is a scary story but realistically you can solve for some of those performance issues proactively first test test and monitor your current state before you even begin responsibly so you can create a bet benchmark or baseline to compare the new site against and test against as you move forward so that when the new site does roll out and it may feel slower you can point back to raw numbers and and make sure that your business isn't reacting to something that's more of an emotion rather than an actual data point – there are some real techniques here when you're developing front-end code front-end optimization techniques that allow you to optimize for mobile essentially Mobile has a smaller screen size therefore there's little less content that would give the appearance of the site having fully downloaded and rendered if you can prioritize that on screen or above the fold content you can give the illusion of performance second right size images and I can't emphasize this point enough images make up the vast bulk of web experiences to date because we're delivering for Retina displays on MacBook Pros or what have you that is punishing the mobile user experience because it's forcing them to download really high resolution images even though the user has no chance of benefiting from that really high res image so if you can use server-side techniques to render the device image in real time or if you can use server-side techniques to deliver a different version of the same image you'll help lighten that overall payload for the end user and last compress the code make your end-users make fewer round trips back to the server that reduces latency and it also reduces server load so that your systems can meet those needs with less strain so those three pieces constitute what we call and what the industry calls feo or front-end optimization techniques but they aren't they're the only three techniques there are many others here then you can have those ongoing performance conversations with many other stakeholders your designers can use open web fonts as opposed to custom fonts your application architects can identify potential application call bottlenecks within your overall architecture your network engineers can can make sure that they're not doing any kind of traffic management that would undermine your performance on mobile and your third party acceleration service providers like CD ends can do these feo techniques in conjunction with caching and other performance techniques to make sure that the site performs as fast as possible and lastly if you're if you're in the technology side of the house at your organization and you're saying there's no way I have budget for this well good news your colleagues in e-commerce your colleagues in marketing actually have direct reporting structures about these business KPIs so if the site isn't performing they're gonna pay for it they're gonna hear about it so fund it with their budget and bring them in on those performance conversations so now that we've solved for engineering or at least one of the issues around mobile engineering which is site acceleration we can get to our final step of the idea cycle which is analyzed and a lot of people are looking at well we need to know about this first so we can build the business case so I want to identify a few of the metrics you might be able to look at you'll be able to look at the metrics and the business value metrics that relate to specific page functionality so depending on the scope of your overall development a responsive web development you can start looking at increased site traffic you can look at average order size of your retailer you can look at reducing shopping cart abandonment rates or reducing bounce rates and you can attribute it to that specific functionality and therefore you can justify the investment in those areas of your site but that's a very developer centric view of how do we tie page functionality to business metrics a better way is actually to leverage our framework we have forced as a mobile measurement framework that tackles this whole issue holistically and you start with technical and you move to engagement and then business metrics and what this allows you to do is allows you to tell a story over time that appeals to not only technical folks but also your CX & UI people and also your business stakeholders and you are able to tell a story that's important and relevant to each of them in turn so by looking at your bounce rates in context with the overall device stats and crashes and then looking downstream for your epsilon revenue you're telling a whole stick or end-to-end story and this is obviously part of an overall iterative iteration in your web strategy so we want to acknowledge that many of you won't build your entire site responsibly right out of the gate you'll need to use early wins to gain support for future projects razorfish and agency a large agency in the u.s. told us about one of their clients who even though they're in the enterprise manufacturing space with no real direct KPIs attributed to their responsive site they were able to reduce their cycle times their campaign cycle times from six weeks to four after pivoting two responses which is a 30 33% decrease which was very significant for them it save them time and it made them more relevant when they got to market and armed with that win they were able to get the ear of their c-suite and maintain further investment in their digital marketing capabilities and for the retailer's on the line absolutely call out those direct business metric wins guerrilla another agency we spoke with told us about their client 511 tactical and their metrics saw such a dramatic uptick they even agreed to share them here today their sessions and visits increased almost 200% on mobile their revenue on mobile increased over 200% and their conversion rate increased almost 50% and while there is a caveat here they only built responsively for mobile because they weren't yet ready to retire their desktop site this is potentially enough of a impetus to get their business leaders on board with responsive they could then soon retired the desktop site and the whole organization can then move faster and make changes faster across web channels so with that I thank you and I hope you've been putting some questions into the chat window looking forward to tackling those the end but right now I want to hand off to Brendan falkowski from gravity Department he's here to share some of his recommendations based on his experience building sites for online retailers and merchants thanks mark hi everyone I'm Brendon falkowski I'm an independent design consultant and for the last three year they're special Wednesday and responsive designed for e-commerce I regularly speak about my work for clients like skinny ties and Angry Birds and eBay and Magento and currently I'm working with four billion-dollar e to be industrial supply company on it responsive design and I'm also building a framework for Magento enterprise called made from it the biggest problem that I see when companies approach responsive design incorrectly is trying to squeeze their current desktop site into a mobile form factor mobile first is a methodology that asks you to design interactions by thinking of what happens on the smallest screen first this forces you to prioritize the critical information and interactions before you think about layout and other things that aren't really available to you when there's only six declensions to work with and then you let that hierarchy and priority define the site's structure the companies that really struggle with mobile first thinking are often led astray by either their own MDOT site or one they've seen from a competitor and if you're only viewing mobile as this stripped down experience then it's going to be hard for you to visualize how a user's experience on the site needs to scale across the form factor of many different size devices the best way to reframe this that I found is by asking on those MDOT sites what makes a user click the view full site link in the footer because that's effectively a vote from them that the stripped-down mobile version isn't working for their needs it's not helping them and it's especially obvious when a responsive site which does Desktop first because everything from the header is crammed into just the narrowest layout and that typically leaves no room for actual content on the page now in this example you might not notice this when viewing to responsive sites on a tablet because they tend to look pretty good at a desktop size but it's more obvious when you see the same sites on a phone a short exercise defining what the most important interactions for the store are can help you organize the mobile view more efficiently so in this case it's navigation to categories the cart accessing my account and search and then you can scale that up to a cleaner site on a large screen you don't have to sacrifice the utility or depth in either view to create a winning experience Karen McGrane is a leading content strategist who's really has a wonderful description of responsive design as planning for your content to go everywhere there's a full spectrum of devices and the user is the one that decides which to use it's not really your decision as a maker of the site noting for the broadest support possible is the smartest strategy so nobody who's shopping your site to see how well it adapts across devices they just kind of expect that to happen seamlessly they're shopping with you because you have a product they want you have information about it and your services are valuable and today 34% of cellular internet users in America rely on their phone has their primary way to access the web meaning a laptop or a desktop or a tablet or either secondary devices for them or they simply don't have access to them at all people that are young or non-white or a lower income or a lower and education level are disproportionately part of this group but it's a big potential makeup of your customers so you shouldn't be ignoring them by only building for bigger screens and this makes it increasingly important that you don't cut content or features in order to launch faster or durable avoid difficult decisions not only is this going to hurt a large percentage of your users but it's also going to make your multi device users more frustrated nearly two thirds of online shoppers today have started their transaction on one device and finished it on another users today have the expectation that they'll be able to perform any action from whatever device they're holding this means filtering their search results reading reviews saving wish lists and checking out all need to be universally accessible and it's really not too complicated to build a consistent experience if you plan for it from the start but it does take consideration upfront to prioritize those functions in that information in the case of skinny shot ties we chose to drastically increase the complexity of their taxonomy by mapping every attribute about their ties to a standardized format now beforehand users could only navigate a rigid category tree based on Tywin's but this dynamic taxonomy helped us build multiple entry ways to every product and the linchpin in this taxonomy is that it's accessible from every type of product list on every device if you browse by new ties you can find just the wool ones and if you search for two-inch ties you can narrow down to striped eyes with blue accents it would have been really easy for us to say filtering is just too complex for phones and then only provide category navigation but that wouldn't have lined up with how our users shop and think and we knew that was true from analyzing the search terms they used and they're not designing the taxonomy around those dynamic attributes and hence designing their experience of shopping on the site that way designs like this aren't really launched in a structure that provides good material for case studies we kind of just put the whole thing out there in one go but the combination of responsive design and this flexible taxonomy contributed to a really massive boost in their revenue and their SEO value and their conversion rates across every platform and form factor it would be really extremely difficult to manufacture this kind of impact with any other marketing strategies and the best part for them is that it's it's been sustained they keep earning new customers because everyone that shops on the site has such a good experience regardless of what device they're using that they recommend it to their friends and I mentioned at the beginning that I've done a lot of speaking about responsive design and e-commerce over the last few years my talks build on each other so they're really good primer on the options it falls in decision-making that goes into responsive implementations both at a technical and a business level there's not enough time today but I hope you'll check them out if this is something your company is weighing the options for thanks for listening and now I'll hand off to Nigel hsm from TTI floorcare Thank You Brendan good morning I'm nitrogen and I work for TTI floor care as their is director for EMEA for those of you that don't know TTI are a group that have two main divisions power tools with brands like Milwaukee and Ryobi and floor care where in the u.s. our main brand is Hoover in Europe it's dirt devil and in the UK backs where we are currently the UK's best-selling floor care brand I've been asked to speak today as we recently completed a responsive site using Magento 1.14 Enterprise Edition and we had some amazing results that I'm happy to share with you so at VAX we have our main site which is VAX code at UK which is built on Magento Zenta cross platform and we had tried a number of mobile solutions as the traffic to the site had shown that we were getting more more tablet and mobile users and I'm afraid to say that our first few attempts were a complete disaster with conversion rates dropping even though we thought we put it right we by having a separate mobile site to MDOT thanks doc early UK it just didn't work so we then decided to look at responsive and were about to embark on what would have been quite a costly project to redesign banks for responsive when luckily for us Magento launched a 1.1 for with its responsive design it took us about half a day to mock up a responsive site to test the functionality and see whether it was delivering games that we thought we would want to have we have it in the UK we have something called a yard sale where I think in the u.s. they're called fire sales and what we do is we launch a site for five days we have keenly priced products that we want to shift from our warehouse this might be because we've got damaged boxes or overstock etc and alongside with a social media and email campaigns these are proven to be extremely effective for us and we decided that instead of converting back stock code in UK at the start we would test it the upcoming yard sale site with the magenta 1.14 and we've got a few pictures of how the site looked so this is the site looking on a desktop and then we go to a tablet and something you'd like to click next screen yep so that's a tablet screen and then we go through to on the phone and the last slide is on the checkout keeping it nice and clean we managed to complete this build and testing within four weeks and this also included adding PayPal to the checkout options and some other customer experience changes that we wanted to make one of the things that we had to do with the site is tested it's extremely popular and we aimed for the following which is 10,000 concurrent users on the site with a sub 3 second page response time during the last sale we hit over 1000 concurrent users for over 18 hours on the first day during the sale that number concurrent users didn't go below 500 I put admit I have always wondered what people were doing in the early hours I now know buying vacuum cleaners so what were the results that we had well to share some history one of our other sales in December which was exactly the same I saw at a yard sale but was not responsive or mobile we had a conversion rate on mobile of 2.7 8% on tablets of 7.8 for I think as you can see there the responsive site blew those figures away mobile conversion of over 7% and a tablet of over 11% even our desktop conversion increased by over 3% we do believe that by going and using the Magento responsive theme PayPal and adjusting our basket to be more streamlined gave us these leaps and resulted in a record for us of well over 1 million sterling during the 5 days with approximately 25% of that going by PayPal so what would be my recommendations if you're going to go down this route it's amazing how different the site's look from having an HTC phone to a galaxy to an iPhone and whilst there are a number of good testing tools nothing beats testing it with the real thing so look at your analytics see what devices people are using and then go out and buy them testing responsive takes a lot longer so allow more time payment options that allow near one-click and remove the need to hold a phone in one hand a credit card in another and entering details of why your nose should be used make the payment as simple as possible for people load testing is an absolute must when we first did it the server failed at a hundred users we now get close to 2,000 users per server and the end of the year we're aiming for the five thousands reduce the amount of products you have on the site if you've got too many things which are similar it just turns people off site speed always think about speed it's amazing what testing can do as some of the previous presenters have said look at what's happening on your site of a start reducing image quality that will speed the site up we had a problem that most of our designers were normally designing for boxes or for posters and they didn't comprehend that you don't need gigabit files but having on a mobile device in summary for us responsive has worked treat and we're now going to be moving on and converting back stock coding UK as quickly as you can but it is only part of a journey that ecommerce sites I think must now take to maximize the revenue and improve customer experiences so I'd like to thank you for listening to me and I will now hand over to Shannon jadon we're not hearing you are you muted so I am hi thanks Nigel and everyone this is Shanon Parker Haines and I head up inbound product marketing for Magento the sponsor of today's webinar I'm going to take just a few minutes to tell you about the magenta platform and how we're helping merchants like Nigel create responsive e-commerce sites let's let's start with just a little bit of background on Magento if you look at the Internet Retailer top 500 Magento is the number one ecommerce platform for mid-market merchants and by mid market I mean businesses with online sales of 20 million to 75 million it's also the e-commerce platform of choice for great brands like Alex and Ani Spanx and ice what's driving this momentum in the mid market well you know we're finding that merchants are realizing the Magento can help them succeed and grow by giving them greater control Magento empowers them to run their businesses their way by delivering unsurpassed flexibility through full source code for full source code control it also offers some other great benefits including high performance and a proven ability to scale as your business grows an extensive out-of-the-box feature set which delivers great value for the money and the most compelling total cost of ownership in the market we also have a global network of service and technology partners the merchants can work with to bring their visions to life and we also of course provide access to the technology and know-how of eBay a global commerce leader who will never compete with them relevant for our discussion today Magento has also lead a leading platform for merchants who want to pursue a responsive design strategy in fact 32% of responsive ecommerce sites in the Alexa 1 million are on the magenta platform which is more than any other vendor and as Nigel mentioned we just recently released a responsive design reference theme that merchants can use to accelerate the development of responsive sites the theme is full-featured and built using modern technologies with input from responsive experts like Brendan who spoke earlier today to ensure that it meets merchant needs and what we've heard so far from merchants who have used the reference name like shot shop 3m which is in the screenshot in this slide is that it's enabled them to get to market significantly faster and with good results so if you're interested in a full featured affordable and responsive friendly solution we encourage you to learn more about Magento by going to our our website Magento comm you can also find some information there about our responsive reference team as well thanks for attending today's webinar and now I'm going to turn things back to dawn for the Q&A session ok thanks Shannon well a lot of great contacts I think we've got quite a few questions already in the queue but you still have time to ask remember that you all will get an email before the end of the week explaining how you get access to the slides so let's go right to the questions first question it seems to me that content has to be reduced using mobile compared to desktop would you agree Brendan once you start with take that one first Brenden are you moving uted sorry I'm sorry okay if I disagree with that yeah if you're going to produce content and it's useful to users I don't think that's going to be different regarding their mobile or home context if the only reason you want to pare it down is to make it fit then I think you need to look at layout transformations to make that happen or starts a question whether that content is actually valuable okay anyway else we'll jump in on that real quick so this is Mark I would echo that comment we've heard from multiple enterprise clients and while that might be a little bit of a bigger scale in terms of complexity over the mid-market we see that if they do launch initially with a limited subset of content they're only kicking the can down the road that by delaying that they're actually doing themselves a disservice because they didn't build their information architecture and they're their navigation settings with the full breadth of content in mind so even if you can't deliver all of the initial content on the initial release I would say do that strategy work around your content and your navigation structure and some of that other those other considerations up front regardless okay here's a question for you mark would you recommend the responsive approach or the adaptive approach a good question I would say it depends I would say manage the content responsibly as much as possible and if you need to leverage adaptive delivery techniques to make sure you hit your performance thresholds then absolutely do it then you'll kind of get the benefit of both worlds the adaptive delivery piece specifically might at least initially seem difficult but as I mentioned there are third-party services out there that can help you make some of those rendering decisions server-side without any sort of extra engineering effort so I wouldn't shy away from it just because it sounds complex Brendan do you have any thoughts on that uh no I pretty much agree with that down the road okay and related question for you Nigel is the Beck's website responsive or adaptive the current leave axonal code at UK is just a standard desktop website we're now moving towards making it a responsive site the yardsale site was both so we live rigidly used to CD ends and we use the responsive site it's a matter of finding the way to deliver the right amount of speed without yep losing other bits and pieces so it's a case of trying to deliver the full functionality to all the platforms at the same time okay and what our listener says you've got such amazing results with the backsight why is it still not in production the young cells on it was effectively us putting a toe in the water to see whether we'd get the results that we look for and we certainly did so we now have a number of projects which are all to do with customer experience and the journey with the bank site so the main vent site probably within the next couple of months will be converted to a fully responsive site it's just that we've got so many things we're trying to do with our site and I think a lot of people will also find those sites are no longer now just about e-commerce you're also trying to do correct levels of support and other types of customer engagement and it's making sure that you convert those at the same time so it isn't just about having ecommerce as responsive it's about having your entire support and contact points for the customers being responsive so it's time for us to really okay question for you market others may have opinions on this you recommend removing videos and PDF files from the mobile mobile version of a website to improve the load time well I think it kind of similar to how we discussed earlier I wouldn't recommend removing the content altogether I would potentially recommended delaying the loading so you can use lazy loading techniques or at least you can give them an initial thumbnail image the user thumbnail image and then allow them to initiate the download separately or independent of the page render but I would not recommend removing critical content what you feel is is important for that experience okay questions for Brendon would you recommend using the new responsive theme that Magento has packaged with the Magento software or would you recommend for a small midsize business building one from scratch that's really gonna depend on what your goals are and what your what your budget is for the project really I think the responsive theme that's bundled with Magento 1.9 and 1.14 is a really great starting point if like with CCI floorcare you're just testing the waters and you want to see how something works quickly Nigel mentioned if they got their site up within a month that's a relatively small investment compared to building out from scratch which you know in my cases usually takes about eight months to go through the full cycle from planning to design to implementation testing and then launch if you are sure from a company and business perspective that that's a route you're going to take I don't see any problem with it I've never had a bad result I'm out of it but it's really about knowing what your resources and timeline is okay question for mark are there standard resolutions and other specifications for the platform's we've been talking about PC smartphone and tablet I think the question may be getting of the fact that these devices of course we're all changing their size what kind of resolution should that should a retailer work with so I think it kind of depends on the demographic of the customers who are coming to your site but traditionally it's sticking with the largest device categories out there and if you're talking about buyers on mobile devices in the u.s. specifically you're probably going to rely on Apple as your fallback so native resolutions for a 4-inch screen and iPhone and you know 8-inch screen on an iPad and essentially a high resolution desktop experience that can support that 1080 experience so I would I would certainly look at your web logs to just see what traffic consists of in terms of the different device types but those are the three typical use cases of a smartphone tablet and desktop but potentially you could even blur some lines because as your as you just said the device categories themselves are somewhat blurring because you'll have six-inch phones and 7-inch tablets means so the deadline becomes somewhat arbitrary at that point but you will need to make breakpoint decisions so that the content can reflow and be optimized for that range of sizes another after that yeah if you are thinking about where those breakpoints belong I would try not to orient them to devices that are in the marketplace today because they're not going to be there in a year or two I would route all your design decisions in the shape and volume of your content that's really gonna be a much more instructive way to to build your site so and then it really doesn't matter what device that a person uses to access it as long as you're fitting the design to the content you have in place it's going to feel appropriate on that shaped device okay here's a question Brandon seems related to your example of skinny ties example you gave with the filters question I asked if the mobile version should use filters more often than desktops to navigate to selected content I wouldn't say it should be more often I would want them to have an equivalent experience the main reason being that if I start shopping on a phone and decide not to complete my purchase I want them to be able to switch to a desktop and recreate that journey in the same flow if they can't just directly pick up their transaction on another device if you were to say take those filters out in one part of an experience then you're definitely going to lose the customer at a point okay a question for you Nigel what checkout system did you use on the backside we started with the standard magenta one and basically have crafted it internally so we haven't downloaded any plugins or anything else we've effectively built it ourselves but the starting point was the standard magenta one okay question for mark and others may have other opinions well are there good ways of dealing with images as a busy image will that will work on a large scale on desktop or tablet will won't work it when scaled down for a mobile device mobile phone virus thirties hearty hopeful points yeah I think your your your digital asset management solution perhaps can even tackle some of this if if by chance here in Adobe seen seven customer it can tackle this refocusing or focal point issue there are also third-party image rendering services that can not only handle the image transcoding but also allow your marketers to highlight the imagine how it will scale on and refocus on different device types so there's certainly our commercial options out there but they do takes extra effort and investment to make that happen okay and you can also do this natively through the picture element which is just become an html5 spec that allows you to specify multiple image sources for one asset so if you wanted to design one version of a banner for example on a small screen and then a separate version on a big screen you could serve the correct asset to the correct device using native browser tools so you have options to do it that way too yeah absolutely those those adaptive delivery techniques can clearly step in and save you here as opposed to potentially making other investments so yeah good point printed and good for performance all those commercial or non-commercial that's really the underlying salt there's you don't want to load all the images but only show one of them absolutely and it's not be our last question but how would you recommend rolling this out rolling out of responsive design side for example to a certain percentage of the audience Brenden or met perhaps nigel could talk by his own experience well obviously do it as carefully as possible I mean having a load balancer up front so you can direct a certain percentage and then you can gradually see how the site performs and the server performs so I definitely recommend having something like a load balancer in the front and then just gradually bringing it up and you can always then just swap over when you feel the site is performing as you want it to one of the things that we've done in the b2b space is roll out a beta version of the site and invite some of our clients into it somewhere they can have real customers test it out and provide feedback what's working and what's not working for them before we launch it to all of their customers okay I'm afraid our times up it's been a good discussion there's obviously a lot more to talk about you will all get access to the to the slide so you can study them and also a link to today's presentation I want to thank again Mark ran in the Forrester Research Brendan falkowski of gravity Department Nigel HSN of TTI floorcare and Shanon Parker Kane of Magento and thank you all for attending have a great day