Cómo optimizar su sitio para cualquier dispositivo

1. Dé a su sitio un diseño receptivo y un diseño amigable para móviles

Su sitio web se ve genial y funciona como un encanto en la PC; Eso es fantástico.

¿Has intentado abrirlo en un teléfono inteligente?

¿Se ve así?

Si es así, entonces tienes un gran problema. Ese sitio web es prácticamente inutilizable en los dispositivos móviles.

Desafortunadamente, ser amigable para las PC no hace automáticamente un sitio web que también sea amigable para los dispositivos móviles.

Y debido al índice móvil primero en Google, si su sitio no es amigable con los dispositivos móviles, es posible que nunca vea la luz de la página 1 de las páginas de resultados del motor de búsqueda (SERPS).

Entonces, ¿qué haces?

El primer paso importante para hacer que su sitio sea amigable para los dispositivos móviles es trabajar en un diseño receptivo.

Cuando un sitio es receptivo, se muestra correctamente en pantallas de todos los tamañoscomo esto:

Captura de pantalla de Webceo.com, enero de 2023

Cómo darle a su sitio web un diseño móvil primero

Hay dos formas de actualizar su sitio web en una experiencia amigable para dispositivos móviles. Cada solución tiene sus propias compensaciones.

1. La forma más rápida: Instale un complemento dedicado a móvil primero Como WPTOuch para darle a su sitio web un diseño receptivo en minutos. Es el método más fácil, pero no sin sus riesgos; Los complementos son propensos a la ruptura y (en los casos más extremos) incluso son pirateados.
2. La forma más confiable y segura: modificar el código de su sitio web para incluir soluciones receptivas.

Cómo codificar a mano un sitio web receptivo

Si desea tomar los asuntos en sus propias manos y transformar su sitio de escritorio en un sitio web receptivo y amigable para los dispositivos móviles, deberá incorporar:

• Una ventana gráfica.
• Imágenes receptivas.
• Un diseño de fluido.
• Consultas de medios.

Le enseñaremos todo el código que necesite para que su sitio web responda. Pero primero, asegúrese de hacer una copia de seguridad de su sitio web antes de realizar cambios en su código.

Cómo establecer una ventana gráfica en un sitio web

Las visiones de visualización ayudan a cada navegador a saber cómo adaptar las dimensiones de su página web a su pantalla.

Si agrega una ventana html de su sitio web, sus páginas web se adaptarán automáticamente para adaptarse a cualquier dispositivo móvil.

Agregue esto:

Para configurar la visión en una página, agregue esta línea de código HTML dentro de su

etiqueta:

Cómo hacer que las imágenes respondan

Cuando se trata de la amistad móvil, es importante que su visitante no tenga que desplazarse a la izquierda y a la derecha para ver el contenido de su sitio web.

Esto también es cierto para todas las imágenes, especialmente las infografías.

Las imágenes receptivas deben encogerse y crecer automáticamente para adaptarse perfectamente al ancho de la pantalla de cada visitante.

Por lo tanto, desea usar la propiedad de ancho máximo.

Cómo agregar el ancho máximo para hacer que sus imágenes sean receptivas

1. Abra la hoja de estilo de su sitio (el archivo CSS).
2. Agregue «Max-Width: 100%» para el Etiqueta, así:

img {
 max-width: 100%;
}

Ahora, si sus imágenes son más amplias que la vista que agregó en el paso anterior, automáticamente se encogerán automáticamente para adaptarse al espacio disponible.

Cómo instalar un diseño de fluido

Cuando tiene un diseño receptivo en su sitio web, sus elementos de página se ajustan a cualquier pantalla por su cuenta. Por ejemplo, si tiene una tabla de fluido, la tabla cambiará el tamaño junto con la pantalla. De esa manera, puede ver todas las columnas sin tener que desplazarse hacia la izquierda o hacia la derecha, incluso en una pequeña pantalla móvil.

Hay algunos métodos de diseño de fluidos diferentes que puede probar, dependiendo de su sitio individual:

Úselos cuando sea apropiado.

Cuándo usar Flexbox

Use este método cuando tenga varios elementos de tamaño diferente y desee ajustarlos en una fila. Agregue la propiedad «Display: Flex» a su etiqueta HTML, como en este ejemplo:

.items {
  display: flex;
}

Cuándo usar multicol

Este método divide su contenido en columnas. Utiliza la propiedad de conteo de columnas, como esta:

.container {
 column-count: 3;
}

En este ejemplo, obtienes tres columnas.

Cuando usar la cuadrícula

Como su nombre indica, este método crea una cuadrícula para adaptarse a sus elementos dentro. Aquí hay un ejemplo:

.container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
}

La propiedad de columnas de plantilla de cuadrícula establece el número de pistas de columnas (tres en este ejemplo) y sus tamaños (1 FR).

¿Todavía no está seguro de cuál usar? Los complementos pueden detectar e implementar automáticamente el mejor diseño de fluido.

Cómo agregar consultas de medios a su sitio web

Las consultas de los medios son otra forma de adaptar su contenido a cualquier tamaño de pantalla. Pero tienen otra ventaja mucho más notable: adaptan su sitio a características específicas nativas de diferentes dispositivos.

Por ejemplo, el cursor de un mouse de una computadora puede pasar el rumbo sobre los elementos de la página, y los teléfonos inteligentes tienen pantallas táctiles. Cuenta con estas características, y puede adaptar la experiencia del usuario a cualquier tipo de dispositivo.

Hay mucho que absorber al tratar con consultas de medios, pero los documentos web de MDN tienen instrucciones muy detalladas.

Una vez que haya hecho todo, verifique qué tan bien funciona al ver su sitio en muchos dispositivos diferentes.

2. Haga que su sitio web completo se vea bien en el móvil

El paso uno cubrió el marco técnico que hace que su sitio web se ajuste bien a los dispositivos móviles.

Buenas noticias, esa fue la parte más difícil. Solo unos pasos más para el final.

Con un diseño receptivo, su sitio es casi completamente amigable para el móvil. ¿Qué más necesitas para terminar el trabajo?

A continuación, es hora de:

• Utilice un texto grande y fácil de leer. Los titulares y los subtítulos deben ser especialmente llamativos.
• Haga que sus elementos interactivos (como botones y casillas de verificación) sean lo suficientemente grandes como para ser parpadeantes.
• Evite usar párrafos largos. Los cortos siempre son mejores.
• Use espacio negativo generosamente. Evitará que su sitio se vea estrecho.
• Deje algo de espacio alrededor de los enlaces y otros elementos interactivos. De esa manera, los usuarios no presionarán accidentalmente lo que no quieren presionar.

3. No bloquees tu contenido con ventanas emergentes

Las ventanas emergentes dificultan que su visitante obtenga la información para la que vinieron, y resultan en altas tasas de rebote, también conocidas como personas que abandonan su sitio tan pronto como la ingresan.

Ahora, ciertos tipos de ventanas emergentes son bastante importantes. La mayoría de los sitios web necesitan usar cookies, y el suyo probablemente no sea la excepción. Y el GDPR hizo obligatorio solicitar el permiso de los usuarios para usar sus datos, por lo que no puede evitar usar una ventana emergente para eso.

Captura de pantalla de axahealth.co.uk, enero de 2023

Sin embargo, sus usuarios no visitan su sitio para mirar las ventanas emergentes. Cuando toda la página está bloqueada por una solicitud para aceptar el uso de cookies, los visitantes pueden no estar tan ansiosos por ponerse en sus zapatos. Por el contrario, está garantizado para molestarlos, e incluso pueden irse sin navegar en su sitio en absoluto.

Que hacer en su lugar

Los usuarios son más tolerantes con las ventanas emergentes cuando cubren solo una pequeña porción de la pantalla. Y si son fáciles de cerrar y descartar, aún mejor.

Captura de pantalla de ATT.com, enero de 2023

4. Arregle los errores técnicos en su sitio web

Incluso el hipo más menor será fácil de detectar en una pantalla pequeña, incluidos los temidos 404 errores.

Si bien una página 404 con un diseño divertido puede servirle bien, un error sigue siendo un error; interrumpirá la experiencia del usuario. Es mejor eliminarlos como un factor por completo.

Captura de pantalla de dribbble.com, enero de 2023

Cómo descubrir los errores técnicos de su sitio web

¿Qué otros errores pueden arruinar el día de un usuario móvil? Por nombrar algunos:

• Enlaces rotos.
• Imágenes rotas.
• Redireccionamientos de la página no deseada.
• CSS defectuoso y JavaScript.
• Problemas del servidor (por ejemplo, tiempo de espera de la puerta de enlace).

Todos ellos enviarán al usuario en ejecución si no hace algo.
Para comenzar, encuentre todos los errores técnicos en su sitio. Escanee con la herramienta de auditoría técnica de WebCeo para generar un informe.

Captura de pantalla de WebCeo, enero de 2023

Arregle todos los errores del sitio web que encuentre lo más rápido que pueda.

No dejes que los códigos como «Estado: 503» te confundan: aquí hay algunos consejos expertos para tratarlos.

Después de eso, tenga un hábito escanear su sitio regularmente (una vez a la semana está bien) y tiende a errores de manera oportuna.

5. Haga que su sitio se cargue rápidamente

Usted visita su sitio y está tardando demasiado en cargarse. ¡Oh, no!

¿Internet está abajo? ¿No? Desafortunadamente, ahora su usuario puede decidir que su sitio web nunca funciona y nunca regresa.

Por lo tanto, es importante hacer todo lo que esté en su poder para asegurarse de que su sitio se cargue rápidamente en todo momento.

Cómo hacer que su sitio web se cargue más rápido

Siga estos seis consejos para que su sitio web se cargue más rápido:

• Optimizar sus imágenes. Minimice el tamaño de su archivo ajustando su altura y ancho, guárdalos en el formato correcto y comprimirlos.
• Habilitar compresión (Si aún no está habilitado). La compresión de GZIP se encuentra entre los métodos más populares.
• Use el almacenamiento en caché del navegador. Encuentre el archivo .htaccess de su dominio y establezca los tiempos de vencimiento para los elementos de su página.
• Usar carga perezosa. Al igual que la compresión, a menudo ya está activo. Si no lo tiene, puede insertar el atributo de carga = «perezoso» en las etiquetas HTML de los elementos que desea cargar. O simplemente use un complemento como Smush.
• Optimizar el código de sus páginas. Si tiene suficiente conocimiento de HTML, JavaScript y otros idiomas que forman su sitio, puede intentar recortar el código. Tenga cuidado de no romper nada.
• Fusionar elementos cuando sea apropiado. Por ejemplo, si tiene dos imágenes justo uno al lado del otro, fusionarlas en una sola imagen ayudará a la página a cargarse más rápido.

Verifique su velocidad de carga actual con la herramienta de optimización de velocidad de WebCeo. Señalará los problemas relacionados con la velocidad que te están afectando en este momento.

Captura de pantalla de WebCeo, enero de 2023

6. Optimice su sitio web para la búsqueda local y de voz

Los teléfonos inteligentes son fáciles de llevar, lo que los convierte en una herramienta perfecta para navegar en línea en las calles.

¿El usuario necesita encontrar algo cercano? Su objetivo es simplemente una pregunta de distancia.

Y dado que la pregunta probablemente contendrá la palabra «dónde», su sitio web debe estar listo para ello. Esto se realiza a través de la optimización para la búsqueda local y, combinada con el SEO móvil, ¡se vuelve sorprendentemente efectivo para la búsqueda de voz al mismo tiempo!

Solo haz estas cosas:

1. Use palabras clave y frases basadas en la ubicación en su contenido. Por lo general, contienen palabras como dónde, más cercano, más cercano, cerca de mí o en «nombre de su ubicación». Por ejemplo: el lavado de autos cerca de mí.
2. Tenga una página de preguntas frecuentes en su sitio. Haga sus respuestas concisas y directamente al grano.
3. Ponga el nombre, la dirección y el número de teléfono de su negocio en la página de inicio de su sitio web. Mejor aún, póngalos en el pie de página.
4. Cree una lista en el perfil comercial de Google y llénelo con tanta información como pueda. Esto es necesario si desea aparecer en Google Maps.
5. Recopile reseñas positivas de los clientes: cuanto más mejor.

7. Haga que su primer desplazamiento sea eficiente

Idealmente, debería poder cautivar al visitante tan pronto como vean su sitio web. Pero solo hay tanto que pueden ver en una pantalla pequeña. Entonces, ¿qué haces?

Haga que el «por encima del pliegue» de su sitio (lo que los usuarios ven en el primer desplazamiento) es un nocaut total.

¿Cuáles son los imprescindibles que debes poner allí?

• Título descriptivo y llamativo.
• Menú de navegación.
• Barra de búsqueda.
• Llamado a la acción.

Pero esos son solo lo básico.

Aquí hay un par de ideas a nivel experto:

• Un elemento interactivo (como una foto panorámica, un modelo 3D o un juego simple). Incluso un video ordinario funciona.
• Un CTA flotante que siempre permanece en la pantalla sin importar cuán lejos se desplace.

Captura de pantalla de Leadferno.com, enero de 2023

8. Haga que sus resultados de búsqueda sea atractivo

Como dice el dicho, el mejor lugar para ocultar secretos es en la página 2 de Google.

Sin embargo, eso es cierto solo para la versión de escritorio.

Mobile Google viene con un desplazamiento infinito, que presenta los 40 mejores resultados en lugar de 10 antes de encontrar el botón «Ver más».

Sin embargo, los 10 mejores o no, sus resultados de búsqueda nunca obtendrán ningún clic si no se destacan.

Y, al igual que con cualquier otra cosa, debes destacar bien. ¿Cómo aplica este principio a sus resultados de búsqueda?

Cómo hacer que sus resultados de búsqueda se destaquen

Hay tres excelentes maneras de hacer que sus resultados de búsqueda sean más emocionantes para su futuro visitante:

• Use las mejores palabras clave. No solo en términos de volumen de búsqueda, use las palabras clave que capturan la intención de búsqueda de los usuarios mejor que otras. Para averiguar qué palabras clave son, debe ponerse en el lugar de los usuarios. O simplemente pregunte a los usuarios que conozca sobre sus preferencias de búsqueda.
• Use títulos y descripciones llamativas. Las palabras clave son un ingrediente principal; El otro ingrediente son las palabras eléctricas que agitan las emociones de los usuarios. ¿Sabes qué emociones son apropiadas para tu contenido?
• Agregar datos estructurados. Marque los elementos de su página para crear fragmentos ricos en rico que hacer clic.

Captura de pantalla de Search for (Learn German), Google, enero de 2023

Hace años, Google vio el potencial en los dispositivos móviles y, como resultado, tenían toda la razón.

El gigante de la búsqueda invirtió mucho en la amistad móvil, y no hay duda: Internet es mucho mejor para ello. El contenido en línea se ha vuelto mucho más fácil a la vista y más simple de usar.

¿Pero su sitio coincide con el estándar de oro? ¿Sus usuarios obtienen la misma gran experiencia en todos sus dispositivos?

Si tiene incluso una sombra de duda, es hora de emplear todas las herramientas a su disposición para asegurarse de que su sitio cumpla con la marca. Regístrese ahora y deje que WebCeo lo ayude a resolver las cosas.

¡Comience a aumentar su clasificación de búsqueda y la participación del usuario con un sitio web receptivo hoy!