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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
---
title: Адаптивный дизайн
slug: conflicting/Web/Progressive_web_apps
translation_of: Web/Progressive_web_apps
translation_of_original: Web/Guide/Responsive_design
original_slug: Web_Development/Mobile/Responsive_design
---
<p>As a reaction to the problems associated with the <a href="/en-US/docs/Web_Development/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">separate sites</a> approach to developing Web sites for both mobile and desktop, a relatively new idea (which is actually <a href="http://www.alistapart.com/articles/dao/">quite old</a>) is growing in popularity: ditch user-agent detection, and instead make your page respond on the client-side to the browser’s capabilities. This approach, introduced by Ethan Marcotte in his article for <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a>, came to be known as <a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">Responsive Web Design</a>. Like the separate sites approach, responsive Web design has positive and negative aspects.</p>
<h2 id="The_Advantages">The Advantages</h2>
<p>Though it wasn’t initially proposed as method for creating mobile sites, responsive design has recently gained a lot of attention as a way of taking some first steps towards mobile-friendliness in lieu of a separate mobile site.</p>
<ol style="font-size: medium;">
<li>It saves time and money as there isn't a need to maintain separate websites for different devices.</li>
<li>Responsive Design provides every page with a single and unique URL.</li>
<li>Social sharing stats (Facebook Likes, Tweets, +1 on Google plus) are not split, since the mobile and desktop versions of your web pages use a single and unique URL.</li>
<li>Responsive Design doesn't care about user agents.</li>
</ol>
<p>There are some really nice aspects to this approach. Since it does not rely on user-agent detection, it is more resilient and future-proof than the separate sites approach. For simple sites, it can also be significantly easier to implement and maintain than other options.</p>
<h2 id="The_Negatives">The Negatives</h2>
<p>This approach isn’t without its limitations. Because content must be altered on the client-side with JavaScript, only minimal content changes are encouraged. In general, things can get very hairy very quickly if you are trying to code two separate sets of JavaScript to work with the same DOM. This is a big reason why web applications tend not to adopt this approach.</p>
<p>Giving your existing site a responsive design also involves a rewrite of your styles if the you are not sporting a <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">flexible layout</a> already. This could be a blessing in disguise, though; making your site’s layout responsive could be a good opportunity to modernize and clean up your site’s CSS.</p>
<p>Finally, since you are adding code to your scripts and styles, performance may be worse than the Separate Sites approach. There is not really any way around this, though a thoughtful refactoring of your scripts and styles might actually save a few bytes in the long run.</p>
<h2 id="When_it_is_right_to_choose_this_option">When it is right to choose this option</h2>
<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" height="177" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" width="300"></a>As mentioned above, because content changes can be difficult, when you take this approach, you are not able to give users a strikingly different experience on mobile without a significant increase in code complexity. That said, if the desktop and mobile versions of your site are very similar, then this approach is a great option. It is well-suited to document-centric sites whose a primary use case is consistent across devices, like product pages. You may notice that the examples below are all blogs or portfolios!</p>
<h2 id="Examples" name="Examples" style="overflow: hidden;">Examples</h2>
<p>Though it is not as popular as the separate sites approach, there are more and more websites employing this technique every day. Luckily, since all the code is client-side, if you’d like to see how a site technically implements this approach, it is as simple as visiting the site and clicking “View Page Source.” Here are a few examples:</p>
<ul>
<li><a href="http://teixido.co/">http://teixido.co/</a> – one of my favorite responsive designs, also pictured above!</li>
<li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – also a good article to read, with its own links to examples</li>
<li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
<li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
<li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
</ul>
<p>Despite being a relatively young approach, there are already some emerging best practices. For example, if you are designing a site from scratch with this option in mind, it is usually worthwhile to <a href="http://www.lukew.com/ff/entry.asp?1117">create a small-screen design first</a>, so that the constraints of mobile are with you from the beginning. It’s also great to use progressive enhancement for your styles instead of hiding elements of your existing site with media queries. This way, older browsers that might not support media queries still show the proper layout. An excellent presentation on the merits of this method is available <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">here</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-US/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">What is mobile-friendliness?</a></li>
<li><a href="/en-US/docs/Web_Development/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">Separate sites</a></li>
<li><a href="/en-US/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">A hybrid approach</a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Responsive Web design</a> for additional resources</li>
</ul>
<div class="originaldocinfo">
<h3 id="Original_document_information">Original document information</h3>
<p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p>
</div>
<p> </p>
|
