Sabes que es el Responsive Web Design? Aquí un breve artículo para quienes desconocen totalmente sobre el tema.

1. 1

2. 2
Responsive Web Design
Páginas flexibles y elásticas
por Sergio Thompson - DSG - BUAP
Y así prácticamente funcionan hoy en día,
como una goma de mascar, los sitios web
que son elaborados con la finalidad de
estirarse y encogerse, según sea la
necesidad respecto al dispositivo en el que
se visualicen. Aunque en el presente la
cantidad de sitios flexibles es notable, aún
hay muchísimos que siguen funcionando
de manera convencional, más adelante se
entenderá mejor el porque el estirarse y
encogerse.
Pero empecemos por mencionar el
principal motivo de este artículo: platicar
de la manera más habitual posible,
respecto a los maravillosos beneficios y
magníficas propiedades del Diseño Web
Adaptable, Diseño Web Responsivo o lo
que es lo mismo, el Responsive Web
Design (RWD).
Como bien sabemos hoy en día el acceso a
internet se ha vuelto casi una necesidad
primaria, al menos para muchas personas,
estar sin internet es casi como estar sin luz
por las noches. Desde un móvil, una
tableta, una lap, una pc de escritorio,
desde donde se pueda!!! Hay que revisar el
facebook, el twitter, las noticias, los
eventos, etc, etc, etc...
Y es precisamente ahí, en esa necesidad de
accesar desde donde sea, donde surge la
importancia del RWD.
SITIOS WEB DE CHICLE...
Chicle: La goma de
mascar, comúnmente
conocida como chicle, es
una goma masticable con
diversos sabores y
colores. De consistencia
elástica.
Adobe Dreamweaver:
Un muy buen software
para diseño web, que
anteriormente pertenecía
a la compañía
Macromedia.
Mayode2014

3. 3
Mayode2014
Ethan Marcotte
Creador del Responsive
Web Design
El diseño web adaptable es una
manera de diseñar páginas web
para que cuando estas sean
visitadas, „mágicamente‰ adapten
su diseño/interfaz al dispositivo
que se está usando para verlas.
œQué significa esto? Bueno, pues
aquí es cuando veremos lo
novedoso de la creación de
Ethan Marcotte. Las empresas en
lugar de diseñar un sitio para
cada dispositivo solo tienen que
diseñar uno, si, uno solo que
elásticamente se adapta a
cualquier dispositivo desde el
que este siendo visto, y claro,
esto nos indica lógicamente que
los usuarios de dicha web
obtienen una interfaz acorde al
dispositivo que están usando.
œNo les ha tocado entrar a „X‰
sitio desde su celular y tienen
que aumentar, disminuir,
aumentar, disminuir el zoom
para poder navegar por el sitio?
Inténtalo ahora mismo, accede
desde tu celular a
www.esmas.com y te darás
cuenta de lo difícil que es andar
buscando los links, viendo las
fotos, el simple hecho de dar
click a un enlace es complicado.
Ahora accede a www.robot-or-
not.com y notarás la diferencia;
precisamente eso es de lo que se
trata el responsive web design, de
que sea cual sea el medio que
utilices para acceder a una web,
la navegación sea de lujo, o al
menos cómoda. (œNo puedes
acceder en este momento a los
sitios? En la siguiente página
encontrarás gráficas que ilustran
dicho ejercicio)
¿Cómo se logra esto?
Mediante 3 simples cosas:
-Estructuras fluidas
-Imágenes adaptables y
-Media Queries.
„œ–Qué es esto!?‰ (página 4)
Origen del RWD
Los propósitos y la idea
principal del RWD fueron
analizados por la empresa W3C
en Julio del 2008 la cual publicó
su recomendación llamada
"Mobile Web Best Practices" bajo
el subtítulo "One Web".
Esta recomendación, aunque
habla específicamente de
dispositivos móviles, explica que
se debe de construir una sola
web para todos (Web for All) y
que pueda ser accesada desde
cualquier tipo de dispositivo
(Web on Everything).
Cuando los dispositivos móviles
comenzaron a ganar terreno, las
empresas que contaban con un
sitio web encargaban a sus
diseñadores que realizaran la
versión para teléfonos móviles,
entonces pues, estos en base al
diseño web que existía
modificaban la estructura y la
adaptaban a dichos dispositivos,
la empresa contaba en si con 2
sitios, uno para pc de escritorio y
otro para móviles. Pero...y
cuando los dispositivos
empezaron a ser más, y más, y
más? Más modelos, más tamaños
de pantallas, etcétera!!!
“El control que los
diseñadores conocen en el
medio impreso y desean
frecuentemente en el medio
web, es simplemente una
consecuencia de las
limitaciones de la página
impresa. Debemos aceptar
el hecho de que la web no
tiene esas mismas
limitaciones, y diseñar
entonces para su
flexibilidad. Pero primero,
debemos ‘aceptar el flujo
y reflujo de las cosas”.
Ethan Marcotte
W3C: World Wide Web
Consortium, es un
consorcio internacional que
hace recomendaciones
sobre las tecnologías
usadas en la web.

4. 4
Mayode2014
esmas.com: Las gráficas muestran como
se vería la web de esmas en una pantalla de
una laptop y en 2 tipos de teléfonos móviles.
Como se nota, el diseño está exactamente
igual que como se muestra en la laptop, no
se adapta y su navegación es complicada,
habría que hacer zoom, moverse izquierda,
derecha para ver los extremos del sitio.
robot-or-not.com: Sitio funcionando
mediante Responsive Web Design, el diseño
que se muestra en una laptop es variable del
que se muestra en un dispositivo móvil,
tanto en vista horizontal como en su vista
vertical. El diseño se adapta a cada pantalla
y no hay que moverse hacia ningún lado
para hacer los clicks. Mágico no?

5. 5
Estructuras Fluidas
En el diseño web se realizan en papel y a lápiz
bocetos de la estructura de como se realizará
nuestro sitio, y esta se compone de diversas
zonas, alguna que otra contienen imágenes,
otras textos, otras titulos, etc...
Estas estructuras no tienen una medida en
específico, sino que su tamaño se maneja en
porcentajes, por ejemplo, la zona del logo se
situará arriba a la izquierda de la pantalla y
ocupará el 30% a lo largo y el 15% a lo alto de
la pantalla en que se esté visualizando el sitio.
Mayode2014
Imágenes Adaptables
Las imágenes son creadas en primera instancia pensando en el diseño original del sitio web y se van
adaptando conforme el dispositivo en que sean vistas. En la gráfica se muestra lo que se ve desde una
laptop y lo que se ve en una tablet. Las imágenes se adaptan y reorganizan conforme al espacio visual.
Media Queries
Las estructuras manejan
porcentajes, las imágenes son
creadas de determinada manera,
pero, lo que hace que funcione
todo son las media queries. Son un
módulo de instrucciones que
pertenecen a CSS (hojas de estilo,
página 5) y determinan en este caso
como se verá „X‰ espacio con „X‰
imagen o „X‰ texto en un android,
en un iphone o en una tablet.

6. 6
CSS es un lenguaje para definir el estilo o
la apariencia de las páginas web, escritas
con HTML o de los documentos XML. CSS
se creó para separar el contenido de la
forma, a la vez que permite a los
diseñadores mantener un control mucho
más preciso sobre la apariencia de las
páginas.
http://tc2-
proyectodegradoingdesistemas.blogspot.mx/
2012/05/que-es-y-para-que-sirve-css3.html
El HTML es el lenguaje mediante el cual se crean
las páginas web, su contenido, es decir, texto puro,
código crudo; el CSS es la forma, la manera en que
será presentado ante el usuario.
Escribimos y vemos „Hola que tal‰, estamos
generando contenido, pero si escribimos „Hola que
tal‰ y vemos “Hola que tal”, entonces estamos
mediante las CSS (hojas de estilo) dando un estilo a
nuestro código, dando forma, creando, diseñando.
Conclusión
Como se habrán dado cuenta, en el tema del diseño
web una cosa genera otra, esa cosa generada, genera
a otra, y esa, a otras, y lo que es hoy, quizá la
próxima semana ya no sea; cosa aparte de que el
tema es mega extenso!!! Hay excelente información
para aprender y lograr excelentes resultados.
Ahora ya sabes que son los sitios webs de „chicle‰ y
lo útiles que son y seguirán siendo por un buen
tiempo ya que el acceso a los sitios en la red
mediante dispositivos móviles es cada vez más.
Quizá en este momento al terminar de leer este
artículo pienses como yo en algún momento
cuando supe de la existencia del RWD...
„Ya sé porque este sitio web se ve todo extraño en
mi celular, en realidad mi celular si sirve para
accesar a internet y ver los sitios de mi preferencia,
pero simplemente muchos de esos sitios no están
hechos para mi celular‰.
HTML + CSS
Contenido + Forma
Mayode2014
Conoce más!!!
-Maivald, JJ. (2012). Classroom in a book. San Jose California: Adobe Systems Incorporated.
-Mazza, M. (2010, 25 de mayo), Diseño Web Responsivo (Responsive Web Design)
{diseñowebresponsivo.com.ar} Recuperado de: diseñowebresponsivo.com.ar
-Carreras, O. (2014, 23 de enero), Responsive Design y accesibilidad. Buenas y malas prácticas.
Errores comunes {http://olgacarreras.blogspot.com.es/} Recuperado de: http://
olgacarreras.blogspot.com.es/2014/01/responsive-design-y-accesibilidad.html