Archivo de la etiqueta: adaptable

Internet Explorer 6 & 7 are dead

Todos/as aquellos/as que nos dedicamos al desarrollo web sufrimos una pesadilla recurrente: que nuestros sitios web no funcionen correctamente en las versiones 6 y 7 del navegador Internet Explorer.

Datos de Microsoft sobre el declive de IE6 (click en la imagen para acceder a los datos actualizados)

Datos de Microsoft sobre el declive de IE6 (click en la imagen para acceder a los datos actualizados)

Quien escribe esto, además de desarrollar sitios web, lleva muchísimos años impartiendo formación. Uno de los cursos que más veces he impartido es el de «Diseñador Web y Multimedia«, además de otros cursos específicos de HTML y CSS (últimamente HTML5 y CSS3), módulos de accesibilidad y usabilidad web y otras materias en las que la maquetación web y sus estándares han estado muy presentes. En dichos cursos, la secuencia didáctica, lógicamente, va in crescendo. El alumnado va asimilando, poco a poco, diferentes elementos de HTML, después de CSS, para acabar construyendo un layout sobre el que desarrollará el trabajo, llamémoslo así, de filigrana (especialmente en CSS y, en ocasiones, Javascript). Hasta aquí todo bien… por poco tiempo.

Infografía sobre el declive de IE7 (los datos son más o menos coincidentes con los aportados por Global Stat Counter)

Infografía sobre el declive de IE7 (los datos son más o menos coincidentes con los aportados por Global Stat Counter)

Y es que, pongamos por caso, un objetivo para uno de estos cursos puede ser la maquetación de un sitio web (estático o dinámico) con CSS, partiendo de un diseño previo (por ejemplo en un fichero PSD). Ahí es cuando surge el problema/pregunta planteado por cualquiera de los alumnos/as: «Profe, el menú no se me ve bien en Explorer 7«, «La caja de contenidos no llega hasta abajo» y un largo (interminable) etcétera de problemas que, en más de una ocasión, me han metido en un aprieto. Eso sí, de dicho aprieto siempre se acaba saliendo pero, para salir, y seguro que muchas de las personas que están leyendo este blog lo han vivido, debemos acudir a una serie de parches, reseteadores, scripts y otras «trampas» que, efectivamente, nos solucionan el problema… para fastidiarnos la validación de los estándares de la W3C 🙁

Estadísticas del uso de los navegadores

Estadísticas del uso de los navegadores de Global Stat Counter (gs.statcounter.com)

Pues bien, todo parece indicar que el uso de nuestros navegadores pesadilla, los inefables IE6 y IE7, está bajo mínimos. Tanto es así que un formador ortodoxo como el autor de estas líneas ha decidido abandonar definitivamente el desarrollo web orientado a estos navegadores. Los tiempos del contra-estándar han llegado a su fin. Larga vida a los nuevos navegadores, los nuevos dispositivos, el diseño web responsable (o adaptativo) y a frameworks como Bootstrap.

Parafraseando y mutando la vieja estrofa de los Smiths: Internet Explorer 6 & 7 are dead 🙂

 

Diseño web responsable

Que el diseño web está cambiando es un hecho que no tiene discusión. A los cambios en los lenguajes, en las versiones en los estándares del W3C, se suman, desde no hace tanto, la aparición de nuevos dispositivos que ya forman parte de nuestra cotidianidad. Me refiero, lógicamente, a los teléfonos móviles y a las tablets. Hoy en día no se debe(ría) concebir un diseño y un desarrollo web que no esté basado en parámetros de diseño web responsable (responsive web design). Veamos.

Diseño web adaptativo

Diseño web responsable

¿A quién no le a tocado visitar una web con su móvil para acabar dejándolo por imposible? ¿Quién no ha sufrido un horrible scroll horizontal en la web de un periódico para poder leer completo un texto, cada vez que cambiaba de línea? ¿Quién no se ha dejado la vista después de reducir el zoom de un sitio web en el móvil o tablet, precisamente para evitar desplazamientos en cada línea? El diseño web responsable busca, precisamente, que nos dejemos de hacer estas (y otras) preguntas. Se trata de implementar una solución a nuestros diseños para que nuestra web se adapte al dispositivo donde se esté visualizando. En definitiva, un sitio web profesional se debe adaptar a distintas resoluciones, orientaciones (vertical/horizontal), plataformas, navegadores, etc.

Para conseguir un diseño web responsable (o diseño adaptable), se pueden aplicar varias técnicas. Una de las más populares es el uso de un fluid grid (rejilla o retícula fluida). Existen frameworks bastante conocidos a este respecto como el Bootstrap (desarrollado por técnicos de Twitter) o el skeleton (que incluye características tipográficas, de botones o elementos de formulario) . Existe más frameworks como éstos, muchos de ellas basados en la división de nuestra pantalla en columnas que adaptarán su ubicación y tamaño dependiendo del dispositivo con que se abran.

Estas soluciones, basadas en las Media Queries  también han significado un cambio radical a la hora de desarrollar nuestros sitios web. El sistema de las media queries está basado en una estructura CSS condicional, mediante rangos de resolución. Podemos especificar las características visuales de una parte de nuestra web (por ejemplo, el menú de navegación) en base a la resolución del dispositivo del cliente. Por ejemplo, el menú de navegación de esta misma web, se transforma en un desplegable en el momento que de detecta una resolución propia de un teléfono móvil.

Como ven, las posibilidades de la tecnología responsive web design son infinitas. Además implica un ahorro económico nada desdeñable para nuestros clientes y es que, no hace tanto, se estilaba la creación de páginas distintas dependiendo la resolución utilizada por el navegador del visitante a nuestra web. Los nuevos estándares HTML5 y CSS3, sumados a las media queries abren un horizonte prácticamente ilimitado y en permanente desarrollo. Como muestra, este estupendo post publicado en Smashing Hub donde encontraremos 17 frameworks orientados al diseño responsable. ¡Que lo disfruten!

Fuente de la imagen: http://www.dotcominfoway.com