¿Y qué es esto de Responsive Web Design?

¿Y qué es esto de Responsive
Web Design?
Juan Daniel Flórez
Director de diseño - Rootstack
Desayuno Mensual Julio
Tuesday, July 23, 13

Rootstack
• Fundada en 2010
• Miembros de:

Nuestros Servicios
• Estrategia
• Diseño
• Desarrollo
• Desarrollo móvil
• Soporte y Mantenimiento
• Entrenamiento

Nuestros clientes

Temario
‣ ¿Qué es Responsive Web Design
(RWD)?
‣ ¿Cómo funciona?
‣ Casos de estudio y recomendaciones
‣ Ventajas del RWD

Estadísticas
‣ Ventas de tablets están previstas a
superar los 100 millones este año.
‣ En el Q4 del 2012 se vendieron más de
200 millones de smartphones (Android,
iOS, Blackberry y Microsoft)

Monetate Q1 2013 Ecommerce Quarterly
500 millones de visitas en sitios de retail. Monetate Q1 2013
Crecimiento de tráfico

Sushiexpresspanama.com
Tráfico en Panamá
24.1% Visitantes usan dispositivos móviles (iOS, Android, Blackberry)

Miles de dispositivos

Tamaños de resoluciones de
smartphones
OpenSignalMaps - 2012

OpenSignalMaps - 2012
Android iOS
Diferencia de resoluciones

Es una prioridad que podamos darle a
nuestros usuarios una experiencia
adecuada.
Hay que ofrecerle una solución a los
usuarios que acceden a nuestros sitios a
través de sus celulares y tabletas.
Prioridades

Prioridades

• No podemos encasillarnos en una
tecnología o dispositivo:
“Un sitio móvil para iPhone”.
¿Por qué no?
Porque hoy tenemos x resolución para x
dispositivo y mañana no sabemos.
¿Qué cosas no queremos?

Android
La única constante es el cambio

Pensemos más allá

“En vez de crear diseños desconectados entre
si para un número creciente de dispositivos,
podemos tratarlo como facetas de la misma
experiencia. Podemos diseñar para una
experiencia óptima, que implemente
tecnologías basadas en estándares en
nuestros diseños para hacerlos no solamente
ﬂexibles, pero más adaptivos al medio que lo
accesa.”
Ethan Marcotte
La idea

“Pensar en la web responsiva es pensar
en proporciones, no en píxeles”
Trent Walton
La idea

¿Qué es Responsive Web
Design?

“Un sitio web debe responder al
dispositivo que lo está accesando”.
RWD

1. Un layout ﬂexible, basado en grids
2. Imágenes y media ﬂexibles
3. Media queries
Definición

Layout flexible, basado en grids

http://foundation.zurb.com/grid-example3.php
Layout flexible, basado en grids

Imágenes y media flexibles

• No ﬂash!
• Distintas imágenes (tamaños y
medidas).
• Reproductores de audio y video HTML5
• Sliders
Imágenes y media flexibles

Mediatypes & mediaqueries
<html>
<head>
<link rel=”stylesheet” href=”global.css” media=”all” />
<link rel=”stylesheet” href=”main.css” media=”screen” />
<link rel=”stylesheet” href=”print.css” media=”print” />
<link rel=”stylesheet” href=”responsive.css” media=”screen and (min-width: 1024px)” />
</head>
...
style.css
@media screen and (min-width: 720px) {
.selector {...}
}

The Boston Globe
http://www.bostonglobe.com/
¿Quiénes lo están haciendo?

WWF
http://www.wwf.org/

Time
http://www.time.com/

Vogue (Britain)
http://vogue.co.uk/

Starbucks
http://www.starbucks.com/

Hillsong London
http://www.hillsong.co.uk/

Gateway Bank of Mesa, AZ
http://www.gcbaz.com/

Jyske Bank
http://www.jyskebank.dk/wps/portal/jfo/forside

Autoridad de Turismo de Panamá
http://www.atp.gob.pa/
Sitios que hemos hecho

‣ Cuesta mucho
‣ Es difícil de hacer
Conceptos erróneos

‣ Es más costoso hacer sitios individuales o
separados.
‣ Costos de actualizacion y mantenimiento son
menores al usar un sitio responsivo.
‣ No hay diferencia de información entre un
sitio y otro porque la información es la misma.
‣ Tiene en mente el futuro, no el presente.
Cuesta mucho

‣ Es duro el cambio de mentalidad
‣ La tecnología está; no hay que inventar nada
‣ Al principio es difícil adaptar el diseño y
contenido de un sitio web de escritorio a un
sitio responsivo
‣ Es cuestión de darle prioridad al contenido
que se quiere mostrar
Es difícil de hacer

Las ventajas
Area Beneficio
Experiencia de
usuario
Con una buena planeación, la experiencia para todos
los usuarios es buena
Acceso
Un solo sitio asegura acceso a la misma información
para todos los dispositivos
Costos
Un sólo sitio es menos costoso que sitios
segmentados

‣ Reproductores video HTML5
‣ http://www.videojs.com/
‣ http://sublimevideo.net/
‣ Sistemas de grid
‣ http://foundation.zurb.com
‣ http://www.getskeleton.com/
‣ http://twitter.github.io/bootstrap/
‣ http://www.initializr.com/
Herramientas

‣ Webfonts
‣ https://typekit.com/
‣ http://www.google.com/fonts/
‣ Iconos con fonts
‣ http://symbolset.com/
‣ http://fortawesome.github.io/Font-Awesome/
‣ http://codevisually.com/elusive-icons/
Herramientas

Preguntas

Email: info@rootstack.com Teléfono: +507 209 9002
Via Brasil, Ediﬁcio Brazil 405, Oﬁcina 15-H.

¿Y qué es esto de Responsive Web Design?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

¿Y qué es esto de Responsive Web Design?