Diseño responsive: ¿Qué es? ¿Para qué sirve? y más

Si tu meta es que tu página web aparezca en diversos dispositivos, es necesario que aprendas todo lo relacionado con el diseño  responsive, el cual es una técnica que puede ayudarte en ello. Al visitar otro de nuestros enlaces también puedes aprender sobre: Metodología XP o programación extrema de software

¿Qué es el diseño responsive?

¿Cómo configurar el diseño responsive?

Hay algo que debemos tener claro y es que la PC está perdiendo el combate contra la cantidad de dispositivos con los que tenemos la posibilidad de acceder hoy en día en la red, hasta tal punto que las tablets y smartphone han sobre pasado las ventas de los ordenadores, tanto de sobre mesa, así como las portátiles.

Ya hace algunos años era indispensable el ordenador para poder navegar por internet, hoy en día lo más seguro es que la mayoría de accesos se realicen desde plataforma móviles, se puede creer que la mayoría de las personas en estos tiempo lleva un smartphone encima, en donde se busca la información continuamente, situación que ha hecho indispensable  el optimizar los sitios web para un buen uso en esta clase de dispositivo.

Si aún no conoces, si tu sitio web está optimizado para móviles, Google tiene a tu disposición una herramienta online para que de esta manera tú puedas comprobarlo. En este caso lo único que tienes que hacer a prueba de optimización móviles es introducir la URL principal de tu sitio web, en pocos segundos te indicará si la página tiene un diseño optimizado o no. Es importante que así como aprendes sobre como configurar el diseño responsive es indispensable también conocer las tendencia del diseño web y los recursos del diseño gráfico para optimizar web

diseño-responsive
prueba de optimización móviles

Más del diseño responsive

Es importante saber que si tu sitio web no se muestra correctamente en los dispositivos móviles, lo más seguro es que se estén escapando un número importante de visitas y usuarios que desean ver tu página, y lo más importante  es que puedas tener posibles nuevos clientes.

Es bueno saber que es imprescindible tener una página web con diseño responsive esto significa optimizada para todo tipo de dispositivo. A nivel general podemos diferenciar dos formas de optimización: «Responsive Web Desing» y «Mobile First Web».

Diferencia entre Responsive Web Desing y Mobile First Web

Si bien sabemos que los dos van de la mano, hay que diferenciar entre Responsive Web Desing que es lo mismo que Diseño Web Adaptativo y Mobile First Web. El Diseño Web Adaptativo como su nombre lo indica es aquel que tiene la capacidad de adaptarse a diferentes tamaños y dispositivos, esto quiere decir que va ser dependiendo de qué dispositivo sea en el que se cargue, de esa manera tu sitio web será más alcanzable y sencillo se utilizar.

Sin embargo lo que plantea el término Mobile first es comenzar a delinear o lo que es lo mismo diseñar  un sitio web desde la resolución más pequeña para que de está manera vaya creciendo y así adaptar el contenido y el diseño de la resolución mucho más grande.

Hasta ahora todos los sitios web que han sido diseñados solo para equipos de sobremesa y el proceso de navegar por las web en los teléfono móviles, era bien incomodo, esto gracias a la mala experiencia del usuario.

Sin embargo, las tecnologías se están transformando y el principio del Mobile First se está cambiando a  un concepto cada vez más extendido.

diseño-responsive
Diferencia entre responsive web design y mobile first web

Principio mobile first

Si iniciamos diseñando un sitio web para versión de escritorio y una persona se conecta desde un dispositivo, lo primero que pasará es que se cargará todo el contenido utilizado en la primera versión hasta que pueda cargar los recursos necesarios para móvil.

Es por ello que lo más aconsejable es iniciar a diseñar  para la versión más pequeña, y de está manera será optimizado el contenido que se utilice ( hojas de estilo, imágenes, ficheros…) de esta forma se logrará que el usuario no cargue más recursos de los necesarios, reduciendo el tiempo de carga del sitio web.

Lo importante es conocer el tamaño, resolución o posibles orientaciones de la pantallas en las que necesitamos montar nuestro contenido, tomando como clave los usuarios que tenemos como meta u objetivo.

Las columnas principales del Responsive son la media Queries y la etiqueta Viewport.

Media Queries

La media Queries son las diferentes herramientas que se encargan de poner en práctica distintos estilos para diferentes dispositivos y suministran la mejor experiencia para cada tipo de usuario que este navegando en tu sitio web. Ellos llegan de la necesidad de hacer el breakpoints o puntos de rupturas en las hojas de estilos CSS que tengan predeterminadas.

Van a permitir que tu sitio web sea manejables desde los distintos dispositivo.

Si te ha quedado alguna duda las Media Queries «Son un módulo de CSS que está diseñado para detectar el tipo de dispositivo con el que se está navegando; de esta forma el contenido puede adaptarse al dispositivo concreto por medio de las distintas condiciones que tu mismo fijas, como puede ser el ancho y alto de la ventana de navegador, ancho y alto del dispositivo o la misma orientación de la pantalla.

Son las declaraciones razonables que proceden dependiendo de las condiciones específicas que tú mismo declaras en la hoja de estilo. Si la hipótesis se cumple, entonces se llevarán a cabo los estilos definidos; sino, los ignora por completo y hay dos maneras de ejecutarla:

  1. A través del atributo media de la etiqueta <link>. Como ya es bien conocido, esta etiqueta es la que usan para unir o enlazar una hoja de estilo con un documento HTML. En este enlace se especifican funciones que deben ser cumplidas, para que los estilos enlazados puedan aplicarse. Lo más lógico es que deben ir dentro del <head> de nuestro HTML.
  2. El segundo es un sistema más recomendable para la aplicación de Media de Queries, que solo basta con incluir todas las condiciones necesarias dentro del único archivo CSS. De esta manera, incorporaríamos la construcción @media, seguido de las condiciones que queremos definir para cada tipo de dispositivo y donde se apliquen entre {} los estilos definitivos para cada uno de ellos.

Esta es la más sugerida, ya que la carga es de un único archivo CSS.

Acá te dejo un vídeo del curso básico de CSS Media Queries desde cero:

Operadores lógicos para las Media Queries

Es importante saber que también es posible combinar más de una condición en la misma Media Query para formalizar un rango de resolución, por medio de los operadores lógicos:

  • Operador and: Aquí las dos condiciones deben cumplirse para que se apliquen los estilos.
  • Operador not: Es una negación de una condición, cuando la condición no llega a cumplirse, se aplicarán las medias queries definida.
  • Operados only: Aquí se aplicarán las reglas solo en el caso que se cumplan.
  • Operador or: Se ponen varias condiciones separadas por comas en el instante que se cumplan cualquiera de ellas se aplicarán los estilos.

 Algunos de los Parámetros generales que e pueden aplicar a la hora de construir las condiciones en Las Medias Queries:

  • width: anchura de la ventana del navegador.
  • heigth: altura de la ventana del navegador.
  • device-heigth: anchura de la resolución de pantalla.
  • orientation: (portrait/landscape) dispositivo en horizontal y vertical.
  • resolution: densidad de píxeles.

Menos la orientación, el resto de parámetros admiten los valores «max» y «min«.

  • max-width: La anchura será menor que la indicada.
  • min-width: La anchura será mayor que la indicada.

Hay algo importante que tenemos que tener en cuenta el momento de hacer uso de media queries, es saber diferenciar entre el ancho de la ventana del navegador y la resolución de la pantalla del dispositivo.

La Media Queries

diseño-responsive
Media Queries

¿Qué hace la meta-etiqueta viewport?

Es la etiqueta que mejor representa la web en la movilidad, ya que se permite indicar cómo se verá el proyecto web en los dispositivos móviles, también e define como el área visual donde se plasma el contenido del documento HTML de su sitio web. Se puede traducir como vista o ventana y nos ayuda a definir que área de pantalla está disponible al renderizar un documento, la escala/zoom que debe mostrar inicialmente.

Todo esto con parámetros que le damos a la propia etiqueta meta, separados por coma en caso de utilizar cada uno:

1-Atributo: width.

Valores: Valor integral (en pixels) o constante device-width.

Descripción: Define el ancho de la página.

2-Atributo: heigth

Valores: Valor integral (en pixels) o constante device-heigth

Descripción: Define el ancho de la página.

3-Atributo: Initial- scale

Valores: Cualquier número real del 0.1 en adelante

1 representa no escalable

(1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento por ejemplo)

Descripción: La escala/zoom inicial del sitio web.

4- Atributo: User -scale.

Valores: «yes»/»no».

Descripción: Define los permisos para que el usuario pueda o no hacer zoom.

5-Atributo: Minimun-scale.

Valores: Cualquier número real de 0.1 en adelante. 1 representa no escalable.

Descripción: Define la escala zoom/mínimo que podemos hacer en la página.

6- Atributo: Maximun/scale.

Valores: Cualquier número real de 0.1 en adelante.1 representa no escalable.

Descripción: Define la escala /zoom máxima que podemos hacer en la página.

diseño-responsive
Meta Etiqueta viewport

Más de Meta Viewport

Se puede decir que prácticamente todos lo navegadores de smartphones al entrar a un sitio analizan el tamaño total y lo escalan para que se muestre completo en la pantalla, debe tomar en cuenta que este procedimiento genera muchas veces resultados inapropiados.

Para colocar un ejemplo: esta imagen que veremos a continuación mide 320 píxeles igual que la pantalla del dispositivo, la imagen aparece con un tamaño inferior a consecuencia del efecto de la escala automática.

 

Imagen sin etiqueta-viewport

Es importante destacar que la escala automática se puede prevenir  y chequear sencillamente con la utilización del atributo viewport del tag<meta> el cual debe añadirse entre las etiquetas<head> del documento HTML de tu sitio web.

<meta name=»viewport»content=»width=device-width»/>, con solo agregar estás líneas de código, la imagen se adaptará al dispositivo.

sin etiqueta viewport

 

Con etiqueta viewport

Es factible definir un tamaño específico para el área visible del documento; es bueno saber que una gran parte de los sitios web se ajustan directamente al viewport a 320 px, para de esta manera ajustar también la apariencia  al display vertical de un smartphones, utilizando un código parecido a este:

<meta name=»viewport»content=»width=320″/>

Sin embargo con los diferentes dispositivos, equipos y tamaños de pantalla específico pudiera resultar una mala práctica que puede mostrar efectos equivocados en ciertos equipos o cuando el dispositivo modifica de posición.

La buena noticia es que podemos configurar el viewport para adaptarse activamente al tamaño de cada dispositivo utilizando el atributo «device width», que es equivalente al 100% del ancho de la pantalla del dispositivo , independientemente de su tamaño, resolución y posición:

<meta name=»viewport» content=»width=device-width»/>

Es importante conocer que el alto de la pantalla es configurable con las mismas propiedades mediante el atributo»height»,aunque-salvo condiciones muy especiales-no es necesario definirlo. Esta propiedad se destinará instantáneamente a través del scroll.

También se puede chequear la escala de la vista con el atributo «Initial-scale». El sitio se manifestará al doble de su tamaño original.

<meta name=»viewport»content=»width=device-width;initial-scale=2″/>

Hay la posibilidad de limitar el tamaño al que se puede escalar al sitio con el atributo «maximum-scale». El siguiente ejemplo muestra el documento en escala correcta y permite ampliar (zoom)hasta el doble de su tamaño.

<meta name=»viewport»content=»width=device-width, maximum scale=2″/>

Para terminar, esté el atributo «user-scalable», el cual vigila los permisos de reducir/ampliar los documentos. Con el código que te mostraremos a continuación, el sitio se observa en su escala original y es imposible modificar el tamaño desde el dispositivo móvil. Es importante agregar que no es recomendable desconectar la opción de escalar el contenido.

<meta name=»viewport»content=»width=device-width, user -scalable=no»/>.

A nivel global el atributo viewport permite da la posibilidad a muchas configuraciones, pero para garantizar compatibilidad con la mayor cantidad de pantallas y navegadores móviles, es recomendable que e use este formato como base.

<meta name=»viewport»content=»width=device_width, initial-scale=1,  maximum-scale=1″>

<meta name=»Viewport»>

Viewport

Parámetros útiles para lograr que nuestro sitio web se adapte a los diferentes anchos de pantallas

  • Dejar de usar píxeles y usar porcentajes  a la hora de tomar medida (esto es lo primero y más importante que debemos hacer).
  • Si el ancho de la página es del 100% esto no quiere decir que se quiera que la pantalla esté en una alta resolución, sino que, se quiere limitar el ancho/alto, junto ala máximo/mínimo del contenido, es por eso que se debe usar los diferentes parámetros apropiados para ello(max-width o si quisiéramos establecer un ancho máximo max-heigth; para establecer el mínimo sería (min-width y min heigth).
  • Algo que no es recomendable usar para posicionar contenidos(mucho menos cuando hagan falta) son las posiciones absolutas o fijas. Lo mejor que se sugiere es utilizar atributo float (float:left/rigth), es una técnica muy usada.
  • Hay algo importante que se debe hacer es que las imágenes y vídeos no sobre salgan de la estructura, ya que debido a esto aparecerá un scroll lateral en los dispositivos móviles que descolocará absolutamente el diseño.
Diseño Responsive

Para concluir

Se ha llegado a la conclusión que a los usuarios no le interesa que versión utilizas y mucho menos como estés optimizando tu sitio web, lo único que ellos quieren es encontrar lo que buscan de una manera sencilla, rápida y eficiente.

Es por ello que si tu web está más enfocada en el contenido, lo mejor es un Responsive Web Desing, pero si lo que deseas es que el usuario interaccione bastante con la web lo mejor es una Mobile first, puesto que cada se consume mucha más información por medio de los dispositivos móviles.

Para finalizar se tiene una conclusión muy sencilla, los usuarios esta yendo mucho más veloz que las propias empresas y las mismas debes acoplarse a ellos y por supuesto a las nuevas prácticas de consumo online a través de dispositivos.

Lo mencionado anteriormente sería una solución para poder reducir la tasa de rebote, logrando que el usuario pase mucho más tiempo en la página por su calidad, comodidad, facilidad y óptima visualización y lectura de los contenidos.

Hoy en día Google aprecia todas aquellas páginas web que se adaptan divinamente a cualquier tipo de dispositivo, ya sea PC, smartphone, tablet… Es por eso que es necesario que puedas lograr optimizar tu sitio web, de manera que cualquier usuario pueda visualizar la página sin importar el medio por el cual se acceda.

Disfruta de este vídeo de Diseño Responsive solo con HTML y CSS:

(Visited 118 times, 1 visits today)

Deja un comentario