Responsive Web Design con superpoderes

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