Cómo hacer que su sitio web sea móvil

En el verano de 2015, se realizaron más búsquedas de Google a través de dispositivos móviles que de escritorio por primera vez, y usted’mejor creo que’solo he subido desde entonces!

Si tu’re leyendo este artículo, es probable que’Ya somos conscientes de la importancia de tener un sitio web optimizado para dispositivos móviles y estamos buscando asegurarnos de que el suyo ofrezca una gran experiencia a los usuarios de dispositivos móviles. Podemos enseñarte cómo hacerlo!

Para que su sitio web sea apto para dispositivos móviles, usted’necesitará:

  1. Elija un tema o plantilla adaptable para dispositivos móviles
  2. Retira tu contenido
  3. Haga que las imágenes y CSS sean lo más ligeras posible
  4. Evitar Flash
  5. Cambiar el tamaño y la ubicación del botón
  6. Espacia tus enlaces
  7. Use una fuente grande y legible
  8. Eliminar ventanas emergentes
  9. Prueba regularmente

Pero primero, ¿qué significa en realidad móvil amigable??

Cuando hablamos de un ‘apto para dispositivos móviles’ sitio web, nosotros’estamos hablando de mostrar un diferente ‘versión’ de su sitio web a los visitantes que lo ven desde dispositivos móviles, para brindarles una mejor experiencia.

Hay varias formas de lograr esto:

  • Diseño de respuesta – su página web’El diseño se ajusta para adaptarse al tamaño de la pantalla, ya sea que’solo está cambiando el tamaño de la pestaña de su escritorio o navegando desde un dispositivo móvil o tableta.
  • Servicio dinámico – a los visitantes se les muestra una versión diferente del sitio, especialmente diseñada, dependiendo del dispositivo que’re viendo desde.
  • Una aplicación móvil – en algunos casos, tener una aplicación completamente separada para su audiencia móvil tiene más sentido (aunque si este es el caso, también debe asegurarse de que su sitio web esté a la altura de los que no lo hacen)’no quiero descargarlo).

El diseño receptivo es lo mínimo a lo que debe apuntar, y’s lo que Google recomienda. Dicho esto, pensamos que’Vale la pena editar más su sitio móvil generado automáticamente de todos modos: después de todo, desea aspirar a una fantástica experiencia de usuario móvil, en lugar de ‘aceptable’ uno.

Si cree que una aplicación móvil funcionaría para su sitio, le recomendamos ponerse en contacto con un desarrollador que pueda ayudarlo con eso..

Aquí hay algunos otros artículos que puede disfrutar:

Cómo diseñar un sitio web – Si tu’Si está comenzando a diseñar (o rediseñar) su sitio web, consulte este artículo para obtener una guía paso a paso y los puntos clave a considerar.

Cómo construir un sitio web – asilo’¿Ya has comenzado en tu sitio? No se preocupe, esta guía lo guiará a través de todo el proceso.!

5 mejores creadores de sitios web para SEO – Cualquier creador de sitios web con SEO fuerte viene con la compatibilidad móvil integrada directamente en sus plantillas. Aquí hay cinco de los mejores.

1

Elija un tema o plantilla adaptable para dispositivos móviles

Bien, este es el primer paso, y’s uno grande: elija un tema o plantilla adaptable para dispositivos móviles!
Debido a que es tan importante tener un diseño que responda a dispositivos móviles,’es algo que casi todos los principales creadores de sitios web han cubierto en cada una de sus plantillas. Por ejemplo:

Squarespace: tiene una capacidad de respuesta móvil a prueba de agua, y sería nuestra mejor opción si usted’volver a crear un sitio desde cero y ver la experiencia móvil como una prioridad.

Wix: todas las plantillas responden a dispositivos móviles, pero siempre asegúrese de verificar en la vista móvil a medida que avanza. Debido a que los sitios Wix son tan personalizables, a veces no se producen grandes cambios’no se traduce tan bien y tú’tendré que hacer algunos ajustes.

Si tu’Al volver a crear un sitio utilizando un sistema CMS, como WordPress, asegúrese de que el tema que elija para construir su sitio responda a dispositivos móviles, o si’ya construyó un sitio, cambie a uno que sea!

Solo busca ‘tema receptivo’ en WordPress’ propia biblioteca de temas, o en un sitio de terceros como Themeforest. Asegúrese de leer los comentarios y, si es posible, eche un vistazo a los sitios que utilizan este tema desde su dispositivo móvil para evaluar la experiencia por sí mismo..

¡Ayuda! Qué pasa si yo’m en un tema que no responde, y puedo’t cambiarlo?

Si su sitio web se creó con un tema o plantilla antiguo que no responde, y usted’no puede cambiarlo, intente agregar esta línea de código en cada página’etiqueta s:

Esto significa que sus páginas deben reformatearse automáticamente para adaptarse al ancho del dispositivo, cambiando de un estilo horizontal a vertical.

2

Retira tu contenido

usted’elegí un tema o plantilla que responde bien, así que ahora’re todo listo, ¿verdad? Incorrecto!

Cambiar a la plantilla o tema correcto es un gran paso, pero’es solo uno de varios que debes tomar para perfeccionar esa experiencia móvil.

Ahora’Es hora de echar un vistazo a la vista móvil automatizada de su sitio web y eliminarla:

Destila tu oferta

Calcule el objetivo principal de la página que’encender y don’no dudes en hacer que esto sea mucho más destacado en tu versión móvil.

Eche un vistazo a este ejemplo de Trainline:

Trainline móvil amigable ejemplo

La página de inicio está diseñada para alentar a los usuarios a buscar boletos de tren, y este formulario ocupa un lugar central en la versión móvil. En la versión de escritorio, esto parecería demasiado agresivo, pero en una versión móvil, funciona.

Evite grandes fragmentos de texto.

La copia en su sitio web debe ser breve y dulce en el mejor de los casos (con la excepción de las publicaciones de blog, ¡como esta!), Pero en el móvil esto se vuelve aún más importante. Lea nuestros consejos para escribir en la web y lleve sus tijeras virtuales a cualquier fragmento largo de texto..

Acortar formas

Llenar formularios largos es una tarea difícil en el mejor de los casos, ¿pero en un dispositivo móvil? ¿En movimiento? ¡Olvídalo! Las formas largas te perderán lectores más rápido de lo que puedes decir ‘Este es un campo obligatorio’. Asegúrese de que cada forma que’volver a mostrar en el móvil solo solicita información que’es absolutamente esencial.

Consejo superior! La autocorrección molesta es una forma segura de convertir el llenado de formularios en una gran pérdida de tiempo. Ahorre el estrés de sus lectores apagándolo. Si tiene acceso al código del formulario, asegúrese de que el campo de autocorrección esté configurado en autocorrección = apagado. 3

Haga que las imágenes y CSS sean lo más ligeras posible

Siempre es una buena idea hacer que su sitio web sea lo más ligero posible, pero ¿qué significa eso exactamente? Bueno, cada elemento en tu sitio web lleva un virtual ‘peso’ – si ese’s un video o una imagen que tiene un tamaño de archivo, o un código que debe cargarse cada vez que se hace clic en el sitio web.

Google ha sido muy claro sobre el hecho de que la velocidad del sitio web es un factor de clasificación crucial, lo que significa lento (a.k.a. ‘pesado’) los sitios web perderán a la competencia en las páginas de resultados del motor de búsqueda (SERP).

Cuando se trata de dispositivos móviles, esto es aún más importante. Si tu’alguna vez trató de cargar una página web en algún lugar remoto, solo para ver cómo cada elemento cae en su lugar dolorosamente lento, usted’entenderé por qué.

Entonces, qué puede hacer usted al respecto?

Comprime tus imágenes

Cuando usted’volver a cargar cualquier imagen en su sitio (versión móvil o de escritorio)’Es vital que comprima sus imágenes con una herramienta gratuita en línea, como kraken.io. Esto reduce en gran medida el tamaño del archivo de sus imágenes, sin comprometer la calidad de la imagen..

Aloja tus videos con un tercero

Al subir sus videos a un tercero y luego incrustarlos en su sitio, significa lo virtual ‘peso’ de estos videos se guarda en gran medida en el sitio elegido, en lugar de en el suyo.

Wistia es una plataforma popular para esto, pero YouTube también funciona: usted’solo quiero asegurarme de que’volver a desactivar la reproducción automática, para que un video no relacionado’No juegues después del tuyo. Para hacer esto, simplemente:

  • Ve a tu página o publicación de WordPress
  • Encuentre el código incrustado y haga clic en el ‘texto’ lengüeta
  • Encuentra la parte que dice src =”youtubeurlhere”
  • Añadir ?reproducción automática = 0&rel = 0 después youtubeurlhere
  • El código ahora debería leer src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Golpear ‘Actualizar’ y tu’re bueno para ir

Consejo superior! Si tu no’t cree que su contenido bajaría demasiado bien en YouTube (algunos videos no’no tiene mucho sentido sin el contexto de una página completa), asegúrese de establecer la visibilidad en ‘no incluido en listado’. De esa manera, nadie lo encontrará en ningún otro lugar que no sea su sitio web. 4 4

Evitar Flash

Flash se usa a menudo para crear animaciones, pero generalmente no’t compatible con dispositivos móviles, por lo que es mejor evitarlo por completo.

5 5

Cambiar el tamaño y la ubicación del botón

Casi todos los sitios web usan botones para enlazar a otras secciones o formularios. Pero un ‘bueno’ el botón puede convertirse rápidamente en un ‘malo’ botón en el móvil si’s en el lugar incorrecto o tiene el tamaño incorrecto.

Piensa en cómo sostienes y usas tu teléfono. Es probable que seas’estás usando tus pulgares para casi todo, lo que significa todo lo que puedas’Llegar con el pulgar se convierte en un dolor total..

aquí’s donde debe intentar colocar CTA en un sitio móvil:

Creación de un sitio web optimizado para dispositivos móviles: dónde agregar CTA

Entonces ahora tú’tengo tus botones en el lugar correcto,’s hora de hacerlos del tamaño correcto. Eso generalmente significa que tú’necesitaré agrandarlos un poco’Es mucho más difícil hacer clic con precisión con un pulgar que con un mouse, después de todo.

6 6

Espacia tus enlaces

Hablando de lo difícil que es hacer clic con precisión con un pulgar en lugar de con un mouse, eso nos lleva muy bien al siguiente punto: mira tus enlaces!

Más específicamente, usted’querrá verificar que cualquier hipervínculo en su sitio móvil:

  • Aren’demasiado juntos, para evitar que la gente haga clic en el equivocado por accidente.
  • Enlace a páginas que también están optimizadas para dispositivos móviles para un viaje de usuario sin interrupciones.

7 7

Use una fuente grande y legible

Eso’s le recomienda que utilice un tamaño de fuente de al menos 14px en el escritorio, pero asegúrese de probar cómo se ve en su versión móvil; es probable que vea que aparece un poco pequeña, y usted’querré subirlo un poco.

Verifique también la legibilidad de su fuente. Eso’Una cosa es probar una fuente más experimental en un escritorio, pero es poco probable que este movimiento valga la pena en dispositivos móviles. Dicho eso, tu’querrá mantener las fuentes como ‘en marca’ como sea posible en todas las plataformas.

Cuando trabaja en una vista móvil de su sitio, usted’Tengo un área mucho más pequeña para jugar. En un escritorio, puede espaciar el texto con saltos de línea e imágenes. En dispositivos móviles, intente en negrita o en mayúsculas diferentes líneas de texto para evitar que se fusionen entre sí.

8

Eliminar ventanas emergentes

Cuando se usa con cuidado, las ventanas emergentes pueden funcionar realmente bien en una versión de escritorio de un sitio. Es posible que hayas notado que’es algo que usamos en bastantes páginas aquí en WBE.

Pero cuando se trata de dispositivos móviles, es mejor evitar las ventanas emergentes. No solo tiene una pantalla más pequeña para tratar, sino que también puede’t personalice la ventana emergente para que se active en momentos clave, como cuando el usuario sale de su pantalla.

9 9

Prueba regularmente

¡La mejor manera de descubrir qué tan amigable es su sitio móvil es probarlo! usted’Querré hacer esto de tres maneras diferentes:

Ejecuta URLs a través de Google’s herramienta para dispositivos móviles

Google tiene una herramienta de prueba gratuita optimizada para dispositivos móviles, que cualquiera puede usar para probar qué tan amigable es para dispositivos móviles cualquier URL dada, ya sea’s una página de inicio (como se muestra a continuación) o una página dentro de su sitio.

Prueba amigable para dispositivos móviles de Google

Pruebe diferentes tamaños de dispositivo desde su escritorio

Una excelente manera de verificar qué tan receptivo es su sitio es jugar con la forma de la pestaña de su sitio web que ha abierto. A medida que reduce el ancho de su pestaña, debe notar que su sitio comienza a ‘contrato’ y transformarse en la versión más amigable para dispositivos móviles.

Para probar rápidamente el aspecto de cualquier cosa en dispositivos móviles, también puede hacer clic derecho en su página web, seleccionar ‘Inspeccionar’, y luego haga clic en el icono de dos pantallas que aparece en la barra de herramientas en la parte superior:

Ver la versión móvil desde el escritorio

Cómo hacer que su sitio web sea móvil: resumen

Gracias por seguir con nosotros, ya que explicamos cómo hacer que su sitio web sea apto para dispositivos móviles. aquí’s esos pasos una vez más:

Cómo hacer que su sitio web sea amigable para dispositivos móviles:

  1. Elija un tema o plantilla adaptable para dispositivos móviles
  2. Retira tu contenido
  3. Haga que las imágenes y CSS sean lo más ligeras posible
  4. Evitar Flash
  5. Cambiar el tamaño y la ubicación del botón
  6. Espacia tus enlaces
  7. Use una fuente grande y legible
  8. Eliminar ventanas emergentes
  9. Prueba regularmente

La buena noticia para la mayoría de los sitios es que la mayor parte del trabajo duro probablemente se hará por usted por su tema o plantilla. Dicho esto, pensamos que’Vale la pena hacer los ajustes adicionales descritos anteriormente para garantizar que sus usuarios móviles obtengan una experiencia brillante, en lugar de una aceptable. Después de todo, las estadísticas dicen que’probablemente constituirá la mayoría de sus usuarios!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me