Upload
orlando-del-aguila
View
244
Download
4
Embed Size (px)
DESCRIPTION
Charla para el Refresh sobre Diseño Web para móviles, tocando temas como Adaptive y Responsive Design
Citation preview
ORLANDO DEL AGUILA
Como perder 20 kilos en 2 semanas con
HERBALIFE
Diseño web para dispositivos móviles.
@odelaguila
orlandodelaguila
orlandodelaguila.com
www.bakedweb.net
La Web Móvil
La Web Móvil
Fixed y Fluid Layouts
La Web Móvil
Fixed y Fluid Layouts
Adaptive Design Breakpoints Responsive Design
Extras y Closing
La Web Móvil
Fixed y Fluid Layouts
Adaptive Design Breakpoints Responsive Design
La Web Móvil
La Web Móvil
No existe la web móvil
La Web
La Web
Cualquier tipo de Contenido Debe ser accesible desde cualquier dispositivo
La Web
Diseño Móvil Adaptive Design Responsive Design
La Web
Diseño Móvil Adaptive Design Responsive Design Diseño Web
Cosas que vamos a usar
Cosas que vamos a usar
Cosas que vamos a usar
Fixed y Fluid Layouts
Fixed Layouts
Wrapper
Header
Content
Fixed Layouts
Tamaño fijo (pixeles)
#wrapper { margin: 50px auto; width: 1010px; Fijo }
Wrapper
Fixed Layouts
Fixed Layouts
Fixed Layouts
Fluid Layouts
Porcentajes Ems
Fluid Layouts
Porcentajes
Fluid Layouts
Porcentajes html,body{ width: 100%; height: 100%; }
Fluid Layouts
Agarra el 100% de la pantalla
html,body{ width: 100%; height: 100%; }
Fluid Layouts
Mi pantalla
1280 x 768 Ancho - Alto
Fluid Layouts
1280 80% 1024
Fluid Layouts
#wrapper { margin: 50px auto; width: 1010px; Fijo }
Fluid Layouts
#wrapper { margin: 50px auto; width: 80%; Fluido }
Fluid Layouts
Ems
Fluid Layouts
Ems Se usan para texto
EMS
Hacen que nuestro texto no sea fijo y que pueda cambiar con el layout
EMS
HTML
<h3> Este es un h3 <span> Esto es un span </span> </h3>
CSS h3 { font-size: 50px; font-weight: bold; color: black; span{ color: red; font-size: 30px; font-weight: lighter; } }
CSS h3 { font-size: 50px; font-weight: bold; color: black; span{ color: red; font-size: 30px; font-weight: lighter; } }
CSS
html{ font-size: 16px; } body{ font-size: 62.5%; }
EMS
Para hacer las cuentas sencillas, hacemos lo siguiente
Regla de Oro
Target / Contexto
EMS
10px/ 16px = 0,625
EMS
0,625 x 100 = 62,5%
EMS
1em = 10px
EMS h3 { font-size: 5em; *50px* font-weight: bold; color: black; span{ color: red; font-size: 3em; *30px* font-weight: lighter; } }
EMS
Regla de Oro
Target / Contexto
EMS
El contexto del span cambio, ya
no es el body, ahora es el h3
EMS h3 { font-size: 5em; == 50px font-weight: bold; color: black; span{ color: red; font-size: 3em; font-weight: lighter; } }
EMS
30px / 50px = 0.6em
EMS h3 { font-size: 5em; == 50px font-weight: bold; color: black; span{ color: red; font-size: 0.6 em; *30px / 50px* font-weight: lighter; } }
EMS
Fluid Layout
Para que nuestro diseño sea fluido,
todo tiene que estar en ems o %
Fixed Layouts
Wrapper
#wrapper { margin: 50px auto; width: 80%; Fluido }
Header header{ margin-bottom: 20px width: 1010px; #name{ font-size:50px float:left; } nav{ float:right; } }
Header header{ margin-bottom: 20px width: inherit; #name{ font-size:5em; *50px / 10px* float:left; } nav{ float:right; } }
Contenido
#content { height: auto; width: inherit; }
Secciones
Secciones
<h1> ABOUT </h1> <div class="img"> <img src="/img/me.jpg"> </div>
Secciones
h1 { font-family: "museo-sans" font-size: 25px; padding: 0 25px; }
Secciones
h1 { font-family: "museo-sans" font-size: 2.5em; 25px/10px padding: 0 25px; }
Secciones
Para pasar el padding a porcentaje, se toma como contexto el tamaño del mismo elemento
Secciones
1010px de ancho
Secciones
1010px de ancho
25px /1010px = 2.47524752475%
Secciones
h1 { font-family: "museo-sans" font-size: 2.5em; 25px/10px padding: 0 2.47524752475%; }
Secciones
Al contrario del padding, el margin se calcula igual que los ems, usando como contexto el elemento que contiene al elemento que estamos evaluando.
Secciones
Secciones
<h1> ABOUT </h1> <div class="img"> <img src="/img/me.jpg"> </div>
Secciones
Alguno quizás dirá, tener img tags para imágenes que son del layout y no del contenido es una mala practica
Secciones
img { width: auto; max-width: 100%; }
Secciones
img,video,object… { width: auto; max-width: 100%; }
Secciones
Secciones
Adaptive Design Breakpoints Responsive Design
Adaptive Design
Adaptar nuestro diseño a un contexto, ejemplo un dispositivo en especifico, un iPhone o un iPad por ejemplo
Adaptive Design
Adaptive Design
dribble noto que un numero importante de usuarios acensaban a su pagina desde iPhones
Adaptive Design
Adaptive Design
Hay que tener en cuenta • Dispositivos • Tamaño de Pantalla • Resolución
Adaptive Design
• Quien es mi usuario • Como usa mi sitio • Contexto (Dispositivo) • Contenido (¿como se
adaptaría?)
Puntos a considerar
Adaptive Design
Adaptive Design Breakpoints Responsive Design
Breakpoints
Breakpoints son los puntos en los cuales mi diseño se rompe.
Breakpoints
También son los puntos importantes como el tamaño de las pantallas de los distintos dispositivos
Breakpoints
Tamaño != Resolución
Breakpoints
iPhone 4s
Resolución: 640 x 960 Tamaño: 480 x 320
Breakpoints
Breakpoints
Para atender los problemas que tenían los dispositivos móviles para visualizar la web…
Breakpoints
Se creo: • Meta viewport • Mediaquery
Secciones
<meta name='viewport‘, content='width=device-width />
Meta viewport
Secciones Meta viewport
Con esto limitamos el lienzo web al tamaño del dispositivo.
Meta viewport
Secciones
html,body { height: 100%; = 480px width: 100%; = 320px }
Meta viewport
Secciones MediaQueries
Reglas CSS, solo para dispositivos especificos
Secciones MediaQueries
Reglas CSS, solo para dispositivos específicos
Secciones MediaQueries
Existen varios mediaqueries, pero aquí solo vamos a usar el de max-width
Secciones MediaQueries
Documentación http://mzl.la/L28U6F
Secciones MediaQueries
/* Phones (portrait) */ @media only screen and (max-width : 320px){ /* Reglas aki */ }
Secciones MediaQueries
/* Phones (landscape) */ @media only screen and (max-width : 480px){ /* Reglas aki */ }
Secciones MediaQueries
/* Tables (portrait) */ @media only screen and (max-width : 768px){ /* Reglas aki */ }
Secciones MediaQueries
Los mediaqueries se colocan al final de nuestras hojas de estilo (stylesheets)
Secciones MediaQueries
Secciones MediaQueries
Si usan Chrome http://bit.ly/L29FfZ
Secciones MediaQueries
Creamos un mediaquery para atender ese breakpoint
Secciones MediaQueries
@media only screen and (max-width : 850px){ nav, #name{ float:none; width:100%; } }
Secciones MediaQueries
Secciones MediaQueries
@media only screen and (max-width : 850px){ nav, #name{ float:none; width:100%; text-align:center; } }
Secciones MediaQueries
Secciones MediaQueries
@media only screen and (max-width : 850px){ header{ margin-bottom:50px;} nav, #name{ float:none; width:100%; text-align:center; } }
Secciones MediaQueries
Secciones MediaQueries
En este punto hay que probar y corregir los breakpoints hasta que tengamos lo que queremos
Responsive Design
Responsive Design
Imaginen un adaptive design, pensado para todos los dispositivos, actuales y futuros.
Extras y Closing
El responsive design no es un silverbullet, no va ser viable en todos los casos
Extras y Closing
En otros casos, app nativas para móviles es la solución, o alternativas como jQuery Mobile
Extras y Closing
Extras y Closing
Extras y Closing
IE6-8 no soportan mediqueries, pero hay un polyfill para eso Respond.js http://bit.ly/LQaei0
Extras y Closing
Hay frameworks de CSS que se basan en fluid layouts y responsive design • Twitter Bootstrap • Zurb Foundation
Extras y Closing
A Book Apart, Responsive Web Design http://bit.ly/LQbXUP
Gracias