1

4 claves para entender el responsive web desing

El próximo 21 de abril, el motor de búsqueda de Google podría hacer temblar el mundo Web con un nuevo algoritmo que penalizará aquellos sitios que no respondan al concepto”responsive” o “sensible” del diseño de sitios y páginas. ¿Pero de qué estamos hablando?

El principio de diseño y desarrollo de páginas web responsive (“sensibles” en español) garantiza que el sitio Web pueda ser navegable desde cualquier dispositivo, con cualquier tamaño de pantalla, con una experiencia cómoda para el usuario. Se trata de respetar el hecho de que los usuarios quieren consumir los sitios web en su pantalla de 4 pulgadas del smartphone móvil, la pantalla de su mini-tableta de 7 pulgadas, su tamaño completo dispositivo de tableta de 10 pulgadas, la pantalla de su ordenador portátil, e incluso su 4H HDTV de pantalla grande. El diseño es sensible porque toma constantemente en cuenta las propiedades del dispositivo y el navegador en el que el usuario consume el contenido.

A continuación algunas claves:

1.  Diseño web Responsive utiliza juiciosamente las redes, que permiten a los desarrolladores definen cómo una experiencia escalará, así como imágenes flexibles, formatos y contenedores. También representa un cambio de mentalidad para el desarrollador, ya que él o ella ahora prescribe tamaños relativos, tales como 2.5 unidades de ancho, en lugar de medidas definitivas, concretas, tales como 202 píxeles, al colocar y elementos de una página de tamaño.

Mediante el uso de medidas definitivas relativas y no para los elementos de una página y sus envases, el diseño básico y la usabilidad de una página se puede mantener al mismo tiempo escalar hacia arriba y abajo en diferentes tamaños navegador – es decir, el sitio puede ser sensible a estos cambios -. Las páginas pueden eliminar elementos que no encajan en una ventana más pequeña, y también agregarla de nuevo cuando se amplía mediante el zoom del navegador, o se cambia a una pantalla más grande.

Si aún no lo ha oído hablar de diseño web sensible, que está sin duda destinado a ser expuesto a él. Incluso Google, sin duda uno de los guardianes de la industria de la Web, ya que los diseñadores crear sitios web esencialmente para atraer y retener el rastreador de Google y convencer a clasificar sus sitios altamente en consultas en los motores de búsqueda de los usuarios, ha abrazado Responsive Web Design.

Google recomienda a los webmasters a las mejores prácticas de uso de diseño web sensible, es decir, que tengan el mismo HTML para todos los dispositivos y utilizando sólo consultas de medios CSS para decidir la prestación en cada dispositivo industria”, el gigante de las búsquedas, dice en su guía webmasters de Google. Esto es lo que necesitas saber sobre diseño web sensible y la forma en que se funde con el entorno actual.

2. Los usuarios demandan experiecnias de navegación de primera clase. Una parte cada vez mayor de su público objetivo utiliza dispositivos que no soportan las resoluciones ancho tradicionales en el navegador. Exigen una experiencia de primera clase en sus teléfonos primero y sus escritorios un distante segundo lugar.

Un apodo informal para el diseño web sensible y su desarrollo operadora es “móvil primero”, que reconoce que una parte significativa de tráfico del sitio web en estos días proviene de dispositivos portátiles de todos los tamaños y formatos. Desde los teléfonos inteligentes a minicomprimidos a tabletas de tamaño regular, una parte importante y creciente de consumo de Web está sucediendo en los dispositivos en cualquier lugar. Usted y sus desarrolladores ya no se puede asumir que los sitios están siendo utilizados en una PC de escritorio de pantalla completa y desarrollar sitios móviles como una ocurrencia tardía.

La situación del mercado del sitio web para móviles hoy en día es bastante deprimente. ¿Alguna vez has visitado un sitio web de línea aérea en su teléfono, por ejemplo? Eso era más probable una experiencia frustrante. Imagen de un sitio idiotizada que te permite hacer una o dos cosas – chequear el estatus de vuelo y tal vez, sólo tal vez la facturación para su vuelo – pero el retroceso al sitio completo para tareas tales como la reserva de entradas o comprobar su saldo de millas de viajero frecuente . El sitio completo tarda 45 segundos o más para cargar, claro está.

Esa no es una primera experiencia móvil. De hecho, no sería una web de la aerolínea es el sitio perfecto para un primer diseño móvil? Usted tiene un teléfono en el bolsillo o bolso mayor parte del tiempo en un aeropuerto; usted no está llevando su, ordenador portátil con sesión iniciada accionar-en todas partes. ¿Por qué no debe usted tomar una tarjeta de embarque, una nueva reserva de un vuelo, ves a ti mismo en modo de espera o actualizar las listas de forma predeterminada en los sitios móviles? Un cliente en un aeropuerto es un activo valioso, pero sitios web de aerolíneas son a menudo diseñados para la persona en el hogar. En virtud de un paradigma de diseño web sensible, que iba a cambiar.

3. Los usuarios quieren contenido al segundo. Se accede a más sitios web sobre la marcha, a través de conexiones celulares, por lo que es importante diseñar páginas que responden bien y se pueden utilizar a través de conexiones de latencia más lentas y / o superior tan pronto como sea posible, incluso antes de que la página haya terminado de cargarse. Esto a menudo implica la creación de componentes de servidor que detectan qué tipo de dispositivo de un usuario está consumiendo contenido, entonces el acceso a una base de datos completa de las diferencias de dispositivos para servir a los contenidos y del lado del cliente controles adecuados (como JavaScript) lo que las páginas se cargan más rápido de lo que de lo contrario haría en cualquier dispositivo dado.

Con un diseño web sensible, las consultas de los medios de comunicación se utilizan para enviar las propiedades del dispositivo de un usuario está utilizando – en particular, el ancho del navegador – y el servidor sirve a diferentes reglas de estilo CSS que acabar dejando al usuario tener la mejor versión de la experiencia posible sitio.

Sin embargo, esto puede hinchar rápidamente en un enfoque caro. Por un lado, que la base de datos del dispositivo será siempre cambiante, y que esencialmente será una gran lista de rarezas – para este teléfono, cargue esta versión del código y enviar esta versión de la CSS, pero para esta tableta, envíe esta particular versión de el código, y así sucesivamente. Creación y mantenimiento de esta base de datos estará a tiempo lento y requerirá muchas horas-hombre de experiencia.

Esta parte de la sensible concepto global de diseño Web puede estar fuera del alcance de las pequeñas y medianas empresas, que prefieren para optimizar en un enfoque basado en estándares y, en esencia, esperar lo mejor. Por otra parte, esas empresas pueden ser capaces de tomar ventaja de los marcos como jQuery Mobile que pueden consultar los dispositivos y realizar funciones inteligentes acerca de qué características de HTML y CSS funcionarán. Esta es, quizás, la zona más activa de la innovación en el paradigma de diseño web sensible.

4. A centrarse en el Responsive Web Design pues llegó para quedarse. Los de cara al usuario desafío más común creadores de sitios web tienen – bueno, al menos por el usuario frente a sitios web financiados por dinero de la publicidad – es la forma de escalar la publicidad. Los banners suelen tener un ancho fijo y no escalan o degradan bien; simplemente funcionan a una cierta anchura y dejan de funcionar cuando la anchura disminuye.

Obviamente, esto afecta los ingresos operadores del sitio. ¿Cómo pueden justificar monerías con el diseño y la creación de experiencias móviles por primera vez cuando esas vistas y clics valiosos no están monetizados? Esta es un área donde la presión de los operadores de sitios será la gran palanca por el cual las empresas de publicidad serán inducidos a crear y proporcionar la tecnología para la publicidad se convierta en compatible con las técnicas de diseño Web de respuesta.

Si usted dirige un equipo de diseñadores responsables de un sitio interno o externo, o usted es un desarrollador Web, usted necesita saber que el diseño web sensible está aquí para quedarse. Familiarícese con él, estudie las técnicas e insista en que sus socios hagan diseño web sensible a la vez posible y atractivo.

A partir del artículo original en Inglés por 

Adolfo Manaure

Entusiasta seguidor de la tecnología y las innovaciones que cambian el mundo. Director Editorial y COO en The HAP Group.

There are 1 comments

  1. Muy buen artículo. Las páginas web responsive se van a imponer frente a las páginas web convencionales y es importante para los desarrolladores web aprender a construirlas correctamente. De hecho google empezará a tener en cuenta las páginas web responsive como un factor positivo para el SEO.

Comments are closed.