El año pasado el uso de la web móvil aumentó un 148% en todo el mundo. En un futuro cercano, a medida que los smarthpones se vuelvan cada vez más omnipresentes, este número continuará disparándose. Como desarrollador, ha llegado el momento de que usted considere seriamente si debe comenzar a acomodar a su audiencia móvil.
Hoy veremos algunas formas rápidas de hacer que su sitio sea un poco más amigable para dispositivos móviles.
Analiza tu audiencia
Antes de sumergirse en mejorar su sitio desde una perspectiva móvil, es una buena idea verificar qué parte del tráfico proviene realmente de los dispositivos móviles. Con Google Analytics o algo similar, eche un vistazo rápido al desglose del navegador para familiarizarse con este número. Luego, puede tomar una decisión informada sobre qué tan lejos puede llegar con su alojamiento móvil.
Una cosa a tener en cuenta es que si este número es súper bajo, podría deberse en parte al mal estado actual de su sitio en dispositivos móviles. Tome una decisión sobre si desea simplemente mejorar la experiencia de sus usuarios móviles actuales o buscar activamente más usuarios móviles lanzando un sitio móvil dedicado, una aplicación web o una aplicación para iPhone.
Crear hojas de estilo móviles
Uno de los pasos más importantes que puede tomar para hacer que su sitio sea compatible con dispositivos móviles es crear CSS personalizados para dispositivos móviles. Esta puede ser una tarea mucho más pequeña de lo que podría imaginar si busca mantener la apariencia general del sitio. Veamos cómo dirigir su CSS móvil para cargar solo en dispositivos móviles.
Tipos de medios
El uso de diferentes declaraciones de tipos de medios le permite asignar diferentes hojas de estilo para ciertos usos. ¿La mayoría de los navegadores de escritorio reconocen la pantalla? ¿Mientras que muchos dispositivos móviles utilizan el? handheld? mando. Echa un vistazo al siguiente ejemplo:
Usando esta simple declaración, puedes cree un archivo handheld.css que solo se activará en dispositivos portátiles (Al menos los que permiten el peinado). Por supuesto, esto no funcionará en todos los dispositivos, pero llegará a una cantidad decente. Algunos desarrolladores incluso llegan a sugerir el uso de este método con una hoja de estilos vacía para restablecer todo y simplificar la visualización móvil.
Utilizar diseños fluidos
Desafortunadamente, no es fácil descubrir cómo se verá su diseño en todos los navegadores móviles, ya que hay demasiados dispositivos para poder rastrearlos a todos. Una forma de evitar este problema es usar diseños fluidos que se ajustarán automáticamente al tamaño de la pantalla.
Una forma de lograr esto es Evitar establecer anchos en píxeles. y disparar por porcentajes o ems en su lugar. Por ejemplo, en lugar de
simplemente use
Para descargar algunos diseños móviles fluidos pre-construidos, echa un vistazo al siguiente artículo:
Diseños líquidos de CSS de varias columnas perfectos - compatible con iPhone
Ocultar contenido innecesario
Si su sitio tiene muchos enlaces de pie de página pequeños o espacio de anuncios desordenado, es una buena idea deshacerse de este contenido en la versión móvil. Tenga en cuenta que el tamaño pequeño de la pantalla de los navegadores móviles no es ideal para hacer clic en elementos pequeños o desplazarse por páginas grandes llenas de contenido. Intente recortar su contenido para facilitar la navegación en un formato de columna única Con áreas grandes, seleccionables y encabezados claramente definidos.
Inserte el siguiente CSS para cualquier elemento que desee ocultar:
Tamaño adecuado de imágenes
Las imágenes grandes pueden o no mostrarse correctamente en los navegadores móviles y puedes apostar a que realmente se atascarán en un sitio móvil. Es una buena práctica dimensionarlos en el servidor o usar CSS usando el comando max width. Solo tenga en cuenta que este último es un poco más intensivo en el procesador y puede demorar un poco en cargarse.
Asegurarse de que las imágenes no sean demasiado grandes no es su único problema. Como se indicó en la sugerencia anterior, las áreas en las que se puede hacer clic también deben repensarse. Muchos dispositivos móviles utilizan un dedo como dispositivo de entrada principal, que es considerablemente menos preciso que un mouse y un puntero. Debido a esto, cualquier imagen que sirva como botones o enlaces requiere consideración y posiblemente un cambio de tamaño para garantizar que sean fácilmente seleccionables con un punto y toque en lugar de un punto y clic. ¿No estás seguro de cuán grande es hacer un botón? Observe el tamaño de su propio dedo como un indicador de si una imagen puede seleccionarse fácilmente o no en un dispositivo móvil.
Interactividad
A veces, agregar algunos elementos interactivos a un sitio lo hace mucho más agradable y menos estático / aburrido. Sin embargo, en la versión móvil optimizada de su sitio, reduzca la interactividad al mínimo (a menos que, por supuesto, esté creando un juego o algo similar). La interacción puede salir mal fácilmente en los dispositivos móviles y dejar a los usuarios frustrados con todo el trabajo que tienen que hacer. Busque lugares para reducir la entrada que necesita de los usuarios, especialmente en el área de ingreso de texto, ya que el uso de teclados diminutos puede estar entre las peores partes de la experiencia web móvil.
Técnicas específicas de iPhone
Muchos de ustedes acudieron a este artículo en busca de información en general sobre la web móvil, pero con la esperanza de que encontrarán algunos buenos consejos de optimización para iPhone. No me gustaría decepcionar, así que aquí hay algunas cosas que puede hacer para adaptarse al rey de los clientes web móviles.
Agregar un icono de pantalla de inicio
El iPhone y el iPod Touch tienen una función incorporada que permite a los usuarios agregar su sitio a la pantalla de inicio como un ícono. Puede personalizar este ícono simplemente colocando un archivo en su directorio raíz titulado? Apple-touch-icon.png? (Asegúrate de que la imagen sea al menos 57? 57). Alternativamente, puede colocar el siguiente fragmento de código en su HTML:
Obviamente, personalizará la ruta y el nombre del archivo para su propia imagen.
Viewport: zoom predeterminado
Es posible que su sitio tenga un espacio en blanco incorporado que se vea muy bien en una computadora de escritorio, pero esto agregará un zoom adicional para los usuarios de iPhone que no desean ver ese espacio en blanco porque reduce la legibilidad y el tamaño del contenido principal. Use el siguiente fragmento de código para ampliar automáticamente el ancho de su contenido.
El? Ancho = 320 ;? Determina el nivel de magnificación del contenido. Establezca este número en lo que sea apropiado para su contenido (320 píxeles es el ancho de la pantalla del iPhone en una orientación vertical).
Hoja de estilo específica para iPhone
Si desea crear CSS que solo se aplique a los usuarios de su iPhone, use el siguiente código:
Esto se dirige solo a dispositivos con un ancho de pantalla máximo de 480 píxeles, a saber, iPhone y iPod Touch.
Constructores de sitios móviles
Hay algunos sitios que ayudan a crear un sitio móvil con poco o ningún conocimiento de HTML y CSS. El más prometedor de estos en mi opinión es Mobify, pero también he incluido algunas alternativas. Si ha probado alguno de estos (u otros), háganos saber los pros y los contras y su impresión general.
Mobify
Mofuse
Wirenode
bMovilizado
Zinadoo
Otras lecturas
Echa un vistazo a estos otros grandes artículos para crear sitios optimizados para dispositivos móviles. Cada uno de estos me ayudó en mi investigación y está lleno de información adicional.
- Cómo hacer que su sitio web sea amigable
- El cambio de imagen móvil de 5 minutos de CSS
- Haga que su sitio web sea móvil y compatible con iPhone
- 7 consejos para hacer que su sitio web sea móvil
- 6 consejos para optimizar tu sitio web para iPhone
- Hacer un sitio web compatible con iPhone usando CSS
- Principios y pautas para crear un gran contenido para iPhone
Conclusión
Los consejos anteriores representan solo algunas de las formas en que puede comenzar a abordar el creciente segmento de usuarios de Internet móvil. Utilice los comentarios a continuación y comparta sus consejos para la optimización móvil. Estoy ansioso por aprender de ti también!