Op­ti­mi­za­ción móvil: los errores más comunes

Hoy en día, “Mobile First” es el lema que impera en el diseño web moderno. Cada vez es más común que los usuarios empleen, además de los or­de­na­do­res de es­cri­to­rio, sma­r­t­pho­nes o tablets para navegar por páginas móviles desde cualquier lugar o có­mo­da­me­n­te desde el sofá de su casa. En este sentido, la op­ti­mi­za­ción móvil es muy im­po­r­ta­n­te para el éxito de los proyectos web, pero una página web op­ti­mi­za­da para móviles no es en sí misma sinónimo de una buena ex­pe­rie­n­cia de usuario y de una op­ti­mi­za­ción bien lograda para los bu­s­ca­do­res. A co­n­ti­nua­ción te pre­se­n­ta­mos los errores más comunes a la hora de crearlas y te contamos cuál es la mejor manera de co­n­se­gui­r­lo.

En vista de la amplia mayoría de usuarios móviles de Internet, queda claro que la tendencia de uso de la web móvil no puede pasar des­ape­r­ci­bi­da para los de­sa­rro­lla­do­res, a pesar del desafío que esto implica. En este entorno se da la opo­r­tu­ni­dad de llegar a nuevas au­die­n­cias y de vi­n­cu­lar­los al proyecto web también desde el punto de vista móvil. El objetivo debe ser mejorar la usa­bi­li­dad y optimizar las páginas web para un número cada vez más elevado de di­s­po­si­ti­vos móviles con acceso a Internet. El Mobile First es un concepto que se tiene en cuenta en esta tendencia y en él entran en juego factores como las páginas adaptadas a los móviles, el diseño re­s­po­n­si­vo y las apli­ca­cio­nes. Además, la op­ti­mi­za­ción móvil es un im­po­r­ta­n­te factor de ranking en bu­s­ca­do­res como Google. No obstante, la re­mo­de­la­ción de las páginas web con fines de op­ti­mi­za­ción móvil se ve amenazada por caídas y errores que deben evitarse a toda costa.

El primer y más básico error puede darse a la hora de se­le­c­cio­nar la variante de co­n­fi­gu­ra­ción. A este respecto existen di­fe­re­n­tes formas de adaptar las páginas web al diseño móvil, como, por ejemplo, por medio del diseño re­s­po­n­si­vo, de una página web móvil diferente o haciendo uso del diseño ada­p­ta­ti­vo. Una de las so­lu­cio­nes más elegantes es, sin duda, el diseño re­s­po­n­si­vo. Junto a las páginas móviles y a los diseños ada­p­ta­ti­vos, las páginas web con diseño re­s­po­n­si­vo tienen un papel destacado en el ranking de Google. Otra de las ventajas del re­s­po­n­si­ve design es que el foco de atención no se centra en los di­s­po­si­ti­vos o sistemas ope­ra­ti­vos, sino que se adapta au­to­má­ti­ca­me­n­te al tamaño de cada pantalla. Así, los ad­mi­ni­s­tra­do­res web se be­ne­fi­cian de un ma­n­te­ni­mie­n­to más sencillo y los vi­si­ta­n­tes de las páginas de una usa­bi­li­dad pe­r­ma­ne­n­te. Por co­n­si­guie­n­te, cabe tener en cuenta en primer lugar al público objetivo y responder a preguntas como: ¿qué di­s­po­si­ti­vos y tamaños de pantalla son re­le­va­n­tes para tus vi­si­ta­n­tes y para tu página web?, ¿qué variantes de vi­sua­li­za­ción pueden ofrecer a tus vi­si­ta­n­tes los mejores re­su­l­ta­dos? Si se elige la co­n­fi­gu­ra­ción adecuada desde el principio, se pueden evitar muchos de los errores po­s­te­rio­res más comunes. Esto implica, sobre todo, a la elección de un diseño re­s­po­n­si­vo, más complejo pero pre­fe­ri­ble desde el punto de vista del SEO y de la usa­bi­li­dad, ya que si se quiere cambiar a esta versión po­s­te­rio­r­me­n­te, la tra­n­si­ción se convierte en muchos casos en un proceso muy laborioso y el re­la­n­za­mie­n­to de las páginas resulta bastante costoso. También hay que tener en cuenta que el diseño re­s­po­n­si­vo no siempre resulta válido para todos los proyectos: las páginas muy complejas para las que se tienen que cargar grandes ca­n­ti­da­des de datos pueden tardar más en abrirse en los di­s­po­si­ti­vos móviles con mala conexión y con un hardware más débil.

La interfaz de usuario o user interface es la segunda fuente de errores. Debido a que el manejo en te­r­mi­na­les móviles tiene lugar, por lo general, mediante pantallas táctiles, las malas de­ci­sio­nes con respecto a la interfaz gráfica de usuario, entre los que se en­cue­n­tran una letra muy pequeña, un campo de vi­sua­li­za­ción sin definir, enlaces o botones sin apenas se­pa­ra­ción o una na­ve­ga­ción pobre, pueden dar lugar a problemas si­g­ni­fi­ca­ti­vos.

Para lograr una correcta op­ti­mi­za­ción móvil, es im­pre­s­ci­n­di­ble definir un campo de vi­sua­li­za­ción. En caso contrario, se utilizará au­to­má­ti­ca­me­n­te el ancho de es­cri­to­rio estándar en pantallas más pequeñas.

De esta manera, los usuarios están obligados a utilizar el zoom con los dedos índice y pulgar y a hacer scroll de forma ho­ri­zo­n­tal, algo nada re­co­me­n­da­ble en la web móvil. La solución a este problema es in­tro­du­cir la me­tae­ti­que­ta viewport para informar al navegador móvil acerca de la medida y el es­ca­la­mie­n­to de la página. Google re­co­mie­n­da para ello la siguiente línea:

El dato “width=device-width” indica que la anchura de la pantalla se tiene que adaptar a la del di­s­po­si­ti­vo (device). El atributo “initial-scale=1” indica que existe una relación 1:1 entre las CSS y los píxeles in­de­pe­n­die­n­tes del di­s­po­si­ti­vo y se encarga de que el es­ca­la­mie­n­to no varíe cuando se gire el di­s­po­si­ti­vo.

Para los usuarios es fru­s­tra­n­te cuando los textos no pueden leerse o es muy difícil hacerlo. Para que la fuente sea legible en cualquier di­s­po­si­ti­vo, se debe optar por un tamaño de letra co­n­si­de­ra­ble que permita escalarse con hojas de estilo CSS. Asimismo, para que el es­ca­la­mie­n­to sea correcto en cualquier di­s­po­si­ti­vo se tiene que definir a priori y como ya se ha indicado an­te­rio­r­me­n­te, el campo de vi­sua­li­za­ción. El tamaño de fuente básico que re­co­mie­n­da Google es de 16 píxeles CSS. El resto de tamaños pueden escalarse re­la­ti­va­me­n­te para los pa­rá­me­tros fu­n­da­me­n­ta­les. Esto tiene lugar no­r­ma­l­me­n­te mediante la siguiente clase CSS:

El 75 por ciento del tamaño de letra estándar hace re­fe­re­n­cia a 12 píxeles CSS. La clase CSS “large” se co­rre­s­po­n­de con el 125 por ciento del tamaño de fuente básico, es decir, con 20 píxeles CSS.

A pesar de definir tamaños de fuente relativos, no se deben incluir muchos tipos de letra o tamaños de fuente in­ne­ce­sa­rios en las páginas web, pues puede crear un efecto de so­bre­ca­r­ga visual y co­m­ple­ji­dad, lo contrario de lo re­co­me­n­da­ble.

Si ya tienes ex­pe­rie­n­cia con los mo­vi­mie­n­tos de­s­li­za­n­tes en las pantallas táctiles, en­te­n­de­rás lo im­po­r­ta­n­te que es la in­te­gra­ción práctica de los elementos de control. A este respecto sería un pecado mortal colocar los enlaces y los botones sin apenas espacio entre ellos. Las yemas de los dedos de un adulto son, por na­tu­ra­le­za, más anchas que el puntero del ratón de los or­de­na­do­res de es­cri­to­rio, lo que ronda en torno a los 10 mm. Por ello, en páginas que tienen en cuenta la op­ti­mi­za­ción móvil, los elementos sobre los que se tiene que hacer clic deben colocarse con una distancia su­fi­cie­n­te entre ellos y tener un tamaño adecuado. Si están muy cerca se corre el peligro de hacer clic en el enlace in­co­rre­c­to, lo que conlleva a la fru­s­tra­ción y a una mala usa­bi­li­dad. Para las in­te­r­fa­ces, Google re­co­mie­n­da una anchura mínima de 7 mm o 48 píxeles CSS.

En la op­ti­mi­za­ción web, la rapidez a la hora de visitar las páginas desempeña un papel crucial, de modo que los adjetivos “rápido” y “corto” deben tomarse en serio a la hora de elaborar páginas móviles. Por co­n­si­guie­n­te, una página web móvil debe contar con una función de búsqueda in­te­li­ge­n­te y fá­ci­l­me­n­te lo­ca­li­za­ble. Esta debe estar situada en la página de inicio y debe poderse encontrar de un vistazo. Las búsquedas deben poderse completar por medio de la función de au­to­co­m­ple­tar para facilitar a los usuarios el manejo del teclado en la pantalla táctil. En nuestra Digital Guide puedes encontrar más in­fo­r­ma­ción sobre cómo integrar una función de búsqueda user friendly.

A la hora de navegar por Internet es muy molesto observar a una página en blanco mientras se descarga. Los tiempos de carga se erigen como un “co­n­ve­r­sion killer” y es que estos influyen di­re­c­ta­me­n­te en el ranking en los bu­s­ca­do­res. Las es­ta­dí­s­ti­cas muestran que en los últimos años los in­te­r­nau­tas se han ido volviendo cada vez más im­pa­cie­n­tes y que una descarga lenta no solo es relevante para las tiendas online. En la mobile web se dan a menudo fallos de conexión en sitios públicos o en entornos rurales. Algunos de los errores más comunes en lo que respecta al re­n­di­mie­n­to son:

• Imágenes de­s­co­m­pri­mi­das y/o formatos de imagen muy grandes
• Gran cantidad de imágenes y otros elementos mu­l­ti­me­dia
• Código HTML y CSS sin pulir
• Exceso de Ja­va­S­cri­pt
• Código fuente sin comprimir
• Gran cantidad de so­li­ci­tu­des HTTP
• Redirects
• Ausencia de caché de navegador
• Servidor lento

La mayoría de errores se pueden so­lu­cio­nar fá­ci­l­me­n­te. Para ello se puede utilizar, por ejemplo, la he­rra­mie­n­ta de Google PageSpeed Insights, con la que se puede comprobar la velocidad de cualquier di­s­po­si­ti­vo y obtener in­fo­r­ma­ción relevante para su op­ti­mi­za­ción. Po­s­te­rio­r­me­n­te se pueden adoptar medidas concretas para ello, como por ejemplo:

• Comprimir imágenes: en nuestra guía digital ya hemos explicado el si­g­ni­fi­ca­do de la co­m­pre­sión, que se puede llevar a cabo por medio de he­rra­mie­n­tas de freeware o de apli­ca­cio­nes basadas en el navegador. Además, el tamaño de las imágenes se puede gestionar de forma ada­p­ta­ti­va con las etiquetas “picture” y @media y los formatos de archivo re­co­me­n­da­dos son JPEG, GIF y PNG. Como al­te­r­na­ti­va, también se puede recurrir a meras CSS, icon fonts o SVG en lugar de optar por la uti­li­za­ción de imágenes.

• De­s­co­m­pri­mir y comprimir el código de HTML, CSS y Ja­va­S­cri­pt. Para esto también existen he­rra­mie­n­tas es­pe­cia­les. La eli­mi­na­ción de espacios in­ne­ce­sa­rios o el de­s­pla­za­mie­n­to de los archivos Ja­va­S­cri­pt al final del body pueden llevar apa­re­ja­das co­n­se­cue­n­cias positivas. Aquí puedes obtener in­fo­r­ma­ción sobre he­rra­mie­n­tas y consejos para las hojas CSS.

• Utilizar la memoria caché para liberar el servidor web: mediante el al­ma­ce­na­mie­n­to local de los archivos que se usan con más asiduidad se puede mejor el tiempo de carga para los usuarios ha­bi­tua­les. En las apli­ca­cio­nes web pro­gre­si­vas, la caché offline también permite obtener un buen re­n­di­mie­n­to.

• Reducir el número de so­li­ci­tu­des HTTP mediante la agru­pa­ción de los recursos.

• Mejorar el re­n­di­mie­n­to de los sistemas de gestión de co­n­te­ni­dos (CMS).

• Si tu página web recibe muchas visitas del ex­tra­n­je­ro, también puede ser de utilidad recurrir a una Content Delivery Network (CDN).

• Las Ac­ce­le­ra­ted Mobile Pages (AMP) también pueden ayudar a mejorar el re­n­di­mie­n­to.

• Si estas medidas no fueran su­fi­cie­n­tes, también es de utilidad la mejora del entorno de alo­ja­mie­n­to. Sobre todo las páginas de gran alcance deben estar provistas de un espacio web y un tráfico ili­mi­ta­dos. Asimismo, la ac­tua­li­za­ción del hardware, esto es, la uti­li­za­ción de memorias SSD, también permite aumentar el re­n­di­mie­n­to.

El objetivo de Google consiste en permitir acceder con mayor facilidad al contenido de las páginas para móviles. En muchos casos, la pu­bli­ci­dad in­te­r­s­ti­cial que ocupa toda la pantalla, como en el ejemplo anterior, bloquea el contenido co­m­ple­ta­me­n­te y, por lo tanto, no debe uti­li­zar­se. Quedan excluidos los datos le­ga­l­me­n­te vi­n­cu­la­n­tes de las políticas sobre cookies, así como los banners discretos o los cuadros de diálogo de inicio de sesión para co­n­te­ni­dos que no son públicos y que no se pueden indexar. El por qué reside en que no están co­n­si­de­ra­dos como re­fe­re­n­cias a la app.

Debido a que Googlebot indexa y renderiza los co­n­te­ni­dos de las páginas web, el archivo robots.txt no debe blo­quear­lo, lo que significa que dicho bot debe tener acceso, al igual que un usuario habitual, a todos los archivos CSS, Ja­va­S­cri­pt y de imagen de las páginas web. Si, por el contrario, se definen ciertos límites en el archivo robots.txt, no se podrá indexar contenido im­po­r­ta­n­tes, lo que dará lugar, como co­n­se­cue­n­cia, a un ranking negativo.

Asimismo, también se pueden examinar las páginas web con ayuda de la Google Search Console por medio de la función “Explorar como Google” para vi­sua­li­zar cómo el Googlebot las rastrea y renderiza. Además, esta he­rra­mie­n­ta también permite analizar y examinar el archivo robots.txt para ver cuáles son los elementos blo­quea­dos.

Si te decantas por una página web móvil en lugar de por una página con diseño re­s­po­n­si­vo, puede que surjan di­fi­cu­l­ta­des adi­cio­na­les para tu página op­ti­mi­za­da para móviles. Se puede hablar a este respecto de re­di­re­c­cio­na­mie­n­tos in­co­rre­c­tos y de errores 404 que solo aparecen en las páginas op­ti­mi­za­das para móviles, pero no en los usuarios de es­cri­to­rio.

En vista del número de usuarios de las mobile webs, sería de­sas­tro­so recurrir a la op­ti­mi­za­ción móvil para crear una página es­pe­cí­fi­ca, descuidar su ma­n­te­ni­mie­n­to frente a la versión de es­cri­to­rio y solo ofrecer co­n­te­ni­dos si­m­pli­fi­ca­dos. Es un error pensar que los di­s­po­si­ti­vos móviles se usan solo para realizar consultas breves y rápidas en los trayectos. A este respecto, según un estudio de inMobi, el 61 % de los usuarios de las webs móviles emplean el sma­r­t­pho­ne o la tablet mientras ven la te­le­vi­sión en el sofá, aunque también entran en escena los or­de­na­do­res de es­cri­to­rio pero en menor medida. Esto hace que los te­r­mi­na­les móviles se co­n­vie­r­tan en los di­s­po­si­ti­vos más usados. Si un usuario realiza una búsqueda con un di­s­po­si­ti­vo móvil y en una página web de confianza no encuentra la misma in­fo­r­ma­ción que en la página de es­cri­to­rio, esto le supondrá un esfuerzo adicional. Así, dicho usuario se verá obligado a visitar la versión de es­cri­to­rio y a co­n­fo­r­mar­se con un manejo más co­m­pli­ca­do de la misma (zoom, errores ti­po­grá­fi­cos debido a enlaces muy pequeños, menús de­s­ple­ga­bles, etc.). Todavía resulta más negativo que la página web móvil carezca de enlaces a la versión de es­cri­to­rio o que esta salte y busque los co­n­te­ni­dos en otro lugar mejor op­ti­mi­za­do para di­s­po­si­ti­vos móviles. Por ello, la op­ti­mi­za­ción móvil debe ir en­ca­mi­na­da a crear páginas provistas de todos los co­n­te­ni­dos y funciones im­po­r­ta­n­tes con los que también cuenta la página de es­cri­to­rio.

La página web we­choo­se­the­moon.org tiene una apa­rie­n­cia muy ca­ra­c­te­rí­s­ti­ca y un valor añadido para sus vi­si­ta­n­tes. Esta evoca a Apolo 11, la misión con la que el hombre pisó la luna por primera vez, y permite obtener una visión digital de la misma. La página empezó a funcionar en el año 2009, en el 40º ani­ve­r­sa­rio de la misión y se basa, como no es de extrañar, en Flash.

Quien utilice un di­s­po­si­ti­vo móvil para visitar la página o no tenga instalado Flash, solo podrá ver la página tal y como se muestra en la captura de pantalla anterior con la in­vi­ta­ción a instalar Flash. Esto conlleva un gasto adicional y lleva aparejada la exclusión del usuario, con lo que la fru­s­tra­ción está servida.

Debido a estas ci­r­cu­n­s­ta­n­cias, es co­n­ve­nie­n­te recurrir a la uti­li­za­ción de HTML5 para integrar vídeos y ani­ma­cio­nes. El mismo Adobe reconoce sus ventajas y re­co­mie­n­da a los gestores de co­n­te­ni­dos que utilicen el nuevo estándar HTML5. Asimismo, debido a las brechas de seguridad del formato Flash, es aco­n­se­ja­ble recurrir a otras al­te­r­na­ti­vas para que los vi­si­ta­n­tes puedan acceder a los co­n­te­ni­dos que buscan in­de­pe­n­die­n­te­me­n­te del di­s­po­si­ti­vo que utilicen y sin necesidad de in­s­ta­la­ción. Consulta el tutorial de nuestra Digital Guide si quieres obtener más in­fo­r­ma­ción sobre cómo integrar vídeos con HTML.

También son pro­ble­má­ti­cos los desvíos que solo funcionan para de­te­r­mi­na­dos di­s­po­si­ti­vos o para los sistemas ope­ra­ti­vos elegidos. Por ello, es co­n­ve­nie­n­te comprobar si los reenvíos funcionan de igual manera para todos los sistemas ha­bi­tua­les y adaptar la co­n­fi­gu­ra­ción del servidor si procede. Además, a través de la Google Search Console se puede recibir in­fo­r­ma­ción sobre reenvíos de­fe­c­tuo­sos.

Las re­di­re­c­cio­nes correctas también son im­po­r­ta­n­tes cuando los usuarios de sma­r­t­pho­nes o tablets obtienen un error 404 en sus di­s­po­si­ti­vos, pero este no sucede en la misma página para usuarios de es­cri­to­rio. En este caso, las re­di­re­c­cio­nes también tienen que de­sa­rro­llar­se co­rre­c­ta­me­n­te, a no ser que exista una versión móvil de la página, aunque esta no debería notificar la presencia de ningún error. En este sentido es mucho mejor redirigir al usuario a una página inade­cua­da, aunque esto esté ligado a re­s­tri­c­cio­nes de usa­bi­li­dad, que no mostrarle ningún contenido.