Responsive Design - Demo Day 2014

Responsive Web DesignDiseño Web Adaptable

Demo Day

Mayo 2014

Mauricio GomezDesarrollador Web y Aprendiz de CEO, PMP y Scrum Master.

“Nacer es un dolor, que la vida compensa.”

www.smadit.comwww.maurogo.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?