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

Algunos Ejemplos - Demos

● http://worldwildlife.org/

● http://www.nd.edu/

● http://www.w3.org/

● http://www.smadit.com/

● http://mediaqueri.es/

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

1. Fluid Grids / Flexible Layout

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

http://responsinator.com/

http://www.opera.com/developer/mobile-emulator

http://mobitest.akamai.com/m/index.cgi

Preguntas?

responsive design - demo day 2014

Internet