Este documento habla sobre el desarrollo web multidispositivo y la filosofía del diseño adaptativo. Explica que el diseño adaptativo crea interfaces que se ajustan a las capacidades del usuario mediante técnicas como maquetación fluida, imágenes y video flexibles, y media queries. También destaca la importancia de pensar en porcentajes en lugar de píxeles, hacer un diseño agnóstico del dispositivo, estructurar bien el contenido, y mejorar progresivamente la experiencia del usuario.

1. DESARROLLO WEB
MULTIDISPOSITIVO
VISIÓN GLOBAL Y FILOSOFÍA

2. SUMARIO
- Móvil vs. Escritorio
- Adaptive Web Design
- Implicaciones para el equipo

3. Móvil vs Escritorio

4. FLUJO DE TRABAJO
TRADICIONAL
HASTA 2010
- Luis Herrero
DesarrolloWeb Multidispositivo

5. - Luis Herrero
DesarrolloWeb Multidispositivo

6. VERSIÓN ESPECÍFICA PARA MÓVILES
• ¿Resolución?
• Redirecciones
• Contenido duplicado
• Doble mantenimiento

7. MAYO 2010
Responsive Web Design
Ethan Marcotte
http://alistapart.com/article/responsive-web-design

8. MAYO 2010
Responsive Web Design
Ethan Marcotte
http://alistapart.com/article/responsive-web-design
Can we really continue to commit to
supporting each new user agent with its own
bespoke experience?
“
“”

12. WE DON’T KNOW

13. Navegador
Resolución de pantalla
Tipo de conexión a Internet
Prestaciones del dispositivo
Modo de input (teclado, táctil)

14. EVEN WHEN
WE THINK
WE KNOW,
WE ARE
PROBABLY
WRONG
- Aaron Gufstafson
Progressive Enhancement & Mobile

15. http://futurefriend.ly

16. ¿Y cómo lo hacemos?

17. Adaptive Web Design

18. ADAPTIVE WEB DESIGN
CREAR INTERFACES
QUE SE ADAPTEN A
LAS CAPACIDADES
DEL USUARIO

19. ADAPTIVE WEB DESIGN
AWD
RWD
CREAR INTERFACES
QUE SE ADAPTEN A
LAS CAPACIDADES
DEL USUARIO

21. TÉCNICAS:
MAQUETACIÓN FLUIDA
IMÁGENES (Y VÍDEO) FLEXIBLES
MEDIA QUERIES

22. ¿¿¿MEDIA QUÉ???

23. ¿¿¿MEDIA QUÉ???
MEDIA QUERIES
Puntos de corte establecidos en CSS
que nos permiten reorganizar la estructura
dependiendo del ancho o alto de la pantalla

24. RESPONSIVE WEB DESIGN
• Olvidarse del píxel y pensar en PORCENTAJES.
• No basarse en ningún dispositivo (DEVICE-AGNOSTIC).
• El lienzo ya no existe.
• Maquetación muy organizada y modular (SMACSS).
• Imágenes y video flexibles: soluciones no definitivas
RETOS

25. ADAPTIVE WEB DESIGN
AWD
RWD
Feature
DetectionPerformance
Optimization
Content
Strategy
Mobile
First
Test
CREAR INTERFACES
QUE SE ADAPTEN A
LAS CAPACIDADES
DEL USUARIO

27. MÓVIL = MÍNIMO COMÚN MÚLTIPLO
INVIERTE LA LÍNEA DE PLATAFORMAS
EN EL PROCESO DE DISEÑO

29. EL DISEÑO ADAPTATIVO
SE BASA EN LA
MEJORA PROGRESIVA

30. EL DISEÑO ADAPTATIVO
SE BASA EN LA
MEJORA PROGRESIVA

31. CONTENT
FIRST

34. RELEVANT
CONTENT
FIRST

36. STRUCTURED
CONTENT
FIRST

37. SIMPLICIDAD.

38. CONTENIDO
RENDIMIENTO
CLAVES PARA UNA BUENA
EXPERIENCIA DE USUARIO

39. TEST, TEST, TEST.

40. PROCESO DE TRABAJO
PROCESO HABITUAL

41. PROCESO DE TRABAJO
PROCESO HABITUAL

42. PROCESO DE TRABAJO
PROCESO
ADAPTATIVO

43. ADAPTIVE WEB DESIGN
• Cambio de mentalidad.
• Cambio en el proceso de trabajo.
• Mayores necesidades técnicas.
• Actualización constante de conocimientos y técnicas.
• Cambio en timings y presupuestos.
CONSIDERACIONES

44. Implicaciones
para el equipo

45. IMPLICACIONES PARA EL EQUIPO
• Instalación de navegadores y simuladores.
• WIFI disponible.
• Siempre que sea posible, dispositivos reales.
• Sistema de control de versiones (GIT).
NECESIDADES TÉCNICAS

46. IMPLICACIONES PARA EL EQUIPO
• Maquetación avanzada y MODULAR.
• Técnicas de Responsive.
• Acercamiento y técnicas de diseño visual en web adaptativa.
• Javascript enfocado a la carga condicional de contenidos.
• Touch Events para dispositivos táctiles.
• Preprocesadores (SASS).
• GIT al menos a nivel básico.
CONOCIMIENTOS