1

2

Responsive Web DesignPáginas flexibles y elásticaspor 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.

May

o de

201

4

3

May

o de

201

4

Ethan MarcotteCreador del Responsive Web DesignEl 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 RWDLos 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

May

o de

201

4

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

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.

May

o de

201

4

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

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 + CSSContenido + Forma

May

o de

201

4

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