Diseño Responsive

Diseño ResponsiveHoy en día accedemos a Páginas web desde todo tipo de dispositivos; ordenadores, portátiles, tablets, móviles… aún TV Conectadas, por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.

El diseño web adaptable o diseño web adaptativo conocido por las siglas RWD del inglés Responsive Web Design, (Responsive Design) es una técnica de diseño web que busca la correcta visualización de una misma página web en cualquier dispositivo.

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3.

El “Diseño Responsive” permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.

El “Responsive Design” se basa en proporcionar a todos los usuarios, cual sea su dispositivo, los mismos contenidos y una experiencia de navegación intuitiva, atractiva y rápida en cualquiera pantalla.

En definitiva, el diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web. El diseño responsive es una mejora del antiguo Diseño líquido o fluido (liquid or fluid layout). Una web tenía un diseño líquido o fluido cuando su tamaño se ajusta a la dimensión horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (scroll). El diseño se expande al ancho disponible de la pantalla porque el tamaño de los distintos elementos (div) es un porcentaje del total disponible (100%) de la pantalla.

El Diseño Responsive se basa en la retícula (normalmente de 960 px de ancho) que se divide en un número igual de columnas ya sean pares o impares. Estas columnas pueden ser también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino al dispositivo.

La hoja de estilos CSS3 define por medio de media queries en qué pantalla se visualizará la página en función de una serie de parámetros como:

  • Ancho y alto de la ventana del navegador (width, high)
  • Orientación del dispositivo (puede ser portrait o landscape, es decir vertical u horizontal)
  • Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo 16:9)
  • Grid (número de columnas que muestra)
  • Resolución del dispositivo (densidad de píxeles que muestra la pantalla)
  • Color (número de colores que representa la pantalla)
  • Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index, scan) que ayudan a definir con mayor exactitud el dispositivo

Como lo había anunciado Google en agosto 2014, desde el 24 abril de 2015, Google penaliza a todas aquellas páginas web no adaptables a móviles y tablets, es decir las páginas web que no son de diseño responsive. Resulta que tu vieja web no aparece como debería en los resultados de Google. Renovamos tus páginas web para que sean de diseño responsive, consulta todas nuestras ofertas y nuestros precios.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart una publicación en línea especializada en diseño y desarrollo web.

Desde TodoBravo, desarrollamos todas nuestras Páginas y Soluciones Web integrando todas las últimas y más avanzadas técnicas de Responsive Design.

Cual sea tu proyecto, con TodoBravo tu web sera siempre de Diseño Responsivo.