RESPONSIVE DESIGN PARTE 1 RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS. MARCOS HERNÁN

Transcripción

1 RESPONSIVE DESIGN RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS PARTE 1 MARCOS HERNÁN

2 Qué es el diseño responsive?

3 Qué es el responsive design? Es una tecnica de diseño web que consiste en crear una estructura, la cual segun el tamaño de la pantalla o de la ventana que en que se visualice el sitio, su contenido respondera adaptandose de manera cómoda y legible a esos tamaños. MISMA ESTRUCTURA MISMO HTML DISTINTOS TAMAÑOS Y ASPECTOS DE PANTALLA

4 CADA SITIO ES ÚNICO Y ESPECIAL

5 EJEMPLOS DE WEBS RESPONSIVE

6 EJEMPLOS DE WEBS RESPONSIVE

7 Qué es el responsive design? Hoy en día el uso de tablets y smartphones está en auge se espera que ya para 2015 el uso de dispositivos moviles supere ampliamente al desktop DESKTOP MOBILE Estudio realizado por BIA/Kelsey

8 BENEFICIOS

9 BENEFICIOS Reducción de costos no es necesario realizar dos diseños y programaciones por separadas ya que va a ser la misma hoja HTML que se adapte. A esto mismo se le refleja lo rápido que es actualizar ya que es un solo lugar a actualizar.

10 BENEFICIOS logo LA EMPRESA QUE HACEMOS PRODUCTOS Lorem ipsum dolor sit amet, Lorem ipsum consectetur adipisicing elit, dolor sit amet, consectetur adipi- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut logo COMPRA AHORA! Mejora la usabilidad y conversión Este es uno de los puntos fundamentales de la responsividad. Ya que un sitio que no esté pensado para tablets por ej, puede ser confuso a la hora de navegarlo, pudiendo llegar a perder de vista lo que estamos buscando. Del otro modo, solo vamos a mostrar lo que creamos que es convienente para el usuario. LA LEGIBILIDAD ES NULA LOS CONTROLES DE MENU NO SE VEN EL MENSAJE PRINCIPAL SE PIERDE PERFECTO! NO SE ENCUENTRA EL LLAMADO A LA ACCION

11 BENEFICIOS Impacto tecnológico Como se sabe, en este tipo de cosas, la imagen dice y habla por si misma.. un sitio con nuevas tecnologías, se asocia mas rápido a una marca con creatividad e innovación.

12 RESPONSIVE Sitio que se desarrolla con un diseño adaptable, que optiene la resolución de pantalla y muestra el contenido de una manera liquida, permitiendo modificar etilos y estructura, dependiendo de los tamaños de ventana o pantalla. MOBILE Finalmente una Web App es un sitio mobile desarrollado en paralelo del sitio web desktop, lo que tendrá una URL distinta (por ej: mobile.misitio.com). Pero es un contenido únicamente pensado para tablets y smartphones y no es necesario que se descargue como aplicación en una tienda. APP Apps nativas, que son las que bajamos en nuestras tablets o smartphones, sean para Android o para IOS. Estas llevan una programación específica (apple es ObjectiveC y androd es java). pero este es un mundo a parte, ya que son lenguajes de programación distintos y por lo general loscostos son mucho mayores ya que se desarrollan las aplicaciones por separado.

13 RESPONSIVE MOBILE APP

14 RESPONSIVE SEO

15 TIPOS DE SITIOS RESPONSIVE

16 TIPOS DE SITIOS RESPONSIVE MIS TOP 10 WEB FRAMEWORKS BOOTSTRAP: http: /getbootstrap.com FOUNDATION: http: /foundation.zurb.com GUMBY: http: /gumbyframework.com PURE: http: /purecss.io INK: http: /ink.sapo.pt SKELETON: http: / RESPONSIVE GRID SYSTEM: http: / BASE: http: /matthewhartman.github.io/base COMPASS: http: /compass-style.org FLUID BASELINE GRID: http: /fluidbaselinegrid.com

17 TIPOS DE SITIOS RESPONSIVE TIPOS MAS COMUNES DE SITIOS RESPONSIVE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat Lorem ipsum dolor sit elit, sed do eiusmod tempor incididunt ut elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Lorem ipsum dolor sit elit, sed do eiusmod tempor incididunt ut elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem ipsum dolor cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumlorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Este tipo de diseño es uno de los más comunes, que se distingue por no mover mucho los elementos de la web e intentando que se adapten al ancho de la pantalla reduciendo el menu, redimensionando imagenes y bloques, etc En este caso tenemos webs con varias columnas, con la columna principal con el contenido y la lateral con publicidad y al visualizarce en pantallas angostas, se ponen una debajo de la otra seguidamente Como el titulo lo dice, cambia la estructura de los elementos del sitio, disponiéndolos de una forma distinta dependiendo el tamaño de la ventana.. se puede hacer lo que se quiera dependiendo el diseño que busquemos

18 ACADEMIA webinars.donweb.com

19 FIN -DISEÑO-

20 CONSIDERACIONES BÁSICAS A LA HORA DE EMPEZAR

21 CONSIDERACIONES BASICAS 1º 2º 3º Tener en cuenta para que resoluciones vamos a diseñar el sitio Desactivar la propiedad que hace que en algunos navegadores móviles el tamaño de la página se reduzca al de la pantalla Decidir si vamos a utilizar un framework tipo BOOTSTRAP o HTML BOILERPLATE o simplemente vamos a programar desde 0 nosotros.

22 <meta name="viewport" content="width=device-width, initial-scale=1.0"> QUE ES MEDIA QUERIE

23 CONSIDERACIONES BASICAS

24 Qué es Mobile First??

25 QUE ES MOBILE FIRST MOBILE LAST MOBILE FIRST Diseñar la web primero para que sea perfectamente funcional, usable y atractiva en un Smartphone de 4 o 5 pulgadas y a partir de ahí ampliar el espacio y reubicar los elementos funcionales y de diseño para poderse ver en ámbitos más grandes como tablets

26 BENEFICIOSDEMOBILEFIRST.Puedes(ydebes)crearunajerarquíadelcontenido segúnlaimportanciayubicación.eldispositivodemenorresoluciónnoestásiendo sobrecargadoconmásreglasdelasnecesarias.estasdiseñandoparaelfuturo

27 Qué es Media Querie?

28

29

30

31

32

33 ESTRUCTURADEUNAMEDIAQUERIE } screen {unicamentecuandosalgaporpantala} min-width {hastaqueelmínimosea.} max-width {hastaqueelmáximosea.}

34

35

36

37 entre1280pxy768pxdeancho

38 mayora1280pxdeancho