RESPONSIVE WEB DESIGN

Participantes

Gabriel Cuchca Palomino U720546 Jorge Luis Alcantara Ospina U201121532 Juan Botetano Olortegui U201200192 Tapia Suaña Juan Pablo U201201060 Ricardo Campos U800052

Responsive Web Design

• Sitios Web adaptables al ancho del dispositivo, es decir único diseño para Desktop, Mobile y Tablet.

• Tecnología, que NO solamente cambia el diseño sino le ajusta del tamaño de las imágenes.

Antecedentes• Ethan Marcotte utilizo el termino Responsive Web Design en su

artículo publicado en «A List Apart». En el describe la teoría y la práctica de diseño de páginas web sensibles. (25 Mayo 2010)

Fuente: http://www.alistapart.com/articles/responsive-web-design/

• Tres elementos claves.– A flexible/fluid grid (http://www.alistapart.com/articles/fluidgrids/)– Responsive images (http://www.alistapart.com/articles/fluid-images/)– Media queries (http://www.w3.org/TR/css3-mediaqueries/)

• NET Magazine, #2 Top Web Design Trends for 2012 (Tendencias de Diseño Web para 2012).

EL ENFOQUE TRADICIONAL

Dos sitios web. Tu sitio web para desktop más uno construido específicamente para móviles. El browser del cliente redirigirá automáticamente al mejor sitio para su dispositivo.

DISEÑO DE RESPUESTA

Un SOLO sitio web. El sitio web, en forma automática se formatea al presentarse al usuario a cualquier ancho de la pantalla del dispositivo.

Entonces, ¿cómo puedo saber si debo construir un sitio web por separado o

para móviles utilizar el diseño de respuesta?

?

Sitio Independiente

Responsive Design

¿Cuáles son las necesidades de tu negocio?

¿QUE SOLUCION ES MEJOR PARA TU MOBILE SITE ?

El diseño para las necesidades de los usuarios móviles (por ejemplo, el comercio electrónico, direcciones, llamadas telefónicas, las descargas de aplicaciones)

La facilidad de actualización del sitio

Optimizado para los motores de búsqueda.

La creación de sitios rápidos.

Desarrollo web accesible.

Añadir la conversión de códigos y redirigir.

Grandes Opciones de «hazlo tú mismo» DIY (en inglés «Do It Yourself»)

Fuente: http://analytics.blogspot.jp/2012/07/mobile-websites-vs-responsive-design.html

Beneficios de Responsive Web Design

• Reducción de costos. Se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.

• Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.

• Mejora la usabilidad y conversión. Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.

• Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

RESS: Responsive Web Design with Server Side Components

• Combinar RWD con la optimización de componentes en el lado del servidor esto es una manera de extender el lado del cliente a una sola solución.

• Ajustes de diseño a través de dispositivos.• Optimización a nivel de componentes para aumentar la

experiencia de la ejecución o ajuste de usuario.• Confiar en el lado del servidor para la detección de dispositivo

con valores predeterminados razonables.

Fuente http://www.lukew.com/ff/entry.asp?1509

TÉCNICAS DEL RESPONSIVE DESIGN Mostly Fluid – más o menos fluido

Se adapta siguiendo el flujo respectivo

Column Drop – caída de columna Este tipo de diseño se adapta hasta el punto en el que no se pueden

manejar las tres columnas en una sola fila.

Layout Shifter – Movimiento de EstructuraCambia ligeramente el diseño, la estructura está orientanda a dar una experiencia diferente en

dispositivos de pantallas más reducidas para invitar al usuario a la navegación.

Tyny Tweaks – Pequeños Cambios

Adapta los contenidos a la pantalla, sin casi hacerle cambios.

Off Canvas – Fuera del Canvas

Consiste en sólo tener un bloque de información general que no distraiga mucho y guardan las demás

opciones o menús en botones que suelen tener íconos para distinguirlos.

Nuevo en HTML5

Nuevas etiquetas semánticas(Google debe entender los contenidos)

Video, audio y animación sin plugins

(Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versión)

Nuevos elementos de formularios

(Más usabilidad y menor uso de JavaScript)

Nuevo en CSS3Usar cualquier tipografía

Efectos decorativos: sombras, RGBa, bordes redondeados, gradientes,

(menor uso de imágenes)

Movimientos: transformaciones, transiciones, animaciones

(menor uso de JavaScript)

Diseño adaptable: Media Queries

Selectores más precisos(menor uso de marcado innecesario)

ComparaciónAntes:

<div id=“wrapper”></div>

<div id=“noticia”></div>

<div id=“banners”></div>

<div id=“header”></div>

<div id=“footer”></div>

<div id=“nav”></div>

<div id=“foto”><img src=“x” /><p>Esta foto habla de...</p></div>

Ahora:

<section></section>

<article></article>

<aside></aside>

<header></header>

<footer></footer>

<nav></nav>

<figure><img src=“x” /><figcaption><p>Esta foto habla de...</p></figcaption></figure>

Estructuras nuevasArticle: contenido fundamental,

independiente

Aside: contenido accesorio, no fundamental

Nav: barra de navegación

Section: una sección o bloque (ex DIV)

Header: introducción / orientación sobre sección

Footer: final de una sección

Hgroup: grupo de encabezados

Figure: contenido relacionado (imagen, video, audio, canvas, gráficos, tablas estadísticas, etc.)

Figcaption: leyenda de un elemento Figure

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

DEMO