La tecnología de desarrollo de sitios web es un proceso multifacético. Pero aún así, todas sus etapas se pueden dividir en dos componentes principales: la capa funcional y la externa. O, como es costumbre entre los webmasters, back-end y front-end, respectivamente. Las personas que solicitan sus sitios web a los estudios de desarrollo web a menudo creen ingenuamente que vale la pena centrarse solo en la funcionalidad, y esta será la decisión correcta. Pero esto es cierto en casos muy, muy raros, generalmente para proyectos de inicio en la etapa de prueba beta. De lo contrario, simplemente se requiere que el diseño gráfico y la interfaz de usuario cumplan con los estándares de desarrollo web y sean convenientes.
La primera piedra angular a la que se enfrenta el diseñador de la interfaz es el ancho del diseño del sitio. Ya que, para ello es necesario dibujar interfaces. De manera puramente intuitiva, surgen dos enfoques: hacer diseños separados para cada resolución de pantalla popular o crear una versión del sitio para todas las pantallas. Y ambas opciones serán incorrectas, pero lo primero es lo primero.
Ancho estándar del sitio web en píxelespara Runet
Antes del desarrollo del diseño adaptable, el desarrollo de un sitio con un ancho de mil píxeles era un fenómeno masivo. Esta figura fue elegida por una simple razón: para que el sitio se ajuste a cualquier pantalla. Y esto tiene su propia lógica, pero supongamos que una persona todavía tiene al menos un monitor HD en una computadora de escritorio. En este caso, su diseño parecerá una pequeña franja en el medio de la pantalla, donde todo está pegado en un montón, y en los lados hay un gran espacio sin usar. Ahora supongamos que una persona accede a su sitio web en una tableta con una pantalla ancha de 800 px y "Mostrar sitio web completo" está marcado en la configuración. En este caso, su sitio también se mostrará de forma incorrecta, ya que simplemente no encajará en la pantalla.
De estas consideraciones, podemos concluir que un ancho fijo para el diseño definitivamente no es adecuado para nosotros y debemos buscar otra forma. Analicemos la idea de un diseño separado para cada ancho de pantalla.
Diseños para todas las ocasiones
Si ha elegido como estrategia crear diseños para todos los tamaños de pantalla del mercado, entonces su sitio será el más exclusivo de todo Internet. Después de todo, hoy en día es simplemente imposible cubrir toda la gama de dispositivos, tratando de ajustar cada opción. Pero si te centras en las resoluciones más populares de monitores y pantallas de dispositivos, entonces la idea no está nada mal. Su única desventaja son los costos financieros. Después de todo, cuando un diseñador de interfaces, un diseñador y un codificador se ven obligados a hacer el mismo trabajo 5 o 6 veces, el proyecto costarádesproporcionadamente más alto que el precio presupuestado originalmente.
Por lo tanto, solo los sitios de una página pueden presumir de una gran cantidad de versiones para diferentes pantallas, cuyo propósito es vender un producto y asegurarse de hacerlo bien. Bueno, si no tiene uno de estos aterrizajes, sino un sitio de varias páginas, entonces debería pensar más.
Tamaños de sitios más populares
Un compromiso entre los dos extremos es renderizar el diseño para tres o cuatro tamaños de pantalla. Entre ellos, uno debe ser un diseño para dispositivos móviles. El resto debe adaptarse para pantallas de escritorio pequeñas, medianas y grandes. ¿Cómo elegir el ancho del sitio? A continuación presentamos las estadísticas del servicio HotLog de mayo de 2017, que nos muestran la distribución de la popularidad de las distintas resoluciones de pantalla de los dispositivos, así como la dinámica de este indicador.
En la tabla puede averiguar cómo determinar el tamaño del sitio que desea utilizar. Además, podemos concluir que el formato más común hoy en día es una pantalla de 1366 por 768 píxeles. Estas pantallas se instalan en computadoras portátiles económicas, por lo que su popularidad es natural. El siguiente más popular es el monitor Full HD, que es el estándar de oro para videos, juegos y, por lo tanto, para crear diseños de sitios web. Más adelante en la tabla, vemos la resolución de los dispositivos móviles de 360 por 640 píxeles, así como varias opciones para pantallas de escritorio y móviles después de ella.
Diseño del diseño
EntoncesDespués de analizar las estadísticas, podemos concluir que el ancho óptimo del sitio tiene 4 variaciones:
- Versión para computadora portátil con 1366 píxeles de ancho.
- Versión Full HD.
- Un diseño de 800 px de ancho para mostrar en monitores de escritorio pequeños.
- Versión móvil del sitio: 360 píxeles de ancho.
Digamos que hemos decidido qué tamaño usar para la fuente generada para el sitio. Pero tal proyecto aún sería costoso. Así que veamos más opciones, esta vez sin usar un ancho fijo.
Flexibilidad del diseño
Hay un enfoque alternativo, cuando vale la pena adaptarse solo al tamaño mínimo de la pantalla, y los tamaños del sitio en sí se establecerán por porcentajes. Al mismo tiempo, elementos de la interfaz como menús, botones y logotipos se pueden configurar en valores absolutos, centrándose en el tamaño mínimo del ancho de la pantalla en píxeles. Los bloques con contenido, por el contrario, se estirarán de acuerdo con el porcentaje especificado del ancho del área de la pantalla. Este enfoque le permite dejar de percibir el tamaño de los sitios como una limitación para el diseñador y vencer hábilmente este matiz.
¿Qué es la proporción áurea y cómo se puede aplicar al diseño de páginas web?
Incluso en el Renacimiento, muchos arquitectos y artistas intentaron dar a sus creaciones la forma y la proporción perfectas. Para obtener respuestas a las preguntas sobre los valores de tal proporción, recurrieron a la reina de todas las ciencias: las matemáticas.
Desde la antigüedad se ha inventado una proporción que nuestro ojo percibe como la más natural y elegante,porque es omnipresente en la naturaleza. El descubridor de la fórmula para tal proporción fue un talentoso arquitecto griego antiguo llamado Fidias. Calculó que si la parte más grande de la proporción se relaciona con la más pequeña como el todo se relaciona con la más grande, entonces esa proporción se verá mejor. Pero este es el caso si desea dividir el objeto de forma asimétrica. Esta proporción se denominó más tarde sección áurea, lo que todavía no sobrestima su importancia para la historia mundial de la cultura.
Volver al diseño web
Es muy simple: utilizando la proporción áurea, puede diseñar páginas que sean lo más agradables posible para el ojo humano. Calculando según la definición de la fórmula de la proporción áurea, obtenemos el número irracional 1, 6180339887…, pero por comodidad, podemos usar un valor redondeado de 1, 62. Esto significará que los bloques de nuestra página deben ser 62 % y 38% del total, sin importar el tamaño de la fuente generada para el sitio que está utilizando. Puedes ver un ejemplo en este diagrama:
Usar nuevas tecnologías
Las modernas tecnologías de diseño de sitios web permiten transmitir con precisión la idea de un planificador y diseñador, por lo que ahora puede darse el lujo de implementar ideas más atrevidas que en los albores de las tecnologías de Internet. Ya no necesita pensar mucho sobre cuál debería ser el tamaño del sitio. Con la llegada de elementos como el diseño adaptativo de bloques, la carga dinámica de contenido y fuentes, el desarrollo de sitios web se ha vuelto mucho más agradable. Después de todo, estas tecnologías sonmenos restricciones, aunque todavía están allí. Pero como sabes, sin límites no habría arte. Le sugerimos que utilice un enfoque de diseño verdaderamente creativo: la proporción áurea. Con él, puede llenar el espacio de trabajo de manera efectiva y hermosa, sin importar los tamaños de sitio que establezca en sus plantillas.
Cómo aumentar el espacio de trabajo del sitio
Es muy probable que no tenga suficiente espacio para colocar todos los elementos de la interfaz de usuario en un diseño pequeño. En este caso, tendrás que empezar a pensar creativamente o incluso más creativamente que antes.
Libere espacio al máximo en el sitio ocultando la navegación en el menú emergente. Es lógico utilizar este enfoque no solo en dispositivos móviles, sino también en computadoras de escritorio. Después de todo, el usuario no necesita mirar todo el tiempo qué encabezados hay en su sitio: vino por el contenido. Y se deben respetar los deseos del usuario.
Un ejemplo de una buena manera de ocultar el menú es el siguiente diseño (foto de abajo).
En la esquina superior del área roja, puede ver una cruz, al hacer clic en ella se ocultará el menú en un pequeño ícono, dejando al usuario solo con el contenido del sitio web.
Sin embargo, esto es opcional, puedes dejar la navegación, que siempre estará a la vista. Pero puede convertirlo en un hermoso elemento de diseño, y no solo en una lista de enlaces populares en el sitio. Use íconos intuitivos además o incluso en lugar de enlaces de texto. es lo mismopermitirá que su sitio haga un uso más eficiente del espacio de la pantalla en el dispositivo del usuario.
El mejor sitio web es responsive
Si no sabe qué diseño elegir para el sitio, entonces todo es simple para usted. Para ahorrar en costos de desarrollo y al mismo tiempo no perder su audiencia debido a un diseño deficiente para algún dispositivo, use un diseño receptivo.
El diseño receptivo es un diseño que se ve igual de bien en diferentes dispositivos. Este enfoque permitirá que su sitio sea comprensible y conveniente incluso en una computadora portátil, incluso en una tableta, incluso en un teléfono inteligente. Este efecto se logra cambiando automáticamente el ancho del área de trabajo de la pantalla. Al utilizar hojas de estilo receptivas para su sitio, está tomando la mejor decisión posible.
¿Cuál es la diferencia entre el diseño receptivo y las versiones del sitio web?
El diseño receptivo se diferencia de la versión móvil del sitio en que, en este último caso, el usuario recibe un código html que es diferente al de escritorio. Esta es una desventaja en términos de optimización del rendimiento del servidor, así como la optimización del motor de búsqueda. Además, se vuelve más difícil calcular estadísticas para diferentes versiones del sitio. El enfoque adaptativo no tiene estas desventajas.
La capacidad de respuesta para varios dispositivos se logra a través de un diseño con un porcentaje del ancho especificado o mediante la transferencia de bloques al espacio disponible (en el plano vertical en un teléfono inteligente en lugar dehorizontal en el escritorio), o creando diseños individuales para diferentes pantallas.
Obtenga más información sobre el diseño y el desarrollo adaptables en nuestros tutoriales.
