responsive web design con superpoderes
DESCRIPTION
Introducción al concepto de Responsive Web Design descubriendo los superpoderes que podemos añadirle con SASSTRANSCRIPT
Santiago Porras RodríguezUX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong
Responsive web design con superpoderes
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Conceptos básicos
• Media Queries• Diseño flexible• Contenido multimedia flexibles
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media Queries
Desde CSS 2.1 se ha usado para pantalla e impresión
Sirven para definir diferentes formas de visualizar la información en pantalla dependiendo de las características correspondientes a los medios donde se esté mostrando.
Información: • http://msdn.microsoft.com/en-us/magazine/hh653584.aspx• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Ejemplos • http://mediaqueri.es/
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Agregando multiples hojas de estilo
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" /><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Mediante importación desde otra hoja de estilos
@import url(style600min.css) screen and (min-width: 600px);
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
Directamente en hoja de estilos#nav { float: right; } #nav ul { list-style: none; } @media screen and (min-width: 400px) and (orientation: portrait) { #nav li { float: right; margin: 0 0 0 .5em; border:1px solid #000000; } }
Frameworks CSS Responsive web design
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Bootstrap - http://getbootstrap.com/
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Foundation - http://foundation.zurb.com/learn/features.html
17/10/2014 11Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Beneficios e inconvenientes
Beneficios
• Permite maquetar sin tener conocimientos de maquetación.• Una vez se aprende se
crean sitios responsive de forma rápida.
Inconvenientes• Limitación a la forma de maquetar del framework• Para personalizar hay que sobreescribir las reglas del
framework que a su vez ya están sobreescribiendo otras reglas.
• Hay que personalizar para no caer en que nuestros sitios sean “iguales” que el resto con lo que habrá que trabajar en implantar el framework y en personalizarlo (doble trabajo)
• Aportan más de lo que se necesita y esto se traduce en mayor carga, más aún si incluyen scripts como apoyo.
• Ligado a un producto de terceros que podría evolucionar (al igual que el ámbito web) y del que desconocemos la compatibilidad de las nuevas versions (Incertidumbre)
• En parte, perdemos el control de nuestro propia maquetación
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
¿Cuándo usar un framework CSS?
• Si eres Novato en la maquetación web o un desarrollador cuyo objetivo no es aprender a maquetar, un framework te puede ser de gran ayuda porque te permitirá hacer cosas decentes.• Si un Proyecto no require diseño y no preocupa que tenga el mismo
look&feel que multitude de sitios.
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
¿Cuándo no usar un framework CSS?• Si el sitio web requiere un diseño atractivo y diferenciador. En este
caso la maquetación debería ir acorde al trabajo de diseño gráfico.• Si aunque el diseño no sea especialmente diferenciador, sí que
require de una alta personalización de los elementos, la maquetación debería huir de estadarizaciones del framework.• Si eres frontend developer o diseñador con conocimientos de
maquetación, se te presuponen ciertas habilidades de maquetación que te permiten maquetar bien, de forma más eficiente y rápida, con tus propios criterios, lo que no incluye el uso estos frameworks que te ponen límites y te hacen perder en gran medida el control de tu propia maquetación.
Demohttp://foodsense.is/
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS - http://sass-lang.com/
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS
• Importar ficheros• Nesting• Variables• Mixins• Extensiones
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
SASS
• Mixins complejos
@mixin media($queryString){ @media #{$queryString} { @content; }}
.container { width: 900px; @include media("(max-width: 767px)"){ width: 100%; }}
Demo
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
General
• A book apart http://www.abookapart.com/products/responsive-web-design • MSDN http://msdn.microsoft.com/en-us/magazine/hh653584.aspx • Mozilla Developer Network https://
developer.mozilla.org/en-US/docs/Web/Guide/CSS
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Media queries
• Media queries • http://mediaqueri.es/• http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Tutorials
• http://www.creativebloq.com/netmag/16-really-useful-responsive-design-tutorials-71410085• http://designsparkle.com/responsive-web-design-tutorials/• http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-m
enu/• http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down
-menu-for-a-responsive-website-in-jquery
Santiago J. Porras RodríguezUX Developer Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr
Frameworks CSS
• FOUNDATION• http://foundation.zurb.com/learn/features.html• http://sudheerdev.github.io/Foundation5CheatSheet/
• BOOTSTRAP• http://getbootstrap.com/
Ruegos y Preguntas
UX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong
Santiago Porras Rodríguez
Gracias por su atención