1. Responsive Web Design
Interfaces Web Adaptables al dispositivo
empleando HTML5 y CSS3
Adrián Alonso Vega
RESPONSIVE DISPOSITVOS CSS3ADAPTABLE HTML5
1/32
2. Introducción
Este proyecto tiene como objetivo
presentar la filosofía “Responsive Web
Design” que actualmente se encuentra
en auge
• 5000 millones de dispositivos conectados a Internet
• En 2020, 31.000 millones de dispositivos
• Triplicada la venta de tablets en mercado español
BUSCAR SOLUCIONES
Adaptar UI a tamaños y resoluciones diversas
• 2000. Páginas webs optimizadas a resolución
• 2007. Lanzamiento de Iphone
• 2008. W3C en “Mobile Best Practices” definió el concepto One Web
• 2010. Responsive Web Design por Ethan Marcote
ADELANTARSE AL FUTURO
UNA WEB PARA GOBERNARLOS A TODOS
2
3. ¿Qué es Responsive Web Design?
• Filosofía para solucionar problemas de diseño para la diversidad de
dispositivos
• Una misma web para todo tipo de dispositivo (Un solo código)
• No debe importar resoluciones, tamaños ni orientaciones, la web
debe adaptarse al dispositivo
3 CLAVES: Media Queries Proporciones Elementos Flexible
3
4. Crecimiento del dispositivo Móvil
• En India el uso del dispositivo móvil ha
superado al de escritorio
• Se estima que entre finales de este año
y 2015 el dispositivo móvil reine sobre el
de escritorio a nivel global
• Comercio electrónico cada vez más
importante en estos dispositivos
• En 2012 3000 millones de dólares
mas que en 2011 en EBAY
• En 2011 el tráfico de Twitter fue del 55%
• En 2011, 1 de cada 7 búsquedas en Google a través de dispositivo
móvil
• Actualmente, 68% de penetración móvil en Facebook
Dispositivos indispensables en nuestras vidas,
siempre se llevan encima.
4/30
5. Aplicación Nativa vs Aplicación Web
- Fácil Mantenimiento
- Última versión actualizada
- No requiere supervisión
- En cualquier plataforma.
- Muy eficientes
- Características del dispositivo
- Apoyo de los markets de apps
- Compatibilidad con navegadores
- Requieren conexión a internet
- Privacidad
- Propio entorno y lenguaje
- Mayor coste
- Necesario portar para otras
plataformas
VENTAJAS
INCONVENIENTES
VENTAJAS
INCONVENIENTES
5/30
8. Media Queries
@media screen and (min-width: 960px)
{
/* Código CSS*/
}
MAX-WIDTH MIN-WIDTH ORIENTATION MIN-DEVICE-WIDTH
8/30
9. Viewport
• Zona visible del navegador
• Por defecto, navegadores muestran sitio completo
• Gracias a la meta viewport definimos
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
9/30
10. Medidas Relativas
#column1 { width: 45%; }
#column2 { width: 30%; }
#column3 { width: 35%; }
CAMBIAR LA FORMA DE PENSAR
#wrapper { width: 90%}
10/30
12. Fuentes Flexibles
<body>
<p> Responsive <span>Design</span> mola! </p>
</body>
body{ font-size: 100%}
14px/16px= 0.875 em
p { font-size: 0.875em}
18px/14px = 1.2757em
p span { font-size: 1.2857em }
12/30
13. Mostrando y ocultando contenido
display:none
visibility
Inconveniente:
Se carga todo aunque no se muestre
13/30
14. Rendimiento Web
Preocupante, por que mostrar la web en móvil requiere un coste
Objetivo: Mejorar experiencia de usuario
Recomendaciones:
• Emplear herramientas para analizar tiempo de cargas y evaluar rendimiento
• No abusar de display:none
• CSS Y JS en únicos ficheros, evitar muchas peticiones HTTP
• Evitar embeber CSS Y JS, siempre en ficheros, se cachean
• Minimizar código
• CSS en el header y JS al final.
• Evitar redireccionamientos
14/30
15. Compatibilidad de Navegadores
CROSS BROWSER: Diseño de páginas webs que se ven y se comportan
exactamente igual sin importar el navegador
SOLUCIONES:
Hojas de estilos específicas
Validar HTML y CSS
RESET CSS
15/30
16. IE y los MediaQueries
Microsoft no da soporte a IE7 ni IE8 para interpretar mediaqueries
SOLUCION: RESPOND.JS
<script type=”text/javascript” src=”js/respond.min.js”></script>
https://github.com/scottjehl/Respond)
16/30
17. Librería javascript que detecta funcionalidades de HTML5 y CSS3
que son compatibles con el navegador.
Permite escribir CSS y Javascript condicional
if (Modernizr.canvas)
{
// Pintar Canvas
}
else
{
alert(‘Su navegador no soporta la funcionalidad HTML5 Canvas') ;
}
17/30
18. Ventajas de RWD
• Reducción de costes de desarrollo, una sola implementación
• Eficiencia al realizar procesos de mantenimiento y
actualización
• Mejora de la usabilidad, experiencia de usuario única
• Google premia RWD, posicionamiento web
• Informes de tráfico mas reales
• Beneficio de tecnologías móviles
• Innovador
Desventajas de RWD
• Tiempos de carga en dispositivos móviles
• Mayor tiempo de optimización de diseño y de código
• Todo el mundo quiere cambiar su web a Responsive
• Compatibilidad con navegadores
18/30
21. ¿Cómo probar RWD?
Existen multitud de herramientas Online, que nos permiten
probar dispositivos del mercado, redimensionar nuestro
navegador, plugins que nos proporcionan las dimensiones del
viewport
Quirktools.com / Screenfly
(https://quirktools.com/screenfly/)
21/30
22. ¿Qué es un framework front-end?
Un framework para front-end es un conjunto de conceptos y
herramientas que nos facilita considerablemente el trabajo de
diseñar una web proporcionándonos una base o esqueleto para
nuestros nuevos diseño
- Agilidad y rapidez
- Funcionalidad
- Apoyo de la comunidad web
- Emplea buenas prácticas
- Abstracción para decisiones como
breakpoints
- Pérdida de Libertad
- Código menos flexible
- Menos control
- Curva de aprendizaje
INCONVENIENTESVENTAJAS
22/30
23. Twitter Bootstrap es una colección de herramientas de software
libre para la creación de sitios y aplicaciones web.
Contiene plantillas de diseño basadas en HTML y CSS con
tipografías, formularios, botones, gráficos, barras de navegación y
demás componentes de interfaz, además de extensiones
de JavaScript.
Agilidad Multinavegador
Integrable Ligero
http://twitter.github.io/bootstrap/
23/30
30. Muchas Gracias
Espero que haya sido
una presentación
agradable para ustedes
• Importancia del usuario móvil
• Buenas experiencias de usuario y accesibilidad
• Objetivo: llegar a todo tipo de usuario sin excepción de
navegador o dispositivo
• Herramientas suficientes: HTML5 y CSS3, mediaqueries,…
• Empleando frameworks o construir el sitio desde cero
Conclusión
30/30