9 consejos para una tipografía responsive

9 consejos para una tipografía responsive

Los mejores consejos para ayudarte a familiarizarte con la tipografía responsive en la web.

Es lógico que el diseño web responsive requiera una tipografía responsive que se adapte a tus necesidades. Pero, ¿Qué significa en realidad y cómo lo puedes implementar? El tamaño de la fuente, el espaciado y el diseño deben trabajar juntos para crear una configuración de texto elegante y legible en cada vista. ¿Pero cómo lo puedo hacer?

Para una explicación más detallada, echa un vistazo a este artículo sobre las reglas de la tipografía responsive.

01. Tamaño apropiado del texto del contenido

Utiliza una escala para diferentes tamaños de pantalla, te sugiero comenzar con la escala de fuentes predeterminada del navegador. Establece el tamaño de la fuente base al 100%, y cada navegador hará que el tamaño de la fuente sea para la mayoría de los usuarios fácilmente leer en ese dispositivo.

Típicamente, 100% es el equivalente a 16px. En el escritorio, esto puede parecer sorprendentemente grande, pero la mayoría de nosotros tenemos problemas para leer textos más pequeños una vez que llegamos a la mediana edad – ¿por qué no hacerlo más fácil?

02. Ten en cuenta al lector

Las ventanas de los navegadores difieren en tamaño más que las dimensiones físicas o de píxeles. Piensa en cómo interactúa el usuario con la pantalla.

Fuera del escritorio, hay menos espacio para usar, pero el usuario está más cerca de la pantalla. Tu tipografía debe escalar con respecto a la lectura. En general, reduce tus fuentes al pasar del escritorio al móvil. La gente tiende a sostener sus teléfonos más cerca de la cara. Piensa en cómo la gente consumirá el contenido y ajusta la tipografía responsive en consecuencia.

Debemos ser igualmente conscientes de cómo tratamos la tipografía en pantallas más grandes, como las televisiones y  sistemas como consolas, que vemos a distancia, pero que pueden tener una resolución relativamente baja.

En situaciones como esa, puede tener sentido renderizar e incluso ajustar la disposición usando unidades vw, que son proporcionales a la anchura de la vista.

03. Vigila tu medida en la tipografía responsive

El ancho de un bloque de texto, afecta lo cómodo que puede ser leerlo. Cuando tienes vistas que pueden crecer (o encogerse) indefinidamente, la longitud de una línea puede llegar a ser incómodamente larga (o corta), es un error que veo que mucha gente comete.

A menudo se cita una pauta de 45 a 75 caracteres por línea. Los estudios han encontrado que las líneas más largas, de hasta 95 caracteres, se leen más rápido en la pantalla, pero no está claro si eso significa que los lectores disfrutan leyendo más o entienden mejor. Hay demasiadas variables para sacar conclusiones firmes, por lo que tiene sentido equivocarse.

Si estás diseñando primero para el móvil, tenderás a tomar una medida corta para evitar que el texto se vuelva demasiado pequeño. En el escritorio, es posible que desee dejar que las líneas se alarguen en ventanas más grandes. Una declaración de anchura máxima puede evitar que esto se salga de control, pero no debería ser necesario si aumenta progresivamente el relleno.

También puedes equilibrar el tamaño de fuente con la medida para controlar el número de caracteres por línea. Aquí te dejo un ejemplo de consulta de CSS:

@media screen and (min-width:1200px) {
    body { font-size:110%; } /* Aumento del tamaño de la fuente */
}
@media screen and (min-width:1400px) {
    html { padding:0 15%; } /* Reduce el ancho del contenedor */
}
@media screen and (min-width:1600px) {
    body { font-size:125%; } /* Aumento del tamaño de la fuente */
}
@media screen and (min-width:1800px) {
    html { padding:0 20%; } /* Reduce el ancho del contenedor */
}

04. Ajustar el espaciado de líneas

La altura de la línea, a menudo se descuida. Lo que es suficiente para mantener las líneas claras en una escala o medida puede ser demasiado en otra, perdiendo el ojo del lector al tratar de moverse de una línea a la siguiente. Recuerda, a nadie le gusta leer entre líneas.

Se pueden evitar los «huecos desagradables», realiza unos cálculos para asegurarte de que los valores son directamente proporcionales al tamaño de la fuente.

05. Usar una variación visual que no sea el tamaño

En un diseño de escritorio amplio, es posible que los encabezados sean varias veces más grandes que el texto del cuerpo para mayor claridad y dramatismo. En una pantalla móvil, los encabezados sobredimensionados simplemente empujan el texto del cuerpo hacia abajo, rompiendo la continuidad y exigiendo un desplazamiento excesivo.

Te sugiero formas alternativas de lograr la jerarquía visual. En las pantallas pequeñas, las subcabeceras utilizan variaciones de estilo – mayúsculas, minúsculas, cursiva, negrita – con el mismo tamaño de letra. Sangrar párrafos y usar espacios en blanco para separar secciones.

06. Elige las fuentes con prudencia

Trabajar en múltiples escalas exige aún más de tus tipos de letra. Además de garantizar que las fuentes web se renderizan bien en todas las plataformas y tienen suficiente alcance Unicode para las internacionalizaciones planificadas de tu sitio, vale la pena buscar una mayor flexibilidad tipográfica.

Múltiples grosores, letras mayúsculas pequeñas y variantes condensadas le darán opciones para obtener mejores resultados en diferentes vistas. Elige las fuentes con moderación. No cargues demasiado, y asegúrate de probar la tipografía real en el navegador en varias plataformas» para la apariencia, el peso de la página y la velocidad de renderizado.

Web Font Loader, co-desarrollado por Google y Typekit, puede ayudarte a controlar la experiencia de carga. No pases por alto la alternativa para cuando las fuentes web fallan. Te recomiendo probar fuentes de emergencia seguras para la Web y ajustar las consultas de los medios para minimizar el riesgo.

07. Utilizar un banco de ensayos de tipo

Hacer malabares con bibliotecas tipográficas y CSS no favorece el desarrollo creativo. Typetester de Dugonjić es ahora un editor de tipografía web WYSIWYG de pleno derecho. Puede utilizarlo para probar, comparar y diseñar con más de 2800 fuentes web de Adobe Edge, Adobe Typekit y Google Fonts. A continuación, exporte sus diseños como fragmentos de HTML y CSS con total capacidad de respuesta.

08. Fijar el tipo en el contexto

El diseño puede romper la tipografía más meticulosa. Recuerde «el espacio en blanco alrededor de las palabras – donde su ojo puede descansar – y el uso de imágenes», dice Gustafson. Aquí es donde el diseñador sensible necesita estar particularmente alerta. «En una pantalla estrecha, las imágenes pueden reducir la legibilidad. Una imagen flotante podría envolver palabras largas debajo de ella en vez de al lado de ella».

Los valores de ancho y relleno tendrán que variar con el tamaño de la ventana de visualización para que los diseños sigan pareciendo visualmente «correctos», así como para gestionar la longitud de la línea. Cuando se establecen puntos de ruptura entre diseños de varias columnas y de una sola columna, una columna más ancha con espacio horizontal puede ser más cómoda en pantallas de tamaño mediano.

09. Aprender de los demás

Un lienzo en blanco no tiene por qué ser tu trampolín. En 2015, Yeaman encuestó 50 correos electrónicos con capacidad de respuesta para comparar las elecciones que otros diseñadores habían hecho en cuanto a tipo de letra, tamaño, espaciado y otros factores, y encontró que los resultados eran instructivos. Cualquiera que sea la naturaleza de su proyecto, habrá ejemplos en su campo. El consenso no siempre es óptimo, pero no es un mal punto de partida.

Si te ha gustado este artículo, te recomiendo leer Consejos para principiantes de diseño web responsive

Responsive design vs diseño adaptativo

web responsive vs diseño adaptativo

 

Responsive design o diseño adaptativo

Ambos términos tienen un objetivo muy similar. Buscan brindar la mejor experiencia posible en un solo sitio web cuando se visualiza en una gran cantidad de dispositivos de escritorio, móviles y tabletas.

Ethan Marcote es ampliamente citado como la combinación del término responsive design, que es el uso de consultas para servir a diferentes CSS permitiendo que un sitio cambie su apariencia cuando se ve en pantallas de diferentes tamaños. En resumen, se puede lograr simplemente con HTML y CSS. (En estos días suele ser HTML5 / CSS3, pero no es obligatorio)

Diseño adaptativo es el título del libro de Aaron Gustafson, toda una autoridad en este campo. El diseño adaptable del sitio incluye las consultas de CSS del responsive design, pero también agrega mejoras basadas en Javascript para cambiar el marcado HTML del sitio basado en las capacidades del dispositivo. Esto también se llama «Mejora progresiva»

Un ejemplo es que puede tener una barra lateral de navegación en la versión de tamaño de escritorio del sitio, y luego, cuando se ve en un teléfono inteligente, el menú se convierte en una lista de selección para ahorrar espacio en la interfaz. Otro ejemplo es que puede ofrecer funcionalidades en un dispositivo móvil no disponibles en una computadora de escritorio. Supongamos que tiene un sitio web de restaurante: cuando se visualiza en un dispositivo móvil con GPS, aparece un panel que dice «Obtenga direcciones a nuestro restaurante desde su ubicación». Los escritorios no conocen su ubicación, por lo que no les parece.

Responsive design (RWD)

Los elementos clave que conforman un sitio web Responsive son CSS3, consultas de medios, la regla @media y cuadrículas fluidas que utilizan porcentajes para crear una base flexible. También es fundamental utilizar imágenes flexibles, videos flexibles, tipos de fluidos y EM en lugar de píxeles. Todos estos puntos clave permiten que el sitio web adaptable modifique su diseño para adaptarse al dispositivo.

El Responsive design es del lado del cliente, lo que significa que la página se envía al navegador del dispositivo (el cliente), y el navegador modifica la apariencia de la página en relación con el tamaño de la ventana del navegador.

La definición de un sitio Responsive design es que modificará de manera fluida su composición para mejorar la accesibilidad del contenido en función del tamaño de pantalla de la ventana del navegador.

Diseño web adaptativo (AWD)

El diseño web adaptativo utiliza diseños predefinidos que se han construido cuidadosamente para una variedad de tamaños de pantalla. Un diseño particular se activa cuando el tamaño de la pantalla del dispositivo que ve el sitio web se detecta y se combina con una hoja de estilo.

El diseño adaptativo es predominantemente del lado del servidor. Esto significa que el servidor web realiza todo el trabajo de detección de los distintos dispositivos y carga la hoja de estilo correcta en función de los atributos del dispositivo. Además de cambiar el diseño según el tamaño de la pantalla, también pueden cambiar según las condiciones, como si el dispositivo tiene una pantalla retina o no.

El servidor puede detectar esto y mostrar imágenes de alta calidad para dispositivos de visualización de retina como iPad e imágenes de baja calidad para pantallas de definición estándar.
Las desventajas de AWD son que la construcción inicial es muy costosa ya que tiene muchos diseños para diseñar. Además, mantener y actualizar todos estos diseños puede llevar mucho tiempo y, por lo tanto, costará mucho dinero.

La definición de un sitio web adaptativo es aquella que tiene un conjunto de diseños predefinidos que se activan cuando mejor se adapta al dispositivo detectado por el servidor.

Similitudes y diferencias

La similitud obvia de ambos métodos es que mejoran la accesibilidad del contenido del sitio web en dispositivos móviles y varios tamaños de pantalla. Ambos también brindan a los visitantes una experiencia de usuario mejorada para dispositivos móviles.

Son diferentes en la forma en que entregan el diseño adaptable al usuario. RWD depende de las cuadrículas de fluidos y AWD se basa en diseños de tamaño predefinidos. Además, el hecho de que utilicen el lado del cliente o el lado del servidor es otra forma en que difieren.

Las ventajas del web responsive:

1. Fácil de usar y flexible en diferentes resoluciones de pantalla.

2. Experiencia visual y operacional unificada en múltiples terminales, con un bajo costo invertido en mantenimiento.

3. SEO amigable y no hay distinción de versión de página, manteniendo la estrategia SEO consistente.

4. La conexión entre sitios móviles y de escritorio puede completarse sin redirección.

Las ventajas del diseño adaptativo:

1. Compatible incluso con algún sitio complicado.

2. Se puede implementar a un precio menor.

3. La codificación será más eficiente.

4. Las pruebas serán mucho más fáciles y la operación puede ser relativamente más precisa.

¿Debo usar web responsive o responsivo?

Al sumar el puntaje, el web responsive es casi siempre la opción más segura para tu sitio. Siempre funciona bien independientemente de los nuevos tamaños de pantalla, mejora los tiempos de carga y, por lo general, vale la pena el esfuerzo adicional.

Sin embargo, para algunos sitios, la adaptación puede ser una mejor opción. Es probable que estos sean sitios web más nuevos y pequeños que recién están comenzando y que necesitan preservar sus recursos. Un sitio de adaptación es más fácil de crear, y el tamaño y la audiencia más pequeños evitarían que los tiempos de carga más lentos o la menor flexibilidad sean un problema.

Consejos rápidos para los diseñadores:

  • Determina las diferencias y similitudes entre los elementos de la página y desarrolla patrones comunes para las plantillas de página. Este enfoque ahorrará tiempo y le dará una sensación consistente al sitio.
  • Al diseñar adaptativo, diseña para estos seis anchos de pantalla comunes: 320, 480, 760, 960, 1200 y 1600.
  • Proporciona a tu desarrollador una guía de estilo como esta junto con sus PSD.
  • Realiza un control de calidad  de los archivos codificados para asegurarte de que cada página se muestre como lo habías previsto.
  • Las consultas de medios no funcionan en Internet Explorer 8 y anteriores. Utilice un polyfill de Javascript como CSS3-MediaQueries.js para admitir consultas de medios en navegadores antiguos. Sin embargo, considera que los rellenos automáticos se pueden agregar al tamaño del archivo y que los usuarios pueden desactivar Javascript.
  • Para diseños de cuadrícula flexibles en web responsive, utilice ems o porcentajes. Evitar anchos fijos.
  • En elweb responsive, usa el ancho máximo: 100% para hacer que las imágenes, los videos y el lienzo HTML5 sean escalables. A medida que se reducen las vistas, cualquier medio se reducirá de acuerdo con el ancho de su contenedor. Sin embargo, el ancho máximo no funciona con medios incrustados. Echa un vistazo a este artículo para conocer la solución proporcionada por A List Apart.
  • Mantente en constante comunicación con tu diseñador. Si estás confundido, pregunta ahora para no tener que arreglar nada más tarde.

Consejos para principiantes de diseño web responsive

Diseño web responsive, cada vez más importante

La mayoría de los diseñadores web saben sobre el diseño móvil y cómo ha afectado dramáticamente el diseño sensible. Pero hay otra técnica que puede ser menos popular pero que puede resolver problemas de una manera más clara, el diseño web responsive.

Con un enfoque de escritorio primero, puede construir todas las características que desees. Luego, cuando realice pruebas en dispositivos más pequeños, se concentrará en el diseño web responsive a la vez que admite tantas funciones de «gama alta» como sea posible.

Este flujo de trabajo es bastante diferente, pero desde el escritorio puede ser mejor para los diseñadores web que crean diseños ricos en funciones.

Los beneficios del escritorio primero

Técnicamente, «el escritorio primero» era la forma tradicional en que todos hacían páginas web hasta la era receptiva.

Hoy en día, muchas personas hablan primero de los dispositivos móviles, pero existen buenas razones para seguir con el enfoque de escritorio. A menudo prefiero comenzar con el diseño de escritorio cuando sé que mi sitio tendrá toneladas de características.

Aquí hay algunos beneficios de las ideologías de escritorio primero.

Tienes la oportunidad de ver todas las características principales a la vez. Te permite imaginar todas las posibilidades más grandes para tu diseño primero. Es la mejor estrategia si su audiencia utiliza principalmente computadoras de escritorio / portátiles. Cuando piensas en páginas web modernas como Twitter , piensas que son móviles. Pero tienen muchas características adicionales que vienen con la experiencia de escritorio. Estos usuarios de escritorio obtienen claramente un UX elevado, que es tan importante como cualquier otro dispositivo.

Diseño web responsive de twitter

Por supuesto, no se puede negar que el móvil es importante. Recientemente, el uso móvil superó al escritorio, por lo que definitivamente está aquí para quedarse.

Pero las páginas web ricas en funciones a menudo dependen de un diseño de escritorio fuerte.

Este es quizás el mayor beneficio de un diseño de escritorio primero. Puedes ver la página como se debe ver con todas las campanas y silbidos. Estos extras pueden (y deben) eliminarse para pantallas más pequeñas a medida que realiza pruebas y encuentra que ciertas funciones simplemente no se transmiten bien.

Consejos diseño web responsive

Diseño web móvil primero

Otra forma de ver esto es a través de la simplicidad del diseño móvil primero. Cuando creas primero con el móvil, estás empezando inherentemente con las funciones más simples y luego agregas extras para pantallas más grandes. Pero es muy fácil olvidarse de las funciones o simplemente no tiene una planificación adecuada para decidir dónde deben ir o cómo deben funcionar.

Con un enfoque móvil primero es fácil considerar las características dinámicas más como una idea de último momento. Pero con un enfoque de escritorio primero, estas características se consideran el método de visualización principal y luego se eliminan según sea necesario.

No hay una opción perfecta, así que recomiendo probar ambos para ver lo que prefieres. Si eres como yo y realmente adoras la rica experiencia de escritorio, probablemente prefieras comenzar por trabajar más pequeño.

Apoyando todos los navegadores

La parte más complicada del diseño de escritorio primero es manejar el soporte del navegador.

Hace solo una o dos décadas, el único mercado eran los equipos de escritorio y portátiles. La revolución de los teléfonos inteligentes cambió todo eso con toneladas de navegadores móviles para iOS, Android y otros dispositivos propietarios como Blackberry.

La mayoría de los navegadores antiguos carecían de soporte para elementos de escritorio modernos como lienzo, audio / video y entradas dinámicas. Pero mucho ha cambiado en los últimos años.

Hoy en día es razonable que todos los navegadores móviles admitan básicamente las mismas características que los navegadores de escritorio. Los navegadores modernos también representan la mayoría de los elementos de la misma manera, por lo que no se ocupará de los problemas de representación del pasado.

Las mayores diferencias no se encuentran en el soporte HTML / CSS, sino en el soporte basado en el tacto.

Diseño adaptativo

Pantallas más pequeñas

Las pantallas móviles son mucho más pequeñas y también deben tocarse con un dedo. Los ratones de computadora son más precisos en comparación con un dedo humano, sin mencionar que las pantallas de escritorio son mucho más amplias y fáciles de ver.

Al pasar de una computadora de escritorio a una móvil, es crucial tener en cuenta cómo funcionan los diferentes navegadores, qué admiten y cómo manejar la entrada táctil del usuario.

Algunas buenas reglas a considerar al escalar su diseño de escritorio primero:

  • Agrandar los elementos transportables.
  • Aumenta el tamaño del texto del cuerpo para que los enlaces sean más fáciles de tocar
  • Añadir bibliotecas de JavaScript que admiten movimientos de deslizamiento

Especificaciones HTML5, JavaScript y CSS3

Siempre puede consultar las especificaciones de HTML5 de todos los navegadores para ver qué elementos son compatibles en qué navegadores. Pero en su mayor parte, las entradas táctiles son una cosa universal, por lo que el escritorio primero es una gran solución si también presta atención a la experiencia móvil.

Y puede encontrar toneladas de recursos gratuitos como TouchSwipe que agregan soporte para gestos táctiles y de deslizamiento a todos los sitios web.

Puede usar JavaScript para verificar las dimensiones del navegador o el sistema operativo como iOS o Win Mobile. Con esta información puede cargar hojas de estilo adicionales y crear una experiencia totalmente diferente con los eventos de toque / deslizar que solo se aplican a los usuarios móviles.

Comience con una lista de características que sabe que deseará tu página web. Organiza todas las propiedades más nuevas de CSS3, los elementos más nuevos de HTML5 y cualquier cosa que pueda ser dudosa con el soporte del navegador.

Búsqueda de navegadores

Luego, busca todos los navegadores que deseas admitir para considerar cómo puede manejar los rellenos y los rellenos múltiples. A medida que pase el tiempo, los navegadores más antiguos se irán eliminando y la compatibilidad con el navegador será más fácil. Esto crea un caso aún más sólido para el diseño de escritorio primero porque los motores de renderización serán casi idénticos en todos los ámbitos.

Para obtener más información y profundizar en las interacciones móviles, consulte estas guías relacionadas:

Degradación agraciada (y por qué importa)

El proceso de degradación elegante mira primero a la tecnología de nivel superior. Esto significa que usted construye todas las funciones principales de su diseño web responsive con todo lo que desea en el sitio. Luego, si otros navegadores no pueden admitirlas, puede volver a los métodos de respaldo .

Un ejemplo común de esta táctica es la eliminación de menús deslizantes desplegables para dispositivos móviles. Dado que los usuarios de teléfonos inteligentes no pueden desplazar los enlaces de los menús, tiene sentido ocultar los menús que se pueden desplazar. Y, en su lugar, crear un interruptor o un menú de hamburguesa oculto .

Sin embargo, esto no es una degradación estrictamente elegante, sino un cambio en la experiencia del usuario. En su lugar, está buscando funciones JS o propiedades CSS3 que, literalmente , no se pueden admitir en un determinado navegador.

Para esto, tendrá que encontrar un relleno polivalente o alternativo que cree una experiencia menos glamorosa, pero que aún funcione para el usuario.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)