Las tecnologías mejoran constantemente, los teléfonos inteligentes y las tabletas son cada vez más modernos y los usuarios son cada vez más móviles. Actualmente, el número de audiencias desde dispositivos móviles ha superado al de usuarios desde ordenadores personales. No en vano esto ha dado lugar a toda una tendencia de sitios para dispositivos móviles.
Por ejemplo, si abre un sitio web normal (sin diseño adaptable ni versión móvil) a través de un teléfono inteligente, lo más probable es que se abra en una forma que resulte inconveniente para el usuario. Aquellos. el contenido se mostrará completo, pero habrá desplazamiento horizontal, lo cual es malo.
1. Diseño de sitio web adaptable: ¿qué es?El diseño adaptable del sitio web es un diseño HTML en el que, dependiendo del tamaño de la ventana del navegador, el sitio se "transforma" en un formato fácil de usar.
Diferencias entre la versión móvil del sitio y la adaptativaNo confunda la versión móvil del sitio y el diseño adaptable del sitio. La versión móvil está ubicada en un subdominio separado y duplica completamente el contenido del sitio. Un sitio responsivo contiene las mismas URL de página, pero carga diferentes estilos CSS según el dispositivo, lo que le permite mostrar el sitio de una manera más conveniente.
2. Optimización SEO y diseño adaptativoLos buscadores actualmente tienen dos resultados diferentes (son muy similares). Uno para usuarios de PC y otro para dispositivos móviles. Si el sitio no está optimizado para dispositivos móviles, esto se considera un factor negativo y la posición del sitio se reducirá en 2-3 (a veces más). Al mismo tiempo, sería lógico que se redujeran las posiciones sólo de la versión móvil, pero la práctica también muestra que las posiciones de la versión principal del sitio también se deterioran.
Esta desigualdad puede explicarse por el hecho de que es más probable que los motores de búsqueda agreguen factores de comportamiento de dispositivos móviles y de escritorio. Como resultado, naturalmente, si el sitio no está adaptado, su PF será peor y esto arrastrará hacia abajo la versión principal del sitio.
3. Cómo comprobar la capacidad de respuesta de un sitio webPuede verificar la capacidad de respuesta de un sitio solo abriéndolo en diferentes navegadores y cambiando el ancho de la pantalla. Pero hacer esto desde muchos dispositivos diferentes con diferentes resoluciones lleva mucho tiempo. También es poco probable que tengas docenas de teléfonos inteligentes y tabletas.
Existe una solución mucho más rápida y sencilla en Internet. Por ejemplo, puede instalar un complemento especial de Window Resizer en el navegador Google Chrome y usarlo para abrir el sitio en las resoluciones más populares.
Simplemente puede cambiar manualmente el tamaño de la ventana del navegador en ancho y ver el resultado. Firefox o Google Chrome tienen un diseño de navegador responsivo presionando Ctrl+Shift+M.
La condición más importante es garantizar que no haya desplazamiento horizontal ni complementos flash en la página.
Google fue el primero en introducir el factor de adaptabilidad en su algoritmo de búsqueda. Tiene un servicio gratuito especial que analiza cualquier sitio web para optimizarlo para dispositivos móviles. Yandex introdujo esta funcionalidad un poco más tarde.
Después de comprobarlo, hay dos opciones. O el sitio está optimizado o no lo está:
Por ejemplo, la prueba de capacidad de respuesta de Google:
Comprobando la adaptabilidad en Yandex:
Sólo una persona que entienda CSS y HTML puede crear un diseño de sitio web adaptable. Veremos los puntos principales, ya que no existe una receta única.
Para crear un diseño adaptable, debe crear hojas de estilo CSS en la tercera versión. Hay una diferencia entre 2 y 3, pero en este asunto es muy importante la falta de valores absolutos en los estilos. En resumen, todos los valores del tamaño del bloque son largo, ancho y dimensiones; todo esto se especifica como un porcentaje.
Sintaxis CSS @Media
@media device_type y|no|solo (media_features) ( ... Descripción de estilos... )Por ejemplo, escribamos las condiciones bajo las cuales los estilos funcionarán para dispositivos con un ancho de pantalla inferior a 800 px.
@media screen y (ancho máximo: 800 px) (... estilos...) NotaLos estilos deben escribirse secuencialmente desde alta resolución hasta pequeña, es decir, primero estilos generales y luego para tamaños "recortados", por ejemplo:
Pantalla solo @media y (ancho máximo: 1280 px) (...) Pantalla solo @media y (ancho máximo: 1024 px) (...) Pantalla solo @media y (ancho máximo: 800 px) (... )En las etiquetas del encabezado debes incluir la siguiente línea:
La metaetiqueta de la ventana gráfica dice que el ancho de la pantalla es el ancho del navegador y cada píxel corresponde a un píxel en el dispositivo. Si esto no se especifica, entonces no se implementará la adaptabilidad.
5. Ejemplos prácticos de diseño web adaptable 5.1. Adaptando palabras muy largasPor ejemplo, habrá una palabra muy larga en la página y luego, si la propiedad de desbordamiento no está configurada, esto puede provocar la aparición de desplazamiento horizontal. Para evitar esto, debes agregar las siguientes propiedades CSS a tu contenido:
.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; guiones : auto ; ) 5.2. Menú web adaptableLa barra lateral del sitio suele ocupar un ancho de entre 200 y 300 píxeles, lo que ocupa casi todo el ancho del navegador en dispositivos móviles. Por lo tanto, los menús desplegables se crean con mayor frecuencia utilizando un botón estándar en forma de tres trazos (esto ya se ha convertido en un clásico).
Puedes implementar esto en el sitio, pero tendrás que retocar un poco los estilos. Miremos todo paso a paso.
La situación cuando tenemos un menú y el contenido principal (no dibujé el encabezado ni el pie de página):
El código HTML para dicha estructura podría ser algo como esto:
cuerpo (margen izquierdo: 10%; ancho: 70%; borde: 1px sólido #eee;) #menú (ancho: 20%; alto: automático; flotante: izquierdo;) #content (ancho: 70%; alto: automático ; flotante: izquierda; borde izquierdo: 1px sólido #000; Título de la páginaContenido de página
Contenido de página
Contenido de página
Contenido de página
Convierte en la página a
La desventaja de este método es que con resoluciones pequeñas el menú ocupará casi todo el ancho del área, lo que significa que aparecerá un desplazamiento horizontal o, peor aún, todos los bloques pueden flotar.
Modifiquemos nuestro ejemplo de la siguiente manera. Si la resolución de la pantalla es inferior a 800 píxeles, el menú desaparecerá y aparecerá un botón especial para abrir el menú.
Aquí está el código html para el diseño adaptable con comentarios:
cuerpo (margen izquierdo: 10%; ancho: 70%; borde: 1px sólido #eee;) #menú (ancho: 20%; alto: automático; flotante: izquierda; pantalla: bloque;) #contenido (ancho: 70% ; altura: automático; flotante: izquierda; borde izquierdo: 1 px sólido #000; relleno: 1%) #mob_menu (pantalla: ninguno;) @media pantalla única y (ancho máximo: 800 px) (#menú (pantalla: ninguno) ; ) #mob_menu ( mostrar : bloquear ; ) #content ( claro : ambos ; ) ) función showmobmenu() ( if ( == "bloquear ") ( document.getElementById("menu").style.display = "none ") else ( document.getElementById("menu").style.display = "bloque " ) ) Expandir menú ↓Menú Título de la páginaContenido de página
Contenido de página
Contenido de página
Contenido de página
Reduzcamos el ancho de la pantalla a 700 píxeles (por ejemplo). Así se ve en la página.
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 distintos, dos dispositivos Android distintos: un Kindle y un Nexus 7. Utilizo estos dispositivos para probar mis desarrollos freelance, pero está claro que no es una selección exhaustiva. No hay ningún dispositivo iOS y, aunque se me considera uno de los primeros en adoptarlo, 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 fines de prueba, 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.
Ofrece trece ventanas de visualización diferentes, desde un gran monitor de escritorio hasta lo que se conoce como Crappy Android (para ser justos, también tienen una opción llamada Nicer 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 fuera 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.
Una característica interesante de este sitio es que para varios dispositivos existe una opción de "Vista verdadera", que muestra su sitio envuelto en el navegador Chrome asignado a ese 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 las 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 una versión móvil existente, 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. Cuantas más herramientas realmente útiles tengamos nosotros, los desarrolladores, mejor.
Frameworks como o, que facilitan y aceleran enormemente el diseño de páginas.
Implica una excelente visualización de una página web en todos los dispositivos y extensiones de monitor. Probablemente, no todos los diseñadores de diseño tengan un conjunto completo de dispositivos con todas las extensiones de pantalla posibles para probar su diseño. Esto no es sorprendente, porque hoy en día la tecnología no es barata.
Entonces. Comprar montañas de teléfonos móviles y tabletas no es una opción: nos arruinaremos. ¿Qué hacer? Para estas tareas se han desarrollado servicios de prueba de sitios web adaptativos. El principio de su funcionamiento es muy sencillo. La mayoría de las veces hay un marco de cierto tamaño donde se abre la página. El efecto es aproximadamente el mismo que cuando se ve en un dispositivo móvil. Me gustaría señalar que el servicio no siempre mostrará con precisión la visualización de la página en un teléfono o tableta. Al codificar, debe probar utilizando los servicios, pero una vez finalizado, si es posible, pruebe en los dispositivos más comunes.
Entonces. Estas son las mejores herramientas para probar sitios web responsivos.
Una herramienta para probar sitios web responsivos de Adobe. Para usarlo necesitas instalarlo en tu computadora.
El programa le permite sincronizar sus dispositivos a través de WIFI y ver el sitio tal como se mostrará en su dispositivo. Dispositivos actualmente compatibles con los siguientes sistemas operativos: iOS, Android, Kindle Fire.
Nunca ha sido más importante garantizar que su proyecto esté listo para cada tipo de usuario y dispositivo antes de lanzarlo. Si bien puede resultar físicamente difícil probar un diseño en cada dispositivo, existen algunas herramientas y aplicaciones que pueden ayudarle a simular diferentes escenarios de respuesta.
Con tantas herramientas gratuitas y premium disponibles, no hay razón para no probar su diseño responsivo antes de publicarlo en línea. ¡Solo asegúrese de utilizar esta información para muchos de los ajustes de diseño necesarios! Hoy te ofrecemos un conjunto de herramientas para probar el diseño responsivo.
1. Prueba de compatibilidad con dispositivos móviles de GoogleGoogle Mobile-Friendly Test es una de esas herramientas que de alguna manera se pasa por alto. Necesita que el diseño de su sitio cumpla con los estándares de Google para ayudar con la visibilidad de búsqueda, y es así de simple.
La herramienta es fácil de usar, simplemente ingrese una URL y vea cómo se clasifican sus páginas en dispositivos móviles. La mejor parte de esta herramienta es que identifica dónde su sitio puede estar lento o mostrarse mal en dispositivos móviles para que pueda corregir los errores.