Responsive Web Design, HTML5 y CSS3

Introducción a Responsive web design

Concepto

Olvidemos la necesidad de diseñar una web para resoluciones de pantalla específicas, dejemos de lado las medidas en pixels y hagámonos amigos de los porcentajes. Este es el momento donde ya no son los desarrolladores quienes deben adaptar un sitio web a las diversas pantallas y dispositivos sino las mismas webs quienes lo hagan automáticamente.

 Traduciendo Literalmente al español, “Responsive design” sería diseño sensible. A pesar de que las traducciones son variadas y en ocasiones también se lo denomina adaptativo o adaptable, lo cierto es que el concepto es una respuesta a la necesidad de mejorar la usabilidad de quienes navegan la web.

 En los últimos años los sitios web pasaron de poseer un cierto tipo estandarizado de resolución a lo que hoy es una diversidad de dispositivos PC, Notebooks, Tablets y Smartphones con diferentes resoluciones de pantalla. Antes teníamos un diseño web para lo que se conoce como PCs de escritorio, y se tenía que diseñar a su vez otra web para dispositivos móviles .

 Ahora el paradigma cambió totalmente, y una web debe ser receptiva y ser adaptable al dispositivo en el cual estamos navegando.

HTML5 + CSS3

El cambio en las tecnologías del que hablamos también se ve reflejado en la evolución de los navegadores y la necesidad de actualizar el lenguaje HTML a los tiempos modernos, con el fin de superar las capacidades hoy limitadas, del HTML 4 y Adobe FLASH.

Tanto CSS 3 como HTML 5, establecen los nuevos estandares para el desarrollo de aplicaciones web: Audio, video, Acceso a las webcams, animaciones, etc. Todas estas ventajas independientemente de que navegados se este usando y sin plugins de por medio.

En cuanto al diseño, el HTML5 incorpora Etiquetas semánticas, que amplían notablemente el significado y la funcionalidad de una web

Diseño fluido y diseño receptivo

El diseño fluido no debe ser confundido con el diseño receptivo. Ambas técnicas son complementarias, y un usuario puede detectar rápidamente si un sitio web ha sido desarrollado de esta manera.

La principal evidencia para detectarlo fácilmente, es que no crea un scroll horizontal debido a que la estructura del diseño web se va adaptando al tamaño del dispositivo y la resolución en la que se la está visualizando. Esta adaptación es posible por el cambio de los valores de medida relativos y el uso de media queries.

 

Para el diseño receptivo se tiene en cuenta que para determinado dispositivo, es probable que se pueda omitir el uso y la visualización de algún elemento. Por ejemplo, es muy común que se transforme un menú de navegación en un menú desplegable. O bien, tengamos la decisión que determinado elemento de la web no se visualice para Smartphone.

Diseño fluido:

  • No trabaja con pixel perfect. Para una determinada resolución de pantalla.

  • Uso de valores de medida relativos (em, %)

  • Determinar mínimos y máximos previamente

Diseño receptivo:

  • Utilización de diseño fluido

  • Estructura de elementos flexibles

  • Uso de media queries. (Detecta la resolución de salida)

Google recomienda a los webmasters el uso del “Responsive web design”:

¿Qué es lo que sigue?

Si bien las aplicaciones del diseño responsable están avanzadas y su aplicación masificada, siempre es bueno tener una mirada hacia el futuro. Qué otros usos es posible que nos brinde esta técnica. Cuál será el techo, si es que lo tiene. Para muestra basta con un botón dicen, por lo que para terminar, presentamos “Responsive Typography”.

Tipografia responsiva

Utilizando detección de rostro mediante una cámara en tiempo real, el texto del dispositivo mantendrá siempre la proporción en relación a la distancia en la que estemos leyendo. Si nos acercamos, el tamaño de la letra disminuye y por el contrario al alejarnos, aumenta.

Fuente: http://webdesign.maratz.com/lab/responsivetypography/realtime/
Librería:
https://github.com/auduno/headtrackr/
Autor: Marko Dugonjić
http://maratz.com/
Más información:
http://informationarchitects.net/blog/responsive-typography-the-basics/

Leave a Comment