Revista Informática

Consejos de Google para crear webs adaptativas

Publicado el 26 marzo 2013 por Ferranmunoz @ferran_munoz

HTML LogoEl auge que han tenido los dispositivos como los smartphones o los tablets han hecho que los webmasters tengamos que rompernos la cabeza para diseñar páginas web o sitios que ofrezcan el mismo diseño tanto en un ordenador como en un dispositivo móvil.

No obstante, esto que comento existe y ya se ha adaptado a varias webs (por ejemplo, compunoticias). Y para ello no se tienen que hacer páginas distintas dependiendo del dispositivo desde donde será visitada la web, sino que todo esto tiene una filosofía de trabajo detrás: estamos hablando de que una web tiene que tener un diseño adaptativo (lo que en ingles conocemos como Responsive Web Design). Si una web es adaptativa, el usuario final puede disfrutar del mismo diseño tanto en su ordenador como en su dispositivo, ya que esta se adapta a cualquier dispositivo sin que hayan problemas visuales.

Esto se consigue creando el código HTML de la web una sola vez. Entonces, para decidir que diseño es el que tiene que mostrarse, utilizamos el denominado CSS (o la hoja de estilos de la web) para decidir cual es la forma como se tiene que ver la web dependiendo desde donde esté entrando el usuario.

Responsive Web Design

Google al servicio del webmaster

Pues bien, Google ha publicado una web donde pueden verse varios consejos para los webmasters que quieran adaptar su web a este tipo de diseño. Para empezar, definen los dispositivos móviles (en el ámbito telefónico) en dos categorías:

  • Teléfonos de gama media: teléfonos con navegadores web que no pueden procesar las páginas web habituales que puede procesar un navegador web de escritorio. Esto incluye navegadores para cHTML (iMode), WML, WAP y similares.
  • Smartphones: teléfonos con navegadores web que procesan, por lo menos hasta cierto punto, las páginas normales que procesan los navegadores web de escritorio. Esta categoría incluye los navegadores para móviles recientes que pueden procesar código HTML5. Abarca gran cantidad de dispositivos, tales como los teléfonos basados ​​en Android y los iPhone.

Es recomendable seguir los enlaces que hay por el menú de la izquierda (tales como Guideline for tablets -a pesar del nombre, está en castellano-), ya que proporcionan contenido bastante interesante.


Volver a la Portada de Logo Paperblog