Share
Recuerdo mi viaje inaugural en diseño web sensible; Usé una cuadrícula clásica, luché con un diseño flexible y abordé las consultas de los medios por primera vez. Al estirar y contraer la ventana del navegador se obtuvo una visión satisfactoria de mi diseño respondiendo a su entorno. Entonces lo probé en un móvil. No funcionó, estaba viendo una versión reducida del diseño de pantalla completa. La solución, como resultó, era simple ...
Nota: Este tutorial se publicó por primera vez en febrero de 2012, pero a menudo se usa como referencia en otros tutoriales (y las cosas han cambiado), así que sentí que justificaba una actualización..
Este tutorial le enseñará cómo usar la metaetiqueta de viewport, pero si necesita ayuda para crear un sitio web receptivo, hay muchos diseñadores para ayudarlo en Envato Studio. Estas son algunas de las mejores opciones:
Este proveedor del Reino Unido creará un diseño y desarrollo web personalizado basado en su marca, colores, requisitos de funcionalidad y las mejores prácticas de usabilidad. Su sitio web será único para su empresa y configurado para una conversión máxima.
Obtendrás:
Si puede manejar el desarrollo usted mismo y solo desea un diseño, puede elegir esta opción, que le dará un sitio web diseñado de una manera profesional. Esto es lo que obtendrás:
Este proveedor es un diseñador web independiente a tiempo completo, con más de 12 años de experiencia profesional en diseño web, diseño gráfico y diseño de interfaz de usuario UI / UX..
Obtendrá un elegante sitio web de una página diseñado teniendo en cuenta un comportamiento receptivo.
Si ninguna de estas opciones es para usted, o si prefiere aprender a hacerlo usted mismo, lea las instrucciones..
Si no lees nada más en esta publicación, toma un poco de consejo: Si está diseñando de manera flexible, use la metaetiqueta de viewport en su . En su forma básica, lo configurará para la tranquilidad de diseño entre dispositivos:
Vamos a usar un diseño de ejemplo que he batido juntos. Echar un vistazo; Verá cómo se reduce y aumenta a medida que modifica el tamaño de su navegador. También hay una única consulta de medios que hace que el texto sea más grande y le da un brillo al encabezado. # ff333e Color en pantallas más anchas. Encantador.
Así es como se ve en OSX Chrome:
Y así es como aparece cuando se aplasta la ventana del navegador:
Ahora veamos cómo se ve en un teléfono inteligente (en este caso, iOS Safari en un iPhone 4):
Lo primero que notarás es el rumbo rojo; un claro regalo de que no estamos mirando el diseño estrecho que podríamos esperar. En realidad estamos viendo una versión ampliada..
iOS Safari asume que una página web tiene un ancho de 980 píxeles, que se aleja para encajar todo el lote dentro del disponible (iPhone 4) de 320 píxeles. El contenido es entonces mucho menos legible, a menos que te acerques.
Como dicen, la suposición es la madre de todo ... algo, pero eso es exactamente lo que tienen que hacer los navegadores móviles si no los instruye específicamente. Cuando visite un sitio web a través de un navegador móvil, asumirá que está viendo una gran experiencia de escritorio y que desea ver todo, no solo la esquina superior izquierda. Por lo tanto, establecerá el ancho de la ventana gráfica en (en el caso de iOS Safari) 980px, todo en su pequeña pantalla..
Ingrese la etiqueta meta de la ventana gráfica, introducida por Apple, luego adoptada y desarrollada por otros.
Se parece a esto:
Dentro de contenido = "" puede ingresar una carga de valores delimitados por comas, pero vamos a centrarnos en los fundamentales por ahora.
Por ejemplo, si el diseño de su dispositivo móvil se presenta a propósito a 320px, puede especificar el ancho de la ventana gráfica:
Para diseños flexibles, es más práctico basar el ancho de su ventana gráfica en el dispositivo en cuestión, de modo que para hacer coincidir el ancho de su diseño con el ancho del dispositivo que ingresaría:
Para estar más seguro de que su diseño se mostrará como lo desea, también puede configurar el nivel de zoom. Esto, por ejemplo:
… Se asegurará de que al abrirlo, su diseño se mostrará correctamente a escala 1: 1. No se aplicará ningún zoom. Incluso podría ir más lejos y evitar que el usuario haga zoom:
Nota: Antes de aplicar el parámetro de escala máxima, considere si realmente debería evitar que sus usuarios se acerquen. ¿Pueden leer todo lo mejor posible??
Usar la metaetiqueta de la ventana gráfica de manera incorrecta puede dificultar que los usuarios con problemas visuales accedan a su sitio web
- El proyecto de accesibilidad
Estos valores juntos nos dan un gran valor predeterminado para trabajar con:
Veamos cómo afecta nuestro ejemplo.
Como puede ver, todo permanece en la escala correcta. El texto se está ajustando en lugar de disminuir, y nuestro asistente visual (el encabezado rojo) ha desaparecido..
Sombrero de punta a Jason por señalar esto en los comentarios. Al indicar que el ancho de su diseño es igual al ancho del dispositivo, se encontrará con problemas cuando un dispositivo se utiliza en horizontal. Eche un vistazo a cómo un iPhone 4 maneja nuestra demostración en paisaje:
El navegador se siente obligado a acercarse para que coincida con el ancho de la página..
Para solucionar esto, podríamos, como señala Jason, usar JavaScript para elegir condicionalmente con qué atributos de metatag ir, pero la solución más simple parece ser simplemente ignorar el anchura en total. Con solo configurar el escala inicial El ancho es inferido. Así es como nuestra nueva demostración simplificada aparece en el paisaje:
El metatag de la ventana gráfica fue la solución de Apple al problema. Fue adoptado rápidamente por otras plataformas, pero nunca fue presentado por el W3C. Microsoft sacó a la luz esto cuando eligieron que IE10 ignorara la etiqueta de la ventana gráfica en ciertas circunstancias. En su lugar, optaron por usar la Adaptación de Dispositivo CSS, que es en qué se apoya el W3C.
En resumen, las propiedades de viewport similares se definen dentro de CSS usando la regla @viewport, en lugar de dentro del HTML.
@viewport zoom: 1.0; ancho: ancho del dispositivo;
O, de acuerdo a nuestros nuevos no especifique el ancho del dispositivo Enfoque, podríamos configurar lo siguiente:
@viewport zoom: 1.0; ancho: ampliar a zoom;
Dado que es un trabajo en progreso, IE10 requiere la versión prefijada de la propuesta, que se parece a esto:
@ -ms-viewport width: extend-to-zoom; zoom: 1.0;
Es una solución mucho más elegante que el metatag, pero está muy lejos de ser totalmente compatible. Insértelo en su CSS ahora, para asegurarse de que su diseño sensible se comporte en el "modo snap" de IE10, y vigile su progreso en el futuro. Aquí es donde se dirige el control de la ventana gráfica..
Puede leer más sobre esto en el modo de ajuste IE10 y diseño responsivo de Tim Kadlec.
El diseño web responsivo no es solo para las personas que disfrutan viendo crecer y reducir su tamaño de los navegadores, sino que se ocupa de la mayor cantidad de dispositivos, pantallas y resoluciones posibles. Tirar la etiqueta meta viewport en su , más la regla @viewport en tu CSS cuando estás creando diseños flexibles y estás listo para comenzar.
También puede encontrar miles de plantillas y temas sensibles de alta calidad en ThemeForest, y una amplia gama de scripts, complementos y complementos en la categoría "responsive" en CodeCanyon.
Accentsconagua