<\/p>\n
El disseny web adaptatiu o adaptable (en angl\u00e8s, responsive web design<\/em>) \u00e9s una t\u00e8cnica de disseny i desenvolupament web que mitjan\u00e7ant l’\u00fas d’estructures i imatges flu\u00efdes, i de media-queries<\/em> en el full d’estil CSS<\/a>, aconsegueix adaptar el lloc web a l’entorn de l’usuari.<\/p>\n
El dissenyador i autor nord-americ\u00e0 Ethan Marcotte<\/strong> va crear i difondre aquesta t\u00e8cnica a partir d’una s\u00e8rie d’articles a A List Apart<\/a>, publicaci\u00f3 en l\u00ednia especialitzada en disseny i desenvolupament web, idea que despr\u00e9s ampliaria en el seu llibre Responsive web design<\/em>.<\/p>\n
Font:<\/strong> Wikipedia.org<\/a><\/p><\/blockquote>\n
La proliferaci\u00f3 de dispositius amb acc\u00e9s a Internet pot convertir-se en un malson quan creem una p\u00e0gina web, ja que no solament ens obliga a dissenyar pensant en diverses plataformes<\/a> (ordinadors, m\u00f2bils, tauletes, wereables<\/em>, smart TV, netbooks<\/em>, etc.) sin\u00f3 tamb\u00e9 en infinitat de mides i resolucions de pantalla. <\/p>\n
El disseny adaptatiu ens ofereix una soluci\u00f3<\/strong> a aquest problema permetent-nos utilitzar el mateix HTML en tots els dispositius, mentre que \u00e9s el full d’estils CSS l’encarregat de canviar l’aspecte de la p\u00e0gina d’acord amb la mida de la pantalla en qu\u00e8 es mostra. Aix\u00ed doncs, en el disseny adaptatiu, els elements presents en la p\u00e0gina es reorganitzen<\/strong> segons la pantalla s’ampli\u00ef o s’encongeixi.<\/p>\n
V\u00eddeo:<\/strong> Disseny adaptatiu de la p\u00e0gina web del transport p\u00fablic a Londres<\/a> (Nielsen Norman Group).<\/p>\n
Aquesta soluci\u00f3 ens ofereix diversos avantatges:<\/p>\n
\n
- M\u00e9s rapidesa i menys costos en el desenvolupament, ja que no treballem amb diferents versions sin\u00f3 amb una de sola treballada amb una metodologia espec\u00edfica des del comen\u00e7ament del desenvolupament.<\/li>\n
- M\u00e9s facilitat de manteniment.<\/li>\n
- Tranquil\u00b7litat de cara a l\u2019aparici\u00f3 de nous dispositius (el disseny s\u2019adaptar\u00e0 tot sol d\u2019acord amb la grand\u00e0ria de les pantalles).<\/li>\n
- Millorar el posicionament SEO de la web, at\u00e8s que treballem amb una \u00fanica versi\u00f3 per a tots els dispositius.\n<\/li>\n
- Millorar l\u2019experi\u00e8ncia d\u2019usuari, ja que tenim un \u00fanic disseny principal que mantindr\u00e0 la coher\u00e8ncia amb la visualitzaci\u00f3 des de qualsevol dispositiu.<\/li>\n<\/ul>\n
Tanmateix, no n\u2019hi ha prou amb assegurar-nos que els elements s\u2019adapten a la grand\u00e0ria de la pantalla. Quan treballem amb dissenys adaptatius, tamb\u00e9 hem de tenir en compte certes q\u00fcestions:<\/p>\n
\n
- Usabilitat i experi\u00e8ncia d’usuari<\/strong>. El web ha de ser igualment usable, amb independ\u00e8ncia de la mida del dispositiu amb el qual hi accedim.<\/li>\n
- Jerarquitzaci\u00f3 dels elements<\/strong>. Hem de tenir molt present en quin ordre es reorganitzar\u00e0 el nostre contingut en les pantalles m\u00e9s petites. Igual que en el monitor d’un PC, el m\u00e9s important ha d’estar situat ben a la vista.<\/li>\n
- Temps de c\u00e0rrega<\/strong>. Si b\u00e9 el disseny adaptatiu ens permet fer servir el mateix HTML per a tots, aix\u00f2 significa en principi que un smartphone<\/em> haur\u00e0 de carregar el mateix codi que un ordinador de sobretaula \u2014el mostri tot o no\u2014, la qual cosa podria afectar el temps de c\u00e0rrega de la p\u00e0gina al m\u00f2bil. Una soluci\u00f3 \u00e9s detectar el tipus de dispositiu i que el servidor proveeixi nom\u00e9s les parts de codi necess\u00e0ries.<\/li>\n<\/ul>\n
Font:<\/strong> Responsive Web Design (RWD) and User Experience<\/a>.<\/p>\n
M\u00e9s informaci\u00f3:<\/strong>
\n– Manual de disseny web responsiu (de Wilfredo Salas G.)<\/a>.
\n– Disseny web responsiu segons Ethan Marcotte<\/a>.
\n– Hist\u00f2ria del disseny web adaptatiu<\/a>.
\n– Design process in the responsive age<\/a>.
\n– 7 consells per fer bon responsive design<\/a>.
\n– Responsive web design: what it is and how to use it<\/a>.
\n– Articles sobre disseny adaptatiu a A List Apart<\/em><\/a>.
\n– Responsive web design tips from BBC News<\/a>.
\n– El\u00a0responsive\u00a0i la import\u00e0ncia al SEO<\/a>.<\/p>\nEines i recursos<\/h2>\n
Eines<\/h3>\n
\n
- Responsive web design Testing tool<\/a>. Aquesta eina ens permet introduir una URL i comprovar a l\u2019instant el seu aspecte en diferents grand\u00e0ries de pantalla (240 px, 320 px, 480 px, 768 px, 1.024 px).<\/li>\n
- Responsinator<\/a>. Eina en l\u00ednia que permet executar un test de responsivitat, simulant la visualitzaci\u00f3 d\u2019una web en diversos dispositius m\u00f2bils.<\/li>\n
- ScreenQueries<\/a>. Pixel Perfect Media Query Debugging Tool.<\/li>\n
- Gridpak<\/a>. The responsive grid generator.<\/li>\n<\/ul>\n
Exemples de webs adaptatives<\/h3>\n
\n
- Exemples de webs responsives<\/a>.<\/li>\n
- Men\u00fas adaptables amb\u00a0responsive<\/a>.<\/li>\n
- Responsive Web Design: 50 examples and best practices<\/a>.<\/li>\n
- 24 excellent examples of responsive web design<\/a>.<\/li>\n<\/ul>\n
Tutorials<\/h3>\n
\n
- Awesome tutorials to master responsive web design<\/a>.<\/li>\n
- Responsive web design, most complete guide<\/a>.<\/li>\n<\/ul>\n
Responsive CSS Frameworks<\/h3>\n
\n
- Skeleton<\/a>. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.<\/li>\n
- Base<\/a>. A super simple, responsive framework built for all devices big, small and in-between.<\/li>\n
- Gumby<\/a>. Gumby 2 is an amazing responsive CSS Framework built with the power of Sass.<\/li>\n
- Amazium<\/a>. The clean and simple responsive framework.<\/li>\n
- Foundation<\/a>. Foundation 5 is the most advanced responsive front-end framework in the world.<\/li>\n
- Bootstrap<\/a>. The most popular front-end framework for developing responsive, mobile first projects on the web. Desenvolupat per la gent de Twitter.<\/li>\n
- The Goldilocks Approach<\/a>. Ofereix arxius CSS i HTML per programar webs adaptatives. <\/li>\n
- Proportional Grids<\/a>. Simplement, graelles proporcionals que funcionen fins i tot en IE7.<\/li>\n
- Responsive Grid System<\/a>. Ofereix arxius i recursos per iniciar-se en el disseny web adaptatiu.<\/li>\n
- \nThis is responsive<\/a>. Interessant col\u00b7lecci\u00f3 de patrons i recursos adaptatius del dissenyador web Brad Frost.<\/li>\n<\/ul>\n
<\/p>","protected":false},"excerpt":{"rendered":"
Definici\u00f3 El disseny web adaptatiu o adaptable (en angl\u00e8s, responsive web design) \u00e9s una t\u00e8cnica de disseny i desenvolupament web que mitjan\u00e7ant l’\u00fas d’estructures i imatges flu\u00efdes, i de media-queries en el full d’estil CSS, aconsegueix adaptar el lloc web a l’entorn de l’usuari. El dissenyador i autor nord-americ\u00e0 Ethan Marcotte va crear i difondre … <\/p>\n