Sitios web Responsivos una Solución Múltiple

Los desarrolladores web siempre estuvimos frente al dilema de la multiplicidad de navegadores y su falta de soporte a estándares HTML o bien en el mejor caso de que aplicáramos un desarrollo compatible con todos, entraba en juego las diferentes resoluciones de las pantallas que utilizaba el usuario. Afortunadamente cada vez más, de la mano de navegadores como Firefox, Chrome, Opera y las nuevas versiones de Internet Explorer el soporte de HTML estándar se vio ampliado y todos comenzamos a ser felices. Los desarrolladores nos comenzábamos a olvidar de tener que utilizar técnicas raras para soportar IE6 y los usuarios veían mejorados los diseños con la potencia de HTML 5 y CSS3. Pero todo no podía ser tan bueno, casi al mismo tiempo se comenzó a masificar el uso de Smartphone por parte de los usuarios y con esto las visitas a nuestras webs cada vez más vienen desde dispositivos móviles. En principio podíamos crear una versión web y otra para móviles que no soportaran por completo el HTML, lo cual era suficiente ya que tampoco sus pantallas lograban apreciar mejor contenido. Pero luego, los modelos más potentes comenzaron a bajar de costo, a tal punto que muchos de la gama baja y ni hablar la gama media y alta soportan en sus navegadores web toda la potencia que tenemos en un PC o Notebook convencional. Si a estos dispositivos le sumamos las Tablets tenemos una gran amplitud de resoluciones de pantalla, y muy disímiles entre ellas, adicionalmente los móviles tienen una doble resolución ya que al rotarlo cambian la misma.

Desarrollo Web Responsivo

Hoy día podemos tener un usuario con su monitor Desktop de 1382×754, otro con 1280×1024, o algún Móvil con 128×160, 240×320 o Tablets de 800×600 y toda una gama intermedia, sumado a que si creamos nuestro diseño con un ancho de 960px, lo cual era adecuado para resoluciones de 1280, 1024 y 800 con un simple scroll, este no se ve bien porque sobra mucho blanco en resoluciones como 1382 o un 1920 de ancho, y menos aún en móviles o Tablets de resoluciones menores a 600px. Tampoco es una solución viable por costo y poca usabilidad tiempo realizar varias webs diferentes y el mantenimiento de las mismas para cada resolución. Como una solución a esto es que llega el Diseño y Desarrollo de Sitios Webs Responsivos o Responsive Design, como se le llama en Inglés. Los sitios webs responsivos son posible gracias a la utilización de HTML5, CSS3 y MediaQuery, combinandolas con diferentes técnicas que permiten lograr un Layout Flexible, o sea una disposición de los elementos de nuestras webs de acuerdo a las capacidades del dispositivo donde el usuario visualice nuestro sitio. Quizás ya diseñaste y desarrollaste un sitio responsivo, o seguramente navegaste alguno, muchos diarios, sitios de anuncios gratuitos, revistas y algunos sitios corporativos, entre otros vienen aplicando estas técnicas para mejorar su presentación en cualquier dispositivo actual. Luego de esta introducción en un próximo post, veremos cómo aplicar estas técnicas y algunas librerías y frameworks que nos ayudaran a lograr excelentes resultados.