Webinar - Diseño Responsive
-
Upload
marco-ponce-de-leon -
Category
Documents
-
view
14 -
download
0
description
Transcript of 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
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
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
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 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
Lorem ipsum dolor sit amet,
TIPOS DE SITIOS RESPONSIVE
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