webinar - diseño responsive

RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS

PARTE 1

RESPONSIVE DESIGN

MARCOS HEIZ@msh_cd

HERNÁN NADOTTI@Cuquinho10

¿Qué es el diseño responsive?

¿Qué es el responsive design?

MISMA ESTRUCTURAMISMO HTML

DISTINTOS TAMAÑOS Y ASPECTOS DE PANTALLA

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.

CADA SITIO ES ÚNICO

Y ESPECIAL

EJEMPLOS DE WEBS RESPONSIVE

Hoy en día el uso de tablets y smartphones está en auge

el uso de dispositivos movilessupere ampliamente al desktop

se espera que ya para

2015

2007 2008 2011 2013 2015

DESKTOP

MOBILE

¿Qué es el responsive design?

Estudio realizado por BIA/Kelsey

BENEFICIOS

BENEFICIOS

Reducción de costosno es necesario realizar dos diseños y programacionespor separadas ya que va a ser la misma hojaHTML que se adapte.

A esto mismo se le refleja lo rápido que es actualizar… ya que es un solo lugar a actualizar.

BENEFICIOS

Mejora la usabilidady conversiónEste 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.

logo LA EMPRESA QUE HACEMOS PRODUCTOS

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

logo

Lorem ipsum dolor sit amet,

consectetur adipi-

¡COMPRA AHORA!

LA LEGIBILIDAD ES NULA

LOS CONTROLES DE MENU NO SE VEN

EL MENSAJE PRINCIPAL SE PIERDE

NO SE ENCUENTRA EL LLAMADO A LA ACCION

¡PERFECTO!

BENEFICIOS

Impacto tecnológicoComo 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.

MOBILE APPRESPONSIVESitio 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.

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.

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.

RESPONSIVE | MOBILE | APP

RESPONSIVE

SEO

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://www.getskeleton.com

RESPONSIVE GRID SYSTEM: http://www.responsivegridsystem.com/

BASE: http://matthewhartman.github.io/base

COMPASS: http://compass-style.org

FLUID BASELINE GRID: http://fluidbaselinegrid.com

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 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 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


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



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 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 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



TIPOS MAS COMUNES DE SITIOS RESPONSIVE

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

ACADEMIA

webinars.donweb.com

FIN-DISEÑO-

¿preguntas?

@msh_cd

CONSIDERACIONES BÁSICASA LA HORA DE EMPEZAR

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.

QUE ES MEDIA QUERIE

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CONSIDERACIONES BASICAS

¿ Qué es 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

MOBILE LAST

MOBILE FIRST

QUE ES MOBILE FIRST

BENEFICIOS DE MOBILE FIRST

. Puedes (y debes) crear una jerarquía del contenido según la importancia y ubicación

. El dispositivo de menor resolución no está siendosobrecargado con más reglas de las necesarias

. Estas diseñando para el futuro

¿ Qué es Media Querie ?

usando breakpoints

@media screen and (min-width: 480px) and (max-width: 960px) { ...aquí nuestras declaraciones }

screen { unicamente cuando salga por pantalla }min-width { hasta que el mínimo sea... }max-width { hasta que el máximo sea... }

ESTRUCTURA DE UNA MEDIA QUERIE

entre 1280px y 768px de ancho

mayor a 1280px de ancho

menor a 768px de ancho

webinar - diseño responsive

Documents