Siguiendo el flow de tu web

Siguiendo el flow de tu web

Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia

¿De que vamos a hablar?

- ¿A qué nos referimos con flow?

- Reflejando este flow en un diseño

- ¿Cómo llevamos este diseño a la realidad?

- Estilos para seguir un flow natural

- Posiciones, como usarlas sin reventar el site

- Explorando la tercera dimensión

- Cazando errores, tips para no desesperarnos

¿A qué nos referimos con flow?



Cuando hablamos de flow, nos referimos al flujo de la información en la página.

Orientación de la información

Orden según la relevancia

Coge sus bases de elementos clásicos


¿Qué comparten?


Estructura de la información parecida.

Sentido de lectura -> RTL

Determina cómo debemos maquetar y estructurar el html


En los países orientales se utiliza una composición rtl, ya que leen de derecha a izquierda.

Reflejando el flow en un diseño



Se evalúa la importancia de la información a la hora de distribuirla y se plantea el orden y la estructura en el que salen los elementos.

Esta parte es muy importante, ya que cuando Google entre, sus arañas van a leer el contenido tal cual salga en el html y para que esto sea favorable, debe estar pensado desde diseño.

Se plantea el diseño pensando en los dispositivos y como debe fluir la información entre unos y otros.

Se utiliza un sistema de columnas como en los periódicos para favorecer el orden.


Ejemplo de columnas:

¿Cómo llevamos este diseño a la realidad?

Pensando en los móviles debemos intentar seguir un flow lo más natural posible.

Esto consiste en posicionar los elementos de forma que al ponerse unos encima de otros al cambiar las resoluciones lo hagan de tal manera que no varíe el orden percibido desde el html




Revisar el diseño.

Evaluar la mejor estructura de tags html.

Si el diseño llega con alguna incoherencia, comentarlo con los diseñadores, plantear alternativas.

Revisar siempre y mucho toda la parte relacionada con los dispositivos y las resoluciones cercanas a los saltos.


A veces la realización de pequeños esquemas, nos puede servir para detectar cuanto antes las posibles dificultades.

Estilos para seguir un flow natural



Existen varios tipos de estilos

- De forma- De formato- De posición - Animaciones- De flujo


Los estilos de flujo son aquellos que modifican cómo se colocan los elementos y cómo interpretan lo que tienen alrededor, así como lo que tienen en su interior.

Son en este caso los floats y los displays.

Ningún elemento lleva un float “built-in”, sin embargo, todos tienen un display.


Floats

Los elementos en los que añadamos la propiedad float harán que todo el contenido siga a través de ellos.

Hay que tener cuidado con los estilos de forma de la capa padre para evitar errores.

Es uno de los estilos principales para posicionar.


Clear

El elemento que lleva el clear se posiciona por debajo de un elemento con flota directamente superior.


Display: inline

El elemento se pone en línea con su anterior y siguiente.

No reconoce correctamente los estilos de forma.

Es el estilo que tienen por defecto los <a>, los <span> y los <strong>

Ejemplo:


Display: block

El elemento intenta abarcar todo el espacio del contendor

Elementos flotando dentro de un elemento con display: block pueden generar incoherencias

Es el estilo que tienen por defecto todos los elementos salvo los <span> los <a> y los <inputs>


Display: inline-block

Comportamiento similar al float

Se ve afectado más directamente por los estilos de alto de línea de los textos, lo cual puede provocar diferencias de altura.

Permite, por ejemplo darle forma a un <span> en mitad de un texto si romper el bloque.


Display: table

Emula el comportamiento de una tabla, dándonos los beneficios pero pudiendo controlar los problemas.

Es el único estilo que admite floats sin problema en su interior y que además permite ser centrado mediante márgenes.

Puede provocar problemas con elementos con tamaños absolutos en su interior.

Un display: table siempre debe tener un ancho definido (no tiene porque ser fijo)

Posiciones, cómo usarlas sin reventar el site



Los estilos “position” son muy poderosos porque pueden ignorar el flow del sitio y salirse de él.

Es una mala práctica el abuso de este tipo de estilos porque hace la maquetación más “sencilla”.

Si no se usan correctamente, vuelven el responsive infernal.

Hay 4 position: static, relative, absolute y fixed.


Position: static

Es el estilo de posición que tienen todos los elementos de serie, el elemento sigue el flujo normal de la página y no se ve afectado por estilos que cambien las coordenadas.

Los estilos que cambian coordenadas son:

Top, left, right, bottom, y en cierto modo el z-index.


Position: relative

Los elementos con position: relative se ven afectados por los estilos de coordenadas, pero siguen anclados en su sitio, de tal manera que los elementos a su alrededor se ven afectados por ellos.

Además, los elementos con esta propiedad sirven de ancla para los elementos con position: absolute;


Position: absolute

Los elementos con position: absolute se ven afectados por los estilos de coordenadas, pero son completamente independientes a todo lo que los rodea.

Siempre tomarán como referencia de sus coordenadas el primer elemento padre a ellos con una position: relative.


Position: fixed

Funciona parecido al position: absolute salvo que en vez de tomar como referencia una posición relativa, toma los bordes de la pantalla.

Es el que se usa para conseguir las cosas “sticky”

Explorando la tercera dimensión



z-index

Los elementos que tengan un position distinto a static se ven afectados por una propiedad llamada “z-index”

El z-index representa un tercer eje ficticio para calcular la altura de los elementos.

Al z-index de un elemento se le asigna un valor numérico que representa la altura a la que está, este valor no tiene unidad, es simplemente un índice.

Admite valores negativos para poner elementos “por detrás”


stacking-order

Si no le indicas z-index a los elementos que lo admiten, estos tienen una ordenación básica que utilizarán en caso de duda.

Se pondrán por encima en orden de aparición en el html.

En cualquier caso se pondrán por encima de los elementos sin position.


stacking-order


stacking-context

Se puede dar el caso de elementos con posiciones absolutas o relativas que a su vez tengan en su interior otras posiciones relativas o absolutas.

El z-index de cada elemento se tendrá en cuenta en función del z-index del elemento que creo ese contexto.


stacking-context

Cazando errores, tips para no desesperarnos


Cazando errores, tips para no desesperarnos

Como norma general, cuando haya errores relativos a cosas que se salen de su sitio hay que tener varias cosas en cuenta.

- Revisar los elementos alrededor del que está fallando, muchas veces el fallo viene de fuera.

- Si es una position: absolute o similar, buscar si su referencia está bien puesta.

- Revisar si hay anchos a fuego que puedan estar sobresaliendo.- Utilizar el modo 3D de firefox resulta de gran ayuda en este tipo de casos.- Pregúntale a tu Frontend / Diseñador de confianza, estos estilos son muy

volubles de fastidiarlo todo si no se saben manejar.

¿Preguntas?


¡¡¡Muchas gracias!!!


Design

Siguiendo el flow de tu web