La práctica destilada para crear un sitio web amigable para dispositivos móviles

01.06.2020
Artículos y más ... 'La práctica destilada para crear un sitio web amigable para dispositivos móviles
0 10 мин.

creación de un sitio web amigable para dispositivos móviles


En 2015, Google lanzó el algoritmo “Mobilegeddon”, que castigaba a los sitios web que no eran compatibles con dispositivos móviles. De acuerdo con este algoritmo, la clasificación de los sitios web que no eran aptos para dispositivos móviles disminuiría.

Como puede ver, el móvil ha superado a las computadoras de escritorio y portátiles y es el dispositivo más utilizado para navegar por Internet. Google ha alentado a las empresas a pensar primero en los dispositivos móviles.

crecimiento global del tráfico de datos móviles

Esto significa que los diseñadores gráficos y los vendedores necesitan expandir su visión más allá de las computadoras de escritorio y portátiles mientras trabajan en un sitio web.

¿Qué es un sitio web optimizado para dispositivos móviles??

¿Qué es un sitio web amigable para dispositivos móviles?

Como el nombre sugiere, un sitio web optimizado para dispositivos móviles es un sitio diseñado, desarrollado y optimizado para que el sitio web sea fluido en dispositivos móviles – Es más complejo e imperativo de lo que parece. En el nivel más básico: los usuarios desean contenido que sea fácil de ver en dispositivos móviles.

Si su texto es demasiado pequeño o las imágenes no se cargan, los usuarios se irritarán y se irán. Por lo tanto, es fundamental tener el contenido del tamaño adecuado. Desafortunadamente, es difícil de implementar porque los teléfonos inteligentes y las tabletas vienen en diferentes tamaños y resoluciones; por lo tanto, no hay un formato fijo para mostrar el contenido perfectamente en “todos” los dispositivos.

Aquí hay algunos consejos para ayudarlo a optimizar su sitio web para dispositivos móviles.

Evite crear un sitio web separado para dispositivos móviles:

evite hacer un sitio web amigable para dispositivos móviles por separado

Para facilitar la implementación, a veces los diseñadores, mientras diseñan un sitio web para dispositivos móviles, deciden cortar el contenido para “ajustar” y qué partes no mostrar en el dispositivo móvil. Sin embargo, no podemos controlar qué tipo de contenido quieren ver los usuarios y tampoco es posible crear un espacio separado para dispositivos móviles aparte de un escritorio.

Google lo penalizará si descubre que tiene contenido idéntico para dos mismos sitios web: uno es una versión de escritorio y / o portátil, mientras que el otro es una versión móvil porque solo hay un Google. Por lo tanto, ni siquiera piense en crear un sitio web separado para dispositivos móviles.

Haga uso de diseños receptivos:

usar plantillas de diseño receptivo

El diseño receptivo permite a los desarrolladores de sitios web crear un sitio web que se pueda ver fácilmente en diferentes tamaños de dispositivos. Esto reduce la cantidad de esfuerzo adicional que los desarrolladores deben hacer para que un sitio web sea compatible con diferentes tamaños de dispositivo.

El diseño receptivo utiliza imágenes flexibles, diseños flexibles y consultas de medios de hoja de estilo emergentes. Cuando se utiliza este diseño receptivo en un sitio web, la página web podrá detectar el tamaño y el posicionamiento de la pantalla del usuario y luego ajustar el diseño de la página en consecuencia.

Hacer uso de consultas de medios:

Las consultas de medios le permiten preguntarle a un dispositivo sobre su tamaño y luego señalarle al navegador que muestre las cosas siguiendo el conjunto de CSS que ha establecido en el código:

ejemplo de consultas de pantalla de medios

Las consultas de medios son la parte clave en los sitios web más amigables para dispositivos móviles, pero antes de eso, debe asegurarse de que el sistema esté configurado correctamente para todos los dispositivos actualmente en uso, no solo dos o tres dispositivos móviles más populares. Mantenga una lista de los dispositivos o puede suscribirse para obtener esta información.

Utilice marcos como Bootstrap:

Para el front end, puede hacer uso de los frameworks disponibles gratuitamente como Fundación 3, Esqueleto etc. El mejor marco libre es Bootstrap de Twitter.

usar el marco de arranque

Bootstrap es un marco front-end diseñado para escalar rápida e inevitablemente la página web de su sitio web a cualquier dispositivo. Poner a trabajar un sistema prefabricado es mucho más fácil que crear un nuevo código para cada combinación posible por su cuenta (e incluso probarlo), y es mucho menos improvisado.

Pero antes de comenzar a usar cualquier marco, asegúrese de estudiar si el marco es totalmente compatible con su sitio web y sus objetivos. Cuantos más códigos personalizados y funciones haya en su sitio web, más difícil será garantizar que todo funcione sin problemas en un dispositivo móvil; solicite ayuda de un experto si tiene dificultades.

Siempre use una Metaetiqueta virtual:

La ventana gráfica es un área virtual utilizada por el motor de interpretación del navegador para determinar cómo se escala y dimensiona el contenido. Dicho esto, es un código crítico al construir una experiencia de múltiples dispositivos. Sin este código, su sitio web no funcionará bien en un dispositivo móvil.

Una etiqueta de ventana gráfica le dice a su navegador que la página debe caber en la pantalla. Hay muchas otras configuraciones que puede indicarle a su ventana gráfica que controle. El siguiente es el recomendado para ser usado al comienzo del documento:

Céntrese en un diseño más simple:

usar un diseño receptivo simple

La diferencia significativa entre los sitios web de escritorio y móviles es que las personas prefieren un diseño de sitio web simple mientras visualizan en un dispositivo móvil. Esto es algo del mundo real como cualquier otra cosa: cosas que son grandes y complicadas se vuelven lentas en un dispositivo móvil y una de las principales demandas de los usuarios es tener el contenido del sitio web disponible al instante.

Mantener los diseños simples también hace que sea simple mantener la atención de los espectadores sobre el contenido que desea que vean: los usuarios de dispositivos móviles tienen un lapso de atención extremadamente corto y les conviene mantener el diseño simple en lugar de invertir en un complejo tema.

Nunca ignore el tamaño de fuente y el tamaño del botón:

El tamaño de la fuente y el tamaño del botón en su página web son muy importantes para los dispositivos móviles. El tamaño de la fuente debe ser de al menos 14px. Esto puede parecer grande, pero es mejor que hacer que el usuario haga zoom para leer su contenido; simplifíquelos ajustando la fuente a la máxima claridad. El único momento en el que debe usar una fuente más pequeña (hasta un mínimo de 12 px) es en la etiqueta o en los formularios.

no ignore el tamaño de fuente

Ahora que llegamos a los botones, cuanto más grande sea el botón, mejor; esto reducirá la posibilidad de que los usuarios presionen un botón incorrecto o no lo presionen. Al igual que las pautas de Apple, se recomienda que el tamaño de un botón sea de al menos 44 px por 44 px. Con la ayuda de estas pautas, mejorará su experiencia de usuario y aumentará la tasa de conversión para el comercio electrónico.

Aumentar el tamaño de la imagen:

Cuando se trata de dispositivos móviles, el objetivo es tener el tamaño de archivo más pequeño para las imágenes sin dejar de verse nítido y rico en cualquier pantalla que se vea.. La razón es que el ancho de banda de un dispositivo móvil es mucho menor en comparación con una computadora de escritorio o portátil y, por lo tanto, provoca un mayor tiempo de carga.

Por lo tanto, si va a hacer que sus espectadores descarguen un archivo de 1 MB solo para ver una imagen en miniatura, se irritarán y abandonarán el sitio web.

La facilidad para dispositivos móviles no se trata solo de tener un buen sitio, sino también de mejorar la experiencia del usuario y el tiempo de carga. Reducir el tamaño de la imagen utiliza menos datos (guardar datos de planes de datos limitados), ayuda a cargar la página más rápido y deja una impresión positiva de su sitio web.

Deshágase del zoom predeterminado:

El zoom automático puede alterar los elementos de diseño, especialmente para imágenes y navegación. Puede parecer pequeño o demasiado grande en su diseño. Para resolver este problema, use la metaetiqueta de la ventana gráfica para configurar variables personalizadas dentro del contenido. Asegúrese de agregar la etiqueta en su HTML:

Intenta usar las fuentes estándar:

Las fuentes personalizadas y creativas hacen que su sitio web se vea bien, pero en el caso de los dispositivos móviles, a los usuarios no les gusta que se les solicite que descarguen una fuente para ver una página web. Lo más probable es que no descarguen la fuente y se trasladen a otro sitio web..

Aunque la mayoría de las fuentes vienen instaladas en el dispositivo móvil, podrá utilizarlas en el diseño de su sitio web. Sin embargo, hay una cosa más para recordar: algunas fuentes son más fáciles o más difíciles de readaptar diferentes tamaños, por lo tanto, asegúrese de verificar la legibilidad de la fuente antes de usarla en su diseño.

Tenga en cuenta las instrucciones:

Una computadora de escritorio o computadora portátil promedio es horizontal, por supuesto, nos desplazamos hacia arriba y hacia abajo, pero es ancha. Los teléfonos inteligentes, por otro lado, son elegantes y difamadores en su mayoría, por lo tanto, el ancho del contenido puede variar y, por lo tanto, debe considerarse. Cuando cree videos, imágenes, menús desplegables, recuerde la dirección que usarán las personas mientras ven el contenido.

No tengas miedo de confiar en un profesional para arreglar tu sitio web y hacerlo amigable si algo falla. Esto puede requerir cierta inversión, pero con el aumento diario de usuarios de dispositivos móviles y el algoritmo actualizado de Google, esta inversión podría ser calculada..

Para llevar:

Con la movilización mundial, es muy importante mantener su sitio web amigable para dispositivos móviles y, de hecho, algo por encima de las expectativas, solo así podrá atraer usuarios a su sitio web. Asegúrese de leer las pautas para la compatibilidad móvil y tome la opinión de expertos antes de comenzar el trabajo de su sitio web. Espero que estos consejos lo ayuden a hacer que su sitio web sea amigable para dispositivos móviles. Su sitio web no es lo único que necesita ser compatible con dispositivos móviles, asegúrese de que su gestión social también sea compatible con dispositivos móviles.

Earleen Brown está trabajando con una empresa de servicios de SEO de renombre, una empresa líder de SEO en India. La compañía es básicamente una empresa de TI que proporciona Servicios de SEO India y la ha ayudado mucho a mejorar sus habilidades de escritura.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector