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

CPR for a Yahoo Store on Google's Supplemental Index

Recently a client of mine came to me and said that most of his store pages disappeared from Google, and he did not do anything to make this happen. I was a bit skeptical, so I went to Google, did a search on his store, and sure enough, there were only two pages indexed, his home page and his site map (ind.html) page. The rest were in the supplemental results, which means that Google thought the rest of the pages were not much different than these two pages. When I looked at the supplemental results, the little excerpts under each link were exactly the same, and I also noticed that what Google showed under each result was actually text from the ALT tags of the header image. I looked at some of these pages in my client's store, and they were actually different. This was a bit puzzling, but then I thought perhaps Google saw that the header and left navigation was the same throughout the site (which is pretty normal), but that the text that made each page different was too far down ins

How to create clean and efficient CSS

In a typical workday, I deal with dozens of yahoo stores and very often I have to tweak, fix, or change CSS used by these stores. While some stores have very clean and easy to follow style sheets or CSS definitions, the vast majority of stores I've seen seem to include complete hack jobs, style sheets put together completely haphazardly, or as an afterthought. While working in such a store, the idea came to me to turn my gripes into a post. So the following is my list of dos and don'ts of good CSS or style design. 1. Externalize your style sheets. This means to save your style sheets into one or more css files, and link to them using the <link rel="stylesheet" type="text/css" href="/lib/yourstoreid/yourstyle.css"> notation, or in Editor V3.0, you can use the LINK operator. 2. Combine your style sheets into as few files as possible. Nothing worse than trying to wade through 6, 8, 10 or more different style sheets to find the color of a l

What to expect when your redesign goes live

At Y-Times we roll out new designs, redesigns and other major upgrades to Yahoo stores on a fairly regular basis. Some of the main questions our clients ask are how to prepare for a roll-out and what to expect in terms of SEO and conversions when the changes go live? For any functional Yahoo store how well the site ranks and how well it converts are probably the two most important metrics. Since pretty much ANY change you make to any page can potentially alter either or both of these metrics, merchants may understandably feel nervous about far reaching alterations to their sites. However, when those functionality and design changes and additions are done right, there is really very little to fear. First off, what does it mean for a design or redesign to be "done right?" From the technical stand point, search engines look at the underlying structure of your site (the HTML, and increasingly also the CSS and JavaScript code) to try to extract information and meaning from i