1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
---
title: Sites separados para celular e desktop
slug: Web/Guide/Mobile/Separate_sites
translation_of: Web/Guide/Mobile/Separate_sites
original_slug: Web_Development/Mobile/Sites_separados
---
<p>The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.</p>
<h2 id="The_good">The good</h2>
<p>The first option is the most popular by far: use <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">user-agent detection</a> to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">three goals of mobile web development</a> at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.</p>
<p>Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!</p>
<h2 id="The_bad">The bad</h2>
<p>Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.</p>
<p>Even more important than that, though, is the fact that user-agent detection is <a class="external" href="http://css-tricks.com/browser-detection-is-bad/" title="Browser Detection is Bad">inherently flawed</a>, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.</p>
<h2 id="When_it_is_right_to_choose_this_option">When it is right to choose this option</h2>
<p><img align="right" alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png">Firstly, if your target audience includes users on older or low-end <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">feature phones</a>, it is worth noting that you may need to employ this strategy <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">to some degree</a> no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like <a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a> or the older <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a>.</p>
<p>This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">most practical choice</a>. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.</p>
<p>Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.</p>
<h2 id="Examples">Examples</h2>
<p>Most of the major Web applications you see in the wild have chosen this path, including <a class="external" href="http://m.facebook.com/">Facebook</a>, <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, and <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>. In fact, Mozilla picked this strategy for the mobile versions of <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) and <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>.</p>
<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
<p>See the following articles for background and other approaches to developing for mobile platforms.</p>
<ul>
<li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">What is mobile-friendliness?</a></li>
<li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Responsive design</a></li>
<li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">A hybrid approach</a></li>
</ul>
<div class="originaldocinfo">
<h3 id="Original_document_information">Original document information</h3>
<p>This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">Approaches to Mobile Web Development Part 2 – Separate Sites</a>", by Jason Grlicky.</p>
</div>
<p> </p>
|
