Responsive Web Design

Responsive Web Design
Interfaces Web Adaptables al dispositivo
empleando HTML5 y CSS3
Adrián Alonso Vega
RESPONSIVE DISPOSITVOS CSS3ADAPTABLE HTML5
1/32

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

¿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

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

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

Tipos de Layouts
Fijos Elásticos
7/30

Media Queries
@media screen and (min-width: 960px)
{
/* Código CSS*/
}
MAX-WIDTH MIN-WIDTH ORIENTATION MIN-DEVICE-WIDTH
8/30

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

Medidas Relativas
#column1 { width: 45%; }
CAMBIAR LA FORMA DE PENSAR
#wrapper { width: 90%}
10/30

Imágenes Flexibles
img { max-width: 100%;}
11/30

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

Mostrando y ocultando contenido
display:none
visibility
Inconveniente:
Se carga todo aunque no se muestre
13/30

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

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

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

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

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

Técnicas de Implementación de RWD
MOSTLY FLUID COLUMN DROP
LAYOUT SHIFTER TINY TWEAKS
19/30

Técnicas de Implementación de RWD
OFF CANVAS
20/30

¿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

¿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

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

Estructura del Framework
- bootstrap/
-- css/
--- bootstrap.css
--- bootstrap.min.css
--- bootstrap-responsive.css
--- bootstrap-responsive.min.css
-- js/
--- bootstrap.js
--- bootstrap.min.js
-- img/
--- glyphicons-halflings.png
--- glyphicons-halflings-white.png
24/30

¿Cómo incluir Bootstrap en nuestra
aplicación?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<p>!Hola Bootstrap!</p>
</body>
</html>
25/30

Sistema de Columnas
• Layout fijo: 12 columnas cubriendo 940 px
• Layout fluido: 12 columnas basado en breakpoints
26/30

Fluido vs Fijo
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"> 4/12 </div>
<div class="span8">
<div class="row-fluid">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span8">
<div class="row">
<div class="span2"> 2/8</div>
</div>
</div>
</div>
</div>
27/30

Ejemplo RWD con Bootstrap
28/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

Responsive Web Design

Más contenido relacionado

La actualidad más candente (18)

Destacado (20)

Similar a Responsive Web Design (20)

Último (20)

Responsive Web Design