{"id":117,"date":"2017-08-02T15:23:34","date_gmt":"2017-08-02T13:23:34","guid":{"rendered":"http:\/\/binalia.es\/blog\/?p=117"},"modified":"2017-08-02T15:35:33","modified_gmt":"2017-08-02T13:35:33","slug":"el-diseno-web-responsive","status":"publish","type":"post","link":"https:\/\/www.binalia.es\/blog\/articulo\/el-diseno-web-responsive\/","title":{"rendered":"El dise\u00f1o web \u00abresponsive\u00bb"},"content":{"rendered":"

La definici\u00f3n m\u00e1s sencilla del t\u00e9rmino \u00abresponsive\u00bb podr\u00eda ser algo as\u00ed como \u00abaquel dise\u00f1o web que se ve bien en cualquier pantalla\u00bb. No obstante, debemos ser m\u00e1s serios ya que, los que verdaderamente nos enfrentamos a este tipo de situaciones, sabemos que el dise\u00f1o \u00abresponsive\u00bb va mucho m\u00e1s all\u00e1. Veamos poco a poco que es esto del dise\u00f1o web \u00abresponsive\u00bb porque esto es m\u00e1s profundo de lo que parece.<\/strong><\/p>\n

\u00bfQu\u00e9 es una web \u00abresponsive\u00bb?<\/h1>\n

El t\u00e9rmino \u00abresponsive\u00bb proviene del ingl\u00e9s (sensible) aunque en nuestro idioma solemos traducirlo como \u00abadaptable\u00bb. Una web con dise\u00f1o adaptable se visualiza correctamente en cualquier tipo de dispositivo o, para ser m\u00e1s exactos, cualquier tipo de pantalla. El t\u00e9rmino ingl\u00e9s \u00abresponsive\u00bb hace referencia a la sensibilidad que posee el dise\u00f1o para adaptarse a los diferentes soportes de visualizaci\u00f3n, ya sean enormes monitores de escritorio, tabletas o tel\u00e9fonos m\u00f3viles.<\/p>\n

El objetivo es que, independientemente del medio, se mantenga la esencia del mensaje a transmitir.<\/p><\/blockquote>\n

La adaptabilidad no se consigue mostrando lo mismo a mayor o menor tama\u00f1o. Se trata de mantener nuestro mensaje y contenidos sobre diferentes formatos o superficies. La cosa se complica.<\/p>\n

Pero, \u00bfqu\u00e9 tiene esto de novedad?<\/h1>\n

Pues, en esencia, no es nada nuevo. De hecho se lleva haciendo toda la vida en medios impresos. No es lo mismo dise\u00f1ar un anuncio de peri\u00f3dico a p\u00e1gina completa que a doble p\u00e1gina o para una secci\u00f3n de anuncios por palabras. Hemos de conocer las dimensiones donde aparecer\u00e1 nuestro anuncio y las limitaciones del medio, adaptando el contenido de nuestro mensaje a los diferentes formatos finales. Lo dicho, nada nuevo.<\/p>\n

Entonces, \u00bfno cambia nada?<\/h1>\n

Evidentemente s\u00ed, y mucho respecto al medio impreso.<\/p>\n

La caracter\u00edstica principal del medio impreso es que el formato y sus caracter\u00edsticas se conocen de antemano. El medio impreso no variar\u00e1 y eso es una gran ventaja. Sabemos las dimensiones y resoluciones de la zona donde se presentar\u00e1 nuestro mensaje. En dise\u00f1o web no ocurre as\u00ed, reina la incertidumbre ya que cada potencial lector de nuestro contenido lo har\u00e1, sin duda, con pantallas de dimensiones y resoluciones diferentes. A esta diversidad hemos de a\u00f1adir las particulares configuraciones de cada entorno gr\u00e1fico, las molestas barras de herramientas y las posibles \u00abaportaciones\u00bb que cada fabricante a\u00f1ada a su dispositivo. En definitiva, un sinf\u00edn de elementos que nos alejar\u00e1n m\u00e1s, si cabe, de un est\u00e1ndar de visualizaci\u00f3n en el que basarnos.<\/p>\n

Para complicar a\u00fan m\u00e1s el tema, hemos de tener en cuenta que la situaci\u00f3n en que empleamos cada dispositivo es propicia para acciones diferentes. El mismo usuario no se comporta igual con su ordenador de escritorio que con su m\u00f3vil. No hemos de olvidar que la web es un medio interactivo y queremos que el usuario responda a nuestro mensaje con una acci\u00f3n, bien sea para contactar con nosotros, para opinar sobre nuestro contenido o para recomendarnos. Sea lo que sea, hemos de facilitar esta interacci\u00f3n adecu\u00e1ndonos al medio en que estemos present\u00e1ndonos.<\/p>\n

Un par de ejemplos con fines ilustrativos:<\/p>\n

    \n
  1. Cuando presentamos nuestros datos de contacto (tel\u00e9fono y correo electr\u00f3nico), si estamos dise\u00f1ando una secci\u00f3n de contacto en nuestra web y nuestro dise\u00f1o es adaptable, habr\u00eda que plantearse si deber\u00edamos destacar m\u00e1s nuestro tel\u00e9fono, cuando detectemos que estamos en tel\u00e9fonos m\u00f3viles (pantallas peque\u00f1as), con el fin de facilitar la llamada, mientras que, sobre una versi\u00f3n de escritorio (pantallas grandes), podr\u00eda presentarse al mismo nivel que el correo electr\u00f3nico o incluso, priorizar ligeramente \u00e9ste \u00faltimo.<\/li>\n
  2. Sobre un tel\u00e9fono, navegamos tocando la pantalla con nuestros dedos, por lo que los botones de acci\u00f3n han de ser considerablemente m\u00e1s grandes que sobre una versi\u00f3n de escritorio tradicional, donde el puntero del rat\u00f3n permite piezas m\u00e1s peque\u00f1as en t\u00e9rminos relativos.<\/li>\n<\/ol>\n

    \u00a1Menuda complicaci\u00f3n! Es como hacer muchas webs en una.<\/h1>\n

    Bueno, como se suele decir en estas ocasiones: s\u00ed pero no. No se trata de pensar en todos los casos, no ser\u00eda posible. Lo que se debe de hacer es aplicar una metodolog\u00eda de dise\u00f1o web adaptable<\/strong>. Para ello hemos de reflexionar y tener en cuenta las siguientes directrices durante el desarrollo:<\/p>\n

    1. Definir los tipos de elementos<\/h2>\n

    Todo espacio de comunicaci\u00f3n interactivo se compone de piezas o elementos. Cada una de estas piezas (o varias de ellas) est\u00e1n dise\u00f1adas para una finalidad concreta.<\/p>\n

    Para verlo con m\u00e1s claridad analicemos un entorno interactivo conocido: la pantalla de nuestro ordenador. Independientemente del sistema operativo empleado, siempre tendremos un elemento como la barra de tareas, donde se nos indica las aplicaciones que tenemos abiertas y, en un rinc\u00f3n, convencionalmente suele ser a la derecha, estar\u00e1 el \u00e1rea de notificaciones, donde, de manera reducida, habitualmente iconos, se informa de eventos o situaciones y, s\u00f3lo en caso de mayor detalle, aparece una notificaci\u00f3n (tambi\u00e9n en este mismo lado, con el detalle de lo ocurrido). El resto de la pantalla es para un escritorio, enorme, donde las aplicaciones se muestran, cada una con su dise\u00f1o, pero con elementos comunes (men\u00fas, controles de tama\u00f1o y cierre, herramientas, informaci\u00f3n, etc.) f\u00e1cilmente identificables, siguiendo un est\u00e1ndar de presentaci\u00f3n, lo m\u00e1s importante, acorde con el entorno gr\u00e1fico que lo sustenta.<\/p>\n

    El ejemplo del p\u00e1rrafo anterior puede parecer absurdo y evidente, pero es muy ilustrativo porque los contenedores ya est\u00e1n definidos de modo que, si una aplicaci\u00f3n quiere notificar de una situaci\u00f3n al usuario, emplear\u00e1 el \u00e1rea de notificaciones y un mensaje de notificaci\u00f3n emergente siempre lo har\u00e1 bajo el mismo formato y del mismo modo. La principal diferencia cuando dise\u00f1amos un sitio web es que no tenemos ning\u00fan entorno que constri\u00f1a<\/del> dirija nuestro dise\u00f1o y podr\u00edamos tener tendencia a caer en la originalidad o, a\u00fan peor, en el desorden. Por este motivo hemos de dise\u00f1ar un sitio web pensando siempre en piezas o \u00abcontenedores\u00bb de modo que sea esta pieza la que defina su funci\u00f3n y su comportamiento.<\/p>\n

    Los contenedores b\u00e1sicos que todo sitio web \u00abnormal\u00bb debe tener son:<\/p>\n

      \n
    1. Un men\u00fa de navegaci\u00f3n<\/strong> que parezca un men\u00fa de navegaci\u00f3n (no es broma, a veces no lo parece). De este modo, el usuario puede hacerse una idea de todo lo que puede encontrar en nuestro sitio web y proporcionamos un punto de partida claro para los usuarios que no saben por donde comenzar.<\/li>\n
    2. Una zona de informaci\u00f3n principal <\/strong>y otras secundarias. Adem\u00e1s, cada zona deber\u00e1 mostrar exactamente eso, no debemos utilizar zonas secundarias para mostrar informaci\u00f3n importante y viceversa.<\/li>\n
    3. Llamadas a la acci\u00f3n<\/strong> claras y homog\u00e9neas. Si los botones de acci\u00f3n son diferentes, el usuario no sabr\u00e1 cuando un elemento es accionable o no lo es.<\/li>\n<\/ol>\n

      Los elementos anteriores son los m\u00e1s habituales pero se pueden dar otros tipos de elementos. \u00c9stos pueden ser muchos y muy variados, dependiendo de la complejidad y el objetivo de nuestro sitio web (contenedores de publicidad, ofertas, informaci\u00f3n del usuario, etc.) pero hemos de tener claro que aquello que se ha dise\u00f1ado para un tipo de contenido (p.e. publicidad) no puede emplearse para otro (p.e. datos del usuario) aunque ambos aparezcan en la misma ubicaci\u00f3n de nuestro dise\u00f1o. Por consiguiente, hablamos siempre de tipos de elementos (publicidad, datos personales, informaci\u00f3n t\u00e9cnica, fotos de producto, etc.) y no de contenido (oferta del verano, tel\u00e9fono de contacto, precio antes y despu\u00e9s). No sabemos si queda claro. Continuemos…<\/p>\n

      2. Priorizar el contenido<\/h2>\n

      Una vez hemos definido los distintos tipos de contenido que podemos mostrar en nuestro dise\u00f1o (tipos de elemento o contenedores) hemos de jerarquizar estos tipos. No tiene la misma prioridad un men\u00fa de navegaci\u00f3n que un elemento publicitario… o s\u00ed (depende). La jerarqu\u00eda la decidimos nosotros pero siempre ha de establecerse dicha jerarqu\u00eda.<\/p>\n

      \u00abLos usuarios analizan nuestro sitio web visualmente y, queramos o no, en un ser humano esto ocurre de forma jer\u00e1rquica.<\/p>\n

      La jerarqu\u00eda nos va a permitir adecuar el sitio web a diferentes pantallas, m\u00e1s alargadas o m\u00e1s anchas, m\u00e1s grandes o m\u00e1s peque\u00f1as. La jerarqu\u00eda nos permitir\u00e1 emitir cada elemento en el orden correcto para que el dibujado se haga siempre de modo que lo m\u00e1s importante siempre quede en una posici\u00f3n m\u00e1s visible y lo menos importante quede al final de la visualizaci\u00f3n o incluso desaparezca en soportes con visibilidad muy reducida.<\/p>\n

      3. Ajustarnos al entorno<\/h2>\n

      Para finalizar, los aut\u00e9nticos dise\u00f1os adaptables pueden modificar las caracter\u00edsticas de un contenedor dependiendo de la situaci\u00f3n. Tal y como ya cit\u00e1bamos anteriormente, un contenedor de un n\u00famero de tel\u00e9fono puede ser m\u00e1s peque\u00f1o en una pantalla grande (asumiendo que estamos frente a un monitor de sobremesa) pero ser m\u00e1s grande en pantallas peque\u00f1as (asumiendo que estamos visualiz\u00e1ndolo en un tel\u00e9fono m\u00f3vil) puesto que este tipo de informaci\u00f3n es mucho m\u00e1s \u00fatil en el m\u00f3vil.<\/p>\n

      Del mismo modo, puede haber contenedores que no aparezcan sobre pantallas peque\u00f1as porque pierden todo el sentido como, por ejemplo, ampliadores de im\u00e1genes o herramientas de zoom de im\u00e1genes.<\/p>\n

      En resumen, reflexi\u00f3n y simplicidad.<\/h1>\n

      Aunque parezca absurdo, es as\u00ed. No hemos de complicarnos la vida a la hora de dise\u00f1ar un sitio web para demostrar lo que \u00abcontrolamos\u00bb del tema y como aplicamos lo \u00faltimo en tecnolog\u00eda.<\/p>\n

      Es evidente que no podremos acertar en todo y que siempre encontraremos problemas de adaptabilidad a dispositivos o medios concretos pero no por ello nuestro dise\u00f1o deja de ser adaptable. Hasta los sitios web m\u00e1s prestigiosos tienen sus fallos. Lo importante es no olvidar que nuestro objetivo es que el usuario pueda navegar y responder a nuestras llamadas de acci\u00f3n. El usuario quiere que su navegaci\u00f3n sea simple y que no le haga pensar. Busca comodidad y encontrar las cosas donde se supone que deben de estar. Si tenemos siempre presente esta m\u00e1xima, tendremos la mitad del trabajo resuelto.<\/p>\n

      Recordemos que un interfaz de usuario es como un chiste, si tienes que explicarlo ya no es tan bueno como parec\u00eda. \u00a1Pues eso!<\/p>\n

      Imagen: Bruce Lee, en su ultima entrevista donde dijo su c\u00e9lebre frase: \u00abbe water, my friend\u00bb<\/a>.<\/h6>\n","protected":false},"excerpt":{"rendered":"

      La definici\u00f3n m\u00e1s sencilla del t\u00e9rmino \u00abresponsive\u00bb podr\u00eda ser algo as\u00ed como \u00abaquel dise\u00f1o web que se ve bien en cualquier pantalla\u00bb. No obstante, debemos ser m\u00e1s serios ya que, los que verdaderamente nos enfrentamos a este tipo de situaciones, sabemos que el dise\u00f1o \u00abresponsive\u00bb va mucho m\u00e1s all\u00e1. Veamos poco a poco que es…<\/p>\n","protected":false},"author":2,"featured_media":121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7],"tags":[69,66,70,68,67],"class_list":["post-117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web-avanzado","category-formacion-tecnica-a-empresas","tag-adaptable","tag-diseno","tag-metodologia","tag-responsive","tag-web"],"_links":{"self":[{"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/posts\/117"}],"collection":[{"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":4,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions\/123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.binalia.es\/blog\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}