Gracias por el A2A. Esta es una gran pregunta porque es un problema común y no es fácil de resolver. Esta es un área que los diseñadores web inexpertos a menudo subestimarán, pero en el desarrollo vuelve a perseguirlos.
La compatibilidad cruzada siempre ha sido una de las curaciones de Aquiles de los diseñadores / desarrolladores web front-end, y no existe una solución rápida y simple que funcione para el navegador en todos los dispositivos. No hay nada peor que pasar mucho tiempo haciendo que el sitio web se vea exactamente como lo desea, y luego descubrir que está roto en otros navegadores o dispositivos. Pero esto sucede todo el tiempo.
Aquí hay una breve lista de métodos generales que uso para minimizar los problemas de visualización entre dispositivos cruzados del navegador:
- Quiero crear un sitio web que funcione como un RSS, pueda enviar / recibir archivos y una función de chat. ¿Es posible hacer esto con HTML, CSS y Python?
- Cómo diseñar un sitio web usando mi computadora
- Mi hermana es una arquitectura clásica. Y ella necesita una empresa de diseño de sitios web. ¿Qué debería hacer ella?
- Mi sitio web no es intuitivo y tiene una alta tasa de rebote cuando los nuevos usuarios llegan a una página interna. ¿Hay algún JavaScript para mostrar a los usuarios un diálogo de ayuda único si son nuevos en el sitio web?
- Tengo problemas para hacer CSS. ¿Debo abandonar el sueño de ser un desarrollador front-end o hay alguna forma de diseñar páginas web?
- Desde el principio, decida explícitamente qué dispositivos, sistemas operativos y navegadores admitirá . Y si hace un contrato para producir un sitio web para otra persona, escríbalo en el contrato. También escriba cuánto tiempo continuará apoyando a esos. Recuerde, su cliente puede tener visitantes en el futuro que informan problemas, y si proporciona un excelente soporte de seguimiento para los sitios web que crea (¡como debería!). Cuando lo hagan, querrá que descubran qué dispositivo, sistema operativo, navegador y versiones para cada uno de ellos para intentar reproducir y solucionar el problema. Si está fuera de la base de su dispositivo / SO / navegador, y su cliente todavía quiere que lo arregle, puede estimar y cobrar por su tiempo. Muchos desarrolladores usan una regla anterior de 2 versiones: si la tecnología es anterior a 2 versiones, no la admitiré. Otros usan la regla de que si el desarrollador no lo admite (p. Ej., Microsoft dejó de admitir XP e IE8 años atrás), tampoco lo brindarán. Otros usan la regla de que si sus clientes lo usan, debería ser compatible. Me gusta una versión de este último enfoque usando la regla 80/20. Si le llevara N horas admitir cada dispositivo / SO / navegador, admitir el 80% de los dispositivos / SO / navegadores más populares requiere aproximadamente el 20% de N, mientras que admite el 20% menos popular del dispositivo / SO / los navegadores ocupan el 80% de N. Si el cliente ya usa Analytics, puede averiguar fácilmente cuáles son los 80% de dispositivos / SO / navegadores principales que se están utilizando. De 6 meses a 1 año son típicos durante el tiempo que se necesita para continuar brindando compatibilidad de compatibilidad.
- Use un marco CSS como Bootstrap si puede. Los buenos marcos probablemente habrán resuelto la mayoría de los problemas para usted y producirán excelentes resultados de compatibilidad cruzada. No son los más eficientes en términos de tiempo de carga para el sitio, pero el tiempo de desarrollo que ahorran bien vale la mayor parte del tiempo. El marco también debería decirle qué dispositivo / SO / base de navegador admite, y puede usar esto para definir su base de soporte, así como las actualizaciones.
- Mantenga el diseño simple. Creo que una de las razones por las que el diseño plano es tan popular ahora es por la gran cantidad de nuevos dispositivos que siempre están llegando al mercado. Cuantos menos elementos de diseño tenga, menos problemas de compatibilidad cruzada tendrá de qué preocuparse.
- Comprueba a medida que avanzas. No uso Dreamweaver, por lo que puedo ayudarlo sin hacer una búsqueda en Google, pero es posible que pueda encontrar algunos complementos (o incluso puede estar integrado) para obtener una vista previa visual rápida. Utilizo una versión anterior de BBEdit en Mac para editar. Realizo una ronda de cambios y luego verifico las últimas versiones de Safari, Chrome y Firefox. Para verificaciones más completas con sistemas operativos de escritorio, uso VirtualBox. Tengo unidades virtuales creadas para diferentes versiones de Windows, ejecutando los últimos navegadores disponibles para cada una de esas versiones. Tengo otra computadora portátil que ejecuta Ubuntu para verificar Linux, pero también podría ejecutarse en VirtualBox.
- Aprenda las herramientas de desarrollador para cada uno de los navegadores . Lo más probable es que necesite depurar en algún momento. Tendrá que aprender a usar las herramientas de desarrollador para que los navegadores inspeccionen el CSS y aíslen el problema. La mayoría de ellos le dirá cuándo un estilo no es legible atenuándolo cuando inspeccione el elemento. Luego puede acceder a los documentos de estilo W3C para averiguar la compatibilidad del navegador para ese estilo, y quizás un nombre o prefijo alternativo para él. El móvil es más difícil. Si lo busca en Google, probablemente encontrará algunas herramientas para simular cómo se muestra en los dispositivos móviles, pero no le ofrecen inspectores. Hace poco encontré una forma de conectar mi iPad a mi MacBook para inspeccionarlo con las herramientas de desarrollo de Safari. Yo no tengo muchos dispositivos móviles, así que les pido a mis amigos que lo comprueben en sus dispositivos y me envíen capturas de pantalla. Todavía es un poco doloroso cuando hay un problema persistente.
- No hay experiencia como profesor , excepto quizás http://css-tricks.com. Tienen muchos tutoriales geniales, y discuten cuestiones estratégicas, tácticas y casi siempre incluyen soluciones de navegador cruzado. Antes de pensar en un problema, busque soluciones. Probablemente se ejecutará a través de CSS Tricks. Al final, sin embargo, no sabes lo que no sabes hasta que te muestra su fea cabeza. Mantén la calma. Averígualo. Y no lo repita en el futuro (o si lo hace, espero que recuerde cómo lo resolvió).
- No puede hacer lo mismo en todos los dispositivos / SO / navegadores, por lo tanto, haga que se vea bien en ellos. Las pantallas tienen diferentes tamaños de píxeles, resoluciones, etc. Imprimir, por ejemplo, es un medio que puede controlar con CSS, pero a menudo se ignora en el diseño de sitios web. Parte del diseño receptivo es hacer que el diseño se vea bien para diferentes dispositivos. La forma más fácil de hacer esto es agrupar los dispositivos por ancho de pantalla, y también orientación si llega tan lejos. Me gusta el primer enfoque de diseño móvil adoptado por Bootstrap. El concepto es que diseñe primero para la pantalla más pequeña y luego trabaje desde allí. Creo que es más fácil subir que bajar una vez que lo tienes en la cabeza. Sin embargo, el punto es que su diseño no debería ser el mismo en todas las pantallas. Debería verse bien en todas las pantallas. Por lo tanto, debe ser dinámico y adaptarse.
