Diseños web receptivos para pantallas de dispositivos móviles Introducción, sugerencias y ejemplos
Los diseñadores lo tienen más difícil ahora que antes. No solo tenemos que diseñar dispositivos fijos, sino también dispositivos móviles como la tableta y los teléfonos inteligentes, y como estamos hablando de muchos tamaños y resoluciones de pantalla diferentes, es una tarea enorme. A la luz de esta, diseño web adaptable Podría ser la mejor solución. Ofrece más que una simple plantilla móvil; en cambio, todo el diseño de su sitio está diseñado para ser lo suficientemente flexible como para adaptarse a cualquier resolución de pantalla posible.
Con un esquema de diseño tan fluido, hay ventajas obvias y desventajas. Considere mis ejemplos a continuación para ver cómo el diseño web sensible puede hacer que la transición a dispositivos móviles sea más fluida.
Cómo funciona el diseño responsivo
Cuando uso la palabra “sensible” en términos de diseño web me refiero a que todo el diseño responde en función de la resolución de la pantalla del usuario. Imagina este escenario: estás leyendo un sitio web en una tableta y luego cambias a otro dispositivo por una razón u otra. La ventana del navegador ahora se redimensiona. Un diseño de diseño web sensible contará con esquemas y un diseño que se descomponga y reinvente a sí mismo. Desde una perspectiva de usabilidad esta es una técnica brillante..
El diseño responsivo consiste en crear una experiencia homogénea independientemente del tamaño de la pantalla del navegador o dispositivo. He encontrado el ejemplo perfecto de 'A List Apart' para ilustrar mi punto, que también incluye imágenes dinámicas. El ancho se establece en CSS utilizando porcentajes para casi todos los elementos de contenedor interno. Los sitios web más grandes también responden bien a la eliminación de contenido dinámico como JavaScript cuando no es compatible.
¿Por qué diseñar para móviles??
Se ha vuelto evidente que cada vez más usuarios se están moviendo, y no solo para navegar en la web. Las Tablet PC han comenzado a cambiar en contexto cuando los usuarios están en línea en el aula. Diseñar para dispositivos móviles es ciertamente un requisito en los estándares web actuales. El único problema es elegir su método de desarrollo y dirigirse a su audiencia de manera adecuada.
Cuando comienzas a codificar para resoluciones de pantalla específicas, terminas con demasiadas hojas de estilo para tratar. Las consultas de medios en CSS3 se pueden usar para crear diseños específicos de iPhone tanto para la vista vertical como horizontal. Ya que puede predeterminar la densidad de píxeles, es fácil renovar cualquier plantilla HTML para móviles.
(Fuente de la imagen: bradfrostweb)
Pero cuando se codifica un diseño para un diseño responsivo, los aspectos móviles se cuidan de forma predeterminada. A los usuarios de escritorio y móviles se les ofrecerá una experiencia similar y no tendrá que preocuparse por las propiedades CSS externas. La única investigación que deberías realizar es planificar la pantalla de visualización más pequeña posible. Los datos de tráfico de Google Analytics pueden ser muy útiles para esto..
Es probable que su sitio web no funcione al 100% en todos los dispositivos que ejecutan todos los navegadores. Pero puede apuntar a una mayoría basada en el ancho promedio de la pantalla. Los modelos de iPhone más antiguos utilizan una resolución de pantalla de 320 × 480 que no es tan increíble. Yo dispararía para un ancho mínimo de 240px, o incluso más pequeño si puedes ajustarlo.
Eliminar el zoom predeterminado
Si ha pasado algún tiempo navegando por la Web en un teléfono inteligente, notará cómo se amplían los sitios web para mostrarlos completamente en la pantalla. Esto es para la conveniencia del usuario ya que la mayoría de los sitios web no tienen una contraparte móvil, por lo tanto, el diseño completo es la apuesta más segura.
Pero cuando entras en la construcción de un diseño móvil sensible, el zoom automático puede desordenar los elementos de diseño. Específicamente, las imágenes y el contenido de navegación pueden aparecer pequeños o demasiado grandes en su diseño. Hay una etiqueta meta especial que puede agregar al encabezado del documento que se restablece en la mayoría de los dispositivos Android y iPhone.
Esto se conoce como etiqueta meta viewport que configura algunas variables personalizadas dentro del contenido. Apple tiene una página de documentación con respecto a algunas otras metaetiquetas que debería examinar, aunque están dirigidas específicamente a sitios web en iOS. los escala inicial el valor es importante, ya que esto configura por defecto su sitio web a un zoom completo del 100%.
El último valor para escalable por el usuario eliminará esta funcionalidad de zoom por completo para que el usuario no pueda cambiar el tamaño del diseño. Esto bloqueará el diseño en un tamaño basado en el ancho completo del dispositivo. ¡Tenga en cuenta que incluso si deshabilita la funcionalidad de zoom, un buen diseño sensible se adaptará cuando realice la transición de vertical a horizontal en cualquier dispositivo! Pero tiene sentido bloquear un diseño sensible y eliminar las opciones de escalamiento genérico.
Escalamiento dinámico de imágenes
Las imágenes son otra faceta importante de prácticamente todos los sitios web. Es posible que los usuarios móviles no busquen transmitir videos, pero las fotos son una historia completamente diferente. Estos también son los mayores culpables cuando se trata de diseños que se salen del modelo de caja..
img ancho máximo: 100%;
La regla estándar para CSS es aplicar una propiedad de ancho máximo a todas las imágenes. Dado que siempre se establecerán al 100%, nunca notará distorsiones. Cuando el usuario cambie el tamaño de su ventana del navegador más pequeña de lo que su imagen puede manejar, se reajustará automáticamente al 100% de ancho a escala reducida. El problema es que Internet Explorer no puede comprender esta propiedad, por lo que deberá armar una hoja de estilo específica de IE usando ancho: 100%;.
Imágenes flexibles también son posibles si usas plugins de JavaScript o jQuery. Hay algunos desarrolladores realmente inteligentes que han dedicado tiempo para crear contenido de imagen increíblemente sensible. Este hilo es solo uno de los muchos en Stack Overflow que presenta un enfoque extravagante pero conveniente para resolver los errores de IE6 / 7.
Personalmente recomendaría atenerse al cambio de tamaño natural de la imagen CSS. Si su sitio web se ejecuta en un navegador móvil con JavaScript habilitado, lo más probable es que también sea compatible con CSS. Si realmente desea profundizar más, consulte este artículo de 24 maneras Imágenes para diseños adaptativos ...
Tocar Diseños
Los desarrolladores web pueden olvidar que los usuarios móviles ya no están usando teléfonos con teclado como los BlackBerry. La mayoría de los teléfonos inteligentes de hoy en día usan interfaces de pantalla táctil, lo que representa un escenario diferente de las configuraciones de mouse y teclado.
Como tal, deberá considerar soluciones alternativas en elementos móviles. Los menús desplegables pueden funcionar mejor cuando se muestran como un solo menú en el lado derecho. La mayoría de los usuarios pueden tocar los enlaces en el lado derecho más fácilmente que la izquierda, pero cualquiera de las dos columnas funciona para aliviar el espacio. Al usar sangrías de margen, es fácil identificar la jerarquía de enlaces sin requerir ningún código jQuery.
También es una buena práctica aumentar el tamaño de estos enlaces de navegación. Los usuarios de dispositivos móviles no pueden darse el lujo de tener pantallas grandes en computadoras de escritorio o incluso en computadoras portátiles. Debe mantener el texto grande, por adelantado, con capacidad para tocar y legible a toda costa. Es posible que incluso desee cambiar el tamaño si el usuario cambia entre vista vertical y horizontal, una repetición bastante común al navegar por la web móvil..
Diseños CSS personalizados
En general, es mejor adaptar su diseño y permitir la degradación natural de su contenido. Si tiene una barra lateral y un área de contenido, debe establecerlos en anchos de porcentajes o ems, cualquier cosa que cambie de tamaño con la ventana del navegador. Si aplica un ancho mínimo esto eventualmente romperá parte del diseño; Así que ahora el contenido de la barra lateral se muestra sobre el contenido de la página..
(Fuente de la imagen: Pepperson)
Cuando considera cómo afecta esto al diseño general, es mucho más fácil desarrollar hojas de estilo externas. Sin embargo, es probable que se encuentre con resoluciones de pantalla que son demasiado pequeñas para que su diseño se pueda representar. Este es el escenario perfecto para agregar propiedades CSS personalizadas para eliminar partes de la página, o reformatear el contenido por completo.
Activar / desactivar contenido adicional
Los ejemplos de bloques de contenido grandes incluyen formularios web, menús dinámicos, controles deslizantes de imágenes y otras ideas similares. En lugar de eliminar por completo estos elementos a medida que el diseño se hace más pequeño, ¿por qué no simplemente esconderlos en un “minimizado” contenido div? Puede usar CSS o JavaScript para realizar las ediciones, pero en última instancia probablemente necesitará algo de código JS para crear un botón de alternar.
Esta alternativa es perfecta para mantener su página de inicio dinámica y llena de medios web enriquecidos. En lugar de eliminar por completo la navegación desplegable o reorganizar la estructura de la página, puede ocultarla dentro de un div de contenido. Si el usuario desea mostrar sus enlaces, toca un botón para abrir / cerrar el menú..
Este formato es simple, intuitivo y fácil de trabajar en dispositivos con pantalla táctil. Dentro de la división puede colocar cada uno de los menús desplegables uno al lado del otro en un formato de columna. A medida que la ventana se redimensiona aún más, se caerán naturalmente debajo de la otra y aumentarán la altura de la página. Sin embargo, la opción de colapsar todo el menú es fácilmente alcanzable y con solo un toque de distancia. Este div toggle también es perfecto para los controles deslizantes de imagen en cooperación con el cambio de tamaño dinámico de fotos.
Uso de consultas de medios
Si una pantalla móvil rompe su diseño de 2 o 3 columnas, terminará con cada una de las áreas de contenido apiladas una encima de la otra. Todo el sitio parece sangrar y puede resultar muy confuso sin áreas de bloque distinguidas. Una mejor idea es agregar un borde inferior en cada columna, solo para dispositivos móviles, usando una hoja de estilo externa como mobile.css.
Con estos nuevos estilos su contenido se divide en secciones divisibles. El atributo de medios anterior está especialmente diseñado para apuntar a dispositivos iPhone más antiguos en vista horizontal. Pero también se aplicará a dispositivos con pantallas de menos de 480 píxeles. Use esto para su ventaja para que pueda determinar en qué punto del diseño “se rompe”.
Hay algunas opciones más que puede usar para detectar la orientación del dispositivo. Esta fantástica guía en medios CSS puede darle algunas ideas. Además, el nuevo proyecto móvil 320 y superior ofrece una plataforma para CSS móvil @medios de comunicación estilos Estos se pueden incluir directamente en el mismo archivo mobile.css y aplicar reglas para muchos dispositivos diferentes.
/ * Smartphones (vertical y horizontal) ----------- * / @media solo pantalla y (min-device-width: 320px) y (max-device-width: 480px) / * Styles * / / * Smartphones (horizontal) ----------- * / @media solo en pantalla y (mínimo ancho: 321px) / * Estilos * / / * Smartphones (retrato) ---- ------- * / @media solo pantalla y (ancho máximo: 320 px) / * Estilos * / / * iPads (retrato y paisaje) ----------- * / @ pantalla de solo medios y (min-device-width: 768px) y (max-device-width: 1024px) / * Styles * /
(Fuente: Hardboiled CSS3 Media Queries)
Herramientas útiles
- Skeleton - Beautiful Boilerplate para diseño móvil responsivo
- Pasando de adaptativo a totalmente responsivo
Escaparate: hermosos diseños responsivos
Espero que estos consejos y técnicas de diseño lo alienten a desarrollar diseños con capacidad de respuesta no solo para pantallas de dispositivos móviles, sino para cualquier dispositivo común con navegación web. Para mantener el flujo de los jugos creativos, he reunido una pequeña muestra de diseños web móviles sensibles. Asegúrese de revisar algunas de las características más exclusivas y comparta sus opiniones sobre el diseño o el tema en el área de discusión..
colgando de la luna
Hoteles Macdonald
Trucos CSS
Feliz Cog
Teixido
CSS Wizardry
Arquitectos de la informacion
ARTE = TRABAJO
Diseño web duro
Sony USA
Amistoso para el futuro
No podemos dejar de pensar
Trabajos autenticos
Diseño colbow
320 y más
Horquilla CMS
El bit feliz
Pulpa eléctrica
Foster Props
Plexical
Tortas Preeti
Más peligros
Centro de Información Odontológica.
ribot - diseño de interfaz
Hola pescador
Cumbre de los mercadólogos sociales
William Csete
Robot lanudo
Meltmedia
Manténganse al tanto!
En el post de mañana estaremos mostrando algunos. temas de WordPress gratis y sensibles Usted puede descargar para su uso. Asegúrate de sintonizar para eso.
