Skip to main content

Responsive, Adaptive, Dedicated Mobile

We're continuing to get tons of questions to explain the difference between responsive, adaptive and dedicated mobile.  This tells me there's still quite a lot of confusion on what these all are and which one might be best for you to choose.

What are the differences?

Dedicated Mobile: a dedicated mobile site is entirely separate from the desktop site with a separate URL, most frequently a sub-domain, such as m.yoursite.com . Usually a piece of JavaScript code detects that the page is loaded from a mobile device, and it makes a redirect to the mobile equivalent of the page.

Responsive: a responsive site displays the exact same pages that you see from a desktop computer as well as any other device the site is viewed from, e.g. laptop, tablet, mobile phone. Using media queries, css, and/or JavaScript, the page is set up to "respond" to the screen size and/or device it is displayed on thereby making the page still usable on a smaller screen. You can typically tell if a page is responsive by bringing it up in your browser and then resizing the browser window. If you see the page "rearrange itself" so that it's not simply a smaller version of the full sized page, then chances are you are dealing with a responsive page. An example responsive site is www.cool-party-favors.com.


Adaptive: in this case, the page has the same URL on the desktop as on mobile, however the web server figures out what device the page is requested from and based on that decision it serves up a different page for desktop or mobile (or possibly for tablet.) Yahoo/Aabaco's "Mobile Storefront" - which you can find in your Store Manager - works this way (although there is no separate "tablet" version there.)

Although the adaptive version of the page template is a completely separate template than the desktop (full) version, it's very important to make sure that your mobile pages deliver the same information as their desktop equivalent (or at least the most critical information.) What this means is that both versions of the same page should have the same meta tags, same title tag, and approximately the same content (e.g. caption).

You can usually tell if a page is adaptive or not by first trying to resize your browser window on your desktop system, then bringing it up directly on a mobile device (phone.) If the mobile version looks different than the resized desktop version you are probably faced with an adaptive page/site. A good example of an adaptive site is www.pc-wholesale.com.

Pros and cons?

Before getting into the details, we need to agree on one thing: your store must be mobile-friendly. Whatever approach you choose and for whatever reason, choose one. If your site is not mobile-friendly you'll miss out on the ever increasing mobile traffic (and if you don't believe me, check your Google Analytics stats to see how many people try to hit your site from a mobile device.) Google not only marks mobile-friendly search results as such, right on the search results page, it also pushes non-mobile friendly pages down the list (for searches done on mobile devices.)

Prior to Yahoo/Aabaco's introduction of the Mobile Storefront option, dedicated mobile solutions were the most popular mobile-ready approaches with Yahoo stores, however, these days the number of Yahoo Stores with a dedicated mobile setup is decreasing steadily.


Dedicated Mobile

A dedicated mobile site is very fast and very much streamlined - typically, but not necessarily at the expense of aesthetics. These sites tend to be highly functional but very simplistic in design. You normally pay a monthly fee for the hosting and maintenance of a dedicated mobile sites. Data updates are usually automatic (when you publish your store, those changes usually appear on your dedicated mobile site either immediately or very shortly after publishing.) Functional changes can be difficult as those always require custom coding from the the third party who is hosting your dedicated mobile site.

Responsive

As I mentioned before, a responsive site is basically a "smart" layout of the same web page, where the layout "magically" changes itself to fit whatever screen or device is used to view that page. Since it is the same page, same URL and same content, you don't have to worry about potentially serving up different content on different devices, because you are serving up the exact same page. Because of this, you don't have to worry about different content, every new page you create in the store will have the same info and will (or at least should) be responsive automatically. A side-note here: if you manually add HTML content to your pages you will have to make sure that the HTML you enter is also responsive. This is especially true for tables and images.


The fact that a responsive page has just one version shared among all the various devices is also its weakness: it means that the entire page - with all the content, JavaScript and CSS files - is downloaded on phones even though chances are some parts of that content/code will not be used on mobile devices. Because of this, responsive pages tend to be slower on mobile phones.

Another consideration is cost: making an existing site responsive can be costly, and when a redesign (or a design from scratch) is also to be made responsive, that aspect usually carries a premium.

One final important note is that if you want to see your website taking advantage of wider formats and larger screen sizes, then responsive is really the only way to go.  Dedicated mobile and Adaptive mobile solutions are targeted only to serving those smaller devices. (Best of both worlds for you may actually be a coupling of responsive and adaptive together, but I'll get to that shortly.)

Adaptive

Adaptive is a different set of templates acting upon the same data using the same URL. What this means is that if you have Mobile Storefront enabled, when you create a new page, the mobile version will automatically be created for you. You don't have to take any extra steps for it to happen. Because the adaptive templates are separate from your desktop templates, and because they are optimized for mobile presentation, they are typically very lean and very fast. Since "Mobile Storefront" (Adaptive) is now part of your Store Manager, you can in most cases simply enable it right in your Store Manager, and if you haven't done so, do a full publish of your store.  Once the store is done publishing you can turn Mobile Storefront on or off at will without having to republish the store.

The mobile templates were designed and built based on the standard features that come with any Yahoo store.  What this means is if you have a customized site, whether customized functionality or design, your mobile templates will likely need some work to make sure they function and display in tandem with your desktop templates. We offer a basic mobile template optimization package to make sure your mobile templates work as intended with your desktop templates. More information on this can be found here: http://www.ytimes.com/mobile-storefront-optimization.html. Also note that the mobile templates are quite customizable, and we can pursue more extensive customizations of the look and feel and functionality of your mobile site.

How about both?

There is nothing that stops you from having a responsive site AND at the same time enable Yahoo's "Mobile Storefront". Remember, it's all about user experience! With a dual approach like this, you can be sure that you provide the absolute best shopping experience to all of your visitors/customers, regardless of the device they use to access your online store. If your store is both responsive and adaptive, when viewed on a mobile phone the adaptive version will "kick in", while on any other device (larger than a phone), the responsive version will display.

Which mobile solution do we recommend?

Prior to about a year ago the only two choices for Yahoo stores wanting to go mobile-friendly were responsive and dedicated mobile.

Since then we have had the pleasure of working arm in arm with Yahoo/Aabaco in the development of their adaptive storefront module. What's become glaringly apparent is that when it comes to dedicated mobile solutions you just can't beat the speed of a well optimized adaptive site.

In fact, we're so impressed with the overall flexibility and fluidity of the adaptive mobile model that we are encouraging all of our merchants, even those who have already decided on responsive, to at least try out the adaptive version.  You can do this by turning on "Mobile Storefront" in your Store Manager page. And remember, Aabaco's adaptive mobile storefront is template driven the same way your desktop site is, so both are equally customizable.  

If the look and feel doesn't quite meet your needs, then start with our basic optimization package.  If you want to take it even further, we can customize your mobile templates even further to match your desktop site.

In the end we can about giving you all the information that's available to us so that together we can make the best decision for your store.

In closing, a small table comparing the various mobile-ready approaches we have available in Yahoo/Aabaco.




Responsive Adaptive Dedicated Mobile
Page Speed Slow Fast Fast
Page Size Large Small Smallest
Up-front Cost $$$ $ $$ (in some cases)
Ongoing Costs 0 0 Usually monthly
Customization $ $$ $$$


Comments

There was some confusion by some of our readers regarding our recommendation of enabling Mobile Storefront vs REPLACING an already responsive design with it. To clarify, if your store is responsive you really don't need to do anything more. However, you could realize additional speed gains on mobile phones by enabling Mobile Storefront IN ADDITION to keeping your store responsive.

Popular posts from this blog

What is product-url anyway?

I keep having to field questions about the product-url field, and since it came up yesterday, I figured I'd try to clear up all the confusion about it.

So the name product-url suggests that whatever you type in there will become the URL of that product. Unfortunately, this is not the case, or rather, not in the intuitive way. The URL you enter there will be used as the URL for that product in Yahoo Shopping, on the built-in search results page, and on the shopping cart page, however, the URL you type in there DOES NOT actually change the physical URL of the page.
What is the URL of a page in a Yahoo Store? In any Yahoo Store built in the store editor, the URL of a page is the store's domain name and the page ID + .html. For example, in my store at www.ytimes.info, I have a page whose id is rtml101, thehrefore, the URL of that page is http://www.ytimes.info/rtml101.html.
Why would you want to change the URL? For SEO reasons, it is believed to be better to have a URL that includ…

Referencing Files from Yahoo! Web Hosting Securely

Now that hopefully most of you you have your stores secured (if not and need help, we offer a Secure Storefront Preparation Service here), you may have been faced with the question of how to reference files (images, CSS, JavaScript, src) if those files are stored on your Yahoo! store's web hosting account. Obviously using the old HTTP: method won't work, so something like this

< img src="http://site.ytimes.com/image.jpg" />

will not work. Nor can you simply change the http: part to https: , because as of this writing, only the store editor portion of a Yahoo! Store can be made secure, the web hosting portion cannot.

First a side note: if this sounds totally Greek to you because you have never heard of the web hosting part of your Yahoo! Store, you may have a legacy Yahoo! store account and not a Merchant Solution one. With a legacy store account you will only have the store editor part and no hosting account, in which case none of this applies to you.

The good n…

Really Quick Trick to Improve Page Load Speed of a Yahoo Store a Little Bit

With Google getting more and more aggressive about wanting web sites to be quick to load (particularly on mobile), we often find ourselves trying to find even the smallest of tweaks to nudge up that page speed score even if by a tiny bit. Here is a quick trick you can do completely on your own, without having to ask a developer, that will probably bump up your Google PageSpeed score by a couple of points.

First a short disclaimer: this trick is only applicable if you have enabled the Yahoo! Badge in your Store Manager, under Live Insights & App Gallery.

Before you start, you may want to check your site's Google PageSpeed (the home page is a good place to start) both as a benchmark, and also to get a glimpse at how fast (or slow) Google believes your site (or home page) is. Here is the link:

https://developers.google.com/speed/pagespeed/insights/
Ok, so if you did enable the Yahoo! Badge, your site includes a small Yahoo Live Store badge, much like this:


When you hover over the …