Sitios web móviles

Sin duda los teléfonos móviles y las tabletas son el futuro de las máquinas y la navegación en Internet. Está claro que seguirá habiendo una gran mayoría de usuarios que navegará desde los terminales tradicionales, pero cada vez más va creciendo el uso de los sitios móviles.

Es por esto que, de la misma forma que se puede optimizar un sitio para lor ordenadores de toda la vida, podemos hacer determinadas mejoras a la hora de trabajar con dispositivos móviles.

ADAPTARSE A LA PANTALLA DEL TERMINAL
Categoría: CSS, Imágenes, Móvil

Hay que tener en cuenta que los terminales móviles tienen un tamaño de pantalla limitado. Estamos acostumbrados a las pantallas con altas resoluciones y a diseñar sitios para un ancho mínimo de 1024 píxeles, pero… ¿qué ocurre cuando tenemos pantallas de 480 píxeles?

Teniendo en cuenta esto, y gracias a los CSS podemos hacer que el diseño de las imágenes, textos y demás se adapte al terminal.

Para empezar podríamos elegir el tamaño de la imagen de la cabecera de la página en base al tamaño de pantalla:


/* pantalla mayor de 480px */
@media only screen and (min-device-width: 481px) {
  #header { background-image: url(‘header-full.png’); }
}
/* pantalla menor de 480px */
@media only screen and (max-device-width: 480px) {
  #header { background-image: url(‘header-small.png’); }
}

Esta es una opción aunque no es la única, ya que los últimos terminales llevan la posibilidad de distinguir la resolución de pantalla, por lo que otra posibilidad, en vez del tamaño, sería la calidad. Para ello usaremos los dpi (dots per inch) o puntos por pulgada.
 

/* alta calidad */
@media only screen and (min-resolution: 300dpi),
 only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min--moz-device-pixel-ratio: 1.5) {
  #header { background-image: url(‘header-300dpi.png’); }
}
/* baja calidad */
@media only screen and (max-resolution: 299dpi),
 only screen and (-webkit-max-device-pixel-ratio: 1.5),
 only screen and (max--moz-device-pixel-ratio: 1.5) {
  #header { background-image: url(‘header-72dpi.png’); }
}

ADAPTARSE A LA VELOCIDAD DE CONEXIÓN
Categoría: Conectividad, CSS, Imágenes, JavaScript, Móvil

Los navegadores del sistema operativo Android disponen desde la versión 2.2 de unas funciones en JavaScript con las que se puede detectar el tipo de conectividad que tiene el dispositivo en ese momento, de forma que podemos saber qué cantidad de ancho de banda disponemos. La función es la navigator.connection.


navigator = {
  connection: {
    "type": "4",
    "UNKNOWN": "0",
    "ETHERNET": "1",
    "WIFI": "2",
    "CELL_2G": "3",
    "CELL_3G": "4"
  }
};

Gracias a esta función tenemos disponible una serie de posibilidades si mezclamos un poco de JavaScript y un poco de CSS.

 
var connection, connectionSpeed, htmlNode, htmlClass;
connection = navigator.connection || {'type':'0'};
switch(connection.type) {
  case connection.CELL_3G:
    connectionSpeed = 'mediumbandwidth';
    break;
  case connection.CELL_2G:
    connectionSpeed = 'lowbandwidth';
    break;
  default:
    connectionSpeed = 'highbandwidth';
}
htmlNode = document.body.parentNode;
htmlClass = htmlNode.getAttribute('class') || '';
htmlNode.setAttribute('class', htmlClass + ' ' + connectionSpeed);

Con esto conseguimos asignar la clase base al sitio web, que será medio, bajo o alto, según el tipo de conexión disponible. Ahora sólo queda darle forma gracias a los CSS.


.highbandwidth .logo { background-image:url('logo-high.jpg'); }
.mediumbandwidth .logo { background-image:url('logo-medium.jpg'); }
.lowbandwidth .logo { background-image:url('logo-low.jpg'); }

REDUCCIÓN DE PETICIONES HTTP
Categoría: Conectividad, Móvil

Aunque, en cualquier caso, siempre hay que aplicar las técnicas de reducción de peticiones HTTP generales, no está de más hacer hincapié en algunos detalles para los teléfonos móviles de última generación.

Hay que tener en cuenta que, ya de por sí, las cabeceras HTTP en los terminales móviles pueden ser un 25% más amplias que en los navegadores de escritorios, al tener que enviar por cada petición la lista más detallada de elementos MIME que soportan, entre otras cosas.

  • Usar CSS3 para aquellas opciones en las que se necesitaban imágenes y similares (como los bordes redondeados). Los terminales como Android o Safari soportan border-radius, text-shadow, background linear/radial gradients o box-reflect.
  • Usar en los CSS y HTML codificación en base64 (método data: en base64 para imágenes, principalmente).
  • Evitar redirecciones, como por ejemplo la del acceso a una página que cambia la URL a una versión móvil.
  • Cachear la mayor cantidad de elementos posibles, incluido el AJAX. Incluso, en los casos en los que sea posible, usar el sistema de cacheo de HTML5 (cache-manifest y client-side database).
  • Intentar evitar el uso de cookies y pasar al uso de LocalStorage.
  • Externalizar los CSS y JS a ficheros externos de forma que se puedan cachear con mucha más facilidad y sólo sea necesaria una petición al visitar el sitio por primera vez.
  • Hay sistemas como iOS 2.2 que disponen de una lista de emoticonos integrados en el sistema, y que mediante códigos HTML se pueden mostrar en cualquier página.

REDUCIR EL USO DE JAVASCRIPT
Categoría: JavaScript, Móvil

Sin duda que los terminales de última generación lleven navegadores en los que se puede usar la última especificación de JavaScript es un gran paso, además de estar adaptado al uso de CSS3. Gracias a esto algunas funcionalidades que se convertían en pesadas se pueden realizar de formas mucho más sencillas.

Para las transiciones, anteriormente se usaba una serie de timeout para controlar los tiempos. Ahora, los navegadores basados en WebKit, Firefox u Opera disponen de funciones tal que:

  • W: onwebkittransitionend / F: ontransitionend / O: onotransitionend
  • W: onwebkitanimationstart / F: onanimationstart / O: onoanimationstart
  • W: onwebkitanimationiteration / F: onanimationiteration / O: onoanimationiteration
  • W: onwebkitanimationend / F: onanimationend / O: onoanimationend

Otros detalles a tener en cuenta son los formularios. HML5 permite introducir unos campos que ya incorporan su propia validación de forma interna, como el campo de tipo email por lo que ya no será necesario hacer uso de JavaScript para controlarlos.

Gracias a la base de datos indexedDB que se ha incorporado en iOS 4.2 y Android 2.2 es posible almacenar mucha información con un fácil acceso.

De la misma forma, el sistema de GeoLocalización es muy útil si se necesita, pero en vez de solicitarlo por cada página vista es mejor almacenarlo en la sesión y usarlo como base al menos durante un espacio de tiempo en el que no pueda variar en exceso.