Servicios W.Y.Z - Diseño Web Responsivo

Diseño Web Responsivo

La semana pasada, hubo poca sorpresa cuando Pierre Far de Google, anunció diseño responsivo como recomendación formal de la empresa para la visualización en móvil. Diseños Web responsivo ese es el enfoque; un diseño debe ser lo suficientemente flexible como para adaptarse al tamaño de pantalla y plataforma del usuario visitante.

Esta uniformidad en la experiencia del usuario, parecen ser maravilloso para los motores de búsqueda y desarrolladores por igual.

¿Google iba a enfrentar un gran enigma: si cada sitio tenía una experiencia totalmente separada para los usuarios móviles y de escritorio, qué sitio sería realmente el digno del enlace entrante?

Quiere que pase el rango para el sitio móvil y, en caso afirmativo, ¿cuánto y por qué?

Esto es especialmente importante cuando se considera que hay predicciones de que uso móvil superará a el uso de escritorio (Pc) en 2014. Alentando a los desarrolladores para crear una web convincente la experiencia que se adapte a la plataforma, Google es probabelmente capaz de conservar muchos de sus algoritmos de enlace y hasta cierto punto; evitar la enorme carga de intentar evaluar versiones móviles y de escritorio (Pc) como entidades separadas. Para los desarrolladores, los beneficios también son claros: la carga de la necesidad de mantener varias versiones de una página Web desaparecerá con el tiempo. Además, un movimiento probablemente creará una mentalidad "Primero móvil", que inevitablemente resultará en una experiencia de usuario y arquitectura más clara que es ponderada adecuadamente.

Entender el diseño responsivo

Para que un diseño para sea sensible, normalmente necesita estos 3 atributos:

  • • Grilla:
       Un sistema de cuadrícula fluido utiliza porcentajes para definir el ancho de columna o div en lugar de píxeles.
       Por ejemplo, una "columna" podría tener una anchura de 650px en diseño de ancho fijo, Considerandolo se le puede
       llamar 100% en el CSS de un diseño de ancho fluido.

  • • Consultas de medios:
      Consultas de medios permiten, un CSS personalizado basado en el ancho minimo y maximo de un navegador.
      Por ejemplo, una consulta de medios con una anchura máxima de 450px podría ser destinada a exploradores móviles.
      <link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 450px)">

  • • Imágenes responsivas:
      Similar a la grilla, imágenes responsivas no tienen anchos fijos pero en su lugar tiene un ancho máximo
      (normalmente denominado al 100 por ciento cuando aparece en un escritorio).
      Esto permite imágenes para escalar hacia abajo para ajustar el ancho de la pantalla en la que se procesa la página.

La salida de estos atributos es fácil de reconocer. Simplemente tomar un diseño responsivo, tales como ISTnetgroup y cambiar manualmente el tamaño del navegador. Usted notara la pantalla cambia y se ajusta según el ancho del navegador.

Diseño responsivo debe ayudar a estimular la proliferación de experiencias más móviles, especialmente en el mundo de la pequeña y mediana empresa. Esta norma no oficial será un paso importante para asegurarse de que muchas pequeñas y medianas empresas tendrán una presencia móvil sin gastos adicionales importantes.

Fuente: Search Engine Watch