Diseño Web adaptativo HTML5
En los tiempos que corren las páginas webs se han convertido en una poderosa herramienta de publicidad, potenciada por el incremento de potenciales visitantes de nuestra tienda-online o web personal o corporativa, con el auge de la telefonía móvil, los famosos smartphones y tablets, bien sea con un móvil/tablet con sistema operativo android, o sea con un iphone/ipad, …, u otros tipos de dispositivos similares.
Esto supone que, cuando queramos tener una página web o una tienda-online, tenemos que hacer que está esté optimizada para este tipo de dispositivos, tanto en su adaptabilidad como en su optimización. Debemos pensar que ‘no todo el mundo accede a internet de la manera que nosotros mismos lo hacemos’, quiero decir, si yo habitualmente accedo a internet mediante un pc, no puede asumir que casi todo el mundo hará lo mismo. Hoy en día muchos usuarios y visitante de nuestra tienda o web probablemente lo harán desde un smartphone o tablet, y por lo tanto nuestra página web debería verse bien, sin que tengamos que hacer un esfuerzo de lectura, en cualquier dispositivo.
Antiguamente, la técnica consistía en crear una versión para móviles y otra para un pc convencional (técnica totalmente obsoleta y que lamentablemente vemos todavía en páginas creadas incluso en este año 2014). Las desventajas obvias son:
- El coste de implantación es grande ya que son 2 webs distintas, cada uno con su diseño, que eso sí pueden compartir contenidos
- La web de moviles es independiente en gran medida a al web versión pc, hay que mantener las 2 webs, casi como si fueran independientes
- La versión para móviles la podemos adaptar a un tipo genérico de pantalla, pero habrá dispositivos que se quedarán fuera de este rango por, digamos, estar a medio camino entre pc y móvil (tablets, notebooks,…)
Para ello nosotros utilizamos, desde hace ya bastante tiempo en todas nuestra webs, tanto webs corporativas como tiendas on-line, la tencología HTML5 responsive design. Consisten en webs cuyo código esta optmizado para adaptarse al dispositivo desde el que se está viendo la web. Es decir, la idea que, la web debe ser igual de legible, igual en tiempos de carga, igual navegabilidad, …, si la vemos desde un pc de sobremesa, que si la vemos desde un iphone 4, o desde una tablet con android.
Esta tecnología adaptativa, es muy fácil de verificar que está presente. Basta con, en un pc convencional con pantalla grande, en el navegador que se use habitualmente, ir reduciendo el ancho/alto de la ventana, ‘simulando’ un tamaño de pantalla más pequeño. Si la web se va adaptando al nuevo tamaño: las imágenes van cambiando de tamaño y/o posición, los menús se contraen o simplifican, los textos siguen siendo igual de legibles,…, nuestra web es adaptativa.
Las ventajas de usar esta técnica son en realidad las desventajas de la técnica de hacer 2 webs:
- Hay sólo una web. El mantenimiento no exige tener que andar modificando 2 webs diferentes.
- El coste de implantación es mucho menor ya que sólo es una web. Eso sí, hay parte que hay que implementar para que la web vaya adaptando sus distintos componentes, pero siempre será mucho meno aparatoso que hacer 2 webs prácticamente independientes.
- La web se adapta a cualquier dispositivo, es independiente del tamaño de pantalla, sistema operativo,…, da igual entrar desde un tablet, que desde un notebook, pc convencional,…
Las desventaja son práctiamente inexistentes. Quizá la única es que el navegador usado no soporte HTML5, lo cual hoy por hoy cualquier navegador lo soporta; y en el peor de lo casos (un navegador obsoleto de hace 4 o 5 años que no se haya actualizado), se verá una web normal, pero siempre se verá.
Si deseas más información al respecto de esta tecnología te proponemos los siguiente enlaces (son externos a nosotros, es posible que algún enlace varie de contenido o ya no esté disponible):