Cómo probar el diseño responsivo de forma gratuita. Diseño responsivo usando script JavaScript Prueba de diseño responsivo
Hola queridos lectores del blog. No sorprende que el diseño adaptativo se esté volviendo cada vez más popular en la Internet rusa. Y, por supuesto, los maquetadores deben estudiarlo. Dado que el diseño responsivo pronto estará en casi todos los sitios web, porque cada vez más personas utilizan dispositivos móviles.
Y me gustaría decir que los sitios con él son mucho más convenientes para leer en dichos dispositivos que sin él.
Hoy quiero presentarte 5 servicios muy útiles y interesantes con los que podrás comprobar la adaptabilidad de tu sitio web.
Y entonces, vámonos.
5 servicios donde puedes comprobar la adaptabilidad de tu sitio web. www.responsivedesigntest.netUn buen servicio para consultar sitios. Existen muchas resoluciones de pantalla tanto para tabletas como para teléfonos.
mattkersley.comUn servicio sencillo para consultar un sitio web de Matt Kersley. También están disponibles todas las resoluciones populares de dispositivos móviles.
Un servicio genial que comprobará cualquier sitio. Me gustó mucho el diseño, así como la funcionalidad.
Servicio muy bonito y funcional. Incluso es posible comprobar cómo se verá el sitio en la televisión :-)
Del autor: "¡Deja de cambiar el tamaño de este navegador, pronto se borrará!" ¿Con qué frecuencia escuchas esto? Bueno, está bien, tal vez no tan a menudo, pero si desarrollas sitios web responsivos, sabes de lo que estoy hablando: cada vez que editas el DOM o CSS, arrastras el borde del navegador hacia adelante y hacia atrás, probando los cambios. y buscando imprecisiones.
En general, la mayoría de estos esfuerzos son un intento de imitar los tamaños de pantalla de diferentes dispositivos.
Si está realizando desarrollo empresarial, probablemente tenga muchos dispositivos proporcionados por la empresa para probar. Donde trabajo, tenemos iPads, iPhones, una o dos tabletas más, computadoras portátiles y de escritorio. Si no tienes ese lujo, tienes que usar lo que tienes a mano.
En casa tengo dos portátiles diferentes, dos Dispositivos Android: Kindle y Nexus 7. Utilizo estos dispositivos para probar mis desarrollos independientes, pero está claro que esta no es una selección exhaustiva. De nada dispositivos iOS, y aunque se me considera uno de los primeros en adoptar, no planeo comprar todos los teléfonos/tabletas/tabletas nuevas tan pronto como salgan a la venta.
Entonces, ¿qué debería hacer un desarrollador? Afortunadamente, existe un número cada vez mayor de herramientas basadas en navegador que simulan los tamaños de pantalla de una variedad de dispositivos. Por supuesto, diferentes herramientas vienen con diferentes conjuntos de características y diferentes niveles de eficiencia. Veremos algunos de ellos aquí.
Para realizar pruebas, tomé el primer sitio web verdaderamente responsivo que creé, PajamasOnYourFeet.com. Se basa en la plantilla Brownie HTML5, proporcionada de manera muy generosa y gratuita a la comunidad de desarrolladores en EGrappler.
¿Soy receptivo?¿Soy receptivo? – una vista previa instantánea y completamente sencilla de su sitio en términos de cómo aparecerá en cuatro dispositivos diferentes. Los cuatro son iOS y el desarrollador explica su elección en el sitio web. No ofrece ningún control ni selección, solo una pantalla muy simple y elegante. Ver dimensiones de la ventana:
Escritorio: 1600 x 992 px, disminuyendo según la escala (0,3181)
Computadora portátil: 1280 x 802 px, decreciente en escala (0,277)
Tableta: 768 x 1024 px, disminuyendo según la escala (0,219)
Móvil: 320 x 480 px, disminuyendo según la escala (0,219)
Para citar al desarrollador: “Esta no es una herramienta de prueba, es muy importante hacer esto en dispositivos reales. Pero es una herramienta para tomar capturas de pantalla rápidas (para mí) y brindar una oportunidad visual para “profundizar” en las reuniones con los clientes lo que usted quiso decir”.
deviceponsive es similar al sitio Am I Responsive? uno que muestra su sitio de manera simple y ordenada, pero que no tiene controles ni opciones disponibles en lo que respecta a los dispositivos. Todos ellos se muestran simultáneamente en una página larga. Tiene una propiedad interesante: puedes modificar el encabezado editando su color de fondo e insertando tu propio logotipo, y luego "imprimirlo". De esta manera, en cierto sentido, puede marcar su sitio cuando muestra capturas de pantalla al cliente. Dispositivos y tamaños de pantalla simulados en este sitio:
Macbook - 1280 x 800
iPad (vertical) - 768 x 1024
iPad (apaisado) - 1024 x 768
Kindle (retrato) - 600 x 1024
Kindle (apaisado) - 1024 x 600
iPhone (orientación vertical) - 320 x 480
iPhone (apaisado) - 480 x 320
Galaxia (retrato) - 240 x 320
Galaxia (paisaje) - 320 x 240
Como ocurre con la mayoría de herramientas similares, las barras de desplazamiento aparecen en dispositivos pequeños. No aparecerán en un dispositivo real, pero para poder desplazarse por la vista de prueba en un dispositivo no táctil debes hacer algunas concesiones.
Al igual que la prueba adaptable al dispositivo, muestra su sitio en varios dispositivos, pero en lugar de mostrarlos todos a la vez en una página, usted elige qué dispositivo ver desde un menú simple en la parte superior de la página. Al navegar por este sitio en una computadora portátil de tamaño mediano, descubrí que reducir la página funciona muy bien, permitiéndole ver el sitio completo dentro de la ventana del dispositivo bajo prueba.
Aquí se ofrecen trece ventanas de visualización diferentes, desde un monitor grande. computadora de escritorio al llamado “Android cutre” (la verdad es que también tienen una opción llamada “ Android es mejor"(Mejor Android).
Una vez más, Firefox tropieza un poco en este sitio. Observe que en la captura de pantalla, entre el encabezado verde y el área de contenido con fondo blanco, solo hay una barra azul donde debería aparecer el control deslizante de la imagen.
Es muy similar a los dos anteriores, y lo único que diferencia a responsive.is de ellos es la suave animación de la pantalla de un dispositivo al siguiente, así como una superposición translúcida que muestra el espacio del sitio cayendo de la ventana gráfica. .
Las únicas opciones de dispositivo disponibles aquí son las automáticas, que llenan la ventana de su navegador y muestran el sitio como lo vería si lo visitara: Escritorio; Tableta (orientación horizontal); Tableta (orientación vertical); Smartphone (orientación horizontal) y Smartphone (orientación vertical), no se proporcionan las dimensiones en píxeles.
Una vez más, varias características y opciones diferentes distinguen a Screenqueries de otros sitios. Hay 14 teléfonos y 12 tabletas con un elemento separado para cambiar los modos vertical y horizontal. Estos se muestran en una cuadrícula de píxeles numerados, con las dimensiones mostradas en la parte inferior derecha de la pantalla de prueba. Los bordes de la pantalla se pueden arrastrar para que puedas probar tamaños personalizados. Arrastre o haga clic sobre el área de prueba y el fondo se volverá gris, con una apariencia menos desordenada.
característica interesante este sitio: para varios dispositivos existe una opción de "Vista verdadera", que muestra su sitio envuelto en el navegador Chrome asignado a este dispositivo. Desafortunadamente, y ya estoy acostumbrado a esto, Firefox no puede mostrar el control deslizante de imágenes del sitio de prueba. No te preocupes, realmente prefiero Firefox cuando se trata de navegadores, pero afortunadamente tenemos opciones.
Screenfly realmente aumenta el factor de usabilidad. Ofrece nueve dispositivos más grandes que tabletas, desde una computadora portátil de 10 pulgadas hasta una computadora de escritorio de 24 pulgadas, cinco tabletas, nueve teléfonos inteligentes, tres tamaños de TV y una opción de tamaño de pantalla personalizado. Cualquier opción que seleccione se puede rotar en orientación vertical u horizontal usando un control separado en el menú. Puede elegir si desea permitir el desplazamiento o no y generar un enlace para compartir con solo hacer clic en un botón.
El sitio es útil de forma proactiva en la forma en que presenta información sobre el tamaño de los píxeles. Cada dispositivo en el menú se muestra con un nombre y dimensiones en píxeles, el tamaño de la ventana de su propio navegador se muestra cerca de la esquina superior derecha de la ventana y las dimensiones de la opción seleccionada se muestran en el pie de página debajo de la pantalla junto con el URL del sitio que se está probando. Esta pequeña característica facilita la documentación de capturas de pantalla y el intercambio de información con los clientes.
Todo lo anterior ya la habría convertido en una herramienta ideal, pero los desarrolladores de Screenfly encontraron la oportunidad de convertirla en una herramienta simplemente de primera clase y le proporcionaron una propiedad de servidor proxy. Citando su sitio web: “Screenfly puede utilizar un servidor proxy para hacerse pasar por dispositivos mientras visualiza su sitio web. El proxy simula la cadena de agente de usuario de los dispositivos que selecciona, pero no el comportamiento de esos dispositivos". Todas las demás herramientas cubiertas aquí tratan exclusivamente con CSS. Screenfly es el único que permite realizar pruebas basadas en la cadena del agente de usuario.
Habiendo probado de esta manera un sitio que creé con el existente version móvil Puedo decir que los resultados fueron muy buenos. Todo se mostró exactamente como esperaba y las funciones se pudieron probar. Hay que decir que probar cadenas de agentes de usuario se ha vuelto tradicional, pero este sitio se creó hace mucho tiempo y la propiedad proxy resultó ser una adición muy útil.
Como puede ver, hay muchos recursos disponibles para probar sitios web responsivos. Se diferencian en propiedades únicas; Los sitios que utilice dependerán de sus preferencias y requisitos personales, y trato de animarle a explorarlos y experimentar con ellos. Cuanto más tengamos los desarrolladores realmente herramientas útiles, todo lo mejor.
Una tienda online necesita estar optimizada para dispositivos móviles. Este problema se soluciona mediante el diseño adaptativo, que permite que el sitio se muestre correctamente en cualquier plataforma. Sin embargo, la implementación de un diseño responsivo conlleva un conjunto estándar de dificultades. Enumeremos los 8 problemas más comunes típicos de los sitios de compras online.
Descuidar el análisis del comportamiento de los visitantesLa prisa por ingresar al segmento móvil obliga a los minoristas a diseñar un sitio web sin realizar análisis serios del comportamiento de los visitantes. El análisis del comportamiento de los visitantes es la etapa de preparación más importante, que le permite identificar los dispositivos móviles más populares y optimizar el sitio para ellos primero. Analytics ayuda a determinar la acción del usuario más "popular", por ejemplo, ampliar la imagen de un producto; muestra la tasa de conversión de los visitantes móviles, etc. Estos datos proporcionarán información sobre las preferencias de comportamiento del usuario y ayudarán a satisfacer las expectativas de la audiencia móvil. Análisis tráfico móvil es necesario llevar a cabo la implementación sistemática y consistente de los resultados, finalizando y optimizando el sitio para satisfacer las necesidades de los clientes.
Diseñar una tienda de escritorioNormalmente, la versión de escritorio de una tienda online se rediseña para pantallas móviles, aunque es más lógico coger la pantalla pequeña de un dispositivo móvil y luego escalarla al escritorio. Los minoristas a menudo no se dan cuenta de los problemas técnicos que implica llevar un sitio web diseñado para una computadora de escritorio al tamaño de un teléfono inteligente. 
Diseño inicial para pantallas móviles, te centras en la experiencia del usuario móvil. Como resultado, le resultará más fácil diseñar para ambos canales: escritorio y móvil.
Probar el diseño móvil de una tienda en línea es una etapa obligatoria del lanzamiento, pero muchos propietarios a menudo la descuidan y la lanzan sin probarla. Como resultado, en la versión en vivo del sitio para dispositivos móviles, pueden aparecer errores incluso durante el proceso de compra y realización de un pedido.
Las deficiencias del diseño adaptativo se identifican fácilmente mediante pruebas preliminares de una tienda en línea, pero muchos vendedores no tienen los recursos para ello. Para reducir el riesgo de perder dinero, pruebe las rutas clave de los usuarios en el sitio en los principales navegadores: Chrome, IE, Firefox, Safari y sistemas operativos– Windows, Mac OS, Android, IOS en populares dispositivos móviles. Pruebe cada vez que realice cambios; servicios como BrowserStack o Viewport Resizer pueden ayudar a reducir el tiempo de prueba a varias horas.
Pequeños elementos para pantallas de móvilesEn un esfuerzo por ocupar más espacio en la pantalla de un teléfono inteligente, los propietarios de tiendas en línea escatiman en el tamaño de sus botones de “llamado a la acción”. No obligue a los usuarios a hacer zoom para hacer clic en el botón Comprar y no coloque elementos pequeños demasiado juntos, de lo contrario sus usuarios elegirán ir a un sitio más conveniente. Diseñe interfaces con elementos de navegación grandes y tamaños de botones de llamada a la acción.
Velocidad de carga de página lentaAl público móvil le encantan los sitios rápidos y los tiempos de carga mínimos. Evalúe los componentes de su paginas moviles– imágenes, botones, texto, scripts – deben estar optimizados para dispositivos móviles. Google tiene en cuenta el tiempo de carga de la página en sus SERP y clasifica los sitios móviles y les da preferencia en la parte superior, de modo que los sitios "ligeros" obtienen una importante ventaja adicional.
Separe el contenido en diferentes pestañas; por ejemplo, la página de un producto puede contener solo una imagen básica, una descripción, un precio y un botón "Comprar". Las reseñas y videos de los clientes se pueden colocar en una pestaña separada y reducir el "peso" de la parte principal de la página. Además del contenido, optimice otros elementos que afectan la velocidad de carga: archivos CSS, imágenes y scripts, envíe solo los datos necesarios. Las herramientas que reducen el tamaño de los archivos de recursos y su tiempo de carga te ayudarán con esto: Uglify o JSCompress.
Recortar contenido para usuarios de dispositivos móvilesA menudo, los desarrolladores ocultan parte del contenido para que la carga en dispositivos móviles sea más rápida. Sin embargo, a menudo el tamaño de la página no se reduce y el contenido simplemente no se muestra al usuario. Su tienda debería poder generar una página dinámicamente, reduciendo el peso de la página y los tiempos de carga para los visitantes móviles. Además, ofrecer menos contenido a los usuarios de dispositivos móviles es malo e impacta negativamente en la experiencia del consumidor. Normalmente, durante el proceso de compra utilizan diferentes dispositivos, alrededor del 90% de los compradores online hacen esto. Limitarlos a métodos de diseño responsivo es un gran error.
Admite imágenes en una sola resoluciónUn buen sitio web con un diseño responsivo cambia automáticamente la resolución de las imágenes según el tipo de dispositivo; las imágenes pesadas aumentan el tiempo de carga. Hay varias formas de ajustar automáticamente el tamaño de las imágenes para que se ajusten. dispositivo específico. Las imágenes “flexibles” (imágenes fluidas) son un método basado en CSS que le permite comprimir y estirar una imagen dependiendo del ancho del elemento que la contiene, o un elemento HTML5 que le permite cargar una imagen del tamaño requerido para cada tipo de dispositivo.
Correos electrónicos "que no responden"Sucede que todo está bien con el sitio en sí, el diseño responsivo funciona bien en computadoras de escritorio y dispositivos móviles. Pero los correos electrónicos no responden y los usuarios de dispositivos móviles tienen que luchar para verificar los detalles del pedido o desplazarse por una lista interminable de productos recomendados para llegar a sus compras completadas. 
Los correos electrónicos son un punto de contacto clave con el cliente, así que integre un diseño de correo electrónico responsivo en su estrategia móvil. Diseñe y pruebe sus cartas y boletines; las plantillas de cartas deben ser "livianas" y contener solo información importante.
Con el desarrollo de las tecnologías web, también aumentan los requisitos para el desarrollo web. Los desarrolladores web, los diseñadores de diseño o, como se les llama hoy en día, los desarrolladores frontend, son los que sienten la mayor presión.
En este artículo hablaremos un poco sobre el diseño adaptativo, ya que este “truco” ahora es muy caro. Cuando se trata de diseño adaptativo, los diseñadores de diseño de cualquier nivel miran a los clientes o gerentes de proyecto, por decirlo suavemente, con enojo, porque entienden lo difícil que es.
Mucha gente empieza a confundir el diseño adaptativo con el diseño flexible; este es un error muy común entre los diseñadores de diseño novatos. ¿Cuál es la diferencia que preguntas?
Primero, para que te quede claro y por así decirlo, pongamos todos los puntos y miremos qué tipos de diseño hay.
Hay 4 tipos de diseño:
Consideremos todos los tipos con más detalle.
1. Diseño fijo
Los bloques no cambian su ancho. En monitores de baja resolución, aparece una barra de desplazamiento horizontal.
#temnyi, #svetlyi ( ancho: 440px; )
2. Diseño de goma
Los bloques cambian su ancho según el tamaño de la ventana del navegador. Puede tomar valores máximos y mínimos (propiedad de ancho máximo). Pero no puedes pasar del 50% al 100% a medida que la pantalla se hace más pequeña.
#temnyi, #svetlyi ( ancho: 50%; )
3. Diseño adaptable
Implementado usando @media o scripts. Personalizado para dispositivos conocidos específicos (320, 768, 1024, etc.). Cualquier cambio se produce a tirones, después de alcanzar uno de los niveles especificados. Definitivamente adecuado para
#temnyi, #svetlyi ( ancho: 430px; ) @media (ancho máximo: 1220px) ( #temnyi, #svetlyi ( ancho: 380px; ) ) @media (ancho máximo: 1120px) ( #temnyi, #svetlyi ( ancho : 325px; ) ) @media (ancho máximo: 680px) ( #temnyi, #svetlyi ( ancho: 200px; ) )
4. Diseño responsivo
Esta es una combinación de diseño fluido y adaptable. El más difícil de implementar. Pero el resultado es el más aceptable. Es seguro decir que el sitio se adaptará a cualquier dispositivo.
#temnyi, #svetlyi ( ancho: 50%; ) @media (ancho máximo: 1006px) ( #temnyi, #svetlyi ( ancho: 100%; ) )
Entonces hablamos de 4 tipos de diseño de sitios web. Ahora ha llegado el momento de nuestro milagroso script de diseño adaptativo. Espero no tener que explicar nada, el guión es bastante simple, solo decimos que cuando cambies algún bloque se mezclará en alguna parte y listo. Por supuesto, esto también es posible a través de estilos CSS, pero es necesario conocer todos los métodos; a veces, en algunos lugares, algunos no funcionarán y otros serán perfectos.
Guión de diseño adaptable:
/* Creemos una variable en la que pueda colocar clases monogest, para usarlas cómodamente en el código. Es decir, aquí los detecta una vez y listo, ¡y no antes de cada muestra! esta es una característica útil */ var my = ( ventana: $(ventana) ); /*En realidad, la función en sí*/ $(window).resize(function () ( /*Una variable que determina el ancho de la ventana y la coloca en la variable de ancho*/ var width = my.window.width( ); /*condición de transformación de ventana, es decir, una condición que se ejecuta cuando el ancho de la ventana alcanza un cierto tamaño */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
Eso es todo. Si tienes alguna duda, escribe en los comentarios, ve a
