Si ha ignorado las plataformas móviles en el pasado, puede ser intimidante para finalmente dar el salto y comenzar a admitir la navegación móvil en sus sitios existentes. Hay mucho que aprender, un millón de técnicas para elegir y una cantidad ilimitada de trabajo que podría poner en proyectos existentes.
Una pregunta que los diseñadores y propietarios de sitios siempre quieren saber es: "¿Cómo puedo agregar rápidamente el soporte móvil?" A veces, no tiene el presupuesto para comenzar desde cero y aún así desea un mínimo de bondad móvil. Hoy te mostraré cinco cosas que puedes hacer para que tu sitio sea más compatible con dispositivos móviles.
Este artículo es parte de nuestra serie sobre "mirar más allá del diseño de escritorio", presentado en colaboración con Heart Internet VPS.
Use un diseño fluido
Diseños fluidos han existido desde hace años. Mucho antes de que surgiera el diseño de respuesta tal como lo conocemos hoy, varios diseñadores y desarrolladores web consideraron esta técnica como la solución al problema de los tamaños de múltiples vistas.
Crear diseños fluidos es bastante fácil, todo lo que tienes que hacer es eliminar los anchos estáticos a favor de los porcentajes basados en el ancho en tu CSS. Entonces, en lugar de una columna con un ancho expresado de 350 px, puede establecerlo en 30%. Esta configuración de ancho automáticamente tomará en cuenta el tamaño de la ventana gráfica y establecerá el ancho al 30% de ese total. Entonces, si la ventana de su navegador tiene un ancho de 900 píxeles, el ancho de la columna será de 270 píxeles.
Entonces, ¿cómo lograr esto en la naturaleza? El truco es entender las matemáticas requeridas. Usted sabe que está comenzando con el 100%, por lo que, por ejemplo, un diseño de cinco columnas, podría tener la tentación de establecer cada columna en 20% de ancho (20 * 5 = 100). Sin embargo, esto resultaría en que sus columnas llenen todo el ancho disponible sin espacio entre ellas. Por lo general, querrá agregar algunos márgenes, que consumirán algo de ese ancho.
Lo que debe hacer es calcular cuánto margen desea aplicar a cada columna, luego multiplique esa cantidad por el número de columnas para descubrir el margen total. Finalmente, divides las columnas en lo que queda. Normalmente instalo algo en Instacalc para averiguar todos los números para mí.
Aquí puede ver que he configurado un diseño de 5 columnas con 4% de márgenes en cada columna (dos a la izquierda, dos a la derecha). Haga clic en la imagen de arriba para ir a esta calculadora donde puede modificar estos números usted mismo. Una vez que se ingresan estos dos valores, el resto se calcula por nosotros.
El margen del cuatro por ciento por cinco columnas equivale al veinte por ciento de nuestro ancho para los márgenes, dejando el ochenta por ciento restante para las columnas. El ochenta por ciento de ancho dividido por cinco columnas equivale a un dieciséis por ciento de ancho por columna.
Independientemente del tamaño de la ventana del navegador, estas proporciones se mantendrán.
Hacerlo con sass
Si desea una manera de configurar esto fácilmente en su CSS, podría usar Sass para averiguar todas las matemáticas para usted. Aquí hay una mezcla que realiza todas las operaciones necesarias, simplemente le pasa el número de columnas y el margen para cada columna.
Para implementar esta combinación, utilice una declaración de inclusión seguida del nombre de la combinación y los parámetros que acabamos de mencionar. Aquí hay un ejemplo que distribuye automáticamente cuatro columnas con un margen de 4% en cada columna.
El CSS compilado coloca un ancho de 21% en cada columna con un margen de 2% en los lados izquierdo y derecho. Esto realmente muestra la utilidad de preprocesadores como Sass y LESS.
Usar un marco
Si tiene cuidado de crear su propio diseño fluido desde cero, hay muchos marcos CSS disponibles que hacen todo el trabajo por usted. Eche un vistazo a cada una de las siguientes opciones, algunas de las cuales incluso se ocupan de las consultas de medios por usted.
- El sistema de cuadrícula CSS de 1140px
- Fluid 960.gs
- Tiny Fluid Grid
- Red Negativa
- Sistema Golden Grid
- Línea de base fluida
Lanzar en una sola columna de consulta de medios
En estos días, mi recomendación para sitios amigables para dispositivos móviles es ser completamente receptivos. Esto le permite crear un diseño único que flexione y se adapte a diferentes vistas, lo que garantiza que su sitio se vea bien en casi cualquier dispositivo. Esta solución es elegante y más sencilla de implementar de lo que pueda imaginar.
Dicho esto, todavía vas a enfrentar varios desafíos cuando intentes un diseño completamente sensible. Tiene que envolver su mente en torno a una forma completamente nueva de ver el diseño web y optimizar su sitio en varios puntos de interrupción.
En el mundo real, es posible que no siempre tenga el tiempo y el presupuesto para concentrarse en una revisión completa y receptiva. Tal vez incluso a largo plazo esté planeando un diseño completamente nuevo, pero desea al menos darle un impulso rápido a su sitio actual para que se vea mejor en ventanas más pequeñas.
Una solución es servir una única consulta de medios que esencialmente coloque 100% de ancho en sus columnas y contenedores. Reduzca el tamaño de la ventana de su navegador y encuentre ese punto donde su diseño ya no es muy útil, luego agregue algunos estilos básicos para solucionarlo:
Como he hecho aquí, es probable que tenga que ajustar algunas otras cosas además de configurar los anchos de columna al 100% solo para asegurarse de que todo se vea bien con este nuevo diseño.Usando esta técnica, su diseño predeterminado será servido para pantallas más grandes y se convertirá en una sola columna cuando la ventana gráfica sea demasiado pequeña para adaptarse al diseño original (700 px en nuestro ejemplo anterior).
Recientemente demostré esta técnica en un artículo anterior con el siguiente diseño simple. Aquí está el diseño a gran tamaño:
En dispositivos más pequeños, no nos molestamos con toneladas de cambios, sino que simplemente utilizamos el fragmento de código de arriba para crear una sola columna de contenido.
Añadir los iconos de Apple Touch
Este es un poco centrado en iOS, pero nunca está de más hacer ajustes a las plataformas personalizadas donde sea posible. Requiere un esfuerzo mínimo y hace que su sitio sea mucho más propenso a ser mantenido en la pantalla de inicio de un usuario de iPhone / iPad (especialmente útil para aplicaciones web).
Safari en iOS permite a los usuarios no solo marcar una página en el sentido tradicional, sino también colocarla junto a todos los demás íconos en la cuadrícula de la pantalla de inicio. Para asegurarse de que el icono que Safari toma esté correctamente formateado, es mejor crear el suyo propio.
Cómo implementar los iconos
Actualmente hay tres pantallas diferentes para los dispositivos de Apple: iPad, iPhone 4 y otros iPhones más antiguos. Los tamaños adecuados para estos son 57px square para iPhones antiguos, 72px square para iPad (versión uno y dos) y 114px square para iPhone 4 y versiones posteriores. Tenga en cuenta que es probable que el iPad 3 requiera un ícono cuadrado de 144px si los rumores sobre la duplicación de la resolución son ciertos.
Aquí está el código que deberá incluir en la sección principal de su archivo HTML.
Puedes agregar una pantalla de inicio a tu aplicación web usando un método muy similar. Echa un vistazo a la documentación oficial para más información.
Efectos especiales
Ya hemos revisado los tamaños de cada imagen, pero hay más cosas que considerar. Cada icono que cree debe ser cuadrado con esquinas duras de noventa grados y no debe contener transparencias ni sombras. El iPhone redondeará automáticamente las esquinas al radio apropiado y aplicará el efecto de brillo predeterminado.
Propina: Añadir? Precompuesto? al nombre de archivo para omitir el efecto brillante. Ejemplo: apple-touch-icon-precomposed.png.
Mira tus Hovers
Este es un consejo bastante genérico, pero es algo que siempre animo a los principiantes a considerar al diseñar sitios web para dispositivos móviles. Para el diseño web de escritorio, tiendo a usar los hovers bastante extensamente y, en ocasiones, voy más allá de los simples consejos visuales y los uso para desencadenar algún evento funcional.
Piensa en cómo este evento se transferirá a las plataformas móviles con pantalla táctil. De repente, no hay hover. O estás tocando un elemento o no, no hay un punto intermedio como lo hay con un mouse. ¿Significa esto que no debes usar la funcionalidad basada en hover? En absoluto, recuerde asegurarse de que su sitio todavía funcione perfectamente en un dispositivo móvil.
Esto no siempre requiere mucho trabajo. En última instancia, lo aliento a realizar pruebas siempre que sea posible para tener una idea real de cómo funcionará su sitio. Por ejemplo, recientemente publiqué un tutorial sobre la creación de un menú de navegación en expansión que se abre cuando se desliza. Instintivamente pensé que el menú sería inútil en un dispositivo iOS ya que no hay un evento de desplazamiento, pero resulta que el iPhone y el iPad lo traducen automáticamente a un evento táctil, dejando el menú perfectamente funcional.
Sin embargo, nunca confíe en esto, ya que puede que no siempre sea el caso de que sus hovers se traduzcan bien en plataformas móviles. Cuando no lo hagan, intente ofrecer una consulta de medios personalizada o algún JavaScript solo para dispositivos móviles para compensar.
Usa tecnología móvil amigable
La web móvil ha presentado una serie de desafíos de compatibilidad para diseñadores y desarrolladores. El elemento principal que más presiona es que iOS simplemente se niega a admitir Flash, pero no se detiene allí. La web está llena de complementos propietarios, como el Silverlight de Microsoft, que de manera similar no se puede instalar en algunas plataformas móviles.
Para tener en cuenta esto, asegúrese de que su sitio no dependa de estas tecnologías para funcionar. Si lo hacen, tendrás que entregar una versión móvil especial para compensar. Por ejemplo, YouTube (un sitio anteriormente solo para Flash) ahora utiliza un reproductor de video HTML5 especial que funciona extremadamente bien en plataformas móviles.
Además, asegúrese de aprovechar las bibliotecas creadas previamente que le permiten agregar soporte para varias plataformas móviles con facilidad. Un ejemplo que los fanáticos de JavaScript adoran es jQuery Mobile, un conjunto de herramientas basado en HTML5 basado en rockin ', construido sobre jQuery y jQuery UI.
Conclusión
Obviamente, esta lista no es de ninguna manera exhaustiva, sino que simplemente sirve como una forma de sumergir su dedo del pie en el mundo de los sitios web que se ven y funcionan bien en cualquier plataforma. Una vez que realmente se sumerja en estas cinco técnicas, le prometo que se sentirá mejor al acercarse al diseño web móvil y se encontrará a sí mismo lanzando diseños multiplataforma totalmente sensibles en muy poco tiempo.
Deje un comentario a continuación y háganos saber cómo cambiaría esta lista. Si le pidiera cinco formas rápidas y fáciles de hacer que un sitio sea más compatible con dispositivos móviles, ¿qué consejo ofrecería?