Diseño Responsive

El uso de smartphones, tables etc, dispositivos que pueden visualizar el contenido de forma vertical o horizontal en unas resoluciones distintas a las del escritorio del PC, ha motivado que apareciesen nuevas especificaciones en las hojas de estilo (CSS) que permiten cambiar la estructura (o layout) de la página en función de las resolución del dispositivo en que se ve la página.

Responsive_Design

Estas técnicas consisten principalmente en aplicar una serie de reglas CSS a distintas resoluciones (las media queries), aunque también se aplican diferentes scripts para esconder/mostrar ciertas partes y en general ayudar a reformatear la página.

También disponemos de diversas técnicas que digamos están dentro de lo que llamaríamos Diseño Fluido que se basan en usar % más que en anchos fijos. Aunque son dos tipos de “Filosofias” distintas lo que cuenta es que al final el diseño se ajuste de la mejor manera posible a distintos dispositivos

fluid

No es sencillo trabajar a distintas resoluciones, es extremadamente laborioso. Afortunadamente existen numerosos Frameworks y utilidades para ayudarnos.

P.ej la futura versión 1.6 de Prestashop estará basada en el famoso Framework Font-end twitter bootstrap. También, ya que obviamente no tenemos todas las tablets y dispositivos del mercado, podemos usar un montón de servicios para ver como se muestra nuestra página en diferentes dispositivos. Algunos realmente potentes como browserstack.