Cómo desarrollar un sitio web receptivo

A diferencia de lo que otros han sugerido, voy a sugerirte una forma diferente.

• En primer lugar, si está utilizando un navegador que no sea Google Chrome, le sugiero que comience a usar Chrome para su trabajo de desarrollo.
• Mientras todavía está diseñando el diseño, mantenga abierta la bandeja de ‘inspeccionar elemento’. Puede arrastrar fácilmente el tamaño de la pantalla allí y realizar cambios en el CSS para ver cómo aparecen los cambios en diferentes tamaños de pantalla. (Nota: solo necesitaría arrastrar la pantalla para diferentes tamaños y NO toda la ventana del navegador).
• Usar el emulador mientras todavía estoy diseñando no me hace sentir muy cómodo para cambiar las cosas rápidamente, por lo que generalmente evito el emulador en esta etapa.
• Después de completar todo el diseño (o incluso un módulo), uso la extensión de Chrome llamada Viewport Resizer. Es una extensión increíble que le permite verificar el diseño en diferentes tamaños de pantalla (preestablecidos), así como en tamaños de pantalla personalizados, arrastrando fácilmente el área de la vista en la pantalla. Consulte la imagen a continuación para ver cómo se ve Viewport Resizer en acción.

• Nunca uso el emulador de dispositivos Chrome porque Viewport Resizer hace un gran trabajo para mí.
• Por último, como estábamos diseñando usando el navegador Chrome, al final no olvide verificar la representación del diseño en todos los demás navegadores, principalmente Safari, Firefox, IE y el nuevo navegador Edge.

Diviértete diseñando. 🙂

1. Uso receptivo del sitio web: el diseño web receptivo hace que su página web se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).

& Es adecuado para trabajar en todos los dispositivos y en todos los tamaños de pantalla, sin importar cuán grande o pequeño, móvil o de escritorio, y la parte importante es la compatibilidad del navegador.

2. Desarrollo de un sitio web receptivo : agregue ancho (agregue un punto de interrupción en) basado en diferentes dispositivos en consultas de medios, por ejemplo, @media solo pantalla y (ancho máximo: 500 px) significa que la ventana es menor que 500 px

para todos los dispositivos móviles, puede usar el ancho máximo básico: 768 px;

(para paisaje y retrato necesitamos agregar dispositivos de ancho sabio)

3. Cómo probar un sitio web receptivo :

Use la herramienta de prueba de sitios web receptiva en línea. O

Use complementos para dispositivos móviles receptivos. O

Use el emulador provisto en el navegador para probarlo (da las ideas básicas para los puntos de ruptura y no el 100% del resultado).

Existen múltiples opciones para desarrollar y probar su sitio web receptivo.

Puede usar Bootstrap para el desarrollo de sitios web receptivos.

(Nota: definir el ancho en las consultas de medios es importante para un sitio web receptivo)

Hay muchos marcos web disponibles que ayudan a desarrollar un sitio web receptivo.

Bootstrap es el framework web HTML y CSS más popular y ampliamente utilizado. Todo lo que tiene que hacer es integrar este marco en su sitio web simplemente incluyendo su CSS minimizado en la carpeta CSS del sitio. Luego proporcione la etiqueta de referencia del enlace en el encabezado del sitio. O incluso mejor, simplemente agregue el script CDN a la referencia del enlace y el 60% de su sitio ya responde.

Bootstrap resolverá la mayoría de los problemas clave de respuesta, como puntos de interrupción, tabletas y diseños móviles. Sin embargo, viene con su propio diseño de columna de cuadrícula, por lo que tendrá que dominarlo para lograr el 40% restante.

Otros marcos son Skeleton, Foundation, Materialise y Genesis (para sitios de WordPress). ¡Buena suerte!

• Decida los puntos de ruptura en función de los diferentes dispositivos.
• Diseñe según estos puntos de quiebre.
• Use el emulador provisto en su navegador para probarlo.
• Revise todos los dispositivos en el emulador proporcionado en Google Chrome para tener una idea básica de dónde aplicar sus puntos de interrupción.
• Básicamente tiene un mínimo de tres puntos de ruptura que serán aplicables para todos los dispositivos.

Nota: puntos de interrupción (ancho requerido en px) y úselo en sus consultas de medios.

Bien, desarrollar un sitio web receptivo puede ser una tarea más fácil para un desarrollador. Simplemente contrate a cualquier profesional para que lo haga y no tomará más de quince días, pero hay algo que considerar antes de invertir en un desarrollo de sitios web receptivo. Una aplicación móvil Magento es siempre una opción preferida entre los compradores en línea en comparación con los sitios web receptivos.

Las aplicaciones móviles son más rápidas que los sitios web y vienen con varias características interesantes, como notificaciones push, administración de carritos en tiempo real, listado de productos destacados, pasarela de pago: PayPal, PayU, COD y muchos otros, que los convierten en la primera opción entre los usuarios.

Sugiero encarecidamente utilizar un emulador ya que la resolución se establece con precisión, ya que hacerlo manualmente deja la posibilidad de no obtener la resolución / tamaño correcto.

Si está trabajando con Bootstrap, verifique su cuadrícula y qué clases está utilizando para definir los puntos de ruptura en las columnas.

Iría con el emulador, he encontrado que está más cerca de lo que mostrará un dispositivo real que simplemente cambiar el tamaño del navegador.

Dicho esto, nada supera probarlo en dispositivos reales. El emulador solo puede hacer mucho, y hay momentos en que un dispositivo real se mostrará de manera diferente al emulador. Hubo varias veces en las que me habría perdido un error evidente si no hubiera revisado el sitio en un dispositivo real.