Responsive Design vs ‘m.’ Sites

The segregation of the mobile experience to a subdomain, the notorious ‘m’ domain, seems a little old school in 2014. It’s a legitimate question, in the fast-moving realm of mobile-web development, whether you should even consider having such a segregation.

In this article, I start from the premise that few entities use an ‘m’ domain any more, and present a few reasons why not. Then, playing devil’s advocate, I’ll offer a few reasons why you might want a separate subdomain to which to redirect your mobile user base.

Why nobody does it any more

RWD All The Things

The advent of responsive web design, mobile-first design, and progressive enhancement as design patterns have been enthusiastically embraced by many designers and developers. They have changed the way the business of design and development is done. Site designs, especially those built from scratch, are increasingly built from the ‘bottom up’ rather than the ‘top down’. Rather than creating a beautiful, feature-full site that will display well on large desktops and taking away or hiding functionality as the user’s screen shrinks to mobile, a mobile-first design would start with a design that is attractive and functional on the smallest screen. From there, the designer progressively enhances the interface towards the high-definition desktop experience.

Going further, Scott Jehl recently suggested not so much a “mobile-first” strategy but rather a “global-first” strategy. Design a set of styles that are must haves across all screens and then enhance depending on a browser’s capability, dependent on what Scott terms a “cut the mustard” set of tests.

One brand, one codebase, one domain

One of the reasons that the ‘m’ domain was adopted earlier included the need to maintain separate codebases. A mobile team might maintain one, a web team the other. There was the idea that the ‘m’ site had to perform differently from the ‘www’ site. But the maintenance issues inherent in this strategy are daunting.

Maintaining large staffs of developers and ensuring data coherence between two front-end codebases and, presumably, one backend system present maintenance nightmares. This schizophrenic web-to-mobile presence might be
damaging to your brand if a user becomes confused because the site on their iPhone looks completely different from the site on their desktop.

Rather than maintain two codebases and potentially confuse a customer, a small, agile team can use modern strategies to provide a clean, fast, responsive experience that
degrades well from desktop to mobile.

A  functional site such as Ancestry.com has made the move to an acceptable web-to-mobile responsive site that works well.

Ancestory website screenshot

Ancestory mobile website screenshot

Why it’s still done

Legacy code and the mirage of mobile

Some sites have embraced new technologies, either creating a new mobile- first web presence with a site redesign or converting their legacy codebases to support responsive design. Other sites have taken the alternate strategy of segregating their ‘www’ and ‘m’ domains and presenting different user experiences
accordingly.

A good example is the e-commerce site, Sephora.com. Visiting www.sephora.com takes you to a non-responsive, standard desktop site with a big slider and many (tempting) products ready for the shopper to add to a cart. Visit the same site on your phone (or go to http://m.sephora.com on your desktop), and you are directed to a very nice ‘m’ site that looks completely different from the ‘www’ site.

While the shopping experience is just as tempting, it did take me six taps to add an item to my cart versus three on the desktop site. Clearly the large product line has obliged the mobile team to triage inventory in a different way on the mobile sites, simply to be able to display the products.

While I do not know the makeup (no pun intended) of Sephora’s development team, I am guessing that the large inventory of the company made the managers choose to divide the codebase into the two different domains as they are displayed completely differently on the different devices.

I would bet that the legacy codebase presented large challenges for anyone advocating mobile-first, responsive design strategies. This codebase has been around a while. A quick peek at the source code reveals the use of jQuery 1.6.3, and rather than convert a large, mature e-commerce site, the decision was made to create a separate mobile site. For a large, mature company like Sephora, this strategy may make good sense. A look at the ‘m’ site’s source code reveals jQuery 1.8.3 correctly loaded in the footer in a freshly-compiled concatenated file, with modern touches like lazy loading libraries and browser detection.

Sephora Website

Sephora Mobile Website

As with every design decision, the pros and cons of a strategy must be weighed before starting out on what could turn into a redesign. If your company has the luxury of starting a new web presence with the latest technologies and/or is a small shop, it makes more sense to take advantage of the latest and greatest in responsive, mobile-first design patterns.

If, however, you are dealing with a large, mature, legacy codebase, management dictates certain designs, and/or your team is large, you may be called on to fork the codebase and create a new mobile presence. As long as two codebases can be maintained effectively by your company, it might be a potential strategy for you. You could look at it as a way to ‘reboot’ your web strategy, allowing you to create a new ‘m’ site that might evolve to be a truly mobile-first site that can meet your ‘www’ needs and enable unification of the sites in the future.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Benhard Jei

    Of course, its a must.
    The website should allow visitor to set their interface, although at first time its redirected to M site.

  • http://www.anthonydamota.me/blog Anthony

    I second you. This is really frustrating when the website does the redirect automatically.

    Fortunately there’s a “Request desktop site” on most of the mobile browsers !

  • http://m2i3.com Jean-Marc Lagace

    If you can detect that they are on a mobile device and redirect to a mobile website then you can alter your stylesheets and content accordingly, no need to have a distinct website to do that.

    • jmueller

      While that is an option for simple sites there are a lot of complex sites that you can do all that is necessary to create a good enough responsive version (think of situations where you’re not the owner of the CMS for example). Truly professional and awesome mobile experiences will force you to create dedicated sites, that’s for sure. It’s somewhat similar to the discussion “native app vs. mobile / responsive website”. There are situations where a mobile site is “good enough” but the user will always prefer the native app if he’s given the choice. Budget and other company restrictions that might apply are a different discussion.

      • http://m2i3.com Jean-Marc Lagace

        I have yet to see sites so complex that they would require entirely different sites to be able to manage them. The “Pragmatic Programmer” had this amazing quote that said: “It’s just a view” and that’s what the mobile version of a site should be, a view on the same content.

        As for the native app vs mobile site I have seen too many corporations invests tons of money in creating an app that people will use only once in their life (thinking of the airport apps there as an example). That money could be invested in making their site work and show nicely on many platforms (and even work offline) using a single source of information instead of an app that you have to download (lots of bandwidth) and install for a single usage. Don’t take me wrong there, there are times where an app is required but the mobile/responsive website VS app is never the case… unless you are the one selling the service in which case it’s always the case because you are redoing the whole thing at a premium.

        • Alex

          I guess you’ve never had the chance to work on one of top e-commerce websites where there are 100’s of colleagues working daily to improve it … And improving it ultimately boils down to increase conversion.

          Such sites still see enough (converting) traffic from old IE’s (even IE6) that it’s irresponsible not to support it, while also not justifiable to hog all your visitors with old jQuery version that still supports IE6. And anyway jQuery (and everything else) differences between the versions would slow down all changes/improvements if they had to check/support both.

          You can view mobile apps, as another source of traffic – and there are some people that just like apps more. If you can (ROI makes sense) – why shouldn’t you cater (and I mean sell some products/service using the app) to them?

          And while I agree (and have data to back it up) that having a separate m. domain is a bad idea … Your whole philosophy hinges on the fact that content should be exactly the same. And in reality, while both desktop and mobile should ultimately have same content and functionality available – that doesn’t mean it’s same HTML on same URL’s. Think of content/text that’s fine on desktop since speed is not an issue (async/lazyload just looks weird), and same is already hidden under accordion on mobile (so async is actually preferred since it makes difference with initial page load).

          I would love to give examples, and data to back up everything I’ve just mentioned – but working for a publicly traded company … I’ll have to ask you to dig some data for yourself.

          Check top ~100 sites as ranked by Alexa – skip everything that’s not primarily in business of selling you something (you’re doing it right if list starts with 1. Amazon, 2. Ebay …) – and then check if they give you exactly same HTML when you visit them as mobile and desktop user agent …

          Oh right – make sure you try same site a few times (clear cookies and local/session storage, use different proxy/IP …) since you might be ending up in one of their “A/B experiments” that’s testing which one is converting better …

          PS. I do agree that for some/many websites responsive design works – but as with all things in life – there is no silver bullet.

          • http://m2i3.com Jean-Marc Lagace

            As of matter fact I have worked on very large site with plenty of people involved … but that’s not what this discussion is about.

            Automation is key. The top 100 sites on Alexa have plenty of automation in their content generation which is almost the same as responsive design… so the automation does not take place on the end user browser by higher up in the food chain.

            You are right, there are no silver bullet but like one of my mentor once told be: “You don’t start with a scaled/faulty design. You design for the best case scenario and then you amend your design to meet reality. That way your decisions are backed up by real constraints and not just preconceptions”.

            In the case of a website, a responsive design (one source of data) is the best case scenario.

  • Sp4cecat

    Google seems to prefer an all-in-one responsive site – it’s all about the one point of truth.

    I used to code WAP (Wireless Application Protocol) sites in the pre-smartphone days; back then, Google actually maintained a separate index for mobile – more people were using IE 5 than mobile. Which made it much easier to ‘optimise’ for, as they also seemed to be using an old algorithm to rank WAP sites.

    Which translated to about 100,000 hits per day, all from people using phones with tiny little 64-colour Nokia screens and Motorola Razrs.

    And then, 7 years ago .. disaster. The iPhone is released, and the mobile user experience changed forever. Google rolls the hidden nugget of the mobile index in to the main index, and our kingship of this pocket Google realm was lost forever ..

    There’s no one-size-fits-all solution for the m. vs responsive argument – the simplest way to decide is probably to look at what percentage of mobile users you have, and whether your business could benefit from getting more.

  • http://scratch99.com/ Stephen Cronin

    If I start researching a purchase on my phone and want to complete it later on my desktop, and you don’t give me a single URL for that product, you just lost a sale.

    • KK

      Well, if you are logged-in, you can just save it in your cart and later access it from your desktop.

  • http://jiffdesign.de/ sascha fuchs

    One off the Mainproblems are the Browser Compatibility. The Client wants a super modern responsive Page, but on the other Side he want that the Site also works on old Browsers like IE8 or better IE7. Everything to the same price like the old static pages.

    Many Fallbacks must be included, we must live without Flexbox, responsive Image Loading fails on IE8. We produce a massive overhead and that makes the page slow. Everything in the same time, the Bosses didn’t want to say “Sorry but RWD is more expensive and it cost more time”, they frighten the Situation that the Client goes to a other Agency.

    We produce a massive overhead off “shit”, the Page works on Desktops nicely. The most People didn’t want to look on the Performance “Hey is working, why you make a drama?”.

    The other thing are the Main Concept, is 90% based on Desktop Experience. The Designer build first a Desktop Design, the most creativity are in this Design. Than is the Developersjob to adopt this Desktop Design in a Mobile View. Crazy.

    In the most cases, RWD would sold as a dynamic layout, all other aspects will be forgotten – the Client see only the Layout.

    I love RWD, but in my Experience is RWD in the most Cases a Marketing Buzzword.

    Is the Situation in Germany and i hate it.

    • Jen Looper

      Browser compatibility is indeed a rabbit hole. In my situation, I need to support IE8 and up. Respond.js offers some help in that direction, but it’s better to consider designing using progressive enhancement if you can…I know convincing others that this is a necessity and that performance trumps everything else is sometimes a hard sell.

  • Jen Looper

    Yes, this is critical, you need some way for users to toggle their small-screen experience, thanks for adding this to the convo!

  • Jen Looper

    Yes indeed! Speed really _should_ trump everything else but often is not taken into consideration.

  • Jen Looper

    awesome cartoon :)

  • http://m2i3.com Jean-Marc Lagace

    Distinct domain = Distinct site. If you server similar content on two distinct domains you are pretty much duplicating (pirating) your own content… not a very good thing to do online nowadays. But even outside those concerns, HTTP contains something called content negotiation where the server and the client can agree on the best content to return… same text, less markup OR same image but at a lower resolution.

    Yes you can do all of that using an “m” site but you are not taking advantage of the mechanic of the web which would allow your content (i.e. the actual data, not the markup, css or images which are just means to render the data) to be best served to your client.

  • http://paulcshirley.com Paul C. Shirley

    As mentioned in the article and in the comments, management and clients play a big part in the decision. Our manager saw a nice template online and decided that we had to use it. Unfortunately, it only scales down to iPad size (1024×768). Our clients want to see their websites on mobiles (specifically iPhone). Our manager can’t afford to invest the time, money, and resources on iOS development. The solution? A cut-down version of the website with mobile-specific content at iPhone resolution running inside an iframe (a webapp). The client is happy because he has a “mobile app”, which you can even add a short-cut to on iPhone and iPad. The manager is happy because he’s saved time and money. The developer is NOT happy because he wanted to do it properly!

  • http://jeffmcneill.com/ Jeff McNeill

    The entire SEO dimension needs to be included in this discussion. After all, search results for desktop and mobile are not identical (because relevance is different for different devices), and it is not enough to have only the desktop site searched by Google, to show relevance for mobile. This is another reason why a dedicated mobile site makes sense.

    • Nicolas Alberto

      I don’t really agree with this. Why should the results be different if you use a different device? If your site is effectively using RWD then the user actually gets what he wants. Having a m. could actually be an absolute nightmare for the user if you use automatic redirection for mobiles. Users searches for “topic xyz” and when clicking on the link (www.) he will be redirected to m. homepage. That is frustrating. He might be redirected to the equivalent mobile content of topicxyz, but that means you will need to map every content of www. to the matching m. site. This is just a recipe for disaster. If the sites use the same db then it may not be such an issue.

  • http://markitwrite.com/ Kerry Butters

    It does feel rather like going backwards to consider a m. site. Sure, some responsive sites can be a little slow, as mentioned below, but this is something that can be addressed and really, if it is slow then that’s down to the designer. There are tactics that can be utilized to speed up RWD sites. Google also recommends the use of RWD for mobile and it’s useful for SEO to have the one www. site rather. Personally, I think that not many smaller companies have the resources to maintain an m. and a www. site so would always tell people to go RWD over m.

  • Mohd. Mahabubul ALam

    As smartphone and tablet adoption rapidly increases, so does the importance of mobile-friendly websites.

    If SEO is a core component of your digital marketing strategy, having a mobile–friendly website is becoming essential.

    Mobile sales have already overtaken desktop sales, and mobile Internet usage is predicted to overtake desktop internet usage by 2014. It is only logical that mobile search will overtake desktop search at some point in the near future as well.

    Since 67 percent of users
    claim they are more likely to purchase from a mobile-friendly website,
    companies that rely on SEO are wise to begin making the transition to
    mobile-friendly websites, and responsive web design specifically.

    The argument between whether to choose a responsive website or a separate mobile website is a highly debated topic. However, the truth is that both options have their pros and cons.

    The option that is best for your business depends on many factors,
    such as the purpose of the website, the intended target audience, and
    whether SEO is a factor.

    If SEO is a factor, here are three reasons why responsive web design is the best option for your mobile SEO strategy.

    1. Recommended By Google

    With 67 percent search market share,
    when Google speaks, search marketers listen. Google states that
    responsive web design is its recommended mobile configuration, and even
    goes so far as to refer to responsive web design as the industry best practice.

    This is because responsive design sites have one URL and the same
    HTML, regardless of device, which makes it easier and more efficient for
    Google to crawl, index, and organize content. Contrast this with a
    separate mobile site which has a different URL and different HTML than
    its desktop counterpart, requiring Google to crawl and index multiple
    versions of the same site.

    Additionally, Google prefers responsive web design because content
    that lives on one website and one URL is much easier for users to share,
    interact with, and link to than content that lives on a separate mobile
    site.

    Take for example a mobile user who shares content from a mobile site
    with a friend on Facebook who then accesses that content using a
    desktop, which results in that user viewing a stripped down mobile site
    on their desktop. This creates a less than optimal user-experience, and
    because of the large emphasis Google is now placing on user-experience
    as a ranking factor, this is essential to take into account with regards
    to SEO.

    2. One Website, Many Devices

    One of the most appealing aspects of responsive web design is that a
    responsive website can provide a great user-experience across many
    devices and screen sizes. This is an important characteristic, since it
    is impossible to anticipate all the devices and screen sizes searchers
    will use to access your site. A site that works well regardless of these
    variables will provide a better and more consistent user-experience
    than a separate mobile site that is designed for a specific device and
    screen size.

    Let’s take the following example. Someone searches for a product on
    their smartphone during a lunch break at work. They find a site that has
    the product they’re looking for, and decide to continue researching
    this product on the same site when they get home. Except, when they get
    home, they will use their desktop instead of their smartphone.

    If the site in this example is responsive, this person will have a positive user-experience
    when transitioning from mobile to desktop because they will view the
    same site on their desktop as they did on their smartphone. On the other
    hand, if the site is a dedicated mobile site, this person will become
    frustrated with the fact that they have to locate the desktop version of
    the site, and find the product all over again.

    3. Easier to Manage

    Having a separate desktop and mobile site requires having separate
    SEO campaigns. Managing one site and one SEO campaign is far easier than
    managing two sites and two SEO campaigns. This is a key advantage a
    responsive website has over a separate mobile site.

    That being said, there are benefits to having a mobile-specific SEO
    strategy, such as optimizing for keywords that are more likely to be
    searched when someone is on their smartphone.

    For example, someone performing a mobile search for a local
    restaurant may be more inclined to use the word “nearby” in their search
    query. However, a separate mobile site is not a requirement for a
    mobile SEO strategy, and there’s no reason why mobile-specific keywords
    can’t be incorporated into a responsive design site as well.

    Conclusion

    Responsive web design is recommended by Google, it allows one website
    to provide a great user-experience across many devices and screen
    sizes, and it also makes managing your SEO strategy easier. For these
    reasons, responsive web design is the best option for your mobile SEO
    strategy.

    Editor’s note: This column originally was published on March 12,
    2013, and comes in at No. 8 on our countdown of the 10 most read Search
    Engine Watch columns of 2013. As the clock ticks down to 2014, we’re
    celebrating the Best of 2013 by revisiting our most popular columns, as
    determined by our readers. Enjoy and keep checking back!

  • Guest

    Chrome on iOS has a cool feature called “Request Desktop Site” which is very useful for getting around the dreaded “m.” problem.

  • Rakhi Dhavale

    liked the design, looks cool!