RWD con MQ

Santiago Porras Rodríguez
UX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong

Responsive web design con
superpoderes

Conceptos básicos
• Media Queries
• Diseño flexible
• Contenido multimedia flexibles
Santiago J. Porras Rodríguez
UX Developer
Twitter: @saintwukong Blog: http://geeks.ms/blogs/santypr

UX Developer
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/

UX Developer
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" />

UX Developer
Media queries
Mediante importación desde otra hoja de estilos
@import url(style600min.css) screen and (min-width: 600px);

UX Developer
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

Bootstrap - http://getbootstrap.com/
UX Developer

Foundation - http://foundation.zurb.com/learn/features.html
UX Developer

Beneficios e inconvenientes
Beneficios
• Permite maquetar sin
tener conocimientos de
maquetación.
• Una vez se aprende se
crean sitios responsive
de forma rápida.
UX Developer
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
17/10/2014 11

¿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.
UX Developer

¿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.
UX Developer

SASS - http://sass-lang.com/
UX Developer

UX Developer
SASS
• Importar ficheros
• Nesting
• Variables
• Mixins
• Extensiones

UX Developer
SASS
• Mixins complejos
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}

UX Developer
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

UX Developer
Media queries
• Media queries
• http://mediaqueri.es/
• http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

UX Developer
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-menu/
• http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down-
menu-for-a-responsive-website-in-jquery

UX Developer
Frameworks CSS
• FOUNDATION
• http://foundation.zurb.com/learn/features.html
• http://sudheerdev.github.io/Foundation5CheatSheet/
• BOOTSTRAP
• http://getbootstrap.com/

Gracias por su atención
Santiago Porras Rodríguez
UX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong

RWD con MQ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to RWD con MQ

Similar to RWD con MQ (20)

More from Santiago Porras Rodríguez

More from Santiago Porras Rodríguez (12)

Recently uploaded

Recently uploaded (20)

RWD con MQ