Diseño web receptivo, diseño adaptativo o Responsive Design

Diseño web receptivo, diseño adaptativo o Responsive Design es el momento de usarlo. SI/NO.Hoy en día los usuarios de nuestras páginas web pueden acceder a las mismas desde diferentes medios: un ordenador de sobremesa PC, un móvil, una tableta, TV… En Frikipandi lo estamos valorando. Vamos a ver las opciones pros y contras del diseño web receptivo, diseño adaptativo  o Responsive Design.

No consideramos los tablets como dispositivos móviles ya que, entre otras razones, suelen tener pantallas más grandes en horizontal. La mayoría de los usuarios de tablets esperan ver páginas optimizadas para tablets u optimizadas para ordenadores cuando navegan por la Web. Esto significa que, a menos que ofrezcas contenido optimizado para tablets, los usuarios esperan ver tu sitio para ordenadores, nunca la versión móvil.

El Responsive Web Design aspira a convertirse en un estándar de la industria por la masificación de dispositivos móviles, como smartphones y tablets, que permiten el acceso a sitios web en cualquier lugar. Vamos a  partir  de la base de que el diseño de una web, para que funcione y se a efectivo, tiene que estar centrada en el usuario.

Poco a poco se empieza a ver el diseño «Responsive Design» en español Diseño web receptivo  es una de las últimas tendencias del diseño. Planifica, diseña y produce siempre con el sitio móvil al comienzo (Mobile First). El usuario más complejo es el de smartphone, por sus modos de uso y el entorno donde consumen el contenido.

Pero el Responsive Design no es un simple añadido a una web, es una filosofía del desarrollo de la capa cliente (front) que debe ser concebido desde el inicio del diseño de una web. Abarca tal cantidad de detalles que resulta impracticable para muchas empresas y realmente complejo para otras. Hay que tener en cuenta tamaño de pantallas, movimiento de elementos según el ancho, criterios publicitarios y el criterio editorial.

El Responsive Design  es un sistema basado en los estándares web actuales HTML5, CSS 3 y Javascript  que permite que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Responsive Design se ha puesto muy de moda con el auge de la navegación móvil, pero va mucho más allá, se trata de webs con diseños inteligentes (smart design) que facilitan la usabilidad de las webs en función de quien las observa. La idea fundamental es que versión en HTML del sitio web hay solo una: es mediante el uso de distintos CSS y eventos Javascript como se cubren todas las resoluciones de pantalla.

Las imágenes, vídeos, el contenido y los elementos estáticos que forman parte de la plantilla se muestran de una forma o de otra dependiendo del dispositivo que utiliza el usuario.

Un diseño adaptativo no nace en la tecnología, sino en el diseño propio de la web. No se trata sólo de que una vez tengamos nuestro diseño terminado debamos diseñar como variará con distintas pantallas y dispositivos, sino que directamente hay que diseñar las webs pensando cómo se comportará. Es decir negocio, producto, marketing, comercial y redacción deben estar de acuerdo y marcar sus objetivos. El desafío mayor del diseño Responsive: se hace esencial optimizar la experiencia del usuario para cada dispositivo. No pedimos nada 🙂

Partamos de un punto de inicio en el que imaginamos estaremos todos de acuerdo: por mucha mejora que hayan supuesto los smartphones en la navegación web con respecto a los teléfonos de gama media, la experiencia de usuario al cargar una web convencional sin modificar ningún parámetro para su uso en móvil es, cuanto menos, poco óptima. También hay que saber el tipo de webs. Un ecommerce debe estar adaptado seguro, un blog  puede, un medio de comunicación depende de sus objetivos

 

Pros de Responsive Design. Sus ventajas.

Un único diseño en todos los dispositivos.  Sitios que usan un diseño web receptivo, es decir, sitios que publican el mismo conjunto de URL en todos los dispositivos y donde cada URL muestra el mismo HTML a todos los dispositivos usando solo CSS para cambiar la forma en que la página aparece en el dispositivo.

Un único soporte. No es necesario realizar un redireccionamiento para que los usuarios lleguen a la vista optimizada para dispositivos.

Representa menos costo que realizar un sitio móvil especializado y para el mantenimiento de la web. Además, no tendrá que preocuparse por la redirección de enlaces.

Una ventaja del diseño web adaptativo es que facilita el trabajo de los buscadores a la hora de rastrear e indexar tu sitio web. Google no tiene problemas en reconocerla oficialmente como su solución preferida, aunque acepta otras. https://developers.google.com/webmasters/smartphone-sites/?hl=es

Muy útil en sitio de comercio electrónico para utilizar la compra impulsiva. Amazon es un experto en esto.

Ofrece una experiencia consistente entre los dispositivos: el contenido siempre será el mismo, solo cambia la experiencia que se tendrá al acceder a él.

Optimización SEO más sencilla.

Evitas reglas altérnate y canonical entre versiones.<link rel=»alternate» media=»only screen and (max-width: 640px)»  href=»http://m.example.com/page-1″ > Y, en la página para móviles, la anotación necesaria debería ser: <link rel=»canonical» href=»http://www.example.com/page-1″ > Esta etiqueta rel=»canonical» incluida en la URL para móviles y que señala a la página para equipos de escritorio es obligatoria.

 

Contras Responsive Design  

Más complejo técnicamente.

CSS de mayor tamaño.

Estéticamente no llega a cuadrar los diseños y no se puede ordenar elementos a voluntad.

Más tiempo de desarrollo.

Tecnología un poco en pañales y usuarios poco acostumbrados.

Se debe tratar los pesos de los elementos externos.

Problemas con navegadores antiguos.

Se debe definir como queremos la web en cada dispositivo y no siempre es factible.

Menos sostenible a través del tiempo.

Publicidad no adaptada.

Obliga a identificar el contenido prioritario y accesorio, a través de la Arquitectura de la Información

Realiza alineamientos estructurales con rejillas grids dinámicas, estas ayudan al desarrollo ágil y ahorran tiempo al manipular tamaños y posiciones del contenido. Pero no siempre se adecua a la arquitectura de la información de un sitio. es dificil mantener un criterio editorial de información relevante.

Su mayor inconveniente se presenta con el tiempo de carga. Se debe hacer muy bien

 

La verdad que muy igualada la decisión.

 

¿Qué recomienda Google por SEO?

Google admite tres configuraciones diferentes para la creación de sitios web optimizados para smartphones:

1 Diseño adaptable: muestra el mismo código HTML mediante una URL y usa consultas de medios CSS para determinar cómo se muestra el contenido en el cliente. Esto elimina los posibles fallos de detección de los user-agents y se evitan los redireccionamientos. Esta es la configuración recomendada por Google.

2 Publicación dinámica: muestra distinto código HTML mediante una URL en función del user-agent. Usa la cabecera HTTP Vary para indicar que estás haciendo esto. Lo ideal para el usuario, lo peor para la plataforma hardware. Aumenta los gastos de housing con mas servidores a mantener. Se basa en usar Agents frameworks como Symfony con los include ESi nos puede ayudar. Por recomendable para webs de mucho tráfico.

3 Sitio para móviles independiente: Redirecciona a los usuarios a una URL distinta en función del user-agent. Usa las anotaciones de enlace bidireccional para indicar a los motores de búsqueda la relación entre las dos URL.  La más usada en la actualidad por grandes empresas.

Para esta última son necesarias reglas altérnate y canonical entre versiones.<link rel=»alternate» media=»only screen and (max-width: 640px)»  href=»http://m.example.com/page-1″ > Y, en la página para móviles, la anotación necesaria debería ser: <link rel=»canonical» href=»http://www.example.com/page-1″ > Esta etiqueta rel=»canonical» incluida en la URL para móviles y que señala a la página para equipos de escritorio es obligatoria.

Se decanta por la primera, eso si debemos permitir al robot de google leer imagenes y CSS, las otras dos opciones le sirven. Vamos que no me ayuda en mi decisión.

Recomendamos la lectura del blog de webmaster de Google http://googlewebmastercentral.blogspot.com.es/2012/04/responsive-design-harnessing-power-of.html

¿Cómo hacer un diseño adaptado o diseño web receptivo  ?

Lo más importante para el diseño web receptivo son las media queries.

¿Qué son media queries?

Las media queries son sentencias del CSS que nos permiten hacer declaraciones que solo se apliquen en nuestros diseños si se cumplen ciertos requisitos que nosotros declaramos. Estas media queries se pueden aplicar básicamente en dos posibles puntos de la web.

Se recomienda  usar con smartphones o móvil  las siguiente consulta dentro del CSS con anchos. Por ejemplo:

@media only screen and (max-width: 640px) {…}

Al llamar al archivo CSS, indicando en cada momento las condiciones para cargarlo.

3 grupos básicos para saber cómo afrontar las media queries:

Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla. Nosotros recomendamos que PC y tablets se vean en este modelo.

Pequeñas o antiguas pantallas, donde nuestra web, para el ancho marcado no cabe. Nunca debe salir la odiosa barra inferior  para terminar de ver el contenido.

Pantallas móviles, donde el espacio es tan pequeño que la información no se lee correctamente con el diseño global. Lo más importante será determinar y ajustar todos y cada una de las media queries, y esto, obviamente, puede tomar mucho tiempo .  Hay frameworks como bootstrap que están de moda gracias a WordPress que nos pueden ayudar.

 

@media screen and (min-width:480px) and (max-width:800px) {

  /* smartphones, tablets pequeñas, o anchos de escritorios pequeños  */

}

@media screen and (max-width:479px) {

  /* smartphones */

}

Necesitas definir correctamente los puntos de rupture dependiendo del ancho y orientación

@media all and (orientation: landscape) {

  /* Target device in landscape mode */

}

@media all and (orientation: portrait) {

  /* Target device in portrait mode */

}

¿Y si necesito que navegadores antiguos sean compatibles?

IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que los mismos se visualicen correctamente estilizados en el mencionado navegador, es necesario crearlos mediante Javascript.

La solución es bastante simple, tienes que poner el siguiente código en el head de tu sitio:

<!–[if lt IE 9]><script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script><![endif]–>

Y con el siguiente  ya podremos usar media queries sin problemas.

<!–[if lt IE 9]><script src=»http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js»></script><![endif]–>

Como todas estas librerías, el resultado no es exacto pero si que da una gran compatibilidad en la mayoría de los casos.

Diseño web receptivo  no es un simple añadido a una web, es una filosofía del desarrollo de interfaces totalmente distinta a la actual y que abarca tal cantidad de detalles que resulta impracticable para muchas empresas y realmente complejo para otras. Hay que tenerlo en cuenta al embarcarse en un proyecto grande.

Si bien las media queries permiten diseños que responden, en diseños receptivos están bastante limitados en lo que hacen. Son muy estáticos y rígidos en su declaración. Hoy en día, podemos estar hablando mucho sobre la construcción de responsive layouts, pero no tanto sobre la forma de mantener en el futuro .

Al final te permite seleccionar a fondo sus puntos de ruptura  (dispositivo – ancho – orientacion) , pero es más complicado de mantener y si un año después de que un diseño tiene que cambiar o adaptarse a la nueva demanda podría darse el caso de tirar el trabajo.

Los componentes tienen que moverse dentro de la disposición de la página para adptarse dispositivo. Es lo más difícil de explicar a un comercial, ya que no siempre podremos garantizar ver un banner en una posición. De hecho ya al una corriente publicitaria de diferentes posiciones de publicidad en móvil que en web clásica.

Los artículos pueden ser más tendentes a adaptarse a un modelo diseño web receptivo.  El problema principal son las portadas. Si trabajamos en un medio tradicional escrito, Ejemplo un periódico es difícil de explicar que las columna verticales en un diseño receptivo ya  no mantiene el criterio editorial. Ya que lo que haremos es colocar una columna debajo de otra.

En WordPress hay muchos themes interesantes. Algunos de los que más me gustan son Alterna, Avada o Sahifa. Podemos tener portadas en grid (Ej: portada de Terra) o en bloques temáticos horizontales (Ejemplo la web de MSN), pero uno de los decálogos que durante muchos años ha marcado la usabilidad web de leer de arriba a abajo y de izquierda a derecha ya no se cumplirá. Sino que son bloques horizontales que podemos recolocar en función del navegador.

Media queries no son lo suficientemente buenas,  para proporcionarnos un nivel de flexibilidad y modularidad que necesitamos para diseñar sistemas escalables y es donde entra Javascript pero no es la panacea. También tendremos el problema de la publicidad

Ahora no podemos definir el comportamiento de un componente basado en su propia anchura y la altura (o el ancho y la altura de su elemento padre ). Otro del problema es el peso de las imágenes que deberían tener el tamaño de mayor resolución que debemos mostrar. Veremos más adelante la solución propuesta. Ya que por estilos debería ser siempre

img {max-width: 100%;}

Hay un dilema en la construcción de diseños receptivos. Queremos construir adaptados compuestos por muchos bloques , componentes HTML independientes modulares que llenan fluidamente cualquier contenedor de diseño que les deje caer en función del ancho del navegador. CSS3 no ofrece una forma de hacer que el contenido responda a las dimensiones de su contenedor .La única forma son puntos de ruptura que articulan por cada componente cuando se muestran a varios anchos, independientemente de sus contenedores. Hacen hojas de estilos más pesadas.

Desafortunadamente, aún no tenemos en CSS3 basadas en elementos y es posible que tarde mucho tiempo.  También los navegadores deberían sacar elementos multimedia en función de su tamaño e incluso la publicidad. Cuando se solucione estaremos preparado para el Resposive Design, pero siempre quedará el agorero que lo navegadores antiguos no son compatibles.

Como resultado de todo esto intentamos  encontrar soluciones propias o de terceros.

Usar un  componente en un área específica de la página, se ajustará automáticamente en función del comportamiento que hemos definido para ello

Bueno, eso es exactamente el punto detrás de preguntas de los medios de elementos en los que están involucrados un buen número de casos de uso. De hecho, si se lo puede permitir usar un poco de JavaScript , puede también utilizar la consulta polyfill

Un Polyfill puede ser un trozo de código o un plugin que permite tener las nuevas funcionalidades de HTML5 en aquellos navegadores que nativamente no lo soportan.

html5please.com está repleto de polyfill y caracteristicas de HTML5

Modernizr puede ayudarnos cuando nos peleamos con ciertos navegadores, especialmente IE. De todas formas, personalmente, sería bastante prudente usando polyfills. Al final podemos llenar la página de código, simplemente por estética. Aunque hay algunos básicos como video.js muy usado https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Con un poco de JavaScript, aprovechar selectores data- en el html con punto de ruptura  320px, 480px, 768px, 1024px

https://github.com/snugug/eq.js

¿Necesitas algo más avanzado? Conditioner.js es una biblioteca para la carga y descarga comportamiento basado en las condiciones ambientales del componente. No soy partidario de tanto Javascript

http://conditionerjs.com/

Ya tenemos algunas ideas para hacer un poco más flexible el sitio , y evitar problemas de mantenimiento a lo largo del camino.

Por último el peso de las imágenes

Nos llevará a que el proceso de poner imágenes adaptativas es un proble de ancho de banda . Los elementos de <audio> y <video> que hay polyfill que nos ayudan .

Recomendamos tener varios recortes de imágenes en atributos, cada una especificando diferentes nombres de archivo de imágenes junto con condiciones en las que cada una será cargada. Para ello  hay un lazyload responsive http://bttrlazyloading.julienrenaux.fr/ BttrLazyLoading Responsive Lazy Loading plugin for JQuery

Al final la pregunta del millón. ¿Diseño web receptivo, diseño adaptativo o Responsive Design, si o no? Todos tienen razón. Los que aconsejan tener webs adaptivas con diseño web receptivo , diseño adaptativo o Responsive Design Y los que quieren tener versiones separadas web/tablet y smartphone. La decisión no es técnica sino del negocio de cada empresa.  Es decir los creadores de contenido, publicidad / marketing  y negocio tienen que ajustar sus peticiones. Hoy por hoy una difícil decisión. Yo no me inclino por una o otra actualemente, ya que si es una tienda diría que si, pero para un portfolio o web tradicional me quedaría en un híbrido por la publicidad y que los usuarios aún no están muy acostumbrados. Lo que si tengo claro es que es el futuro de la web.

Recomendamos leer por Internet

Less Framework un modern front-end framework para construir  responsive designs con CSS3.

Bootstrap 3.3 framework javascript y CSS3 de muchas plantillas de WordPress.

. Leer artículo completo en Frikipandi Diseño web receptivo, diseño adaptativo o Responsive Design.