adejetec 2013. responsive web desing
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
Rafael Mesa@rafaelmesa
Director general
Pedro Báez Díaz @pedrobaezdiaz
Director de proyectos
Isa Robayna@isarobayna
Directora de comunicación
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
Smartphone51%
Portatiles31%
tablets18%
rafaelmesa.com@rafaelmesa
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
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
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
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
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
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
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
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
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
rafaelmesa.com@rafaelmesa
Isarobayna.com@isarobayna
pedrobaezdiaz.com@pedrobaezdiaz
20
13
elañ
o d
el
rafaelmesa.com@rafaelmesa
Isa Robayna@isarobayna
Directora de comunicación
Pedro Báez Díaz @pedrobaezdiaz
Director de proyectos
Rafael Mesa@rafaelmesa
Director general