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
50
|
---
title: Disseny sensible (Responsive design)
slug: 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>Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos <a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">dissenys web separats</a> per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet <a class="external" href="http://www.alistapart.com/articles/dao/">no tant</a>) ha crescut en popularitat: oblidar-se de la detecció del <em>user-agent</em> des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo <a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">disseny web sensible</a>. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.</p>
<h2 id="Avantatges">Avantatges</h2>
<p>Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres <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?">objectius</a> del desenvolupament web per a mòbils:</p>
<ul>
<li><strong>Presentació</strong> — Emprant un <em>layout</em> flexible a la teva web juntament amb <em>media queries</em> de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.</li>
<li><strong>Contingut</strong> — Alterant el contingut basant-te en les característiques del navegador <a class="external" href="http://www.quirksmode.org/blog/archives/2010/08/combining_media.html">via JavaScript</a>, pots adaptar el missatge a cada usuari.</li>
</ul>
<p>Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del <em>user-agent</em> del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.</p>
<h2 id="Inconvenients">Inconvenients</h2>
<p>Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.</p>
<p>Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un <a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/"><em>layout</em> flexible</a>. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.</p>
<p>Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.</p>
<h2 id="Quan_és_adient_escollir_aquesta_opció">Quan és adient escollir aquesta opció</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" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>Tal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.<br>
<br>
Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.</p>
<h2 id="Exemples">Exemples</h2>
<p>Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:</p>
<ul>
<li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – un dels meus dissenys sensibles favorits, que tambè he capturat abans en la imatge!</li>
<li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – un bon article per a llegir, que inclou més enllaços amb exemples</li>
<li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
<li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li>
<li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
</ul>
<p>Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que <a class="external" href="http://www.lukew.com/ff/entry.asp?1117">primer generis un disseny per a pantalla petita</a>, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.</p>
<p>També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant <em>media queries</em> [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els <em>media queries</em> encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs <a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aquí</a>.</p>
<h2 id="Enfocs_del_desenvoulpament_web">Enfocs del desenvoulpament web</h2>
<p>Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.</p>
<ul>
<li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">Què vol dir ser un disseny amigable amb els mòbils?</a></li>
<li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Dissenys diferents per a diferents pantalles</a></li>
<li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Un enfoc híbrid</a></li>
</ul>
<h2 id="Llegeix_també">Llegeix també</h2>
<ul>
<li><a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">Disseny web sensible</a> per obtenir més recursos</li>
</ul>
<div class="originaldocinfo">
<h3 id="Document_d'informació_original">Document d'informació original</h3>
<p>Originalment publicat al 27 Maig, 2011 al bloc Mozilla Webdev com "<a class="external" 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>", per Jason Grlicky.</p>
</div>
<p> </p>
|
