tendencias de maquetacion

15
Tendencias 2013 Maquetación en diferentes browsers y dispositivos | Responsive vs. Adaptive

Upload: id4you

Post on 12-Jun-2015

224 views

Category:

Design


6 download

DESCRIPTION

Presentación que compara los tipos de maquetación cunpliendo con standares de Responsive design y Adaptive Design según tipo de proyecto o dispositivo en el que vaa ser navegado un sitio web o plataforma.

TRANSCRIPT

Page 1: Tendencias de maquetacion

Tendencias 2013Maquetación en diferentes browsers y dispositivos | Responsive vs. Adaptive

Page 2: Tendencias de maquetacion

TENDENCIAS▐ Consideraciones para diferentes browsers▐ Viabilidad en cada browser▐ Dispositivos (mobile y tabletas)

Page 3: Tendencias de maquetacion

CONSIDERACIONES PARA DIFERENTES BROWSERS

|Tradicionalmente los websites o plataformas online se verifican para los siguientes exploradores en una pc:Explorer (8, 9 y 10), Chrome, Firefox, Safari.

| Es indispensable definir, mediante herramientas de medición y estadísticas (por ejemplo, Google Analytics) si también se debe verificar dicha plataforma en Explorer 7.Esta versión del explorador suele restringir las elecciones del tipo de desarrollo a proponer.

| Por ejemplo, ciertas formas en el diseño (bordes redondeados, sombras aplicadas por css) no se ven.

Por ejemplo: http://www.krikos.com.ar/facturasdemo/Home/login

Page 4: Tendencias de maquetacion

CONSIDERACIONES PARA DIFERENTES BROWSERS

|Sobre Explorer 9

Page 5: Tendencias de maquetacion

CONSIDERACIONES PARA DIFERENTES BROWSERS

|Sobre Explorer 7

Page 6: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

| Mediante las mismas herramientas de medición y estadísticas, resulta necesario analizar las plataformas, dispositivos sobre las cuales va a ser requerimiento replantear la plataforma.

| Para ello se debe plantear, a su vez, si la maquetación a utilizar será Responsive o Adaptive.

Maquetación Responsive: Este tipo de maquetación se realiza a través del uso de una grilla que permita adaptar una misma estructura maquetada a diferentes dispositivos.Se utiliza un solo css que divide por módulos la estructura y los adapta a, visualización en PC, tabletas y dispositivos móviles.

Maquetación Adaptive: Este tipo de maquetación se realiza adaptando un css para cada dispositivo específico (con diferentes anchos y altos de pantalla).

Page 7: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Ejemplo de estructura responsive

Page 8: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Ejemplo de implementación responsive

Page 9: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Ejemplo de implementación adaptiveCASO: Provincia NET. Aplicación para geolocalización de sucursales

Page 10: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Ejemplo de implementación adaptiveCASO: Provincia NET. Aplicación para geolocalización de sucursales

Page 11: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Ejemplo de implementación adaptiveCASO: Buenas Vibras Viajes. Web mobile

Page 12: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Algunas estadísticas de usosReferencia: Online Marketing Day, Julio de 2013

Page 13: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Algunas estadísticas de usosReferencia: Online Marketing Day, Julio de 2013

Page 14: Tendencias de maquetacion

DISPOSITIVOS: MOBILE Y TABLETAS

|Algunas estadísticas de usosReferencia: Online Marketing Day, Julio de 2013

Page 15: Tendencias de maquetacion

Luciana MonacoVanesa Gambirazio

www. id4you.comMonroe 4181 PB A | CABA | Argentina