WILFREDO SALAS G. - Responsive Web Design - Webuda

COSA DE CONTEXTO
El contexto, según la RAE, tiene dos acepciones:
1. m. Entorno lingüístico del cual depende el sentido y el valor de una palabra, frase o fragmento
considerados.
2. m. Entorno físico o de situación, ya sea político, histórico, cultural o de cualquier otra índole, en el cual
se considera un hecho.
En resumen, el contexto es el entorno físico o de situación a partir del cual se considera un hecho.
Si ponemos todas estas lindas palabras en función del diseño web, tenemos que cuando se habla de
entorno físico, se refiere a los dispositivos disponibles en donde te puedes conectar a internet, y sus
respectivos navegadores. La situación se refiere al ahora ya en donde el entorno físico se desarrolló y
el hecho que junta todos estos puntos en un contexto le llamaremos Responsive web design. Ahora,
la pregunta es “¿y qué es el Responsive Web Design?”. Responsive Web Design se trata de cómo una
página se convierte en “sensible”, e identifica en el dispositivo en donde se está mostrando – como un
computador de escritorio, tableta o teléfono – y se adapta a ese dispositivo sin perder contenido, o sea,
de “fluir en el contexto” en el cuál se le presenta.
En conclusión, hay que abrazar al responsive web design, impregnarnos con la flexibilidad de la web,
sin el control que requerimos como diseñadores. Todo esto con tecnologías ya estandarizadas para hacer
nuestro trabajo, y haciendo un pequeño pero gran cambio en nuestra filosofía hacia el diseño web.
LOS INGREDIENTES
Entonces, qué es lo necesario para hacer una página estática, rígida y… “fome”, abrace al Responsive Web
Design. Hablando en términos puramente de diseño web front-end, es necesario sólo tres ingredientes:
1. Una diagramación basada en una grilla flexible.
2. Imágenes y media flexibles, y
3. Media queries, un módulo específico de CSS3.
Durante los próximos capítulos desmenuzaremos estos tres puntos – la diagramación flexible, el media
e imágenes flexibles y los media queries - haciendo que nuestro diseño web tenga un acercamiento
más flexible y fluido. Además, de adaptarse a la mayoría de las plataformas y a todos los navegadores,
haciendo que nuestro diseño responda casi a todas las necesidades de los usuarios. Pero entre tantas
palabras, los que trabajamos con gráfica nos enredamos y necesitamos ejemplos visuales para entender
cómo funcionan las cosas. Para este caso, voy a mostrar el ejemplo más cercano que se me pudo ocurrir:
la misma página web en donde descargaron este libro digital ( http://rwd.webuda.com/).
6 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible