RESPONSIVE DISIGN WEB

RESPONSIVE DISIGN WEB


  • ¿Que es Responsive Disign Web?

Debido a la proliferación de smartphones y tablets en el mercado actual, existe más diversidad que nunca de formatos de pantalla. De acuerdo con el estudio realizado por Comscore, las ventas de smartphone superarán a las de computadoras de escritorio durante este año y la adopción de tablets en Estados Unidos se prevee que experimente un crecimiento del 40% en los próximos 4 años, alcanzando los 75.8 millones en 2016.

Este panorama obliga a adaptar los formatos web a estos nuevos dispositivos y la estructura de cada uno de ellos, es indiscutible que necesitamos websites inteligentes que se adapten a todos ellos. Sobre todo si tenemos en cuenta las ventas a través de m-commerce (e-commerce adaptados a móvil), según eMarketer, las ventas a través de smartphones han crecido en un 81% ($25.000 millones en los Estados Unidos).

A partir de todo esto, el término “responsive web design” se escucha frecuentemente, pero ¿qué es exactamente? El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos.



  • ¿Como funciona Responsive Disign Web?


En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

El HTML5 permite una experiencia excelente para los usuarios, sin el coste de desarrollar una app nativa para cada dispositivo. En resumen, se diría que el responsive design son todo ventajas.

Es fácil de manejar ya que solamente trabajas sobre una website y los resultados serán uniformes en todas las plataformas sin distorsiones en las imágenes o texto. Además, ahorras tiempo y dinero al desarrollar una vez y un pago único de hosting.


Ejemplos de Responsive Disign Web o Sitios Adaptables.

  • Bootstrap: Boostrap es un ejemplo de cómo el diseño de la columna y la navegación se pueden hacer Responsive de una manera fresca. En lugar de mostrar el menú todo el tiempo (tomando el espacio de más desplazamiento) se trata de un menú desplegable. Otra forma típica de hacer la navegación es utilizar un cuadro de selección como se ha visto anteriormente en Smashing Magazine.


  • Sweethatclub:  Sweehatclub no se trata sólo de dulces sombreros… el diseño Responsive aquí es muy dulce y tiene cuatro únicas presentaciones.
  • Bluegg: también es un blog de diseño Responsive, pero más sencillo que los dos anteriores. La forma en que se hace es lo que vemos en la mayoría de los diseños de respuesta hasta el momento. El diseño es el mismo pero ampliado hasta el tamaño de la pantalla que es muy pequeña (tamaño del teléfono inteligente con alrededor de 640 píxeles). A continuación, la disposición se cambia a una columna y la barra lateral etc, que se coloca por debajo de la página principal.



Estructura de Responsive Disign Web (Estructura Flexible).

Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más “clásicas”, pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten “casi” perfectamente al ancho de pantalla).

Viewport:

Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte de móviles de gama media y baja).

Su uso es totalmente necesario, ya que sino el navegador establece el ancho con el que prefiere visualizar una página en lugar de usar el ancho del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no usamos esta meta-etiqueta).

Este es un ejemplo de como usarla, es el que yo recomiendo, ya que es la configuración más habitual (hay que añadirlo en el <head>):

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Se pueden usar los siguientes parámetros (separados por comas):

Width: ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que dispone).

Height: alto de la página, actúa igual que el width.

Initial-scale: escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores como 1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).

Minimum-scale: zoom mínimo que podemos hacer en la página.

Maximum-scale: zoom máximo que podemos hacer en la página.

User-scalable: establece si está permitido o no hacer zoom (yes/no).

Parámetros CSS básicos para el Resposnive Design:

Para lograr que se adapte nuestra web a los anchos de pantalla debemos de poner en práctica ciertas cosas necesarias:

  • La primera, y la más importante es dejar de usar píxeles en todos los sitios y usar porcentajes (por ejemplo: width:60%).

  • Que establezcamos el ancho de la página con el 100% no significa que queramos que sea este en una pantalla con alta resolución y para limitar el ancho (o alto si se terciara) debemos de usar el parámetro max-width o si quisiésemos establecer un alto máximo max-height (y para establecer el mínimo sería min-width y min-height, aunque no será demasiado necesario usarlo).

  • No usar posiciones absolutas ni fijas (menos cuando hagan falta), para crear una barra lateral donde tendremos un menú, por ejemplo, lo mejor es flotarlo con float:left/right, aunque esto sería lo básico puede que este ejemplo no se ajustase a nuestras necesidades, pero es una técnica muy usada.

  • Un diseño sensible deja de serlo en el momento que la imagen de fondo (de tenerla) se repita y no debiera de hacerlo, para eso debemos de escoger una imagen mejor o saber adaptarla (siendo una imagen de fondo lo mejor sería usar @media queries, que explicaré más abajo).

  • Las imágenes y vídeos hay que hacer que no sobresalgan de la estructura, sino aparecerá un scroll lateral en los dispositivos móviles que reventará totalmente el diseño (en la próxima parte de la guía os contaré como hacer ambas cosas).
@media queries:

Ya hace tiempo hablamos en Genbeta Dev sobre las @media queries (de una forma muy completa) por lo que yo voy a hacer un breve resumen con lo más importante sin entrar en detalles.

La regla @media es un elemento que podemos usar dentro del CSS y podemos configurar de una forma u otra para que su contenido sea visible para según que dispositivo (pantallas, móviles, proyectores… aunque nosotros ya que tenemos un diseño que se adapta a todo usaremos all, ahora lo veréis) o también podemos establecer ciertos parámetros del dispositivo que lo visualiza (como alto, ancho, ratio de la pantalla, orientación…).

En este ejemplo le daremos a una etiqueta div un ancho del 100%, un alto automático y un margen izquierdo de 10 píxeles cuando lo visualicemos con cualquier dispositivo pero que su ancho no supere los 600 píxeles (si tiene un ancho superior la pantalla no se ejecutará la regla CSS):
@media all and (max-width: 600px){
div{
width:100%;
height:auto;
margin-left:10px;
}
}

Esta es la forma básica de adaptar detalles específicos según el tamaño de la pantalla, usar el max-width y min-width (puede que las necesidades nos requieran hacer algo más específico, pero con esto nos debería de valer).

Voy a poner un ejemplo que podría ser funcional, que se basa en un menú que hay en una cabecera y consta de cinco links que mandan a las distintas partes de la web y actuará de la siguiente forma los elementos <a>:

En principio tendrá el siguiente código, que mantendrá a los cinco elementos en línea.

a.menu {
display:inline-block;
padding:0px 12px;
margin:0px 8px;
}
Cuando el ancho de pantalla sea inferior a 1200 píxeles (lo que podría ser el ancho máximo de la página) los elementos del título se juntan para que no sobresalgan de la cabecera.

@media all and (max-width: 1200px) {
a.menu {
display: inline-block;
padding:0px 6px;
margin:0px 4px;
}
}

Cuando el ancho de ventana sea inferior a 840 píxeles se reestructurarán los elementos y pasaran de estar en línea a estar en cascada uno debajo del otro y tomarán un pequeño margen a su izquierda.

@media all and (max-width: 840px) {
a.menu{
margin:0px;
padding:0px;
padding-left:5%;
display:block;
float:none;
text-align:left;
}
}

Y por último a los 520 píxeles imaginamos que para que se adapte a anchos estrechos el resto de la página ha cambiado de estructura, por lo que ahora dispone el menú de todo el ancho y lo añadiremos un margen izquierdo superior.

@media all and (max-width: 520px) {
a.menu{
padding-left:20%;
}
}

Lenguajes usados en Responsive Disign Web.

Responsive web design funciona utilizando una técnica basada en el lenguaje de programación HTML y los códigos CSS y CSS3 cuyo funcionamiento son los siguientes:

Se programa sobre  HTML o  HTML5, lo que permite añadir etiquetas del tipo  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ycolocarlas sobre los encabezados y otros títulos. De esta forma, se logra que el aspecto se ajuste automáticamente al tamaño de las pantallas de cada dispositivo.

Luego se aplican las modificaciones correspondientes en las hojas de estilo de CSS o CSS3 y, cuando un usuario navegue, por ejemplo, en su smartphone se cargarán automáticamente las reglas correspondientes al tamaño reducido de la pantalla, garantizando una óptima visualización y navegación.
VENTAJAS DE RESPONSIVE WEB DESING

  • La principal ventaja es que se logra que la experiencia del usuario sea más positiva, ya que contribuye a que la información esté más accesible y visible, lo que impacta de forma muy positiva en la marca al asociarse esta experiencia con conceptos como la creatividad y la innovación.  Y es que una buena experiencia de usuario se traduce muchas veces en un mayor número de visitas, una mejor valoración por parte de los usuarios y una reputación más consolidada en redes sociales, entre otros aspectos.

  • Mejora la usabilidad y la conversión, ya que según algunos estudios, cuando se aprovecha toda la pantalla del dispositivo que utiliza el visitante, aumenta la conversión de usuario a cliente. En este sentido, el Responsive Web Design ofrece la posibilidad de controlar mejor la presentación de la información a los usuarios. Podemos jerarquizar la información de nuestra web según el dispositivo al que nos dirijamos, jugando con la posición y el tamaño de los elementos, para llegar de una manera más eficiente a nuestro público objetivo. Por ejemplo, podemos agrandar el tamaño de botones de llamada a la acción y así hacerlos más accesibles en dispositivos táctiles.

  • El beneficio más relevante de cara al administrador de una web es la reducción de costos. Ya no será necesario tener una versión para PC y otra distinta para móvil. Con una única versión conseguimos que los contenidos se visualicen en todos los dispositivos, lo que supone un ahorro tantoen tiempo de gestión de contenidos como en recursos económicos, ya que no se requerirá de una segunda versión para otro dispositivo. Eso sí, la inversión inicial para desarrollar una web con Responsive Web Design será superior porque requiere de una mayor elaboración, si bien a largo plazo resulta más rentable.

  • Mejora el SEO (Search Engine Optimization) de la página. Hasta ahora, la versión móvil de una web se alojaba habitualmente en un subdominio, mientras que las páginas con Responsive Web Design pueden ser visibles en cualquier dispositivo con un único dominio. El hecho de tener una única URL es un factor muy valorado por Google porque puede encontrar de forma más eficiente los contenidos y porque es más fácil para el usuario interactuar con la página, compartir y enlazar contenidos.


 Ejemplos básicos de dispositivos para Responsive Disign Web

Ventana o monitor menor de 800px
Con @media screen estamos iniciando la consulta media query, para añadir condiciones debemos utilizar “and”. Es este caso estamos aplicando un ancho del 100% a la capa #contenedor si el monitor o ventana tiene una resolución inferior a 800px
Smartphones
Los anteriores estilos sólo se aplicaran a si el dispositivo tiene un ancho inferior a 480px
Ipad en posición vertical
Uniendo esta tres condiciones “and  (min-device-width : 768px) and (max-device-width : 1024px)” Estamos limitando que los estilos sólo se apliquen a dispositivos que con una resolución de entre 768px y 1024, y con “and (orientation : landscape)” indicamos que se apliquen cuando estén en posición vertical.
Esta media query se aplicaría a Ipad.

Resoluciones y media queries para los principales móviles, tablets y monitores







No hay comentarios.:

Publicar un comentario

Suscribirse a: Entradas (Atom)