Páginas Híbridas tradicional / móvil

Una opción menos conocida pero muy lógica para muchos sitios web es usar múltiples CSS, para así adaptar la presentación del contenido de los sitios web tradicionales a los teléfonos móviles.  Las Hojas de Estilo en Cascada (CSS) son instrucciones que al interpretarse establecen cómo el contenido de un sitio web debe ser mostrado. Al mostrar una página, el navegador analiza la hoja de estilo para ver cómo la página debería ser mostrada y qué colores y fuentes debe usar interpretando el CSS. (Al principio de los estándares de HTML las fuentes y colores, es decir, el estilo, eran incluidos en el propio código HTML de los sitios webs).

Las hojas de estilo pueden ser internas, esto significa que el código es para parte de cada página, o pueden ser externas, lo que significa que el código  que controla los estilos es albergado en un archivo independiente en el servidor. Las hojas de estilos externas son documentos de texto que controlan cómo cada página (o un grupo de páginas) se presenta en el site. Esto facilita la actualización del site entero simplemente actualizando un simple archivo CSS. Las hojas de estilo facilitan a los navegadores móviles el código que tienen que interpretar para mostrar la página de una manera óptima en el terminal móvil. Esto minimiza el tiempo que tarda una página para ser mostrada en un móvil, también porque la hoja de estilo debe ser descargada únicamente una vez por lo que la carga será aún más rápida para posteriores páginas del site. Al principio, no todos los teléfono móviles soportaban CSS, pero ahora cualquier Smartphone es capaz de interpretarlo.  

Si un site tradicional está codificado limpiamente (preferiblemente con XHTML) y las hojas de estilo han sido empleadas para controlar la presentación del sitio, se puede simplemente crear un nueva hoja de estilo “handheld” que determinará cómo el contenido del sitio web  es mostrado en un teléfono móvil. Para esto, se ha de añadir un enlace a la hoja de estilo para móviles en cada página, después del enlace a la hoja de estilo tradicional. Los navegadores móviles automáticamente interpretarán la hoja de estilo “handheld” si ésta está disponible.

<link rel=”stylesheet” type=”text/css” media=”screen”

href=”screen.css”/>

<link rel=”stylesheet” type=”text/css” media=”handheld” href=“handheld.

css”/>

 

Esta solución puede ser una buena opción para ahorrar tiempo y dinero en el desarrollo de sitios móviles, y se trata de una solución óptima desde el punto de vista del SEO: esta solución permite mantener todos los links y el posicionamiento del site tradicional en las búsquedas en móviles, de esta manera también se evita tener que hacer  actualizaciones por duplicado siempre que el site tradicional se actualice. Así se evita el problema del contenido duplicado y se cumple el concepto de “independencia de dispositivo” Las hojas de estilo para móviles, deberían también ser usadas en páginas móviles que están alojadas en subdirectorios o subdominios, pero esto no es tan beneficioso porque de esta forma no se aprovecha el posicionamiento existente en el  dominio principal.

 

Incluso se puede usar el atributo “display=none” en las hojas de estilo para, por ejemplo, mostrar elementos en el site para móviles y no el site tradicional, o viceversa. Esta solución puede ser un poco complicada si no se maneja el CSS, pero sobre todo se trata de una solución simple muy efectiva. El mayor inconveniente que presenta esta solución es cuando se trata de páginas híbridas que tienen un montón de imágenes o elementos como Flash que no interpretan los navegadores móviles. En la mayoría de los casos, se pretende eliminar estos elementos para la interpretación móvil. Hay que tener en cuenta que, aunque la hoja de estilo es usada para no mostrar elementos conflictivos para los navegadores móviles, estos elementos, a pesar de no mostrarse, han de ser cargados, suponiendo un tiempo extra de carga de la página para móvil.

En algunos casos, los navegadores podrían tardar  mucho tiempo en localizar la hoja externa de estilo apropiada. Especialmente en la versión para móviles de Internet Explorer, el cual interpreta la hoja de estilo tradicional “screen” ignorando así la hoja de estilo “handheld”. También existen problemas con el navegador NetFront, usado en la playstation, el cual interpreta únicamente las hojas de estilo que están embebidas en la página.  El siguiente código ( http://johannburkard.de/blog/www/mobile/Linking-CSS-for-handhelddevices-

revisited.html  ), se  embebe una hoja de estilo “handheld”  para NetFront y oculta la hoja de estilo “screen” para IEMobile y NetFront:

<link rel=”stylesheet” type=”text/css”

href=”handheld.css” media=”handheld”/>

<script type=”text/javascript”>

if (/(NetFront|PlayStation)/i.test(navigator.userAgent))

document.write(unescape(‘%3C’) +

‘link rel=”stylesheet” href=”handheld.css”/’ + unescape(‘%3E’));

if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera

Mini)/i

.test(navigator.userAgent))

document.write(unescape(‘%3C%21–’));

</script>

<style type=”text/css”>

@import URL(“handheld.css”) handheld

</style>

<link rel=”stylesheet” type=”text/css”

href=”screen.css” media=”screen,tv,projection,print”/>

<!– –>

Desde una perspectiva de SEO, la arquitectura Páginas Híbridas tradicional / móvil es la mejor solución, ya que se aprovecha el ranking inicial del sitio web tradicional y no se genera contenido duplicado.