RESPONSIVE WEB DESIGN Participantes Gabriel Cuchca PalominoU Jorge Luis Alcantara OspinaU Juan Botetano OlorteguiU Tapia Suaña Juan PabloU Ricardo CamposU800052

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: Tres elementos claves. – A flexible/fluid grid ( – Responsive images ( ) – Media queries ( 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:

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

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 Estructura Cambia 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 CSS3 Usar 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ón Antes: Esta foto habla de... Ahora: Esta foto habla de...

Estructuras nuevas Article: 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

DEMO