Mobile friendly, diseño web móvil para tu proyecto online

Descarga aquí la in­fo­gra­fía sobre el tráfico global de datos móviles.

Al priorizar la na­ve­ga­ción móvil, Google ha puesto bajo presión a ope­ra­do­res web de todo el mundo. Aunque conceptos como Mobile First o diseño web móvil re­s­po­n­si­vo no son nuevos a los oídos de los ope­ra­do­res de páginas web, “Mo­bi­le­ge­d­don” marcó un nuevo comienzo en la era de la op­ti­mi­za­ción móvil. Ahora no solo los re­s­po­n­sa­bles de grandes páginas web co­r­po­ra­ti­vas o de gobierno, de tiendas online o de portales de noticias se preocupan por cumplir con tales re­qui­si­tos en un margen de tiempo de­te­r­mi­na­do, sino que también las pequeñas empresas y los autónomos con webs pequeñas se ven obligados a invertir en op­ti­mi­za­ción móvil. Sin embargo, la apli­ca­ción de tales ajustes es una cuestión de pre­su­pue­s­to. Mientras que darle un enfoque móvil a un nuevo proyecto web es re­la­ti­va­me­n­te sencillo, adaptar una página web ya existente es un proceso que puede estar asociado a una gran inversión de tiempo y de dinero. De­pe­n­die­n­do del proyecto, también existe la po­si­bi­li­dad de crear una web móvil co­m­ple­ta­me­n­te in­de­pe­n­die­n­te de la web de es­cri­to­rio, ya sea partiendo de cero uti­li­za­n­do pla­n­ti­llas de diseño web móvil re­s­po­n­si­vo o va­lié­n­do­se de plugins para los di­fe­re­n­tes sistemas de gestión de co­n­te­ni­dos.

La web móvil

La ca­ra­c­te­rí­s­ti­ca principal de una página web móvil es que no depende de los do­cu­me­n­tos HTML de la página principal y utiliza un URL distinto. Los dominios de este tipo de webs se ca­ra­c­te­ri­zan por utilizar la letra “m” como nombre del host, en vez de “www”. 

m.ejemplo.es

www.ejemplo.es

Idea­l­me­n­te, toda página de es­cri­to­rio debería contar con una versión web móvil separada. Sin embargo, las páginas web móviles no ne­ce­sa­ria­me­n­te tienen que ser idénticas a sus versiones de es­cri­to­rio. Una página web móvil resulta de gran utilidad cuando los usuarios acceden desde un di­s­po­si­ti­vo móvil a un contenido co­m­ple­ta­me­n­te diferente a cuando lo hacen desde su ordenador en casa. Para aclararlo mejor, se puede analizar el ejemplo de la página de Iberia. Mientras que la oferta de es­cri­to­rio “www.iberia.com/” cuenta con una gran cantidad de in­fo­r­ma­ción sobre la totalidad de sus productos y servicios, su versión móvil “m.iberia.com” se concentra pri­n­ci­pa­l­me­n­te en los aspectos de reserva, check-in y gestión de la reserva.

En general, las páginas web móviles están hechas para adaptarse co­rre­c­ta­me­n­te a las pantallas de los sma­r­t­pho­nes. Esto se refleja en el ajuste perfecto al tamaño de pantallas pequeñas, en el uso de grandes botones y en que pre­s­ci­n­den de gráficos con un uso intensivo de datos. Sin embargo, este tipo de páginas web móviles que han sido diseñadas para pantallas más pequeñas, no se muestran de manera óptima en otros di­s­po­si­ti­vos como tablets. A co­n­ti­nua­ción, pre­se­n­ta­mos las razones para crear una web móvil separada.

Ventajas:

• Los ope­ra­do­res de páginas web pueden es­pe­ci­fi­car exac­ta­me­n­te qué tipo de contenido quieren optimizar para móviles y cuál para na­ve­ga­do­res de es­cri­to­rio.
• Ambas versiones de la web se pueden pe­r­so­na­li­zar por separado sin que los cambios afecten a la otra.
• En el diseño web móvil, los de­sa­rro­lla­do­res tienen la opo­r­tu­ni­dad de responder a las exi­ge­n­cias técnicas del tipo de terminal (ge­ne­ra­l­me­n­te sma­r­t­pho­nes).
• Es posible crear páginas web pequeñas que funcionen co­rre­c­ta­me­n­te incluso cuando el usuario navega con una tarifa de datos reducida.

De­s­ve­n­ta­jas:

• Trabajo adicional, pues cada página web que haya sido creada como una versión móvil separada debe ser ge­s­tio­na­da de manera separada.
• Los cambios rea­li­za­dos en la versión de es­cri­to­rio no se rea­li­za­rán en la versión móvil.
• l crear la versión móvil de una página web en general se está creando contenido duplicado. Esto puede tener un impacto negativo en el po­si­cio­na­mie­n­to en los re­su­l­ta­dos de búsqueda.

Plantilla ada­p­ta­ti­va

Una al­te­r­na­ti­va a la creación de una web móvil es optar por una plantilla ada­p­ta­ti­va con la que la web se adapte au­to­má­ti­ca­me­n­te al di­s­po­si­ti­vo. Con esta, la vi­sua­li­za­ción de una página web se realiza en función del rango visible (viewport) de la pantalla utilizada. Las pla­n­ti­llas ada­p­ta­ti­vas están definidas por puntos de corte pre­de­fi­ni­dos, es decir, una cua­drí­cu­la de diseño re­la­ti­va­me­n­te estricta que garantiza la vi­sua­li­za­ción exacta desde di­fe­re­n­tes puntos de vista (vista de es­cri­to­rio, vista en tablets y vista para sma­r­t­pho­nes). A di­fe­re­n­cia del diseño web re­s­po­n­si­vo, del que ha­bla­re­mos en el siguiente punto, las pla­n­ti­llas ada­p­ta­ti­vas no se adaptan au­to­má­ti­ca­me­n­te a todos los di­s­po­si­ti­vos. Los fu­n­da­me­n­tos técnicos del diseño web ada­p­ta­ti­vo son las llamadas Media Queries (consultas de medios). Este es un concepto CSS3 que rige la asi­g­na­ción de una hoja de estilo a un medio de salida en función de sus pro­pie­da­des. Así, las páginas web son op­ti­mi­za­das para adaptarse a de­te­r­mi­na­dos di­s­po­si­ti­vos. Los de­sa­rro­lla­do­res web se enfocan pri­n­ci­pa­l­me­n­te en aparatos tan populares como el iPhone o el iPad, lo que hace que muchas veces no se adapten de forma óptima a todos los di­s­po­si­ti­vos.

Ventajas:

• En co­m­pa­ra­ción con el diseño web re­s­po­n­si­vo, las pla­n­ti­llas ada­p­ta­ti­vas gozan de una co­m­ple­ji­dad reducida.
• Debido a que los diseños ada­p­ta­ti­vos solo admiten un número limitado de vistas, los ope­ra­do­res web tienen un mejor control sobre la pre­se­n­ta­ción del contenido.
• A di­fe­re­n­cia de las páginas web móviles, con las pla­n­ti­llas ada­p­ta­ti­vas solo se debe gestionar una única versión.

De­s­ve­n­ta­jas:

• El enfoque del diseño ada­p­ta­ti­vo en ciertos tamaños de pantalla suele conllevar problemas de vi­sua­li­za­ción para algunos di­s­po­si­ti­vos.
• Elegir los puntos de corte pre­de­fi­ni­dos requiere un análisis previo del público objetivo deseado.
• En contraste con una página web móvil, en el diseño ada­p­ta­ti­vo se mostrará una única versión para todas las pantallas. Por ello, una reducción de la carga de datos para di­s­po­si­ti­vos móviles solo es posible de forma limitada.

Plugins CMS para una web mobile friendly

Una solución económica para aquellas páginas web basadas en un sistema de gestión de co­n­te­ni­dos es la gran oferta de plugins para optimizar una web para di­s­po­si­ti­vos móviles sin invertir mucho tiempo. Una de las so­lu­cio­nes más populares es el plugin WPTouch para WordPress, el sistema de gestión de co­n­te­ni­dos más utilizado en el mundo. Este plugin permite a los pro­pie­ta­rios de páginas web crear una versión móvil in­de­pe­n­die­n­te de su web exlusiva para di­s­po­si­ti­vos móviles. Una al­te­r­na­ti­va a WPTouch es el WP WP Mobile Edition. Ventajas:

• La im­ple­me­n­ta­ción de estos y otros plugins es una al­te­r­na­ti­va fácil y económica. Por lo general, las versiones básicas están di­s­po­ni­bles de forma gratuita.

De­s­ve­n­ta­jas:

• El correcto fu­n­cio­na­mie­n­to de la página web depende de un tercero, en este caso el soporte de software.
• El contenido entregado a los di­fe­re­n­tes di­s­po­si­ti­vos siempre será el mismo. Por lo tanto, los ope­ra­do­res web tienen menor libertad para responder a las ne­ce­si­da­des es­pe­cí­fi­cas de los di­s­po­si­ti­vos uti­li­za­dos por sus vi­si­ta­n­tes.

Muchos sectores de Internet se de­sa­rro­llan en función de las ac­tua­li­za­cio­nes de Google, el líder entre los bu­s­ca­do­res. La empresa ha logrado reunir más del 90 por ciento de la totalidad de las búsquedas en casi todos los mercados más re­le­va­n­tes. Como co­n­se­cue­n­cia, aquellos ope­ra­do­res web que pierdan de vista ac­tua­li­za­cio­nes como, por ejemplo, el “Mo­bi­le­ge­d­don”, se verán afectados con una pérdida si­g­ni­fi­ca­ti­va de su vi­si­bi­li­dad en las páginas de re­su­l­ta­dos. En su guía para móviles, Google explica los motivos por los que prefiere el diseño web re­s­po­n­si­vo, ju­s­ti­fi­cá­n­do­lo de la siguiente forma:

• El contenido está di­s­po­ni­ble en un único URL, fa­ci­li­ta­n­do que los usuarios puedan compartir y enlazar el contenido.
• A di­fe­re­n­cia de la operación paralela de una web móvil y una web de es­cri­to­rio, el diseño web re­s­po­n­si­vo facilita el proceso de in­de­xa­ción. Con ello, Google no tiene que reconocer las di­fe­re­n­cias co­rre­s­po­n­die­n­tes para webs de ordenador y de di­s­po­si­ti­vos móviles.
• Los proyectos web re­s­po­n­si­vos requieren un menor ma­n­te­ni­mie­n­to co­m­pa­ra­das con la gestión de varias páginas con el mismo contenido.
• Dado que los diseños re­s­po­n­si­vos no necesitan re­di­re­c­cio­nes, se pueden evitar aquellos errores ha­bi­tua­les cuando se gestionan di­fe­re­n­tes páginas web.

Sin embargo, el punto más im­po­r­ta­n­te para Google es que las páginas web re­s­po­n­si­vas solo necesitan una in­de­xa­ción, mientras que las páginas web móviles in­de­pe­n­die­n­tes deben ser indexadas por el crawler de manera in­di­vi­dual. En otras palabras, gracias al diseño web re­s­po­n­si­vo, el buscador ahorra una cantidad si­g­ni­fi­ca­ti­va de recursos.