smad it - responsive web design
TRANSCRIPT
Responsive Web DesignDiseño Web Adaptable
Demo Day
Mayo 2013
Mauricio GomezDesarrollador Web y Aprendiz CEO - Nacer es un dolor, que la vida compensa.
smadit.commaurogo.com@the_maurogo
Por qué?
● hay 7 billones de personas en el mundo● 3.5 billones son dueñas de un dispositivo móvil (1/2)● 1.3 billones usan internet en sus dispositivos● 21% tenían 3G en el 2010
● 71% espera que las paginas web carguen rapido en sus dispositivos móviles
● 74% deja el sitio después de esperar por 5 segundos● 77% de los principales sitios web tarda al menos 5
segundos en cargar● 43% no le gusta volver a un sitio lento
Comó puedo enfrentarlo?
resoluciones - tamaño de pantallas - rendimiento - browsers - velocidades de conexión
1. No haga nada
2. Separe los sitios
3. Responsive Website
3. Responsive Website
Algunos Ejemplos - Demos
● http://worldwildlife.org/
● http://www.nd.edu/
● http://www.w3.org/
● http://www.smadit.com/
● http://mediaqueri.es/
Componentes principales
1. Fluid Grids / Flexible Layout
2. CSS Media Queries
3. Flexible Images / Flexible Media
El contenido primero
SimplificarDele a sus usuarios solamente lo que ellos necesitan
Movil primero
1. Diseñe primero la versión móvil
2. Optimizar para velocidad y rendimiento
3. Agregue funcionalidades para resoluciones grandes
4. Los tiempo de carga afectan la retención de usuarios
Ejemplo
Responsive Patterns
Responsive Patterns
Responsive Patterns
1. Fluid Grids / Flexible Layout
1. Fluid Grids / Flexible Layout
1. Fluid Grids / Flexible Layout
1. Fluid Grids / Flexible Layout
2. CSS Media Queries
2. CSS Media Queries
2. CSS Media Queries
2. CSS Media Queries
<meta name="viewport"content="width=device-width;initial-scale=1.0">
Reconoce los valores del viewport para trabajar con las media queries
3. Flexible Images / Flexible Media
img { max-width: 100% }
video, object, embed {
max-width: 100% }
Responsive Frameworks
● Less Framework 4
● Skeleton Framework
● Foundation 3
● Starbucks Style Guide
● 320 and Up
● Mobile Boilerplate
● Twitter Bootstrap
Dev, Tests & Tools
● Responsinator
● Opera Mobile Emulator
● MobiTest
● Web developers tools
● Browser code inspectors
● Web browsers
Preguntas?