por Omar Benyakhlef | accesibilidad, CSS, Diseño para móviles, Diseño Web, Font, Fuentes, responsive, UX
Como diseñadores, nos vemos siempre en la obligación de ofrecer una experiencia de usuario excepcional. Una de esas técnicas es el uso de unidades relativas en lugar de unidades absolutas al definir tamaños y dimensiones en CSS. Este enfoque no solo simplifica el proceso de diseño, sino que también garantiza una adaptabilidad óptima en una amplia gama de dispositivos y pantallas. En este artículo, exploraremos en detalle qué son las unidades relativas, por qué son importantes y cómo pueden mejorar significativamente la calidad y la flexibilidad del diseño web.
El uso de unidades relativas en el diseño web es una práctica fundamental para crear experiencias de usuario adaptables, escalables y fáciles de mantener. Al adoptar em, rem y porcentajes en lugar de dimensiones absolutas, los diseñadores pueden garantizar que su contenido se vea y funcione de manera óptima en una amplia variedad de dispositivos y pantallas. Además, las unidades relativas fomentan la accesibilidad al permitir que los usuarios ajusten el tamaño del texto según sus preferencias personales, lo que resulta en una experiencia más inclusiva para todos. En resumen, al priorizar las unidades relativas en el diseño web, los diseñadores pueden crear sitios web que sean flexibles, adaptables y atractivos para una audiencia diversa.
¿Qué son las unidades relativas?
En CSS, las unidades relativas son aquellas cuyo tamaño se calcula en relación a otra propiedad, generalmente el tamaño de la fuente del elemento padre. Las unidades relativas más comunes son:
- Em (em): Esta unidad representa el tamaño de la fuente actual. Por ejemplo, si el tamaño de la fuente de un elemento es de 16 píxeles, 1em equivale a 16 píxeles. Si se establece un tamaño de fuente de 1.5em en un elemento con una fuente de 16 píxeles, el tamaño de fuente resultante sería de 24 píxeles (1.5 * 16).
Se recomienda su uso para tamaños de fuente y dimensiones que deben ajustarse en relación con el contenido de texto.
- Rem (rem): Similar a em, pero en lugar de basarse en el tamaño de la fuente del elemento padre, rem se calcula utilizando el tamaño de fuente del elemento raíz (generalmente el tamaño de fuente del elemento
<html>). Esto garantiza una mayor consistencia en todo el documento, ya que rem no se ve afectado por los cambios en el tamaño de la fuente de los elementos secundarios.
Rem es ideal para establecer dimensiones globales que deben mantenerse consistentes en todo el sitio web, como márgenes, rellenos y anchos de contenedores.
Vamos. a intentar verlo de un modo más claro en el siguiente ejemplo:
html {
font-size: 16px;
}
.nombre_clase {
font-size: 24px;
padding: 2em; margin: 2rem;
}
El padding definido con unidades em, se refiere al tamaño de la fuente de la clase a la que pertenece, es decir, padding: 2em = 2×24= 48px El margin, definido con unidades rem, se refiere al tamaño fuente del documento, es decir, margin: 2rem = 2×16=32px
La mayoría de los navegadores tienen por defecto el tamaño de texto de párrafo de 16px, este valor lo puede cambiar el usuario modificando las preferencias del navegador, esto significa que cuando utilizamos las unidades relativas rem, además, estamos dando la oportunidad al usuario de modificar el tamaño de todo el contenido de la web a su antojo, según sus preferencias.
Hemos definido em y rem para definir los tamaños de fuente, ahora vamos a ver cómo definir relativamente los demás tamaños.
- Porcentaje (%): Aunque no exclusivamente relativa al tamaño de la fuente, el porcentaje también se utiliza comúnmente para definir dimensiones en relación con el tamaño de su elemento padre. Por ejemplo, un ancho del 50% en un div hará que ese div tenga la mitad del ancho de su contenedor padre.
- VH: significa “viewport height”, es decir, altura de la ventana gráfica, que es la altura de la pantalla visible y que depende de cada uno de los dispositivos. 100VH representaría el 100% de la altura de la ventana gráfica o la altura completa de la pantalla.
- VW: significa «viewport weight», es decir, anchura de la ventana gráfica, el ancho de la pantalla visible, y 100VW representa el 100% del ancho de la pantalla.
La diferencia del % con VH y VW, es que el primero se refiere al elemento padre, y los segundos al tamaño de pantalla del dispositivo, los tres son imprescindibles si queremos ajustar elementos en función de la pantalla del dispositivo.
Ventajas del uso de unidades relativas:
- Escalabilidad y Adaptabilidad: Una de las principales ventajas de las unidades relativas es su capacidad para adaptarse a diferentes tamaños de pantalla y dispositivos. Al utilizar em o rem para definir tamaños de fuente y dimensiones de diseño, el contenido se ajusta automáticamente según el tamaño de la fuente del usuario o el tamaño de la pantalla, lo que garantiza una experiencia de usuario consistente y atractiva en todos los dispositivos, desde teléfonos móviles hasta pantallas de escritorio.
- Facilidad de Mantenimiento: Al evitar tamaños absolutos en favor de unidades relativas, se simplifica el proceso de mantenimiento del sitio web. Cambiar el tamaño de fuente base en el elemento raíz afectará automáticamente a todas las demás dimensiones definidas en unidades relativas, lo que facilita ajustar el diseño según las necesidades cambiantes del proyecto o las preferencias del usuario.
- Accesibilidad Mejorada: El uso de unidades relativas puede mejorar la accesibilidad del sitio web al permitir que los usuarios ajusten el tamaño de la fuente según sus preferencias. Esto es especialmente beneficioso para aquellos con discapacidades visuales o que simplemente prefieren un tamaño de fuente más grande para facilitar la lectura.
- Compatibilidad con Diseño Responsivo: Las unidades relativas son fundamentales para el diseño web receptivo, donde el diseño y el contenido se adaptan dinámicamente a diferentes resoluciones y tamaños de pantalla. Al utilizar em, rem y porcentajes en lugar de píxeles absolutos, se garantiza que el diseño se ajuste sin problemas a una variedad de dispositivos y configuraciones de pantalla.
por Omar Benyakhlef | accesibilidad, Diseño de páginas web, Diseño para móviles, Diseño Web, Mobile, responsive, Usabilidad, UX
Actualmente la conectividad es omnipresente y los usuarios acceden a la web desde una multitud de dispositivos, el diseño web adaptable se ha convertido en una necesidad. Dentro de esta filosofía de diseño, surge un enfoque revolucionario: Mobile First (Primero Móvil), una estrategia que coloca la experiencia del usuario en dispositivos móviles en el centro del proceso de diseño. En este artículo, exploraremos en qué consiste el diseño Mobile First, sus beneficios y cómo implementarlo eficazmente.
¿Qué es el diseño Mobile First?
El diseño Mobile First es una metodología que prioriza la optimización de la experiencia del usuario en dispositivos móviles antes que en ordenadores de escritorio. Esto implica diseñar y desarrollar primero para pantallas pequeñas y luego adaptar el diseño a pantallas más grandes.
Beneficios del enfoque Mobile First:
- Mejora la experiencia del usuario (UX): Dado que cada vez más usuarios acceden a la web a través de dispositivos móviles, es crucial ofrecer una experiencia optimizada en estas plataformas. El diseño Mobile First garantiza que la interfaz sea intuitiva, fácil de navegar y rápida de cargar en dispositivos móviles, lo que conduce a una mayor satisfacción del usuario.
- Mejora el rendimiento y la velocidad: Al diseñar para dispositivos móviles primero, nos vemos obligados a simplificar el diseño y optimizar el rendimiento del sitio. Esto se traduce en tiempos de carga más rápidos y una experiencia de usuario más fluida, lo que a su vez va a mejorar el posicionamiento en los resultados de búsqueda.
- Fomenta un enfoque centrado en el contenido: Al comenzar con el diseño móvil, se hace hincapié en identificar y priorizar el contenido más importante para los usuarios. Esto promueve un enfoque centrado en el usuario, donde el contenido relevante se destaca y se presenta de manera clara y concisa.
- Facilita la adaptación a dispositivos más grandes: Diseñar primero para dispositivos móviles hace que sea más fácil adaptar el diseño a pantallas más grandes. Esto permite una transición fluida del diseño en dispositivos móviles a dispositivos de escritorio, sin comprometer la coherencia ni la calidad de la experiencia del usuario.
¿Cómo implementar el diseño Mobile First?
COMPRENDER LAS NECESIDADES DEL USUARIO
Antes de empezar, debemos conocer el comportamiento y las preferencias de los usuarios en dispositivos móviles para identificar las características y funcionalidades clave que deben incluirse en el diseño.
-
1. Contenido Relevante y Personalizado
Los usuarios móviles valoran el contenido que es relevante para sus intereses y necesidades. Prefieren experiencias personalizadas que les brinden información o productos que se alineen con sus preferencias y comportamientos anteriores.
-
2. Diseño Responsivo y Navegación Intuitiva
La navegación en dispositivos móviles debe ser intuitiva y fácil de usar. Los usuarios aprecian los diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos. Los menús de navegación simples y los botones táctiles grandes son preferidos por los usuarios móviles, ya que facilitan la navegación con los dedos en pantallas táctiles. Además, es crucial optimizar la velocidad de carga del sitio para garantizar una experiencia de navegación fluida y sin interrupciones.
-
3. Diseño Visual Atractivo
El diseño visual desempeña un papel importante en la atracción y retención del usuario en dispositivos móviles. Los usuarios prefieren interfaces limpias y atractivas que utilicen imágenes y gráficos de alta calidad para complementar el contenido textual. El uso de una paleta de colores atractiva y una tipografía legible mejora la estética general del sitio y facilita la lectura en pantallas pequeñas.
-
4. Contenido Multimedia y Experiencias Inmersivas
Los usuarios móviles disfrutan del contenido multimedia, como imágenes, videos y contenido interactivo, que enriquece la experiencia de usuario y captura su atención de manera efectiva. Las experiencias inmersivas, como los recorridos virtuales y las historias multimedia, son cada vez más populares entre los usuarios móviles que buscan contenido envolvente y entretenido.
-
5. Facilidad de Compartir y Acceso Social
La capacidad de compartir contenido fácilmente en redes sociales y plataformas de mensajería es valorada por los usuarios móviles. Los botones de compartir social integrados y las opciones para compartir contenido a través de aplicaciones de mensajería facilitan que los usuarios compartan contenido interesante con sus redes personales. Además, el acceso rápido a comentarios y reseñas sociales puede influir en las decisiones de los usuarios al interactuar con contenido en dispositivos móviles.
OPTIMIZAR EL RENDIMIENTO
Optimizar el rendimiento del sitio mediante la compresión de imágenes, la minimización de archivos CSS y JavaScript, y el uso de técnicas de carga progresiva para garantizar tiempos de carga rápidos en dispositivos móviles. Garantizar una experiencia de usuario rápida y fluida en dispositivos móviles es fundamental para el éxito de tu web. Además la rapidez de carga afecta directamente al posicionamiento en Google.
Las imágenes y los archivos multimedia pueden ralentizar significativamente la velocidad de carga de una página web en dispositivos móviles. Para optimizar el rendimiento, es importante comprimir y optimizar todas las imágenes y archivos multimedia para reducir su tamaño sin comprometer la calidad. Se pueden utilizar herramientas de compresión de imágenes y técnicas de codificación eficientes para minimizar el tamaño de los archivos y mejorar los tiempos de carga en dispositivos móviles.
Utiliza los svg para imágenes planas, es decir, para logos, iconos, y toda clase de imágenes que normalmente guardas como png. Esto hará que además de pesar menos, podrán adaptarse a cualquier tipo de pantalla sin pérdida de resolución.
PRUEBAS Y MONOTOREO CONTINUO:
Es fundamental realizar pruebas exhaustivas en una variedad de dispositivos móviles para identificar y corregir posibles problemas de diseño y usabilidad. Para ello sería conveniente probar tu diseño en diferentes terminales, pero como esto no siempre es posible, existen muchas herramientas que simulan el comportamiento de tu diseño en distintos modelos móviles, no son eficientes 100% pero se acercan mucho.
Además, también es muy importante tener feedback con el usuario , recopilar comentarios de los usuarios y utilizarlos para combprobar y mejorar continuamente el diseño.
El diseño Mobile First es una filosofía de diseño centrada en el usuario que puede mejorar significativamente la experiencia del usuario, el rendimiento del sitio y la capacidad de adaptación a dispositivos móviles. Al adoptar este enfoque desde el principio, los diseñadores y desarrolladores pueden desbloquear todo el potencial de la web moderna y ofrecer experiencias digitales excepcionales en cualquier dispositivo.
por Omar Benyakhlef | accesibilidad, Cool Web Design, Diseño para móviles, Mobile
Un buen diseño de interfaz de usuario (UI) es esencial para el éxito de una aplicación móvil, ha de ser fácil de usar, atractiva y responsive.
En este artículo, compartiré algunos consejos para diseñar una interfaz de usuario para aplicaciones móviles.
1. INVESTIGACIÓN
Antes de empezar a diseñar, es importante realizar una investigación para comprender las necesidades y expectativas de los usuarios. Esto te ayudará a crear una interfaz que sea realmente útil y atractiva para ellos.
2. USABILIDAD
La usabilidad es lo más importante en el diseño de una interfaz de usuario. Una interfaz debe ser fácil de usar, incluso para usuarios que no están familiarizados con ella.
Para mejorar la usabilidad, utiliza los siguientes principios:
- Simplifica: La interfaz debe ser lo más simple posible. No utilices elementos innecesarios o confusos.
- Evita la sobrecarga de información: No presentes demasiados datos a la vez.
- Utiliza un diseño consistente: Utiliza los mismos elementos y patrones en toda la interfaz.
- Proporciona retroalimentación: Informa a los usuarios de lo que está sucediendo.
3. INTERFAZ ATRACTIVA
Una interfaz atractiva puede ayudar a captar la atención de los usuarios y hacer que tu aplicación sea más memorable.
4. SÉ RESPONSIVE
Las pantallas de los dispositivos móviles varían en tamaño y resolución. Por ello, tu interfaz debe ser responsive para que se adapte a diferentes tamaños de pantalla.
5. PRUEBA TU DISEÑO CON USUARIOS REALES
Una vez que tengas un prototipo de tu diseño, es importante probarlo con usuarios reales. Esto te ayudará a identificar posibles problemas y mejorar la experiencia del usuario.
Conclusiones
Siguiendo estos consejos, podrás crear una interfaz de usuario para aplicaciones móviles que sea fácil de usar, atractiva y responsive.
Tendencias en el diseño de interfaces para móviles
El diseño de UI para móviles está en constante evolución. A continuación, se presentan algunas tendencias que están ganando popularidad:
1. Diseño Neomórfico
El diseño neomórfico es una tendencia que se ha popularizado en el último tiempo. Se caracteriza por imitar la apariencia de objetos físicos en la interfaz digital, utilizando sombras suaves y realismo para crear un aspecto tridimensional. Este enfoque busca generar una experiencia más táctil y realista para los usuarios. Un ejemplo es la aplicación de Apple Music en iOS, que ha adoptado algunos elementos del diseño neomórfico, especialmente en su uso de sombras suaves y efectos de luz que crean un aspecto tridimensional para los elementos de la interfaz. Por lo general, si andáis perdidos, fijaros en qué está haciendo Apple, porque sus diseños siempre son vanguardia y tendencia.
2. Diseño con Espacios en Blanco y Minimalismo
El minimalismo sigue siendo una tendencia fuerte en el diseño de interfaces móviles. El uso de espacios en blanco, colores suaves y tipografías legibles se enfoca en la simplicidad y la elegancia. Esta estética no solo mejora la estética de la interfaz, sino que también permite a los usuarios concentrarse en el contenido esencial.
3. Diseño Oscuro (Dark Mode)
El modo oscuro ha ganado popularidad en aplicaciones móviles debido a su apariencia atractiva y a su capacidad para reducir la fatiga visual, especialmente en entornos con poca luz. Ofrece un contraste más bajo, lo que puede disminuir el consumo de energía en pantallas OLED, contribuyendo así a una mejor eficiencia energética.
4. Diseño Orientado al Usuario (User-Centric Design)
El enfoque centrado en el usuario implica diseñar la interfaz en función de las necesidades, preferencias y comportamientos reales de los usuarios. Esto se logra a través de la investigación en profundidad y la comprensión completa del usuario final, permitiendo la creación de interfaces más personalizadas y relevantes.
5. Interactividad y Animaciones Significativas
Las animaciones y la interactividad bien diseñadas añaden un elemento de dinamismo y atractivo a la interfaz. Estas no solo hacen que la experiencia sea más agradable, sino que también ayudan a guiar al usuario, proporcionar retroalimentación y comunicar información de manera efectiva.
6. Integración de Tecnologías Emergentes
El uso de tecnologías emergentes como la realidad aumentada (AR) y la realidad virtual (VR) en las interfaces móviles está en aumento. Estas tecnologías ofrecen experiencias inmersivas y altamente interactivas, transformando la forma en que los usuarios interactúan con las aplicaciones.
7. Interfaces de Usuario Basadas en Gestos
Con la eliminación de botones físicos en muchos dispositivos, los gestos se han convertido en un método popular de navegación. Los usuarios pueden deslizar, pellizcar, tocar y hacer gestos para interactuar con la aplicación, lo que permite una experiencia más fluida y centrada en el contenido.
Conclusión
El diseño de interfaces para aplicaciones móviles está en constante evolución, impulsado por avances tecnológicos y cambiantes expectativas de los usuarios. Adoptar estas tendencias puede ayudar a crear interfaces atractivas, intuitivas y altamente funcionales que satisfagan las necesidades de los usuarios y brinden una experiencia móvil excepcional. Sin embargo, es fundamental recordar que cada aplicación es única y debe adaptarse a su audiencia y contexto específico.
por Omar Benyakhlef | accesibilidad, Diseño para móviles, Fuentes
El diseño web para dispositivos móviles se ha convertido en un aspecto crucial para garantizar una experiencia de usuario satisfactoria. Uno de los elementos más importantes del diseño móvil es el tamaño de la tipografía, ya que influye en la legibilidad, la accesibilidad y, en última instancia, en la retención de los visitantes. Aquí te brindamos pautas esenciales para utilizar el tamaño de tipografías de manera efectiva en dispositivos móviles. (más…)
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, responsive, Taller Web, Trucos CSS
En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra.
En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive.
Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma de flecha o ratón nos indica que la web continúa en navegación vertical.
El diseño full screen suele plantearse solo en el primer módulo de información, pasando luego a una web de navegación vertical, aunque también hay diseñadores que apuestan por hacer todos los módulos de contenido en full screen.
Vamos por partes:
1 BACKGROUND. IMAGEN DE FONDO
Es importante encontrar una imagen que no deje indiferente, que sea impactante y a ser posible «limpia», ya que sobre ella habrá texto, y cualquier detalle pequeño puede no verse. Además aconsejo meter un filtro que oscurezca un poco la imagen para ganar en legibilidad del texto que va encima.
En este ejemplo, he usado dos imágenes con formatos distintos para que veáis la diferencia. La primera (rosa) es vertical y la del segundo bloque apaisada. Si modificáis el tamaño de la ventana del navegador, veréis que el comportamiento de la segunda se adapta mucho mejor a todas las resoluciones desktop, y la primera funcionará mejor en las pantallas mobile.
Vamos al código CSS. Se trata de hacer que la imagen ocupe el 100% de la ventana del navegador:
- capa1 y capa2; son los contenedores de los dos módulos. En este ejemplo de web he usado dos módulos full screen.
- height: 100vh; con esta orden, le decimos a la CSS que el alto de la imagen tiene que ocupar el 100% del alto de la ventana del navegador.
- background-size:cover; indicamos que la imagen debe ocupar todo el contenedor, incluso si tiene que estirarse.
- background-position: center top; aquí indicamos que la imagen crezca o encoja desde el punto situado en el eje central de la imagen y desde su punto superior.
- padding: 200px 0 0 10%; para colocar el texto, he decidido separarlo 200px del top y un 10% del ancho de pantalla del margen izquierdo.
Como decía antes, es conveniente oscurecer un poco la imagen de fondo para hacer más legible el texto, esto puedes hacerlo de dos maneras, la primera con photoshop o el editor de imágenes que suelas utilizar, la segunda forma de hacerlo es con CSS, le aplicamos a toda la capa un gradiente negro con una opacidad que iremos modificando según nuestra conveniencia, en este caso un 60%
2 FLECHA EN EL BOTTOM PARA CONTINUAR NAVEGACIÓN
En la parte inferior de la ventana de navegación, he colocado una flecha que con un movimiento suave vertical, indica que la navegación sigue más abajo. Además he puesto un enlace en la flecha para que al pulsar sobre ella muestre el segundo bloque, vamos a ver cómo se hace esto:
En primer lugar, en lugar de usar una imagen png para la flecha, usamos una fuente, de ese modo no se pixelará y será más nítida en cualquier resolución. Para ello usamos este icono.
En el código, podéis ver todos los parámetros de la flecha. Con translateY movemos la flecha 20px en vertical. La duración de la animación es de 0.7s y es un loop infinito.
A continuación os dejo el código, espero que os sea útil.
NOTA: coloca el visor en 0.5x para ver bien el efecto
See the Pen
LANDING FULL SCREEN by Omar Benyakhlef Domnguez (@gloobs)
on CodePen.
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Mobile, SEO, Usabilidad
Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.
Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.
What is my screen resolution
Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!
COMPROBAR RESOLUCIONES
