Responsive Web Design, ventaja, inconvenientes y recomendaciones
-
Upload
xavi-cardet -
Category
Design
-
view
51 -
download
0
Transcript of Responsive Web Design, ventaja, inconvenientes y recomendaciones
![Page 1: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/1.jpg)
Responive Design & more
DÍA 7
ESDIEscola Superior de Disseny
![Page 2: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/2.jpg)
¿De donde venimos?
![Page 3: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/3.jpg)
¿De donde venimos?
![Page 4: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/4.jpg)
RWD
Native App
WebApp
Hidrid
… presentaciones de clase
![Page 5: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/5.jpg)
En el 2009 solo un 1% del tráfico global en internet venía de los móviles. A finales del 2012 pasó del 13%, en 2015 superó el 52%
… algo ha cambiado durante estos años
![Page 6: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/6.jpg)
Usu
ario
s en
inte
rnet
(M
illon
es)
Proyección de Usuarios de Internet Global: Móvil vs Escritorio, 2007 - 2015
2000
1600
1200
800
400
0
2007 2008 2009 2010 2011 2012 2013 2014 2015
Usuarios de internet desde móviles Usuarios de internet desde escritorio
… algo ha cambiado durante estos años
![Page 7: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/7.jpg)
Inversión en marketing móvil por tipologías
105.000
90.000
75.000
60.000
45.000
30.000
15.000
0
Inversión marketing móvil en España
mill
ones
de €
inve
rtid
os
2008 2009 2010 2011 2012
28,6 32,3
+13,3%
38,0
+17,8%
63,6
+67,4%
92,2
+44,9%
… teníamos crisis… no todos
![Page 8: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/8.jpg)
Inversión en marketing móvil por tipologías
50.000
40.000
30.000
20.000
10.000
0
2008 2009 2010 2011 2012
mill
ones
de €
inve
rtid
os
INTERNET MÓVIL APLICACIONES NATIVAS y WEB APP
MENSA JERÍA PROXIMIDAD
… teníamos crisis… no todos
![Page 9: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/9.jpg)
Resoluciones de pantallas en 2010
97 732
Resoluciones de pantallas en 2016
… somos muchos…
![Page 10: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/10.jpg)
42%
34%
24%
Móvil PC / Mac Webmail
2012 Enero
El 52% de e-mail se llegan a abrir desde dispositivos móviles.
… ¿Desde donde?
![Page 11: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/11.jpg)
De media, llegamos a consultar hasta 180 veces nuestro móvil durante el día.
… ¿Desde donde?
![Page 12: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/12.jpg)
39% de las personas lo utilizan en el baño
… ¿Desde donde?
![Page 13: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/13.jpg)
¿Cuando utilizan nuestra app?
• Al despertar • De camino o llegando al trabajo • Camino a casa • Antes de cenar
… ¿Desde donde?
![Page 14: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/14.jpg)
“La mejor dispositivo es aquel que tienes sea donde sea cuando quieres hacer algo”.
DONDE QUERAMOS CUANDO QUERAMOS
… por lo tanto
![Page 15: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/15.jpg)
El 94% de usuarios que quieren algo de ti, primero buscan en internet. Si realmente te necesitan y no te encuentran se cabrean
•56% piensan que es problema de su móvil •23% maldicen tu empresa •11% gritan a su dispositivo •4% tiran su dispositivo
… por lo tanto
![Page 16: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/16.jpg)
Los actores
APP Nativa Web App RWD
![Page 17: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/17.jpg)
És una aplicación desarrollada para una única plataforma. Toda aplicación nativa se descarga de un market y se instala en el dispositivo
“”
App nativa
![Page 18: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/18.jpg)
El 85% de los usuarios prefieren las aplicaciones nativas antes que las webs, pero de la media de 41 apps que podemos tener solo utilizamos un 20%
Si no funciona o no nos gusta, el 79% eliminamos la aplicación en el segundo intento.
App nativa
![Page 19: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/19.jpg)
Es una puerta en el mercado, transmite sensación de innovación, es un canal de venta adicional, están en contacto directo con nosotros, son más seguras…
La complejidad de una aplicación tiene un coste y un tiempo a tener en cuenta 2 a 6 meses - 23.000€ - 118.000€
App nativa
![Page 20: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/20.jpg)
Los usuarios y la aplicación se adaptan al dispositivo
App nativa
![Page 21: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/21.jpg)
És una web creada para dispositivos móviles y ofrecer una experiencia de usuario óptima sin tener en cuenta el S.O.
“”
Web App
![Page 22: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/22.jpg)
La analítica móvil está totalmente separada, pudiendo tener datos exactos, a su vez podemos filtrar el tipo de contenido agilizando la navegación en el dispositivo.
¿Qué estándares de diseño seguimos? ¿Nos olvidamos de las tabletas? y si queremos diseñar para la pantalla de la nevera?
Web App
![Page 23: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/23.jpg)
Tenemos frameworks que agilizan la programación y reducen el coste de la misma.
La programación puede ser limpia pero necesitaremos un código para cada dispositivo, diferentes URL’s.
Web App
![Page 24: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/24.jpg)
Los usuarios se adaptan al dispositivo y a la web
Web App
![Page 25: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/25.jpg)
És aquella web accesible y navegable desde cualquier dispositivo adaptándose a la resolución del dispositivo.
“ ”flexible grid flexible images media queries
ETHAN MARCOTTE
Responsive Design
![Page 26: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/26.jpg)
UNA WEB PARA DOMINARLOS A TODOS
Responsive Design
![Page 27: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/27.jpg)
Con la aparición de HTML5 y CSS3 y la evolución de los navegadores es posible utilizar las funcionalidades del dispositivo (cámara, gps, acelerómetro…)
Actualmente las RWD pueden ir más lentas dependiendo del dispositivo y los recursos que queramos utilizar.
Responsive Design
![Page 28: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/28.jpg)
Al tener una única URL tenemos un mayor control de nuestros usuarios (SEO), podemos focalizar nuestras campañas o productos a los usuarios.
El tiempo de carga y peso de las páginas responsivas suele ser más alto, Google penaliza las páginas con un tiempo alto de carga.
Responsive Design
![Page 30: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/30.jpg)
La web se adapta a los diferentes dispositivos del usuario.
Responsive Design
![Page 31: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/31.jpg)
RESPONSIVE WebApp APP NATIVA
Responsive Design
![Page 32: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/32.jpg)
RESPONSIVE WEB DESIGN
APP NATIVA
![Page 33: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/33.jpg)
En el caso que necesites utilizar cualquier funcionalidad del dispositivo o tus necesidades están orientadas a un tipo de dispositivo… utilízalas!
RESPONSIVE WEB DESIGN
APP NATIVA
¿LAS FUNCIONALIDADES DEL MÓBIL SON IMPORTANTES?
0 0
1
10 preguntas a realizar
![Page 34: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/34.jpg)
La característica más importante de una aplicación es la capacidad de diseñar experiencias para un usuario con el mínimo número de limitaciones.
RESPONSIVE WEB DESIGN
APP NATIVA
¿TUS DISEÑOS SON PERSONALIZADOS? 2
0 1
10 preguntas a realizar
![Page 35: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/35.jpg)
HTML5 puede crear buenas interacciones pero hasta cierto punto… la aplicación nativa siempre te aportará la máxima experiencia de usuario. [standards]
RESPONSIVE WEB DESIGN
APP NATIVA
¿TUS INTERACCIONES SON COMPLEJAS?3
0 2
10 preguntas a realizar
![Page 36: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/36.jpg)
El tiempo de programación de una RWD es muy inferior así como su coste. Necesitamos menos recursos y solo debemos revisar un código para su funcionamiento.
RESPONSIVE WEB DESIGN
APP NATIVA
¿TU PRESUPUESTO ESTÁ MUY AJUSTADO?4
0 3
10 preguntas a realizar
![Page 37: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/37.jpg)
La venta desde una aplicación es mucho más simple que desde una web, el proceso de compra está muy ligado al dispositivo y la seguridad suele ser mucho mayor.
RESPONSIVE WEB DESIGN
APP NATIVA
¿ESTÁS INTENTANDO VENDER O MONETIZAR UN CONTENIDO?5
1 3
10 preguntas a realizar
![Page 38: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/38.jpg)
Si parte de tu estrategia consiste es aumentar tu visibilidad utiliza RWD.
RESPONSIVE WEB DESIGN
APP NATIVA
¿EL SEO ES IMPORTANTE PARA TI?6
1 4
10 preguntas a realizar
![Page 39: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/39.jpg)
App Store y otros Markets tienen fuertes restricciones y el tiempo de aprobación alto.
RESPONSIVE WEB DESIGN
APP NATIVA
¿CREES QUE SERÁ DIFICIL LA APROVACIÓN DE TU APP?7
2 4
10 preguntas a realizar
![Page 40: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/40.jpg)
Una aplicación normalmente siempre funcionará más rápido que una web, esta no dependerá de internet o la velocidad de la misma.
RESPONSIVE WEB DESIGN
APP NATIVA
¿MUEVES MUCHA INFORMACIÓN?8
3 4
10 preguntas a realizar
![Page 41: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/41.jpg)
Si tienes actualizaciones frecuentes y quieres asegurarte que los usuarios están al día utiliza RWD.
RESPONSIVE WEB DESIGN
APP NATIVA
¿REALIZARAS ACTUALIZACIONES DE FORMA FRECUENTE?9
3 5
10 preguntas a realizar
![Page 42: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/42.jpg)
Si realmente quieres llegar a todos los dispositivos no lo dudes. És la forma más rápida para que tu producto esté en los dedos de los usuarios.
RESPONSIVE WEB DESIGN
APP NATIVA
¿QUIERES QUE SEA TOTALMENTE ACCESIBLE?10
4 5
10 preguntas a realizar
![Page 43: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/43.jpg)
El camino hacia Responsive Design
![Page 44: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/44.jpg)
El camino hacia Responsive Design
Con la aparición del iPhone las cosas empezaron a cambiar.
Inicialmente todo era pequeño y creíamos que el zoom era la solución
![Page 45: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/45.jpg)
El camino hacia Responsive Design
¿Y WebMobile?
![Page 46: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/46.jpg)
Responsive Design
Ethan Marcotte
![Page 47: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/47.jpg)
Responsive Design=
MobileFirst+
Content First+
Context
![Page 48: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/48.jpg)
El camino hacia Responsive Design
http://www.bostonglobe.com/
¿Que vemos?
![Page 49: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/49.jpg)
El camino hacia Responsive Design
http://morehazards.com/
![Page 50: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/50.jpg)
El camino hacia Responsive Design
1. Flexible Grid 2. Flexible images/media
3. Media Queries
Existen 3 partes en el Responsive DesignExisten 3 partes en el Responsive Design
![Page 51: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/51.jpg)
El camino hacia Responsive Design
1. Flexible Grid 2. Flexible images/media
3. Media Queries
Flexible Grid & Images son realmente fáciles de entender
![Page 52: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/52.jpg)
Flexible
http://www.bostonglobe.com/
![Page 53: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/53.jpg)
Flexible
http://www.jsonline.com/
¡Por cada web que hace esto, un gatito muere!
![Page 54: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/54.jpg)
Flexible
Flexible Grid
http://alistapart.com/article/fluidgrids
Ethan Marcotte
![Page 55: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/55.jpg)
Flexible
![Page 56: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/56.jpg)
Flexible
![Page 57: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/57.jpg)
Flexible
Piensa en %
http://alistapart.com/article/fluidgrids
Ethan Marcotte
![Page 58: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/58.jpg)
Flexible
Flexible media & Adaptives images
![Page 59: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/59.jpg)
El camino hacia Responsive Design
1. Flexible Grid 2. Flexible images/media
3. Media Queries
Habla con tu “browser”, dile como se deben mostrar las cosas
![Page 60: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/60.jpg)
Media Queries
800px 1024px 1220px
800px - 1023px 1024px - 1219px 1220px
Mobile Tablet Desktop
Chrome Inspect Device
![Page 61: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/61.jpg)
Media Queries
Portrait Landscape
568px
320px
![Page 62: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/62.jpg)
![Page 63: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/63.jpg)
Responsive Design
Hicimos un gran trabajo, un diseño elegante, con buenas experiencias
visuales para todos los dispositivos
![Page 64: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/64.jpg)
Responsive Design
¿Seguro?
![Page 65: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/65.jpg)
Content Strategy(copywritter o becario)
![Page 66: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/66.jpg)
Content Strategy
La estrategia de contenido define que contenido debemos mostrar y donde lo devemos mostrar
La suposición en el gran enemigo del contenido
![Page 67: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/67.jpg)
No olvides, el contexto
Content Strategy - Contexto de uso
![Page 68: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/68.jpg)
No olvides, los usuarios
Content Strategy - Los usuarios
![Page 69: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/69.jpg)
Tu principal contenido debe estar disponible en todos los dispositivos
Content Strategy - Parity
![Page 70: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/70.jpg)
Content Strategy - Priority
![Page 71: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/71.jpg)
Content Strategy - Priority
![Page 72: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/72.jpg)
Content Strategy - Priority
![Page 73: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/73.jpg)
Content Strategy - Priority
¿Qué quiere hacer realmente tu usuario?
¿Cómo evitamos las suposiciones?RESEARCH
![Page 74: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/74.jpg)
Content Strategy - Priority
![Page 75: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/75.jpg)
Content Strategy - Performance
Rendimiento es importante
![Page 76: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/76.jpg)
Content Strategy - Performance
Tamaño carga web
2010 2015
700Kb
2.000Kb
2020, ¿5.000Mb?
![Page 77: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/77.jpg)
Content Strategy - Performance
Por cada 100milisegundos de retraso, pierde 1% de la venta
https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website
![Page 78: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/78.jpg)
Content Strategy - Performance
Rediseño web de Obama, ahora 60% más rápida Aumentaron un 14% las donaciones
![Page 79: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/79.jpg)
Responsive Design
10 Consejos
![Page 80: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/80.jpg)
Responsive Design
1. ComunicaciónComunícate con el equipo en todo momento
antes, durante, después
![Page 81: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/81.jpg)
Responsive Design
2. Localiza tu contenidoBusca todo el contenido que será necesario.
![Page 82: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/82.jpg)
Responsive Design
3. Prioriza tu contenidoDetecta cuales son los “goals” principales
![Page 83: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/83.jpg)
Responsive Design
4. Contexto de uso para cada dispositivoPrioriza los contenidos dependiendo de “cuando” vaya a
utilizarse
![Page 84: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/84.jpg)
Responsive Design
5. Internacionalización de contenidosPiensa tus contenidos internazionalizando tu producto
![Page 85: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/85.jpg)
Responsive Design
6. Puntos críticosNavegación, imágenes, arquitectura…
![Page 86: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/86.jpg)
Responsive Design
7. Mobile FirstEmpieza por la “pantalla más pequeña”
![Page 87: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/87.jpg)
Responsive Design
8. Bocetos de referenciaCrea bocetos básicos para jerarquizar tus contenidos
![Page 88: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/88.jpg)
Responsive Design
9. Toma decisiones con los tuyosRevisa con el diseñador y los developers
![Page 89: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/89.jpg)
Responsive Design
10. Pruébalo con tus usuarios
![Page 90: Responsive Web Design, ventaja, inconvenientes y recomendaciones](https://reader031.fdocuments.es/reader031/viewer/2022012914/58a316ab1a28ab1d068b5a85/html5/thumbnails/90.jpg)
Pasar vuestro producto a otro dispositivo
Entregar informe con la siguiente información: • ¿Por que habéis escogido este dispositivo? • ¿Que funcionalidades tiene de más o de menos? • Explicar en contexto de uso y costumer journey. • Sketches/Wireframes de las principales pantallas explicando el por que de cada cosa. • Explicar si es o no es viable esta opción
1. A partir de vuestros sketches validados con usuarios, adaptarlos a otro dispositivo. El dispositivo no puede ser Desktop ni tableta.
Entrega el día 12 de Febrero NombreDelGrupo_2_ResponsiveDesign.pptx