¿Cuál es la mejor manera de hacer que su sitio web responda al 100% en todos los dispositivos móviles?

Su definición de “receptivo” dicta altamente lo perfecto que puede obtenerlo.

(Existen exactamente 2.048 diseños diferentes para pantallas de hasta 2048 píxeles de ancho, por cierto)

En general, obtienes un sitio web bastante receptivo al:

  1. Diseño de su sitio para al menos tres, y preferiblemente cinco, diferentes resoluciones, con anticipación (!) : Teléfono vertical y horizontal, tableta vertical y horizontal, y computadora de escritorio / portátil de alta resolución (dependiendo de su audiencia). Saber cómo desea que responda cada resolución mejorará drásticamente su satisfacción con el resultado.
  2. Simplifique su diseño para permitir la “fragmentación” de los elementos, de modo que caigan naturalmente uno debajo del otro.
  3. Sacrificar algunos contenidos en dispositivos móviles que sus visitantes no tienen tiempo (o inclinación) para leer.
  4. Sacrificar la especificidad en el diseño, el estilo y los efectos, en favor de la simplicidad y menos campanas y silbatos. Cuanto más precisos se coloquen sus elementos, más difícil será responder cuando cambien de tamaño.

Es posible que desee prestar atención al lenguaje que usa, al definir lo que desea y al describir lo que ve. Comúnmente escucho a alguien decir que la página X es “completamente diferente” en ciertas resoluciones, cuando en realidad quieren decir: “Las páginas son demasiado anchas, los iconos están distorsionados y los campos se superponen a otros campos”. Lo que describió no es “completamente diferente” “- es una cuestión de grado. Ser específico en sus solicitudes le da a su equipo problemas concretos para resolver. Cuando llevo mi automóvil a la tienda, no digo “está completamente roto” cuando solo quiero que me arreglen la CA =]

La regla general es que puede hacer que su sitio web se vea “100% receptivo” en cada uno de los dispositivos que solicitó, pero cada dispositivo y resolución se comportan de manera diferente con cualquier diseño dado, por lo que (a pesar de sus mejores esperanzas), más tiempo tendrá gaste en cada dispositivo que le interese, más se acercará a lo que desea.

Solo para dar una respuesta ligeramente diferente a todos los demás, ¿ha intentado borrar los cachés de sus dispositivos específicos? Un dispositivo (como una PC, teléfono o tableta) que ha visitado previamente un sitio puede almacenar en caché ciertas cosas como archivos .JS (JavaScript) u hojas de estilo CSS.

Si los dispositivos de prueba elegidos han visto previamente el sitio, es posible que necesiten borrar la memoria caché para ver la ‘nueva’ versión del sitio web correctamente. Si el problema persiste, contrata a un nuevo desarrollador como Brandon Hernández ha sugerido en su respuesta. Independientemente de otros factores, existen pocas excusas para aceptar una tarea, fallar y luego llevarse los dedos a los oídos. ¡ No necesitas ayuda así!

La forma más fácil para que su sitio se vea increíble en todos los dispositivos es crear un sitio receptivo con un marco receptivo como Foundation . Esto asegurará que tengas un hermoso sitio web en todos los dispositivos. Al utilizar un marco, se beneficia de tener un código claro y simple que sigue las mejores prácticas y que una comunidad mundial de diseñadores y desarrolladores mejora cada día.

MeUndies, una marca innovadora de ropa interior de Los Ángeles, pudo reconstruir su sitio con un pequeño equipo en menos de 3 meses, y los resultados son bastante impresionantes. Pudieron aumentar sus conversiones móviles en un 40%

Vea el estudio de caso de reconstrucción sensible de MeUndies aquí.

El desarrollador puede haber agregado funciones / funciones receptivas a nivel mundial, pero no está teniendo en cuenta las vistas específicas del dispositivo.

Deben llevar su diseño de una implementación global a una implementación de tamaño de ventana gráfica, donde los efectos receptivos son diferentes según el tamaño de la pantalla en la que se visualiza el sitio web.

La mayoría de los navegadores web modernos tienen una opción VIEW que le permite ver una página web en viewports de diferentes tamaños (por ejemplo, en Firefox es Tools -> Web Developer -> Responsive Design Mode)

Si puede ver su sitio en viewports de varios tamaños y todo funciona correctamente, está listo para comenzar. De lo contrario, dígale a su desarrollador que se asegure de probar en todos los tamaños de pantalla antes de decirle que su sitio está listo.

No hay un término que responda al 100%. La mayoría de las personas, incluidos los desarrolladores web de hoy, no tienen idea de que no hay forma de que el sitio web sea 100% receptivo. Bootstrap o cualquier otro marco no es un tipo de varita mágica que hará que su sitio web responda en todas las pantallas. No importa qué marco utilice, debe optimizar sus diseños para diferentes dispositivos.

Utilizo el siguiente enfoque para hacer que los sitios respondan a personas que están muy preocupadas por la capacidad de respuesta ”.

-Utilice diseños minimalistas para las páginas siempre que sea posible.

-Diseños más complejos = problemas más receptivos en diferentes dispositivos.

-Utilice las estadísticas de uso del dispositivo para cubrir las resoluciones de dispositivo más utilizadas.

-Agregar consultas de medios para dispositivos relacionados para optimizar para cada dispositivo si le preocupa tanto la capacidad de respuesta en ese dispositivo en particular.

Oye,

Para que algo sea 100% de respuesta y siempre sea visualmente atractivo, el desarrollador debe realizar varias consultas de medios.

Muchos desarrolladores usan marcos receptivos como,

  • Bootstrap por Twitter
  • Fundación por Zurb
  • IU semántica

Estos marcos crean un gran comienzo para hacer que un sitio responda, pero el diseño no siempre será como usted lo desea.

De todos modos, estas consultas de medios pueden tomar bastante tiempo, así que asegúrese de tener un gran desarrollador para esto.

Mejor,

cree una versión de escritorio basada en 960 Grid System (ancho fijo y haga una versión móvil) con flex de 320 a 640. De esta manera, su versión de escritorio se mostrará correctamente en la tableta de escritorio y horizontal y la versión del teléfono cubrirá los teléfonos y las tabletas verticales. Solo tiene que mantener dos diseños y esto cubrirá el 95% de los dispositivos correctamente. El beneficio adicional es que podrá mostrar más contenido dentro de un espacio de pantalla.

La mejor manera es tomar más tiempo. Todo se reduce a la experiencia, pero si a un desarrollador se le da una maqueta rara que no se ajusta al sistema de cuadrícula estándar, será una mierda para obtener todas las configuraciones de respuesta correctas.

Pregúntele a su desarrollador web qué sistema de cuadrícula está utilizando. Si él / ella dice que no, probablemente tengas un problema, si dicen algo más, estás bien, solo tienes que hacer muchas pruebas y arreglos manuales.

la configuración receptiva es solo una de esas partes irritantes del desarrollo web, nunca es divertido.

Bueno, por un lado, diría que contrate a un desarrollador diferente porque si le dijera que responde, lo sería. Antes de decirle a un cliente que responde, probaría cada uno de esos dispositivos.

Pero si crees que tienen las habilidades, diles que descarguen Blisk. Es un navegador para desarrolladores que muestra vistas previas móviles para los dispositivos que acaba de mencionar.

Me parece mejor hacer el sitio de escritorio (1800 píxeles de ancho +) y luego bajarlo. Los puntos de interrupción que uso generalmente se parecen a esto: 1024, 750, 550, 350.

More Interesting

Cómo alinear mi barra de navegación

¿Cuál es la principal diferencia entre las aplicaciones móviles y los sitios web?

¿Cuáles son los pros y los contras de un sitio receptivo en lugar de detectar medios y redirigirlos al sitio móvil?

¿Cuáles son algunas de las ventajas estratégicas de las aplicaciones web optimizadas para dispositivos móviles?

Si tiene una aplicación web y una aplicación móvil nativa, ¿cómo canaliza mejor a los usuarios de uno a otro? (¿Deberías incluso intentar hacer esto?)

¿Hay alguna aplicación o sitio web que seleccione la canción según tu personalidad?

Cómo recuperarse de los cambios adversos en la clasificación después de la actualización del algoritmo Mobile Friendly de Google el 21 de abril de 2015

¿Cuál es la mejor empresa de diseño de sitios web móvil (sensible)?

¿Es posible cambiar el navegador predeterminado (Safari) de un iPhone?

¿Cuál es el mejor software de encuesta integrable?

¿Cuáles son algunas de las mayores molestias / problemas / desafíos con los que se encuentra al construir un sitio móvil o un sitio receptivo?

Si el tema secundario no es compatible con dispositivos móviles, ¿cargará el tema principal compatible con dispositivos móviles para dispositivos móviles?

¿Hay algún sitio web o aplicación que proporcione algún texto en hindi para traducir al inglés y luego verifique los resultados?

¿La aplicación web AJAX en dispositivos móviles consume más batería?

¿Qué pequeño sitio web, aplicación móvil o herramienta de software siempre quisiste que alguien construyera?