Responsive Design

  • Adressname der Version: Web_Development/Mobile/Responsive_design
  • Titel der Version: Responsive Design
  • ID der Version: 424633
  • Erstellt:
  • Autor: HolgerSinn.Com
  • Aktuelle Version? Ja
  • Kommentar

Inhalt der Version

Als Reaktion auf die Probleme mit dem getrennten Ansatz zur Entwicklung von Web-Sites für mobile und Desktop, wird eine relativ neue Idee (was ist eigentlich ziemlich alt) immer beliebter: Graben User-Agent-Erkennung, und stattdessen reagieren die Seiten  auf der Client-Seite in den Browser-Funktionen. Dieser Ansatz, der von Ethan Marcotte in seinem Artikel für A List Apart kam, wird als Responsive Web Design bekannt sein. Wie der getrennten Plattform Ansatz hat ansprechende Webdesign positive und negative Aspekte.

The Advantages

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.

  1. It save time and money as there isn't a need to maintain separate websites for different devices.
  2. Responsive Design provides every page with a single and unique URL.
  3. 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.
  4. Responsive Design doesn't care about user agents.

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.

The Negatives

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.

Giving your existing site a responsive design also involves a rewrite of your styles if the you are not sporting a flexible layout 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.

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.

When it is right to choose this option

teixido_responsive-300x177.pngAs 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!

Examples

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:

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 create a small-screen design first, 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 here.

Approaches to mobile Web development

See the following articles for background and other approaches to developing for mobile platforms.

See also

Original document information

Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky.

 

Quelltext der Version

<p><span class="long_text" id="result_box" lang="de"><span class="hps">Als Reaktion auf</span> <span class="hps">die Probleme mit dem</span> <span class="hps">getrennten&nbsp;</span><span class="hps">Ansatz zur Entwicklung von</span> <span class="hps">Web-Sites für</span> <span class="hps">mobile und</span> <span class="hps">Desktop</span><span>,</span> wird <span class="hps">eine relativ neue Idee</span> <span class="hps">(was ist eigentlich</span> <span class="hps">ziemlich alt</span><span>)</span> <span class="hps">immer beliebter</span><span>:</span> <span class="hps">Graben</span> <span class="hps">User-Agent</span><span>-Erkennung,</span> <span class="hps">und stattdessen</span> </span><span class="long_text" id="result_box" lang="de"><span class="hps">reagieren </span></span><span class="long_text" id="result_box" lang="de"><span class="hps">die Seiten</span>&nbsp; <span class="hps">auf</span> <span class="hps">der Client-Seite</span> <span class="hps">in den Browser</span><span>-Funktionen.</span> <span class="hps">Dieser Ansatz, der</span> <span class="hps">von Ethan</span> <span class="hps">Marcotte</span> <span class="hps">in</span> <span class="hps">seinem Artikel</span> <span class="hps">für A</span> <span class="hps">List Apart</span> <span class="hps">kam, wird als</span> <span class="hps">Responsive</span> <span class="hps">Web Design</span> <span class="hps">bekannt sein.</span> <span class="hps">Wie der</span> <span class="hps">getrennten Plattform</span> <span class="hps">Ansatz</span> <span class="hps">hat</span> <span class="hps">ansprechende</span> <span class="hps">Webdesign</span> <span class="hps">positive und negative Aspekte</span><span>.</span></span></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 save 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>&nbsp;</p>
Zu dieser Version zurücksetzen