Per aconseguir-ho tenim les tècniques de Responsive Web Design (RWD) i Adaptive Web Design (AWD).
De forma simplista un podria dir que RWD és un únic template per a tots els dispositius i l'AWD són diferents templates optimitzats per a cada dispositiu.
Això que pot tenir un cert sentit no és del tot cert.
En primer lloc cal dir que no són conceptes antagònics i que no és millor una tècnica que l'altra. RWD i AWD poden ser i de fet són dues tècniques complementàries.
NOTA: aquest article es basa en un munt de lectures de diversos articles i llibres inclosos Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson i Responsive Web Design d’Ethan Marcotte i en la pròpia experiència de l’autora en disseny, UX i maquetació mòbil i web.
En què es basa el RWD?
La teoria ens diu que el RWD és fluid i s'adapta a cada mida de pantalla sense importar el dispositiu de destí.
Tot això s’aconsegueix amb:
- Ús de media queries de CSS per adaptar el layout a la finestra o viewport
- Ús de resposive images tant en mida com en resolució i gràfics vectorials svg
- Ús d'una flexbox o caixa flexible (https://www.w3.org/TR/css3-flexbox/) o d'un sistema de plantilles (grid) si encara no us heu posat amb el CSS3
- Javascript no intrusiu
- La millora progressiva (Progressive Enhancement)
Media queries: Hem de dissenyar per tots els dispositius?
Resposta curta: NO
Si parlem d’amplades de dispositius entre fabricants i models la llista se’ns fa molt llarga, massa llarga i ens resultaria gairebé impossible adaptar el nostre layout a totes i cadascuna d’elles.
El que hem de fer és crear punts de ruptura (amb @media queries) allà on el nostre disseny ens ho demani no on un fabricant o model de dispositiu ens digui. Es tracta de fer-ho senzill, es tracta de:
Pensar en el disseny abans que en els dispositius
Però sempre hem de tenir en compte altres aspectes no només que afectin directament el nostre disseny sinó que afectin de forma directa l’experiència de l’usuari:
Consistència en l’experiència d’usuari
Sabem per informes i estadístiques que una part important dels usuaris utilitza el mòbil com a eina de consulta i que tasques com ara la compra online s’inicien en el mòbil (cercant i comparant productes) i finalitzen en desktop (un ordinador de sobretaula, un portàtil); per tant hem d’oferir a l’usuari una experiència de cerca, navegació i compra el més semblant possible, és a dir consistent, independentment del dispositiu que faci anar.
- Consistència visual aspecte, colors, tipografia, imatges
- Consistència en els continguts (content is the King)
Tot això cal mantenir-ho tant el l’experiència amb el mòbil com en tablet i en desktop.
Si creem punts de ruptura amb @media queries on ens ho demani el nostre disseny, podem agafar com a base l’experiència de navegació en els tres gran dispositius (mòbil, tablet i desktop). Les semblances i diferències que pot tenir el nostre disseny en els tres principals dispositius vindran donades pel propi context (és a dir la mida o viewport).
A internet troben alguns exemples de breakpoints que podem fer anar:
Media quèries for common device breakpoints
Medidas estándar de pantallas para tus media queries
Aquests exemples es tracten de llistats de pantalles i viewports comuns, de dispositius i ordinadors d'escriptori per fer-nos una idea de cap a on podrien apuntar les nostres @media queries, no es tracta doncs de cenyir-se a mides de pantalla estàndard, sinó de veure què és el millor i més específic pel nostre disseny.
En què es basa l’AWD?
ADW utilitza dissenys estàtics basats en punts de ruptura que no “responen” un cop carregats inicialment. AWD ens funciona per detectar la mida de la pantalla i poder carregar la disposició apropiada per a ella, és a dir, caldria dissenyar un layout per a cada mida de pantalla, que poden ser les “n” mides de pantalla més comunes que hi hagi actualment.
Es basa molt més que el RWD en el concepte de millora progressiva.
El concepte de la Millora progressiva
La Millora progressiva significa que el lloc web disposa de característiques més avançades com més avançat sigui el navegador amb el que l’usuari hi accedeix. La idea és que un web no cal que es vegi igual en tots els navegadors, però cal aprofitar les capacitats de cadascun dels navegadors per a que l’experiència dels usuaris sigui la millor possible
La millora progressiva proposa que el disseny web es realitzi de la següent manera:
- En primer lloc, el disseny web ha de permetre l'accés complet i correcte a tota la informació de la pàgina independentment del tipus de navegador utilitzat per l'usuari.
- Després de complir el requisit anterior, s'han d'utilitzar les característiques més modernes de per a la construcció del lloc web (CSS3 per exemple) encara que només els usuaris amb navegadors més moderns siguin capaços de gaudir-les.
Imatge extreta del capítol 1 del llibre Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson
AWD utilitza molt més les tècniques de la millora progressiva com a mitjà per a definir un conjunt de mètodes de disseny enfocats en l’usuari i no pas en el navegador.
Si pensem el la idea d’un layout per cada mida de pantalla l’AWD ens dóna la possibilitat d’oferir la millor experiència a l’usuari quan accedeixi amb qualsevol dispositiu i això no només vol dir disseny i aspecte visual, també vol dir continguts i funcionalitats.
Conclusions i discussions
Per la xarxa hi ha molta informació sobre el RWD però poca i força contradictòria sobre el AWD. El concepte de Millora progressiva molts cops es utilitzat com a sinònim del AWD.
De l’únic de podem estar segurs és que ambdues tècniques s’han d’utilitzar per millorar l’experiència de l’usuari en qualsevol dispositiu.
Més informació
Llibres:
Responsive Web Design d’Ethan Marcotte
Adpative Web Design Crafting Rich Experiences with Progressive Enhancement d’Aaron Gustafson
Articles:
Understanding Progressive Enhancement
Progressive Enhancement: What It Is, And How To Use It?
Cap comentari :
Publica un comentari a l'entrada