Los fundamentos del diseño de sitios web responsivos

Los días de diseñar un sitio web para una sola pantalla de escritorio han terminado. La tecnología y la expansión de los sitios web móviles están empujando a los diseñadores web a replantearse cómo se muestra su trabajo en varios dispositivos. Piénsalo: ¿cuánto navegas cada día en tu teléfono frente a tu escritorio ? Entra: diseño de sitios web receptivos.

¿Qué es el diseño responsivo?

En pocas palabras, el diseño web sensible (RWD) es un enfoque que permite que el diseño y el código respondan al tamaño de la pantalla de un dispositivo. Esto significa que te ofrece una experiencia de visualización óptima, ya sea que estés viendo un móvil androide de 4 pulgadas, tu mini iPad o una pantalla de cine de 40 pulgadas.

Compara el aspecto de nuestro sitio cuando es estático vs. el diseño real responsivo :

Los sitios web con mejor respuesta utilizan esencialmente rejillas fluidas , imágenes flexibles y estilo CSS para alterar el diseño del sitio y renderizarlo de acuerdo con el ancho del navegador. Para los diseñadores, el objetivo final debe ser adaptar perfectamente la interfaz de usuario y la interfaz de usuario del diseño de un sitio web en diferentes dispositivos y plataformas.

¿Por qué es tan importante el diseño responsivo?

Si diseñáramos y desarrolláramos innumerables versiones de un sitio web que funcionara para todos los dispositivos conocidos que existen, el proceso no sería práctico en el tiempo y sería extremadamente costoso. También haría que los sitios fueran ineficaces para los futuros cambios tecnológicos y los haría casi imposibles de mantener. El diseño receptivo es una solución efectiva para probar el futuro de su sitio web.

Una de las principales claves para un diseño web receptivo es conocer a su público y el dispositivo que utilizan para ver su sitio web. ¿Cuánto de su tráfico actual es escritorio vs. tableta vs. móvil? Aproximadamente el 56 por ciento del tráfico en los sitios web de EE.UU. es ahora de dispositivos móviles. Hoy en día hay alrededor de 2.6 mil millones de usuarios de teléfonos inteligentes y para el año 2020 que se inclina a llegar a más de 6 mil millones . El diseño de los móviles nunca ha sido más importante.

Es fundamental diseñar su sitio web para distintos dispositivos, pero se complica más cuando se diseña en distintos navegadores web. Cada uno de los principales navegadores web tiene su propia versión móvil y muestra los sitios de manera diferente. Lo más complicado es que hay muchas versiones de navegadores que necesitan ser adaptados, por lo que no se puede esperar que todos estén en la última versión. Así que es importante que el diseño funcione y responda a una variedad de versiones de navegadores.

¿Alucinando con el diseño para la web? No te preocupes, es una batalla constante para todos en la industria para adaptar el diseño para todas las versiones de navegadores y dispositivos de ashardware. La mejor respuesta es simplemente probar tu sitio en tantos dispositivos nuevos y viejos como sea posible. (¡Y contratar a un desarrollador súper gurú!)

¿Para qué dimensiones del sitio web debería diseñar?

No hay un “tamaño estándar de sitio web”. Hay cientos de dispositivos ahí fuera, y los tamaños de los modelos y las resoluciones de las pantallas cambian todo el tiempo. Y cada sitio web individual atrae a los usuarios en diferentes dispositivos. Por ejemplo, es más probable que se mire una receta en el dispositivo móvil (cuando se está cocinando en la cocina), y más probable que se busque un tutorial de Photoshop en el escritorio (ya sabes, cuando se trata de averiguar cómo hacer algo en Photoshop).

Puedes averiguar qué navegadores y tamaños de páginas web son más populares para tu sitio web mirando en Google Analytics. Así que con las interminables combinaciones de tamaños de navegadores y dispositivos, ¿cómo demonios diseñas responsablemente sin perder la cabeza?

Intenta diseñar por lo menos 3 trazados

Un diseño de sitio web que responda a las necesidades debe tener al menos 3 diseños para diferentes anchos de navegador. Los números específicos que citamos son los que se usan actualmente de forma genérica, pero no son reglas rígidas.

  • Pequeño: menos de 600px. Así es como se verá el contenido en la mayoría de los teléfonos.
  • Medio: 600px – 900px. Así es como se verá el contenido en la mayoría de las tabletas, algunos teléfonos grandes y pequeñas computadoras tipo netbooks.
  • Grande: más de 900px. Así es como se verá el contenido en la mayoría de las computadoras personales.

Cada uno de estos diseños debe incluir el mismo texto y elementos gráficos, pero cada uno debe estar diseñado para mostrar mejor ese contenido en función del dispositivo del usuario. Reducir la página para que quepa en tamaños de pantalla más pequeños hará que el contenido sea ilegible, pero si se escalan los contenidos en relación con los demás y se cambia a una columna, se hace mucho más legible.

Cosas en las que pensar

  • La experiencia del usuario es clave: El diseño responsivo debe ser más que convertir un sitio de escritorio en una pantalla de móvil. Necesitamos considerar la experiencia del usuario, su interacción y el contenido esencial que realmente está buscando mientras usa un dispositivo móvil.
  • No diseñes para el último dispositivo móvil con una dimensión de pantalla específica. En su lugar, diseña tu sitio en función de tu contenido. ¿Cómo funcionarán el diseño y los elementos en el escritorio y cómo se adaptarán esos mismos elementos entre sí en un dispositivo móvil?
  • Compromiso: la jerarquía del diseño es super importante, especialmente en el móvil. A menudo menos es más! La experiencia móvil comparada con el escritorio está mucho más enfocada con una cantidad limitada de espacio, por lo que la forma en que los usuarios leen y se mueven a través de su sitio debe ser realmente clara para transmitir su mensaje clave y entender de qué se trata el sitio. Piensa también en la acción principal de la página. Si el objetivo principal es que la gente haga clic en un botón de “contacto”, no lo esconda en la página debajo de las placas de texto. Adapte su contenido y diseño en función de esa experiencia.
  • Las imágenes flexibles son realmente importantes para diseñar un sitio web receptivo. Necesitas pensar en cómo se escalará una imagen. ¿Cómo se verá en una pantalla grande de escritorio vs. una tableta vs. una pequeña pantalla de móvil? Desde una perspectiva de desarrollo, el código permitirá que las imágenes se escalen a través de un valor porcentual al ancho de la ventana del navegador.
  • La navegación es importante en el móvil. Hay varios métodos comunes para cotejar grandes menús y contenidos. Podría ser en el conocido menú estilo hamburguesa, una simple selección desplegable, expandir/contraer campos o podría usar pestañas que se desplazan horizontalmente como en YouTube.

diseños de UI Garage

  • Los gestos abren nuevas posibilidades para el diseño. A la gente le encanta leer con las manos e interactuar con el contenido da poder al usuario. En los móviles y tabletas, los usuarios pueden pellizcar para hacer zoom o deslizar imágenes por la pantalla. La interacción afecta en gran medida al diseño. Por ejemplo, si tienes una galería de imágenes intenta evitar el uso de un carrusel estándar (puntos pequeños) para permitir que la gente circule por cada imagen. Piensa en el tamaño del dedo de una persona y en cómo eso se traduce en una solución útil de interfaz de usuario. Según Apple: el cómodo tamaño mínimo de los elementos de la interfaz de usuario es de 44 x 44 px . Este límite a menudo se rompe y el límite real estimado es de alrededor de 25 px.Los diseños de escritorio complejos necesitan poder adaptarse a una simple e intuitiva interfaz de usuario para una pequeña pantalla de móvil. Siempre hay que tener esto en cuenta cuando se diseña para diferentes dispositivos. El diseño tiene que ser flexible para crear una gran experiencia en todos los dispositivos para los usuarios. Trabajar estrechamente con un desarrollador para entender lo que es posible en pantallas más pequeñas afectará el proceso de diseño.
  • Diseña al menos 3 versiones para diferentes anchos de navegador. Usamos menos de 600px, 600px-900px, 900px+. Entre esos anchos, tu contenido puede escalar libremente o puedes mantener 3 diseños fijos. Tener 3 (o más) diseños fijos y añadir márgenes cuando sea necesario suele ser más fácil de diseñar e implementar que el escalado fluido. Sin embargo, el escalado de fluidos puede proporcionar una mejor experiencia en un mayor número de dispositivos.

Herramientas y recursos

  • Tu navegador web puede parecer una herramienta obvia de usar, pero es la fuente más efectiva para previsualizar tus diseños en la web. Instala unos cuantos navegadores diferentes para obtener una buena gama de retroalimentación. Luego comienza a ajustar el tamaño de las ventanas del navegador.
  • Tu dispositivo móvil es otra herramienta obvia de usar pero realmente útil para previsualizar tus diseños porque te muestra exactamente cómo se verá tu sitio web bajo esas condiciones específicas.
  • Las cuadrículas de fluidos se basan en el diseño de un sitio web en valores porcentuales en lugar de píxeles fijos. Por ejemplo, el ancho del contenido en una pantalla de escritorio podría ser de 930px, pero se quiere apuntar el diseño a 320px en el móvil. Para convertir esto en una cifra escalable, el resultado resulta ser 320/930 = 34,4%. Cuando se aplica esto al tamaño de la pantalla del móvil, los elementos del diseño se redimensionarán en relación con los demás. Nos gusta la cuadrícula de un 1% de CSS.
  • El redimensionador de Google es un buen recurso para obtener rápidamente una vista previa de su sitio en varios dispositivos.
  • Las consultas de medios es un tipo de código que se implementará en tu sitio cuando se construya. Es importante tenerlo en tu código porque establece las condiciones para que el diseño se adapte mágicamente al tamaño de la pantalla. Por ejemplo, “cuando el tamaño de la pantalla es igual o menor a 480px, cambia al diseño de la tableta”. Pruébelo ahora simplemente arrastrando la ventana de su navegador más pequeña (si está en un escritorio). Verá que el contenido se redimensiona automáticamente a los diferentes puntos de interrupción del diseño de la pantalla.

Estoy seguro de que a estas alturas ya sabes todo sobre el diseño responsivo, ¿verdad?

No te preocupes, es un desafío de diseño universal para todos en la industria de la web. Lo mejor que puedes hacer es mantenerte actualizado con las últimas prácticas de UI/UX, diseña alrededor de tu contenido, mantén tus imágenes flexibles, considera siempre tu navegación y recuerda que la experiencia del usuario es clave.

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario