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.

Deja un comentario

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