responsive web design
DESCRIPTION
RESPONSIVE WEB DESIGN. Participantes Gabriel Cuchca PalominoU720546 Jorge Luis Alcantara OspinaU201121532 Juan Botetano Olortegui U201200192 Tapia Suaña Juan PabloU201201060 Ricardo CamposU800052. Responsive Web Design . - PowerPoint PPT PresentationTRANSCRIPT
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,
independienteAside: contenido accesorio, no
fundamental Nav: barra de navegaciónSection: una sección o bloque (ex DIV)Header: introducción / orientación sobre
secciónFooter: final de una secciónHgroup: grupo de encabezadosFigure: 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