Cuando queremos que nuestra web se adapte a los distintos tipos de dispositivos solemos estar más preocupados en temas de diseño y estéticos dejando de lado nuestra estrategia de contenido.
Nuestra estrategia de contenido es un conjunto de reglas y pautas que debemos adoptar para dirigirnos a nuestro público, de manera que estandaricemos nuestra forma de comunicarnos.
Para ello, antes de adaptar nuestro diseño, es importante clasificar nuestro contenido en relación a la importancia que tiene y decidir cuál queremos priorizar en función del dispositivo.
Entender cuáles son las ídeas principales del texto y cómo ser directo y claro puede tener una gran importancia en temas de SEO, ya que los buscadores otorgan cierta importancia a las palabras en base a estadísticas, es decir, una serie de palabras clave repartidas entre muchos párrafos puede hacer un motor de búsqueda no tenga claro de lo que se está hablando.
¿Cómo clasificar estas estrategias con respecto al dispostivo?
Para crear nuestra estragia de contenido vamos a empezar por clasificar los distintos tipos de dispositivos en el mercado en dos grandes grupos: Los dispositivos de tamaño fijo o los dispositivos de tamaño variable.
Entendemos los dispositivos de tamaño fijo como aquellos que no van a permitir al usuario poder cambiar el tamaño del viewport o que al menos nos dan un número limitado de posibilidades, como podrían ser un dispositivo móvil o un tablet.
En cambio, los dispositivos de tamaño variable son aquellos que sí que permiten al usuario cambiar el viewport, como podría ser un navegador en un PC.
A partir de este simple definición, y habiendo priorizado qué contenido queremos mostrar usaremos la siguiente estrategia: Ya que un dispositivo de tamaño fijo no va a poder cambiar su viewport debemos entregar la versión que podrá ver de manera inmediata. Y en un dispositivo de tamaño variable, debemos de entregar todo el contenido para preparar al navegador a que se pueda adaptar al viewport.
Implementaremos el esquema siguiendo estos pasos
-
Inferir, desde un lenguaje de servidor, qué dispositivo hace la petición.
Por ejemplo, desde PHP podemos usar la librería Mobile detect.
<?php if ( ! ($detect->isMobile () && ! $detect->isTablet ())) : ?> <ul class="">
<?php foreach ($complex_menu as $item) : ?> … <?php endif ?> </ul> <?php endif ?>De esta forma, vamos a ahorrar en dispositivos pequeños y que sabemos que no podrán necesitar la versión móvil una versión bastante precisa del HTML necesario
-
Luego, debemos de preparar nuestro gestor de contenidos con la posibilidad de servir contenido alternativo para ciertos dispositivos de forma que los administradores y webmasters puedan indicar si el módulo se publica o no.
<?php if ( $module->visibleOnAllDevices () || ! ($detect->isMobile () && ! $detect->isTablet ())) : ?> <section class="module <?= $module->visibleOnAllDevices () ? '' : 'hide_on_desktop' ?>"> <?= $module->content ?> </section> <?php endif ?>
¿Cómo servir contenido multimedia?
Servir ciertos recursos como vídeos o imágenes puede requerir un proceso un poco más complicado, sobretodo si tenemos en cuenta que hay dispositivos que utilizan el sistema de retina donde queremos servir contenido con mayor calida.
En este caso las recomendaciones serían las siguientes:
- Intentar servir, cuando se pueda, contenido vectorizado en formato SVG o bien utilizar fuentes de iconos, cuya disponibilidad es prácticamente la misma en todos los dispositivos
- La mayoría de layouts para dispositivos móviles suelen ser una única columna, por lo que tenemos que servir las imágenes en una calidad media y luego remplazarlas, si es necesario, por una adaptada a retina.
- Para dispositivos fijos programar algún intercambio dinámico de contenido o bien utilizar alguna herramienta como Interchange
Comentarios