showtheory6

¡Cada día está más claro! El computador está perdiendo el combate contra la cantidad de dispositivos con los que podemos acceder el día de hoy en día a la red, hasta tal punto que la venta de tablets y móviles inteligentes han superado a las ventas de los ordenadores tanto de sobremesa como portátiles.

Hasta hace unos años era indispensable utilizar el ordenador para navegar por internet; ahora en cambio, es muy posible que
la mayoría de accesos se efectúen desde plataformas mobileo móviles. El día de hoy en día todos llevamos un móvil inteligente encima y nos comunicamos y buscamos información constantemente, con lo que se ha transformado en algo esencial optimar los sitios para un buen empleo en estos géneros de dispositivos.

Si no sabes si tu sitio Web está optimizado para móviles,
Google pone a disposición una herramienta onlinepara que puedas comprobarlo.

Solo tienes que ir ae introducir la URL primordial de tu lugar Web; en pocos segundos, te indicara si la página tiene un diseño optimado o no.

Si tu sitio Web no se muestra apropiadamente en los dispositivos móviles,
lo más seguro es que se estén escapando una parte importante de las visitas y
usuarios que desean ver tu páginay, lo más importante,
posibles clientes.

Es fundamental tener una página web responsive, esto es, optimizada para todo género de dispositivo. De forma general podemos distinguir 2 formas de optimización:
“Responsive Web Design”y
“Mobile First Web”.

¿En qué se distinguen Adaptable Web Design y Mobile First Web?

presupuesto tiendas online jaen de la mano, hay que distinguir entre
Responsive Web Designo, lo que viene a ser lo mismo,
Diseño Web Adaptativo,y
Mobile First Web.Como su propio nombre señala, el Diseño Web Adaptativo es aquel capaz de adaptarse a diferentes tamaños y dispositivos, esto es, dependiendo de qué dispositivo sea en el que se cargue, tu sitio se verá más accesible y fácil de utilizar. No obstante, lo que propone el término
Mobile Firstes empezar a diseñar un sitio desde la resolución más pequeña para ir medrando y amoldando el contenido y el diseño a la resolución más grande.

Hasta ahora todos y cada uno de los sitios han sido diseñados solo para equipos de sobremesa y el proceso de navegar por las webs en los teléfonos móviles era bastante incómodo, debido a una mala experiencia de usuario. No obstante, las tecnologías están cambiando y el principio de
Mobile First se está convirtiendo en un término cada vez más extendido.

¿Qué logramos con el usabilidad y accesibilidad web ?

Si empezamos maquetando un sitio para la versión de escritorio y un usuario se conecta desde un dispositivo, primero cargará todo el contenido usado en la primera versión, hasta cargar los recursos necesarios para móvil. Por ende, lo más recomendable es comenzar a maquetar para la versión más pequeña, siempre y en toda circunstancia optimizando el contenido que se utilice (hojas de estilos, ficheros, imágenes…), así
conseguiremos que el usuario no cargue más recursos de los necesarios, reduciendo el tiempo de carga del sitio.

La clave es conocer el tamaño, resolución o bien posibles orientaciones de las pantallas en las que necesitamos mostrar nuestro contenido basándonos en los usuarios que tenemos como objetivo.

Los pilares principales del
Responsiveson las
Media Queriesy la etiqueta
Viewport.

Media Queries

Las
Media Queriesson las
herramientas fundamentales que se hacen cargo de aplicar diferentes estilos para diferentes dispositivos, y dan la mejor experiencia para cada tipo de usuario que se halla navegando en tu sitio. Nacen de la necesidad de
crear
breakpointso puntos de rupturaen la hoja de estilos CSS que tengas predefinida. Permite que tu lugar Web sea manejable desde diferentes dispositivos.

Si no te ha quedado clarísimo, las
Media Queriesson un
módulo de CSS que sirve para advertir el género de dispositivo por el que se está navegando;de esa manera el contenido consigue amoldarse al dispositivo específico a través de las diferentes condiciones que tú mismo asignas, como pueden ser ancho y alto de la ventana del navegador, ancho y alto del dispositivo, la resolución del dispositivo o bien la orientación de la pantalla. Son declaraciones lógicas que actúan en dependencia de las condiciones específicas que tú mismo declaras en la hoja de estilos. Si la premisa se cumple, se aplicasen los estilos definidos; si no, los omitirá por completo.

Hay 2 formas de implementarlas:

La
primera opciónpara poner en funcionamiento las
Media Querieses a través del atributo
mediade la etiqueta
<link>. Como sabemos, esta etiqueta es la que se emplea para enlazar una hoja de estilo con un documento HTML. En ese enlace podemos
especificar condiciones que deben cumplirsepara que los estilos enlazados se apliquen. Debería ir en el
<head>de nuestro HTML.

Recuerda que la etiqueta
<link>tiene esta forma:

Pues ahora simplemente
agregamos el atributo
mediaindicando la condiciónque se debe cumplir para que estos estilos se apliquen:

Lo que concretamente l
e estamos indicando es que cargue la hoja de estilos “estilos.css” si se cumple que el dispositivo de salida es una pantalla, no una impresora o bien otro dispositivo (only screen),
y si la anchura de la ventana del navegador tiene de máximo 768 píxeles(max-width: 768px).

Si se cumplen las condiciones, los estilos se mostraran adecuadamente,
en caso contrario, los estilos se suprimen por completo, y el contenido se muestra sin estilos definidos:

Cargar de este modo las Media Queries
supone un problema, y es que cada vez que deseemos cargar diferentes estilos en dependencia de ciertas condiciones que queramos aplicar para distintos dispositivos,
tendríamos que cargar una hoja de estilos nueva. Esto acarrea una carga más lenta de tu sitio web, ya que se hacen solicitudes HTTP auxiliares, que se podrían eludir.

Hay
otro sistema más recomendable para aplicar las
Media Queries:basta con
incluir todas y cada una de las condiciones precisas dentro de un único fichero CSS.Así,
incorporaríamos la construcción @mediaseguido de las condiciones que deseamos delimitar para cada género de dispositivo y donde se apliquen entre llaves los estilos específicos para cada uno de ellos. Es la forma más aconsejable, en tanto que
la carga es de un único fichero CSS.

La forma de incluir Media Queries dentro de la hoja de estilos CSS es la siguiente:

Esta Media Query
se ejecutará sólo cuando la anchura de la ventana del navegador sea menor de 320 píxeles.

Esta Media Query
se ejecutará sólo cuando la anchura de la ventana del navegador sea mayor de 768 píxeles.

Además de las características para determinar las resoluciones y anchos de pantalla,
podemos determinar otros parámetros, como por servirnos de un ejemplo la
orientación del dispositivo, importante en dispositivos móviles:

• 
  Portrait:orientación vertical
• 
  Landscape:orientación horizontal

Operadores lógicos para las Media Queries

También
se pueden combinar más de una condición en la misma Media Querypara detallar todavía más un rango de resolución, a través de los operadores lógicos:

• Operador
  and:las 2 condiciones deben cumplirse a fin de que se apliquen los estilos.
• Operador
  not:es una negación de una condición. Cuando esta condición no se cumpla, se aplicarán las media queries definidas.
• Operador
  only:se aplican las reglas solo caso de que se cumpla.
• Operador
  or:se pueden poner múltiples condiciones separadas por comas y en el instante que se cumpla cualquiera de ellas, se aplicarán los estilos.

Para esta Media Querie
se mostrarán los estilos CSS cuando la anchura de la ventana del navegador sea entre 320 pixeles y 480 pixeles,ambos incluidos.

Estos son ciertos
parámetros generales que se pueden emplear a la hora de edificar las condicionesen las Media Queries:

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

Excepto la orientación,
el resto de parámetros admiten los valores “max” y “min”.

• 
  max-width: La anchura será
  menorque la indicada.
• 
  min-width: La anchura será
  mayorque la indicada.

Una cosa muy importante que debemos tener en cuenta en el momento de usar las
Media Queries, es
diferenciar entre el ancho de ventana del navegador y la resolución de la pantalla del dispositivo, es decir:

En esta Media Querie que hemos definido, el atributo

min-device-widthse refiere a la resolución de la pantalla del dispositivoa la hora de cargar la hoja de estilos definida.

Esto desea decir que
si reducimos el ancho del navegador, seguirá mostrándose de igual manera,ya que la resolución de la pantalla seguirá siendo la misma y no se adaptara al nuevo ancho de la ventana del navegador (esto es, si la pantalla de nuestro móvil tiene 450 px y el navegador detecta que lo óptimo sería visualizarla con 600 px así lo hará si no utilizamos la meta-etiqueta
Viewport).

En caso de utilizar los atributos para la
resolución de la pantalla, la etiqueta Viewport es necesaria.

¿Qué hace la meta-etiqueta Viewport?

El
Viewport es el área visual donde se plasma el contenido del documento HTMLde tu sitio. Se podría traducir como vista o ventana y nos sirve para definir
qué área de pantalla está disponible al renderizar un documento, la escala/zoom que debe enseñar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta
meta, separados por comas en el caso de utilizar más de uno:

1 representa no escalable

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

Prácticamente
todos los navegadores de móviles al entrar a un lugar analizan el tamaño total y lo escalan a fin de que se muestre completo en la pantalla, este procedimiento genera muy frecuentemente resultados inapropiados.

Por ejemplo, esta imagen mide trescientos veinte píxeles del mismo modo que la pantalla del dispositivo, ahora bien,
la imagen aparece con un tamaño inferior a raíz del efecto de la escala automática.

La escala automática se puede evitar y controlar muy fácil con el uso de este atributo
Viewport: es un atributo del tag
<meta>que debe incluirse entre las etiquetas
<head>del documento HTML de tu lugar web:

Con solo añadir estas líneas de código,
la imagen se adaptará al dispositivo:

Es posible acotar un tamaño específico para el área perceptible del documento;
muchos sitios web ajustan directamente el Viewport a 320 pxpara ajustar la apariencia al display vertical de un móvil inteligente, usando un código afín a este:

Pero, con los diferentes equipos, dispositivos y tamaños de pantalla, definir un tamaño específico puede ser una mala práctica que puede mostrar resultados erróneos en ciertos equipos o bien cuando el dispositivo cambia de posición. A Dios gracias
podemos configurar el viewport para ajustarse dinámicamente al tamaño de cada dispositivousando el atributo “
device-width”, que es
equivalente al 100 por ciento del ancho de la pantalla del dispositivo, independiente de su tamaño, posición o resolución:

El alto de la pantalla también es configurablecon exactamente las mismas propiedades a través del atributo “
height” , aunque –salvo condiciones muy específicas– no es necesario definirlo. Esta propiedad se asignará automáticamente a través del scroll.

También podemos
controlar la escala de la vista con el atributo “
initial-scale“. El sitio se mostrará al doble de su tamaño original:

Es posible además,
limitar el tamaño al que se puede escalar el sitiocon el atributo “
maximum-scale” . El siguiente ejemplo muestra el documento en escala adecuada y permite ampliar (zoom) hasta al doble de su tamaño.

Por ultimo, está el atributo “
user-scalable”, que
controla los permisos de reducir/ampliar el documento.Con el próximo código, el lugar se muestra en su escala original y no es posible cambiar el tamaño desde el dispositivo móvil (esencial mencionar que no se recomienda deshabilitar la opción de escalar el contenido).

En general, el atributo viewport deja muchas configuraciones, pero
para asegurar compatibilidad con la mayor cantidad de pantallas y navegadores móviles, se recomienda usar este formato como base:

Para conseguir que nuestro sitio web se adapte a los diferentes anchos de pantalla, estos parámetros serán muy útiles:

• Lo primero, y lo más importante es
  dejar de usar píxeles y utilizar porcentajesa la hora de tomar medidas (por ejemplo: width: sesenta por cien ).
• 
  Que el ancho de la página sea cien por cien no significa que queramos que la pantalla este en una alta resolución, sino, si deseamos limitar el ancho/alto junto al máximo/mínimo del contenido,
  debemos usar los diferentes parámetros apropiados para ello(max-width o si quisiésemos establecer un alto máximo max-height; para establecer el mínimo sería min-width y min-height)
• 
  Las situaciones absolutas o bien fijas no son recomendablesusarlas para posicionar contenido (menos cuando hagan falta). Lo mejor es emplear el atributo float (float:left/right), es una técnica muy usada.
• Hay que hacer que
  las imágenes y vídeos no sobresalgan de la estructura;si no, aparecerá un scroll lateral en los dispositivos móviles que descolocará plenamente el diseño.

En resumen,
¿cuál es la mejor opción para tu sitio? La experiencia del usuario siempre y en toda circunstancia será lo primero.

A los usuarios no les importa que versión utilices ni como estés optimando tu lugar web; su objetivo es
poder localizar lo que buscan de forma más eficaz y rápida. Por consiguiente,
si tu página web está más centrada en el contenido, es mejor una
Responsive Web Design.Pero
si necesitas que el usuario interaccione mucho con la web, es mejor una
Mobile First, puesto que cada vez se consume más información desde los dispositivos móviles.

La conclusión es sencilla, los clientes están yendo más rápido que las propias empresas y estas deben adaptarse a ellos y a sus nuevas costumbres de consumo online a través de dispositivos. Esto es una solución para
reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad, comodidad, y óptima visualización y lectura de los contenidos.

A día de el día de hoy, Google valora todas y cada una aquellas
páginas web que se adaptan a la perfección a cualquier dispositivo,ya sea PC, smartphone, tablet… Por esta razón, es preciso que optimices tu sitio de modo que cualquier usuario pueda visualizar la página sin importar un mínimo el medio por el cual acceda.

Y tu sitio, ¿se ve bien desde cualquier dispositivo?