adejetec 2013. responsive web desing

17
Rafael Mesa @rafaelmesa Director general Pedro Báez Díaz @pedrobaezdiaz Director de proyectos Isa Robayna @isarobayna Directora de comunicación

Upload: centro-de-innovacion-y-desarrollo-empresarial-de-canarias

Post on 08-Jul-2015

265 views

Category:

Documents


0 download

DESCRIPTION

Los usuarios utilizan cada vez más entornos diferentes de acceso a internet con tamaños distintos de pantallas, las tablet, portatiles o smartphone son algunos de ellos. Las empresas deben de adaptar su tecnología en internet para conseguir la mejor difusión y comunicación llegando a todos los dispositivos con solo una web.

TRANSCRIPT

Page 1: Adejetec 2013. Responsive Web Desing

Rafael Mesa@rafaelmesa

Director general

Pedro Báez Díaz @pedrobaezdiaz

Director de proyectos

Isa Robayna@isarobayna

Directora de comunicación

Page 2: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 3: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 4: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

Smartphone51%

Portatiles31%

tablets18%

rafaelmesa.com@rafaelmesa

Page 5: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

• El 61% para juegos

• El 55% mira el clima

• El 50% realiza búsquedas de empresas o servicios

• El 49% redes sociales

• El 42% escucha música

• El 36% lee noticias

• El 33% lo usa para entretenimiento

• El 21% ve videos

rafaelmesa.com@rafaelmesa

Page 6: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

La resolución de pantalla es el número de píxeles que puede ser mostrado en la pantalla.

rafaelmesa.com@rafaelmesa

Page 7: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 8: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 9: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 10: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

En el 2008 en el consorcio W3Cse discutió y describió lasrecomendaciones “Mobile WebBest Practices” tanto de la ideacomo el propósito del diseñoweb adaptativo

rafaelmesa.com@rafaelmesa

Page 11: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

Fluid grid (cuadrícula fluida o diseño fluido): En lugar dediseñar nuestra web basándonos en valores fijos, el diseñofluido está pensado en términos de proporciones.

rafaelmesa.com@rafaelmesa

Page 12: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

Media queries: Forman parte de CSS3 e inspeccionan lascaracterísticas físicas del medio que va a mostrar nuestrodiseño, dependiendo de la respuesta se utiliza un estilo uotro.

rafaelmesa.com@rafaelmesa

Page 13: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

Imágenes flexibles: Las imágenes no tienen anchos fijos sinoun máximo, que por lo general suele mostrarse al 100% enun PC.

rafaelmesa.com@rafaelmesa

Page 14: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

• Mejor experiencia para el usuario: Los usuarios ven la web de la mejormanera posible en el dispositivo desde el que acceden.

• Costes más bajos: Se reducen los costes de creación y mantenimiento.

• Mejor SEO: Google descubre mejor los contenido.

• Actualizaciones más eficientes: Las actualizaciones del diseño se venreflejadas en todas las plataformas de manera inmediata reduciendotiempos y márgenes de errores.

• Accesible a todos: Se incrementa la accesibilidad de los usuarios, incluidoslas personas discapacitadas.

• Búsquedas: Se obtiene una URL única en las búsquedas lo que ahorranredirecciones y posibles fallos que puedan surgir.

rafaelmesa.com@rafaelmesa

Page 15: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

rafaelmesa.com@rafaelmesa

Page 16: Adejetec 2013. Responsive Web Desing

Isarobayna.com@isarobayna

pedrobaezdiaz.com@pedrobaezdiaz

20

13

elañ

o d

el

rafaelmesa.com@rafaelmesa

Page 17: Adejetec 2013. Responsive Web Desing

Isa Robayna@isarobayna

Directora de comunicación

Pedro Báez Díaz @pedrobaezdiaz

Director de proyectos

Rafael Mesa@rafaelmesa

Director general