hablando un poco sobre responsive y adaptive design... y algunas cosas relacionadas con diseño web para móviles
ORLANDODEL AGUILA
View Slide
Como perder 20 kilosen 2 semanas conHERBALIFE
Diseño web paradispositivos móviles.
@odelaguilaorlandodelaguilaorlandodelaguila.comwww.bakedweb.net
La Web Móvil
La Web MóvilFixed y Fluid Layouts
La Web MóvilFixed y Fluid LayoutsAdaptive DesignBreakpointsResponsive Design
Extras y ClosingLa Web MóvilFixed y Fluid LayoutsAdaptive DesignBreakpointsResponsive Design
La Web MóvilNo existela web móvil
La Web
La WebCualquier tipo de ContenidoDebe ser accesible desdecualquier dispositivo
La WebDiseño MóvilAdaptive DesignResponsive Design
La WebDiseño MóvilAdaptive DesignResponsive DesignDiseño Web
Cosas que vamos a usar
Fixed y Fluid Layouts
Fixed Layouts
Wrapper
Header
Content
Fixed LayoutsTamaño fijo (pixeles)#wrapper {margin: 50px auto;width: 1010px; Fijo}
Fluid LayoutsPorcentajesEms
Fluid LayoutsPorcentajes
Fluid LayoutsPorcentajeshtml,body{width: 100%;height: 100%;}
Fluid LayoutsAgarra el 100% de lapantallahtml,body{width: 100%;height: 100%;}
Fluid LayoutsMi pantalla1280 x 768Ancho - Alto
Fluid Layouts128080%1024
Fluid Layouts#wrapper {margin: 50px auto;width: 1010px; Fijo}
Fluid Layouts#wrapper {margin: 50px auto;width: 80%; Fluido}
Fluid LayoutsEms
Fluid LayoutsEmsSe usan para texto
EMSHacen que nuestrotexto no sea fijo yque puedacambiar con ellayout
EMS
HTMLEste es un h3Esto es un span
CSSh3 {font-size: 50px;font-weight: bold;color: black;span{color: red;font-size: 30px;font-weight: lighter;}}
CSShtml{font-size: 16px;}body{font-size: 62.5%;}
EMSPara hacer las cuentassencillas, hacemos losiguiente
Regla de OroTarget / Contexto
EMS10px/ 16px = 0,625
EMS0,625 x 100 = 62,5%
EMS1em = 10px
EMSh3 {font-size: 5em; *50px*font-weight: bold;color: black;span{color: red;font-size: 3em; *30px*font-weight: lighter;}}
EMSEl contexto delspan cambio, yano es el body,ahora es el h3
EMSh3 {font-size: 5em; == 50pxfont-weight: bold;color: black;span{color: red;font-size: 3em;font-weight: lighter;}}
EMS30px / 50px = 0.6em
EMSh3 {font-size: 5em; == 50pxfont-weight: bold;color: black;span{color: red;font-size: 0.6 em; *30px / 50px*font-weight: lighter;}}
Fluid LayoutPara que nuestrodiseño sea fluido,todo tiene que estaren ems o %
Wrapper#wrapper {margin: 50px auto;width: 80%; Fluido}
Headerheader{margin-bottom: 20pxwidth: 1010px;#name{font-size:50pxfloat:left;}nav{float:right;}}
Headerheader{margin-bottom: 20pxwidth: inherit;#name{font-size:5em; *50px / 10px*float:left;}nav{float:right;}}
Contenido#content {height: auto;width: inherit;}
Secciones
SeccionesABOUT
Seccionesh1 {font-family: "museo-sans"font-size: 25px;padding: 0 25px;}
Seccionesh1 {font-family: "museo-sans"font-size: 2.5em; 25px/10pxpadding: 0 25px;}
SeccionesPara pasar el padding aporcentaje, se toma comocontexto el tamaño delmismo elemento
Secciones1010px de ancho
Secciones1010px de ancho25px /1010px =2.47524752475%
Seccionesh1 {font-family: "museo-sans"font-size: 2.5em; 25px/10pxpadding: 0 2.47524752475%;}
SeccionesAl contrario del padding, elmargin se calcula igual quelos ems, usando comocontexto el elemento quecontiene al elemento queestamos evaluando.
SeccionesAlguno quizás dirá, tenerimg tags para imágenesque son del layout y nodel contenido es una malapractica
Seccionesimg {width: auto;max-width: 100%;}
Seccionesimg,video,object… {width: auto;max-width: 100%;}
Adaptive DesignBreakpointsResponsive Design
Adaptive DesignAdaptar nuestro diseño a uncontexto, ejemplo undispositivo en especifico, uniPhone o un iPad porejemplo
Adaptive Design
Adaptive Designdribble noto que unnumero importante deusuarios acensaban a supagina desde iPhones
Adaptive DesignHay 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 seadaptaría?)Puntos a considerar
BreakpointsBreakpoints son lospuntos en los cuales midiseño se rompe.
BreakpointsTambién son lospuntos importantescomo el tamaño de laspantallas de losdistintos dispositivos
BreakpointsTamaño != Resolución
BreakpointsiPhone 4sResolución: 640 x 960Tamaño: 480 x 320
Breakpoints
BreakpointsPara atender losproblemas que teníanlos dispositivos móvilespara visualizar la web…
BreakpointsSe creo:• Meta viewport• Mediaquery
Seccionesname='viewport‘,content='width=device-width/>Meta viewport
SeccionesMeta viewportCon esto limitamosel lienzo web altamaño deldispositivo.
Meta viewport
Seccioneshtml,body {height: 100%; = 480pxwidth: 100%; = 320px}Meta viewport
SeccionesMediaQueriesReglas CSS, solopara dispositivosespecificos
SeccionesMediaQueriesReglas CSS, solopara dispositivosespecíficos
SeccionesMediaQueriesExisten variosmediaqueries, peroaquí solo vamos ausar el de max-width
SeccionesMediaQueriesDocumentaciónhttp://mzl.la/L28U6F
SeccionesMediaQueries/* Phones (portrait) */@media only screen and(max-width : 320px){/* Reglas aki */}
SeccionesMediaQueries/* Phones (landscape) */@media only screen and(max-width : 480px){/* Reglas aki */}
SeccionesMediaQueries/* Tables (portrait) */@media only screen and(max-width : 768px){/* Reglas aki */}
SeccionesMediaQueriesLos mediaqueries secolocan al final denuestras hojas deestilo (stylesheets)
SeccionesMediaQueries
SeccionesMediaQueriesSi usan Chromehttp://bit.ly/L29FfZ
SeccionesMediaQueriesCreamos unmediaquery paraatender esebreakpoint
SeccionesMediaQueries@media only screen and(max-width : 850px){nav, #name{float:none;width:100%;}}
SeccionesMediaQueries@media only screen and(max-width : 850px){nav, #name{float:none;width:100%;text-align:center;}}
SeccionesMediaQueries@media only screen and(max-width : 850px){header{ margin-bottom:50px;}nav, #name{float:none;width:100%;text-align:center;}}
SeccionesMediaQueriesEn este punto hay queprobar y corregir losbreakpoints hasta quetengamos lo quequeremos
Responsive Design
Responsive DesignImaginen un adaptivedesign, pensado paratodos los dispositivos,actuales y futuros.
Extras y Closing
El responsive design no esun silverbullet, no va serviable en todos los casosExtras y Closing
En otros casos, appnativas para móviles es lasolución, o alternativascomo jQuery MobileExtras y Closing
Extras y ClosingIE6-8 no soportanmediqueries, pero hay unpolyfill para esoRespond.jshttp://bit.ly/LQaei0
Extras y ClosingHay frameworks de CSSque se basan en fluidlayouts y responsivedesign• Twitter Bootstrap• Zurb Foundation
Extras y ClosingA Book Apart, Responsive Web Designhttp://bit.ly/LQbXUP
Gracias
orlando
uxevents
uxaustralia
y__ri9813
dieckg
ykkntn
stephaniewalter
kubosaya
niftycorp
getonbrd
blakedg95
scottboms
mojombo
andyhume
sonatard
lauravandoore
smashingmag
holman
62gerente
dougneiner
tmm1
tenderlove