RWD 2016

2. Multiplicidad de dispositivos
móviles
Cantidad y variedad
Web móvil

3. Web móvil
Multiplicidad de
dispositivos
Tiempo de uso
Tipo de uso

4. 
Aplicaciones nativas, híbridas o web
Web móvil

5. App nativa
Aprovecha toda la capacidad del dispositivo (tel,
cámara, sensores, gps, mapas, notificaciones, ...)
Mayor seguridad
Se puede acceder sin conexión
Costoso
Desarrollo para cada SO
Mantenimiento y actualización
Pago por distribución
Distribución en store de cada entorno (vidriera o
limitación)
Posibilidad de pago por descarga
Requiere instalación
Web responsive
Requiere conexión
Menor seguridad
Sin problemas en la identificación, una sola web.
Mejor SEO
No tiene contenido duplicado
Económico.
Desarrollo único para todos los entornos
(Es más costoso que una web no responsive)
Mantenimiento y actualización simples
Web móvil

6. Web responsive
Sin problemas en la identificación, una sola web.
Mejor SEO
No tiene contenido duplicado
Económico.
Desarrollo único para todos los entornos
(Es más costoso que una web no responsive)
Mantenimiento y actualización simples
Web duplicada o dinámica
Problemas en la identificación del navegador, SO,
entorno.
SEO: contenido duplicado
Menos económico.
Mantenimiento y actualización más costosa
Web móvil
x

7. Ubicuidad: una sola web
Una sola carga de datos
Una sola URI. Compartir un
link sin que vean el sitio
equivocado
Mejor SEO. No se duplica la
indexación y no se penaliza
Responsive Web Design

8. Flexibilidad: device agnostic
Detección de dispositivo:
suele dar errores
Future friendly
Mayor probabilidad de
compatibilidad con nuevos
dispositivos
Responsive Web Design
Displair: pantalla táctil de vapor
http://displair.com/
Cicret bracelet
https://cicret.com/wordpress/

9. Flexibilidad: device agnostic
Detección de dispositivo:
suele dar errores
Future friendly
Mayor probabilidad de
compatibilidad con nuevos
dispositivos
Responsive Web Design
Displair: pantalla táctil de vapor
http://displair.com/
Cicret bracelet
https://cicret.com/wordpress/

10. 
Contenido adaptativo

Se adapta para ser legible

Botones clickeables

Reorganizar y jerarquizar
la información

Scroll solo vertical

Evitar hacer zoom
Responsive Web Design

11. 
Multiplicidad de formatos: estructura adaptable
Responsive Web Design

12. 
Diseño de estados según ancho
Cantidad de breakpoints según diseño
Responsive Web Design

13. 
Diseño de estados según ancho
Determinar breakpoints relevantes
Responsive Web Design

14. Legibilidad según dspositivo + Distancia de lectura variable
Responsive Web Design

15. 
Diseño de navegación
Select, icono, footer
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Responsive Web Design

16. 
Responsivizar elementos
Texto, imágenes, slideshow, videos, mapas, mayor área de link
Responsive Web Design