9 Principios Básicos Del Diseño Web Receptivo

9 principios básicos del diseño web receptivo
1. Introducción
El diseño web receptivo es una gran solución para nuestro problema de

múltiples pantallas, pero abordarlo desde la perspectiva de la impresión es
difícil. Sin tamaño de página fijo, sin milímetros o pulgadas, sin limitaciones
físicas contra las que luchar. Diseñar en píxeles solo para escritorio y
dispositivos móviles también es cosa del pasado, ya que cada vez más
gadgets pueden abrir un sitio web. Por lo tanto, aclaremos algunos
principios básicos del diseño web receptivo aquí para adoptar la web fluida,
en lugar de luchar contra ella. Para mantenerlo simple, nos centraremos en
los diseños (sí, la capacidad de respuesta va mucho más allá y si desea
obtener más información, este es un buen comienzo ).
2. 9 principios básicos del diseño web receptivo
Diseño web receptivo vs adaptativo

Puede parecer lo mismo, pero no lo es. Ambos enfoques se complementan entre sí, por lo
que no existe una forma correcta o incorrecta de hacerlo. Deja que el contenido decida.
El flujo
A medida que el tamaño de la pantalla se vuelve más pequeño, el contenido comienza a
ocupar más espacio vertical y todo lo que se encuentra debajo será empujado hacia abajo,
se llama flujo. Eso puede ser difícil de entender si está acostumbrado a diseñar con píxeles
y puntos, pero tiene mucho sentido cuando se acostumbra.
.
Unidades relativas
El lienzo puede ser una computadora de escritorio, una pantalla móvil o cualquier cosa
intermedia. La densidad de píxeles también puede variar, por lo que necesitamos unidades
que sean flexibles y funcionen en todas partes. Ahí es donde las unidades relativas como los
porcentajes son útiles. Entonces, hacer algo con un 50% de ancho significa que siempre
ocupará la mitad de la pantalla (o ventana gráfica, que es el tamaño de la ventana del
navegador abierta).
Puntos de interrupción
Los puntos de interrupción permiten que el diseño cambie en puntos predefinidos, es decir,
tener 3 columnas en un escritorio, pero solo 1 columna en un dispositivo móvil. La mayoría
de las propiedades de CSS se pueden cambiar de un punto de interrupción a otro. Por lo
general, el lugar donde pones uno depende del contenido. Si una oración se rompe, es
posible que deba agregar un punto de interrupción. Pero utilícelos con precaución: puede
complicarse rápidamente cuando es difícil entender qué influye en qué.
Valores máximos y mínimos

A veces es genial que el contenido ocupe todo el ancho de una pantalla, como en un
dispositivo móvil, pero tener el mismo contenido que se extiende a todo el ancho de la
pantalla de su televisor a menudo tiene menos sentido. Por eso los valores Mín / Máx
ayudan. Por ejemplo, tener un ancho del 100% y un ancho máximo de 1000 px significaría
que el contenido llenará la pantalla, pero no supere los 1000 px.
Objetos anidados
¿Recuerda la posición relativa? Tener muchos elementos que dependen unos de otros sería
difícil de controlar, por lo tanto, envolver elementos en un contenedor lo hace mucho más
comprensible, limpio y ordenado. Aquí es donde las unidades estáticas como los píxeles
pueden ayudar. Son útiles para contenido que no desea escalar, como logotipos y botones.
Primero el móvil o el escritorio

Técnicamente, no hay mucha diferencia si un proyecto se inicia desde una pantalla más
pequeña a una más grande (primero el móvil) o viceversa (primero el escritorio). Sin
embargo, agrega limitaciones adicionales y lo ayuda a tomar decisiones si comienza
primero con el móvil. A menudo, las personas comienzan desde ambos extremos a la vez,
así que, en realidad, vaya y vea qué funciona mejor para usted.
3. 9 principios básicos del diseño web receptivo
Primero el móvil o el escritorio

Técnicamente, no hay mucha diferencia si un proyecto se inicia desde una
pantalla más pequeña a una más grande (primero el móvil) o viceversa
(primero el escritorio). Sin embargo, agrega limitaciones adicionales y lo
ayuda a tomar decisiones si comienza primero con el móvil. A menudo, las
personas comienzan desde ambos extremos a la vez, así que, en realidad,
vaya y vea qué funciona mejor para usted.
Fuentes web vs fuentes del sistema

¿Quieres tener un Futura o Didot atractivo en tu sitio web? ¡Usa fuentes
web! Aunque se verán impresionantes, recuerde que cada uno se
descargará y, cuanto más tenga, más tiempo llevará cargar la página. Las
fuentes del sistema, por otro lado, son ultrarrápidas, excepto cuando el
usuario no las tiene localmente, recurrirá a una fuente predeterminada.
Imágenes de mapa de bits vs vectores

¿Su icono tiene muchos detalles y algunos efectos elegantes aplicados? Si
es así, use un mapa de bits. Si no es así, considere usar una imagen
vectorial. Para mapas de bits, use un jpg, png o gif; para los vectores, la
mejor opción sería un SVG o una fuente de iconos. Cada uno tiene algunos
beneficios y algunos inconvenientes. Sin embargo, tenga en cuenta el
tamaño: ninguna imagen debe estar en línea sin optimización. Los vectores,
por otro lado, a menudo son pequeños, pero algunos navegadores más
antiguos no los admiten. Además, si tiene muchas curvas, es posible que
sea más pesado que un mapa de bits, así que elija sabiamente.

9 Principios Básicos Del Diseño Web Receptivo

Cargado por

Copyright:

Formatos disponibles

9 Principios Básicos Del Diseño Web Receptivo

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

9 Principios Básicos Del Diseño Web Receptivo

Cargado por

Copyright:

Formatos disponibles

9 principios básicos del diseño web receptivo

El diseño web receptivo es una gran solución para nuestro problema de

2. 9 principios básicos del diseño web receptivo

Diseño web receptivo vs adaptativo

Valores máximos y mínimos

Primero el móvil o el escritorio

3. 9 principios básicos del diseño web receptivo

Primero el móvil o el escritorio

Fuentes web vs fuentes del sistema

Imágenes de mapa de bits vs vectores

También podría gustarte