EL DISEÑO RESPONSIVO
Y FLEXBOX
Y FLEXBOX
Diseño Responsivo
El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles. Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, telefono, portatil.
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.
Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.
° Características del diseño responsive °
La principal característica del diseño responsive es su flexibilidad. No obstante, existen otras propiedades importantes a considerar:
Prefieren los formatos verticales
Los dispositivos móviles fueron los primeros medios visuales que no utilizaron un formato horizontal para mostrar imágenes, tal como lo hacían la televisión y los ordenadores de escritorio. Por tal razón, un diseño responsive debe adaptarse o, incluso, preferir, en ciertos casos, el formato vertical. Para diseñar eficientemente tu sitio en ambos formatos, puedes utilizar plantillas web que respeten las características de cada uno y que te ayuden a que tu sitio se adecúe cuando el usuario gire el dispositivo.
Funciona mediante la priorización de elementos
Al entrar a un sitio web a través de un navegador de escritorio, es común que obtengamos un vistazo general de los contenidos de la página en la pantalla: podemos ver el título, imágenes, textos y menús. Pero con navegador móvil, en vista del espacio disponible, lo más seguro es que no podamos incluir toda esta información. Por tanto, es fundamental priorizar contenidos y situarlos de tal manera que el visitante vea lo más importante al inicio y gradualmente, el resto.
Implementa funcionalidades únicas
En la práctica muchas marcas olvidan que un dispositivo móvil ofrece funcionalidades únicas que los navegadores de escritorio no. Por ejemplo, al usar un teléfono o tablet, los visitantes pueden usar la cámara del dispositivo para experiencias de realidad aumentada que muestren los productos. También sirve para acceder a los datos de localización del usuario o enviarle notificaciones.
Se basan en la interacción con el usuario
Los dispositivos móviles ofrecen la ventaja de promover una interacción directa con el usuario mediante sus pantallas táctiles. Para lograr una buena navegación, el sitio deberá emplear iconos de tamaño adecuado, espacios para desplazar los dedos sin que se interrumpa la consulta del material y enlaces con un área de toque lo suficientemente amplia para que no sea errática la experiencia. como por ejemplo:
Automatiza labores de diseño y programación
El diseño responsive le ahorra a tu empresa tiempo valioso. Posiblemente, crear un sitio web para cada dispositivo potencial que usen clientes suponga un mayor tiempo y esfuerzo. El diseño responsive garantiza que tu sitio web sea compatible con todos los dispositivos y pantallas, lo que asegura una experiencia agradable tanto en los actuales como en los que aún no se han inventado.
Flexbox
En los principios de CSS era muy común ver la propiedad float en los archivos style.css y aunque esta propiedad fue creada para especificar si un elemento debe salir del flujo normal y situarse a la izquierda o derecha del contenido y el texto cercano acoplarse o no a dicho elemento, fue utilizada para crear disposiciones de elementos habiendo texto o no involucrado.
Flexbox es un módulo de diseño de CSS3 que se creó para mejorar la forma en la que se hace diseño responsive, evitando así el uso de float, escribiendo menos código y facilitando el posicionamiento de elementos, incluso no teniendo noción del tamaño de éstos. Básicamente la idea de Flexbox es poder alterar el ancho, alto y posicionamiento de elementos de la mejor manera con el espacio del que disponemos.
Estructura
La estructura de Flexbox se compone de contenedores padre e hijos (Contenedor-Flex y Elementos-Flex respectivamente)
- El Contenedor-Flex es nuestro contenedor padre, y es él quién va a contener a todos los elementos hijos a los cuáles queremos posicionar.
- El Elemento-Flex es nuestro elemento hijo, el cual utilizará todo el espacio disponible para ubicarse de acuerdo a las propiedades a las cuales este sometido junto a los demas Elementos-Flex contenidos.
Cada diseño flex esta compuesto por dos ejes:
- Un eje principal que define el posicionamiento horizontal de los Elementos-Flex.
- Un eje secundario que define el posicionamiento vertical de los Elementos-Flex.
El Contendor-Flex contiene direcciones que definen el origen y el fin del flujo de Elementos-Flex:
- Inicio principal
- Fin principal
- Inicio secundario
- Fin secundario
Cada Elemento-Flex está definido por sus dimensiones, anchura(tamaño principal) y altura(tamaño secundario) que dependen del eje principal y el eje secundario.