Optimizing the user experience for mobile devices is no longer a luxury—it's a must. Businesses have the option of building dedicated mobile sites for smartphones and tablets, or implementing responsive design techniques to serve all screen sizes.
But how do the different options affect the user experience and SEO? How do you determine which is right for your company?
In this webinar, you’ll find out:
This webinar is brought to you in collaboration with:
Good morning, everyone. Thanks so much for tuning into for this Mobify/Elastic Path joint webinar, "Is Responsive Web Design Right for Your Business?" We're really excited to have a chance to connect with you today.
These are our hosts today-my name is Tina Hoang. I am Product Marketing and Education Manager at Mobify. I'm pleased to introduce to you our presenters today. We've got Linda Bustos, who is the Director of Ecommerce Research at Elastic Path.
Linda oversees Get Elastic, the number one ecommerce blog according to "PostRank" and to myself-love the blog-while providing consulting services to some of the largest ecommerce sites in the world. She has been recognized on the "Ad Age Power 150" and the Top Ten Marketing Blogs in Canada.
We've also got Igor Faletski on the line, co-founder and CEO at Mobify. And he works to mobify the web. He has emerged as a thought leader in the mobile web development and ecommerce space. He regularly shares his expertise on publications, including Mashable, CNET, VentureBeat and Harvard Business Review.
In our one hour together today, we're going to run through our presentation and then open up the floor to your questions about mobile web development and which approach is right for your business. We won't be answering any questions as we move through the presentation, but please feel free to tweet us your questions and comments throughout this session with #RWDwebinar. We'll do our best to address them during the Q&A.
In today's webinar, Igor will share some interesting facts on the state of the mobile web today, then clear the air on exactly what is responsive web design. Then Linda will walk us through the pros and cons of the leading mobile web development approaches.
And Igor will show us exactly how to build a mobile site that Google will love. And Linda will tie it all together by sharing what you need to consider from a business, technical and user perspective. Finally, we'll open the floor up to your questions for Igor and Linda.
We appreciate you taking the time to join us today. We hope that you find value in today's webinar. Please keep in mind that we'll send you a recording of this webinar along with the deck in case you need to refer back to anything we cover today.
So, first, for those who aren't familiar with Mobify or Elastic Path, just a quick introduction here of who we are. Mobify is an open platform with features and services that allow you to easily adapt your website for mobile devices-that includes smartphones, tablets and more-and also improve performance on your responsive or mobile websites.
Elastic Path provides the leading ecommerce software that powers the next generation of digital experience and allows you to bring the combined power of all your technology to websites, apps, and other touch points for the ultimate customer buying experience. Mobify and Elastic Path work together to help businesses deliver amazing mobile and digital commerce experiences that drive conversions and really maximize revenue.
So, without further ado, I'll hand it off to Igor here. He'll talk about the mobile web and the big picture.
Thank you, Tina. So, first I'll talk a little bit about why we're looking at optimizing the web for mobile devices in 2013. User traffic — three or four years ago, you would see a very small trickle of smart phone visitors, perhaps one or two percent.
Over the last two years, the mobile visits to websites, ecommerce websites in particular, has been staggering. In fact, right now there are over a billion people out there that are using the web from their smart phone or tablet devices and you can easily picture how that number will grow to two billion, three billion and beyond over the next few years.
It's very important for us as an industry to start preparing for the next billion internet users joining the web from mobile first.
If you look at the overall web traffic, right now only about 15 percent of it globally is coming from mobile devices. That definitely ranges from region to region. The latest surge in mobile traffic has been driven by iPhone and Android adoption, in particular in ecommerce and publishing segments.
If you look at traffic for websites in North America, quite commonly it's 25-30 percent mobile for large retailers. If you look traffic in Asia, it can be even higher. Yet, overall, we're seeing their breakdown which is certain to shift towards mobile even more in the next few years.
The important part of looking at mobile traffic as a retailer is definitely considering that people generally move from one device to another when they browse a website or consider making a retail purchase.
Even though conversion on mobile is often not as high as on desktop ecommerce website, a lot of research is done on smartphones. More and more purchasing actions are shifting from desktop to tablet.
That's why anybody who is considering developing a web presence for a store should be thinking of a holistic picture of being on every device type that's out there. That turns out to be quite challenging for a web developer or a business to implement.
Users have very, very high standards for mobile experiences that they demand these days. When the iPhone came out with its app store, it set a very high expectation for every single experience that's in the app store being mobile optimized.
Even the poorest app you can get from iTunes is going to be a mobile experience. Now, are expectations for mobile apps are being transferred to websites. Users expect websites to feel and work as well as mobile apps do. 57 percent of the users say they cannot recommend a business that doesn't have a mobile site.
If you recall ten years ago, it felt like a business was a dinosaur in some ways without having a website. Now, it's the same thing about having a mobile or a tablet optimized website.
If you don't have one, you're falling behind the times. Increasingly, having a great mobile experience is becoming a competitive advantage where users will go to a different site like Amazon, which is better on mobile, versus your website if you don't optimize it for the mobile use case.
In terms of purchasing decisions, there is also a gradual shift of how many transactions are being done on smartphones and tablets. If you see here, the change between 2012 and 2013 has been only four percent in terms of mobile as a percentage of retail sales.
That's about to grow drastically, primarily because of tablet adoption. It seems that tablets, especially the mini tablets, are becoming the shopping devices of the future, with smartphones being used more for research than completing the transaction.
So, as we look towards the next three years, we see the percentage of mobile retail sales going up. Often times, it's the most desirable users that are going through this transition and switching from desktops to tablet. So, not only is it important of your audience, it's often the most active part of your brand-your hardcore evangelists, so to speak-that are going that route.
The tablet shift is something that caught everybody by surprise, even at Mobify. When we started the company, we were thinking about smartphones as being the primary channel. And then with the iPad coming out, there was this avalanche of tablet adoption in North America and increased share of visits and purchases being attributed to tablet browsers.
In fact, the end of last year was the first time that we've seen a demand for tablet optimization come before smartphone optimization. We've had retailers come to us saying that such a big share of their purchases is happening on tablets.
They're interested in optimizing the experience on tablets first before they take any action on the smartphone. And now with Android finally catching up with innovation on tablets, we expect this to continue to grow both in terms of percentages of purchases and just raw numbers.
A lot of times when we talk about tablet optimization, there's this question of, "What does it mean to optimize a website for a tablet? The desktop site seems to work just fine." This is the same thing that was often said about smartphone sites a few years ago-if desktop sites show up on an actual browser, that's perceived to be good enough. And that's not the case anymore.
It's the same way with tablets. A desktop site will probably be an okay user experience last year or this year. Increasingly, though, we're seeing a shift to optimizing websites so they feel more like full screen catalogues, full screen apps on the tablet.
As you can see on the right, there's a much better interface when it comes to reading, text, you don't have to pinch and zoom, there's no wasted space and everything is aligned much better. That's the future that we see for a lot of websites in terms of tablet optimization. It's especially important for the seven inch tablet, which is an emerging category of devices.
So, with that said, the need for tablet and smartphone optimization is very clear. This is a great time to start talking about the new hot trend of responsive web design, which is addressing this big problem that retailers have.
Responsive web design, at the very basic level, is a philosophy of creating websites that are adapted on different devices to fit the screen with, depending on what kind of screen is available and what kind of device the website is shown on. So, we're making a one size fits all website that intelligently optimizes its presentation on different devices.
If we want to look for a definition, there are a couple of definitions that we use at Mobify. We look at Google's definition that has foundational ways to describe response for ecommerce. There are three attributes of responsive websites according to Google.
Number one-it has to have one URL on all devices. So, "www.mobify.com" on tablet, on smartphone, on desktops-no m-dot no t-dot. It's very, very important. If you don't have one URL, you don't quite have a responsive website just yet.
Number two is delivering the same HTML to all different devices out there. That's important because a key part of using responsive is saving cycles on having to maintain different versions of your site. So, having the same HTML that fluidly adapts to different devices and streams in another core part of responsive.
If you ask your web developers and designers, they'll have a different definition that shares a lot of the aspects of the Google definition. It's from Ethan Marcotte, who is the man that coined the phrase "responsive web design.
He describes a responsive website as one that has fluid grids, that automatically adapts to different screen widths, sites that have flexible media-so, responsive images, responsive videos that know how to adapt to different devices-and using media queries and CSS to change presentation of a website on different screens.
For business purposes, the big shift towards designing responsively is a mindset change about how you're building your website. Five years ago, we primarily made a desktop site and then tested it in different browsers. You only really had one screen to design for. And then different devices emerged and it was fashionable to build device-specific websites.
With responsive, you're going away from thinking about devices to thinking about screens. Breakpoints is a term that designers would use to say, "Here's how we're defining our presentation on different screens with different heights." In this diagram, you see a very popular breakdown of four different sets of break points that serve the desktop user, the tablet user, and two kinds of smartphone presentation-portrait mode and landscape mode.
So, when you have a responsive layout, you'll commonly start talking about breakpoints and going away from different devices and operating systems, which is a big change to how you build your site and it definitely makes maintenance of the sites easier going forward.
So, now we'll talk about pros and cons of different approaches of going mobile. Responsive is absolutely the hottest approach that has emerged in the past couple years. Yet, there are different ways to going mobile with different tradeoffs and strengths and weaknesses.
As we discussed, the legacy approach is having device-specific websites. You would design one site for smartphones, one site for tablets-maybe as a t-dot-and one separate site for desktops. If you see an m-dot site, that's a device-optimized site.
Typically, if you look at the top 500 retailers in the US, the majority of them-if they have a mobile-optimized version-will probably have an m-dot version. That worked okay in the past, however there are some challenges that Linda will go through regarding using the device-specific approach.
Server-side adaptive is something that we see more rarely. That's the idea of serving different HTML templates to smartphone, tablet and desktop browsers. Different templates are stored on the service. Etsy is a big proponent is server-side adaptive.
You go to Etsy.com and you will get different HTML templates on different devices but the URL will still stay the same. That's also something that you could consider for launching a website.
Great. Thanks, Igor.
At this point, we're actually going to jump in and do a quick poll of the audience just to see where you're at. So, popping up on your screen now you should see a question, "What mobile web development approach are you currently using?"
You've got five options there-"Are you using a device specific approach? Are you using server-side adaptive? Do you have a responsive web design approach right now on your website? Are you with Mobify or are you not optimized for mobile quite yet?" We'll let this run for just a few seconds here. We'll reveal the results in just a few seconds.
All right. Thanks so much. We can see here we've got a pretty good mix. We've got a few people-about 26 percent-using an m-dot solution today, 35 percent is on responsive, nobody is using server-side and we've got a few Mobify customers on and 32 percent haven't optimized their website for mobile quite yet. That's very interesting.
So, now we'll move on to Linda. She'll actually talk to us about the pros and cons of each approach. So, whether you've got a mobile site today or are thinking about doing it in 2013, we'll talk about which one will be right for your business. Linda?
Thanks, Tina. And I'm actually really impressed that there's such a large proportion that are using responsive design already. I've done a quick and dirty survey of the Internet Retailer 500 and found that 60 percent are using the mobile-specific site approach and not using responsive design.
Many others are not using any mobile optimization solution at all. So, our audience is very reflective of a progressive and keen on optimizing for mobile. So, that's great.
I'm just going to walk through some of the pros and cons of using a mobile-specific site versus using a responsive design site.
The device-specific approach is actually a downside to using a mobile-specific site. This isn't like developing a web application natively for your phone or for Anroid or for iOS that has to be built for every single platform. You don't have to go device by device as far as manufacturers go. But it is device by device when you consider smartphone versus tablet.
So, tablets are-as Igor mentioned, 63 percent of revenues are actually coming through the tablet and it's not a situation where, "We're mobile optimized and we're working on a smartphone and we've got an m-dot site. So what?" Tablets are really, really important.
If you want to have a mobile experience, it doesn't really scale upwards to tablets very well. It's more of a desktop experience that is retrofitted to tablets.
If you do have an m-dot site, you are going to have to determine how you're going to handle your tablet, whether that is using one of the other techniques that you can do in web development using responsive design or using a server-side adaptive approach is a decision you're still going to have to make.
In that case, that's where it's a pro of having responsive design. You can maintain one code base that serves all of these devices and ones that are yet to come in the future.
Another wonderful pro of having an m-dot site is that you can strip down everything that you don't need from the desktop site and make a mobile experience that's a minimal, viable experience that can serve on mobile.
It really is the essential mobile-first approach because it's mobile only, taking maybe homepage navigation elements out and reorganizing them, taking out video content and extra content that doesn't need to be there.
For a retail case, if you go and check out a lot of these mobile sites, you'll see they're designed completely different than the desktop. One of the benefits there is that you can have a faster- loading site which, if it comes down to design looking pretty or loading fast, a fast-loading site is going to keep people on your site and conversion rates are reflected in that.
One of the downsides of having a lighter code and a faster load is you really don't keep that consistent experience that the user might want to access the features and the functionality that you have on your desktop site.
Another benefit is the ability to get to market really fast. The reason for this is it's a less complicated solution from a design perspective. It's not a matter of going and having a developer and a designer working together making sure that it works on every single breakpoint and the problems are solved in order to keep that consistent experience. You can get to market fast.
But this isn't a future-friendly solution. You might be leveraging a third party platform that's pre-built and comes with the expertise to get the job done, get that mobile site app- your IT team might want to go that way. You might have an ecommerce platform that has the mobile product that makes it really fast.
But where it kinds of bites you is down the road when you want to do a platform upgrade or if you want to add different URLs for specific planning page campaigns, for example affiliate campaigns, email, microsites, special content that you throw up on the site-that has to be replicated and redirected and all that stuff from your other set of URLs. That's where it doesn't scale well and it doesn't ensure that going forward there are efficiencies baked into your mobile experience.
Another issue that we talked about briefly was redirection. This is a hurdle. Every page has to redirect to mobile and back. If you don't do that, there are some problems.
Google recently came out on their blog and called this out and said that, "Hey, if you're using a mobile-specific site and you're not doing redirects properly, we're going to have to rank you downwards. It's not a penalty, but you will have ranking suffer because you're not delivering the optimal user experience and that's what Google cares about the most-a great user experience."
If your pages are loading slowly or if you've got a lot of advertising on your page up at the top of the page or other experience hiccups, then your rankings could suffer.
In this case, if you're using redirects, for example, in deep pages like product pages and someone finds you through mobile search, it gets redirected to a mobile site and then redirected to your mobile site's homepage instead of having proper mapping of your links.
They called that out as a very common problem. That's something that can happen with not proper implementation of redirects.
And another one is not properly handling mobile the Google bot. Instead of taking a smartphone and feature phone visitor and redirecting the Google bot to the appropriate content to crawl, it creates this kind of infinite loop of redirects. It makes even the smartphone page itself a 404. That's not good. And then you also get the issue of duplicate content.
It's not as big of a problem for SEO as you might think. Google actually understands that sites have mobile and desktop counterparts and they handle them pretty well unless you're sloppy about the implementation.
The bigger impact is on your content management and how it divides your back link profile as well. If people are sharing links socially through their mobile and copying and pasting links and that kind of thing, you might not be getting the best ranking flow going back to your root domain. If you can't reap all of the benefits of all of the links going to your dot com site, then that can also impact you in mobile search.
All right. Here are some of the benefits of responsive design. We're looking at the single URL. Your site is always found at one URL. And that's great for IT as well. They're only maintaining a single code base.
As I mentioned, if you get all your links fused together, you don't have to worry about when you launch new campaigns because every single landing page that marketing or your merchandising team just created on the fly-is that going to work when somebody logs into their email?
We know that people are checking their email on mobile phones more than ever. It's actually approaching about one in two emails being opened on a mobile device. If they can't click through to see something that works, they're getting a 404 page- you've really lost that complete opportunity.
What if 50 percent of your email marketing campaign was suffering because of that? So, that's one of the big pros of going responsive.
It's also great for your content through a single CMS. So, it's much simpler from a CMS point of view, even though your content doesn't have to adhere to your responsive guidelines every time you add new photos and new pages and that kind of thing. Being able to drive it through a single CMS-a lot of the CMS' are actually embracing responsive design and baking that into their processes and back-ends.
Another reason is Google is very happy. They love it when they only have to domain crawl one set of URLs. You can imagine if every site had an m-dot and a t-dot and maybe a TV-dot-it would have to crawl content four or five times. It likes to conserve its resources too. While Google recommends that you use responsive design for this and for the usability and for practical reasons, however it's not going to rank two competitors-one's not going to get a ranking simply because it's using responsive design. But Google is happy when you do use it and does recommend it.
Now, another issue with going responsive design is that performance can suffer. We talked about one of the benefits of being mobile is the ability to strip down all the things that you don't need.
The early responsive sites suffered from the fact that theirs were designers and developers playing around with a new way of doing things, but performance was kind of an afterthought. It was about getting that design, starting from the tablet experience and shrinking it down.
But what happens with that is that a user's browser, even if they're not seeing content that's hidden from a desktop site, the browser is still downloading these objects in the background and that can cause a huge performance lag.
In earlier days, that was one of the big problems. Now, of course, there are best practices coming out about how to optimize. Mobify has a lot of great content on their site and information on how to do this and all the different tricks and hacks that you can do to get your content optimized for mobile and optimizing for performance.
The other issue here is that taking a mobile first approach to doing this can also rectify that problem of the performance hit because if you start from your basic mobile experience-what the user needs to do in mobile, you can always add content as you scale up. There are ways to ensure that it's done in the right way.
A case study from "Time" is really interesting. I will jump forward to the Time Magazine case soon. They did take a holistic approach and actually ended up increasing their performance on their entire desktop experience as well because they made performance a priority when they did the responsive design.
All right. We're just going to back up the slides a couple of slides. Another con of responsive web design is that it takes labor, money, testing and risk. That's required to build a responsive website from scratch. Yeah. That's true.
There are also processes that you might have to look into where your designer and developer do need to work together to solve these problems. It's not a matter of a designer mocks something up in Photoshop and hands it off to development and it flies.
There's a lot of testing and going back and forth and reworking things. Your user experience team has to get involved very much to make sure that reworking things doesn't impact conversion rate. It's a big risk to just jump into a responsive design when you haven't been able to test whether that's actually going to improve conversation.
We know from the appeal of A/B testing that one of the big appeals of it is you can do a radical homepage redesign that's driven by people in the room that think they should be this way or that way.
Design can be a very subjective thing. When you can test that before you implement it, then you can reduce your risk of the conversion impact. It's harder to do that with responsive because you've got to put the time and the effort in to make these templates responsive. It's difficult to do a real A/B test.
But is there a way to test? Yeah. There are kind of workarounds to testing. O'Neill is example of this. So, O'Neill design house that actually did the responsive design decided to take a six- week period that historically has had very similar sales records year over year-there's not a sales event or a major holiday that can cause a site and sales one way or the other. So, they take a six-week consistent window and split it up into two. The first three weeks, they ran the responsive and the second half they ran the regular and then compared the two.
So, it was not a perfect testing environment. But they were able to see the conversions went up quite well on Apple devices-66 percent-and 400 percent on Android. Transactions increased 113 percent on Apple and three times on Android. Revenue was up on both platforms-almost six times on Android. Even non-mobile conversions went up-23 percent with the responsive design.
I believe this was compared to having a non-optimized site. It's not necessarily the m-dot versus the responsive. But you can see that going responsive greatly improves the use experience and can improve numbers.
So, if you're looking to get into mobile experience from having nothing, this is a good case to put forward to say that we're really leading a lot of transactions and revenue on the table by not taking any action to optimize mobile at all.
I think now we're going to look at Time. This is a non-ecommerce example, more of a monetizing digital content example. Homepage unique visits increased 15 percent. Of course, advertising revenue comes along with time spent on a site and unique visits and page views per visit.
Bounce rates are huge. People are often reaching content sites and news sites from their Twitter and their Facebook and their email and hitting on the mobile site.
So, it's very, very important for an entity like Time to be responsive. And as I mentioned, they did also increase their desktop performance as well. The benefit is they were able to work through some challenges that publishers have in terms of advertising units and that kind of thing. They were able to overcome those obstacles as well when they were doing their responsive design.
As we're waiting for some of these best practices to emerge and the first movers that are out there and really taking the risks and solving the problems-we can learn from those examples as well.
I am going to hand it back to Igor. And he is going to cover the results of the Garmin case study.
Thank you, Linda.
Garmin is, as you all know, a manufacturer of GPS equipment and [inaudible 36:25] to get their ecommerce foundation launched. About a month ago, they finished the project working with Mobify to reimagine what their templates would look like on different devices to make their website more responsive and improve their user experience.
It's actually a really, really interesting website. If you fire up your iPhone and Android phones and head to their website to come check it out. They wanted to implement something that almost reminds you of being inside of an app like Facebook in terms of the infractions that are used to show different items that they have to offer.
And also they implemented a lot of the performance functionality and focused on optimizing images, optimizing scripts and making the website load faster to improve the mobile experience.
As you can see here, their performance has improved quietly. They've seen a 75 percent increase in mobile sales performance month over month. And they're seeing the order value also go up quite a bit because the user has enjoyed the experience of browsing the site much more and is willing to buy a lot more from Garmin. It's a big success for them.
Now, I will talk about building a mobile site that's Google friendly as email search is a huge part of what we do on our mobile devices. With the web becoming more and more multi- platform, Google has been evolving in how they provide search services, how they track users across devices and it's very important for a retailer to be aware of the changes.
One of the new features that Google launched for the public in the past couple of months is called Universal Analytics, where they are shifting from tracking visits that are on a particular page on a particular device to tracking visitors across different devices.
If you use Google Analytics and your users are signed in to Google across different devices-so, for example signed in to Google+ on a smartphone, tablet and desktop, you can now track them across different devices they use.
It's a great way to get a more holistic picture of what happens during the purchasing cycle before the transaction actually goes through.
Right now we'll talk about SEO. SEO is how a lot of retailers acquire new users. And there are definitely downsides to using a device-specific or server-side approach because Google does not tend to rank those sites as high as the responsive sites.
From their perspective at Google, it's more work to index different HTML pages that have the same content-content duplication and providing several versions of your site for several devices. That is something that is not as good as having one HTML template.
It's also very difficult to implement a device-specific strategy in a way that it doesn't make any mistakes. So, you have to provide Google with annotations, redirects the proper way. A lot of vendors don't usually end up going the whole way into providing these optimizations. So it's less of an ideal situation for SEO.
Once again we come back to responsive. It is the best approach for Google, whether you're building a new site from scratch as a part of re-platforming your whole store or if you are adapting pages clients have using Mobify. That's much better than having an m-dot website.
I've put together a table to describe different parts of the responsive methodology and how it's supported with different ways of going mobile. So, for one URL-obviously, if you're having different sites for different devices, you're not going to get that. It is something that's available for server-side or for adaptive approaches.
HTML, which is what Google recommends, you're only getting that with responsive or adaptive approaches. If you have different tapestry of different devices or if you're switching templates, server-side, you're going to have different HTML and that's going to have an impact on your indexing.
The third point about using different clients and techniques for adapting content-there's something available for any website. For responsive sites, that's definitely how a lot of adaptation is done. You'll only typically see a minor amount of adaptation for different devices using CSS if you have a device-specific template available.
There's also a lot of extra work that could be necessary if you're pursuing a different strategy when it comes to mobile. For example, if you have a server-side template, you've got to be really careful with how your CVMs are set up because CVMs typically cache your content around the world.
If your content changes depending on the user agent, you might not get the full benefit of using your CVM. So, make sure you ask about the performance of the CVM strategy if you're deploying a device-specific or server-side adaptive approach. With responsive, that all comes standard.
Definitely if you are interested in using a platform that would probably make things easier, we would love to help you at Mobify. We're [inaudible 42:23]inventor that Google highlights with their overall [inaudible 0:42:28] a lot of our APIs and services are completely free for smaller websites to use. So, if you need technology, if you need advice, we would love to help you out in any way we can.
Now, I'll hand this back to Linda to sum up all of the different things that a business needs to consider as they pick their mobile strategy and as they consider going responsive. Linda?
Thanks, Igor. There are several things. Time to market is often times the deal breaker. If you don't have something and you need to get something at a low cost and fast, then going with a mobile-specific site might be the decision that your business makes.
However, you should be thinking a little bit longer term in terms of how much maintenance this will have down the road and do you want to be able to scale? Do you want to be able to reap the benefits that responsive web design has?
Do you want to be able to set yourself ahead a couple of years? Eventually, I believe Igor would agree with me on this, in two or three years, responsive design is going to be a lot more established and it is going to be the way that many business' sites handle their mobile to be able to take advantage of those benefits. You're either going to do it now or you're going to do it later.
Another reason why a lot of organizations aren't doing it today is because they recently did a big redesign. Basically, going responsive is akin to replatforming your front end. It's a big investment and it takes time and resources. So, for that reason, some companies are just choosing to defer it a couple years and then dive into it.
You need to make that decision whether it's the right timing for you-whether you want to make that investment now or whether you want to be making that investment later because chances are you are going to be making that investment.
Marketing ROI-the risk comes down to that risk of being able to test or to get a good feeling for if going responsive is going to pay off. That's one of the considerations that you need to make.
That's one of the reasons that some businesses are holding back. But we do have a lot of case studies that are circulating that say that going responsive does payoff.
Branding is another consideration. One of the benefits of going responsive is you can keep a consistent experience and that's huge. Your accessibility and the way that you deliver to customers has an impact on your brand for sure, especially at every touch point.
When you're sending out emails, when affiliates are linking to you, when you're doing social campaigns, you want to make sure that you deliver that customer experience that reflects well on your business.
You also have to think about organizational structure. As I mentioned before, there does need to be a process change between design and development. If you have that either/or or both design and development, it can be a lot harder for those units to work very closely together and to get changes made down the road in maintaining this.
You might have to look at reorganizing your structure and your process, moving more to kind of like an agile-type process of being able to do this project. And it may be something that you never approached it that way before. There are consultants that can kind of come in and help you set up those types of reorganizations.
There's also a risk in security involved in any type of technical project. But that's certainly the risk of conversion rate lowering if it's not done well. If the performance is impacted in any way, there's risk there and risk of spending a lot of money and not having it done well.
Definitely, doing your due diligence before you start and getting all the best practices in line and committing to it as a new way to go forward has to address all of these different points.
Finally, scalability, this is the approach that has the best way of scaling. Instead of having a mobile site and a t-dot site and dot-TV site, being able to address all of those experiences in the long-term-and the devices that we haven't even seen yet in the market-this is a way to do that efficiently and effectively.
For technology considerations, as I mentioned, development and resources and skills-so, this is kind of an emerging movement. The development resources and skill are there but might cost more and be harder to find.
There is a learning curve involved with it. There is also development and maintenance processing in testing it across devices. There is no way of getting around that. It can be extensive testing. So, understanding that's the capabilities that you'll need and not underestimating that is important.
Your technology stock in vendors is also something to consider. There are some ecommerce platforms that this will not work with. There are different technologies that you might be using that might not work well with responsive. That's something that you need to sit down with IT and make sure that this is going to go forward.
And we talked about risk in security and scalability and certainly that trickles over to the technical side as well.
So, user consideration-user experience is paramount, not even just for your own users. But if you want to have search rankings, Google is looking at your user experience.
The context of the mobile user-we mentioned before that if you want to use a lighter code, you can strip out all of the things that the mobile user doesn't need and you can create this kind of minimal, viable experience for the mobile user. But there's more than that.
Many mobile sites are becoming very app-like. If you think of Chase bank for example-their mobile site uses their receipt capture. So, you use the native property of the phone, take the picture of your check and you can deposit directly through the mobile experience.
That's something that doesn't need to be on the desktop experience. You might, as a retailer, want to bake in a lot of features that really consider what the user's doing when he's on a mobile or she's on a mobile versus when they're on a tablet using that as a second screen to their television.
Desktop, mobile and tablet have very different use context. You might want to have as an alternative to a native app, your web presence be very app-like. You can use responsive web design and HTML5 in tandem, but when you're thinking about the user experience, that's something that you might want to [audio skips 50:04].
Layout and functionality are really important, especially when it comes to conversion rate. And when you're taking something from a desktop and shrinking it down, you also have to consider the orientation of the devices.
You're not just designing this so that it works on iPhone. You've got to work at it portrait and landscape. That's huge- being able to make sure that there's enough white space and that things can be found and that scrolling is intuitive and that menus can be used and that nothing is impacting conversion rate and the ability to find what you're looking for and execute the tasks that you need to. And that takes testing as well. You're going to need to test and user test responsive designs as well. Localization and personalization-that's coming down to, again, these native properties of the phone and the ability to detect those things and deliver content and experiences based on the user's context. And that can be accomplished through a responsive design as well. It doesn't mean that can only be done through a mobile app.
Then, performance as well. We talked a lot about performance. Performance really is critical. People are not willing to wait more than two seconds on a desktop to load and the threshold isn't that much more for mobile either.
Great. Thanks so much, Linda and Igor. That wraps up our presentation portion of the webinar. Now, we've got about ten minutes for your questions.
Thank you very much to everyone who has sent us questions via email, Twitter and the messaging tool. We've got some really thoughtful questions here so we'll jump right in to it.
Number one-"Is it possible to A/B test just one page, like a homepage, with responsive design and leave the rest of the site alone?" Igor?
That's a great question. Definitely the way A/B testing tools have evolved has been affected by the responsive shift. If you look at tools like Optimizely that use client site adaptations for A/B testing, it's definitely possible to do those kinds of tests with those tools.
In the future, what's probably going to happen is you're going to have separate tests for all of the different break points. So, you'll be able to test different variants of your mobile user experience and then different change on tablet because every channel continues to evolve pretty quickly.
So, definitely it's possible already with some tools, perhaps not other tools. If your current A/B testing tool does not allow for responsive, you should consider something else in addition to it that does.
Great. Igor, you touched on it, but this came through. "Are there centered break points that every website should use?"
Yes. We've actually had those featured in one of our earlier slides. There are four break points that we typically see web designers focusing on. That's the desktop break point-so, 1024 pixels, give or take.
That's the 7-inch tablet break point and two break points for landscape and portrait layouts for smartphones. So, you probably go with four right now. Maybe in the near future, you'll be able to add one for Google Glass or some kind of wearable devices. Right now, four are a good start. You can probably start with even less-maybe you start with just desktop and tablet and then add smartphone later.
Thanks, Igor. Here's a question for Linda. "Are there any instances where responsive can lower conversion rate?"
I think the big one would be if you do the implementation where it slows down your page load speed because people aren't going to stick around if they're waiting too long. There are conventions that are kind of emerging with responsive in reorganizing menus and that kind of thing.
Any time you've got a user that's very familiar with your desktop and then lands on your mobile and all of a sudden your horizontal navigation has shrunk down to three menu items and they can't intuitively go to where they know how to browse and do everything on the site-it's like when Facebook redesigns.
Now you don't know where everything is. So, that can hinder user experience as well.
You're going to have to make some sacrifices too when you're scaling down. So, a common thing is where desktop content gets shrunk down for a smartphone and it becomes one long vertical stack.
That can impact usability and findability of product content. Where do those images go-additional images? What happens to reviews and descriptions? Are they hidden behind expand and collapse features that aren't intuitive to the user? All of these things can definitely impact conversion rates.
However, that is a problem that you will have no matter how you're delivering to mobile. If you're not using responsive design and you're just leaving the site to render itself in a very, very tiny window, you're going to get even worse usability problems.
Really, it's comparing it to a mobile-specific experience, which can also have those very same issues. What we see on a mobile- specific site often is they can completely redesign a product page using it a totally different template that doesn't have to be consistent with desktop and scaled down that way.
That's where there could be a usability benefit. But really, the main issue is the performance.
I'll just add to what Linda just said-we have seen one customer launching a responsive website to replace an older, faster m-dot site. They were observing that the pages perception dropped in half because the site was much, much slower. As a business that was really focused on a lot of page views and more enticing with advertising, they run a lot of cycles to improve performance on their responsive site after the fact.
Just with responsive in general, it's not something that comes with a guarantee of a certain user experience. It's more of a philosophy of building websites in a different way.
It means that after you go responsive, you still have to go and refine the user experience for every single platform you care about to improve conversion and to improve the user experience, whether it's the visual or performance. Going responsive is just the beginning of that journey.
Thanks, Igor and Linda. Another question here-it's a three-part question, actually-"A scenario: take three devices-phone, tablet and laptop-when I'm using each of them, I'm usually in a very different setting and have very different objectives. How do you approach that? Have you thought about making a context- responsive design and adapt not only how the website looks but also what's shown to me?"
I can take that. We believe at Mobify that responsive layouts are the foundations of how you should create a website. So, it doesn't mean that you're done with creating a context-specific or a device- specific experience.
Though it's a very, very rare example at least right now that you want something in mobile and don't want it in desktop-even store locators are going responsive. Customers are providing the same store locator snippet that works on smartphones, desktops and tablets.
If you want to provide an even better experience, it's all about adding more on top of that responsive layout. If you want to hide content, you can also do that. Mobify actually has a feature for simplifying HTML.
If you don't want to deliver a certain chunk of markup to a smaller screen, you can just turn that off and Mobify will remove it using clients adaptation before it gets rendered so your experience isn't slowed down.
Thanks, Igor. Here's a question for both that came through, "What are some types of businesses or content that wouldn't be appropriate for responsive web design? What about in terms of ecommerce user experience-are there products that may never fit into a mobile experience? Or do you feel that anything is possible as software/hardware evolves?" Linda?
Yeah. Well, when we talk about retail, retail is basically the product catalogue. So, being able to search and browse and that experience can scale down really well. Where you get to different experiences is when you think about-and going back to that question about a user context being different-so, when you get into digital products for example.
You might have somebody wanting to consume-we have this example of the textbook of the future and being able to consume that on a device versus the desktop would be very different and maybe it would be suited more to a tablet and not to a smartphone. Being able to fit that experience might not work on a smartphone. That's a totally different context than retail.
There are not really products-when you think about a product page, you're rendering information, you're rendering content about that. It becomes different when it's actually a digital product itself, it might behave differently on different devices. That would be a use-by-use product-by-product decision.
To add to that, there are cases when responsive web design is not appropriate. The one time I've seen it was on a trip to China, where I discovered that a lot of people don't have any devices but smartphones. They don't really have a desktop use case or tablet use case.
If you're really focusing on a narrow market where only one device is relevant, you can definitely just got for that one device. However, we still believe that over time, things will get diverse and the Chinese population will buy a tablet in addition to a smartphone and eventually you'll have a much better pitch for responsive.
Thank you. I think that's all the time that we've got for today. We do have a handful of other questions that we didn't get the chance to cover. We will definitely follow up with you following this session via email.
One question that came through that I want to mention was, "Are there any recommended readings on the topic?" Certainly, we do have some great resources that we can share with you when we forward the recording as well as the deck to you following this session.
Thanks again, so much for taking the time to tune in today to our webinar with Mobify and Elastic Path. Have a nice day!
Thank you for coming.