Entendiendo el diseño web

0
149
diseño web

El diseño web responsive es una solución para el reto de la actual navegación multi-pantalla, pero es una solución compleja. Sin un ancho establecido, sin tener que lidiar con limitaciones físicas. La utilización de diseños sólo para escritorio o móvil ya es parte del pasado. Ahora tenemos tabletas y televisores que se conectan con diferentes anchos. Por lo tanto, si creamos sitios web tenemos que entender los principios básicos que guían el diseño web responsive: el uso de distribuciones flexibles en lugar de luchar contra ellas.

Responsive vs Adaptativo
Existen diferentes enfoques que se complementan entre sí.

En el enfoque de Adaptación se utiliza consultas de medios para diseños específicos para las pantallas de un tamaño específico.
En el enfoque Sensible mediante una distribución de líquido y se utiliza consultas de medios para controlar cómo se mueve el contenido cuando se reduce o agranda la pantalla.

El flow
En pantallas pequeñas, el contenido empieza a ser más vertical. Ellos pusieron las cosas de arriba abajo.

Unidades relativas
Hay dispositivos con mayor y menor densidad de píxeles. Los porcentajes y unidades relativas son muy útiles. Por ejemplo, el 50% de la “ventanilla”, el tamaño de la ventana del navegador.

Los puntos de interrupción
Son los puntos de corte donde se cambia el diseño. Por ejemplo: usted Podría tener 3 columnas en el ordenador de sobremesa y uno en el móvil. Las definiciones de la CSS puede cambiar de un punto a otro. Este cambio debe depender del contenido.
Los valores Max y Min

En pantallas pequeñas es bueno que ocupan todo el ancho, pero en pantallas de gran tamaño, no tiene sentido que ocupe toda la pantalla. Por ejemplo, con un ancho de 100% y un ancho máximo de 1000px, el ancho no será más que 1000px.

Elementos que se encuentran dentro de los elementos
Cuando hay elementos que dependen de otros elementos es más fácil de controlar si tiene un elemento “contenedor”. Es útil cuando se desea tener elementos con los pixeles fijos que no quiere ser fluido.

Mobile-first
Es más fácil decidir sobre la distribución de cuando usted piensa en la primera con la distribución que tendrá el contenido en pantallas pequeñas.

Webfonts
Si quieres letras fresco, se puede utilizar “webfonts” por la carga de ellos a través de CSS. Si no lo haces bien, no será capaz de leer el texto hasta que se descarga de la fuente.

Imágenes vectoriales
Es común el uso de una imagen PNG8: con diferentes iconos para hacer “stripes”. Cuando se utiliza pantallas de gran tamaño, lo mejor es utilizar formatos vectoriales SVG o un “webfont” de iconos.

Dejar respuesta