Transcript reponsive_web_design_drupalcampmx

Launch with
confidence
Diseño Responsivo
¿Qué hay de nuevo?
Twitter: @rmonteroo
#DrupalCampMX #RWD
Rob Montero - Achieve Internet
Rob is un ingeniero
senior para Achieve
Internet.
Achieve Internet es una
empresa líder en el
desarrollo avanzado de
plataformas web y móvil.
Construímos arquitectura
sólida y lo hacemos bien
para que puedas lanzar
Más de 10 años de
experiencia haciendo con confianza.
desarrollo web y 4+
Trabajamos para sitios de
haciendo Drupal
alta demanda, plataformas y
ambientes estrictos.
exclusivamente.
Agenda
• ¿Qué es el RWD? • ¿Qué hay de
nuevo?
• Ejemplos
• Themes
• ¿A mano o theme?
• <picture>
• ¿Lo necesito?
• FlexSlider
• Relevancia
• Bgstretch
• Los buzzwords
• Para llevar
• Nuevos juguetes
• Preguntas
¿Qué es
RWD?
Diseño Web Responsivo
RWD es el concepto
de desarrollar un
sitio web de una
manera que permite
que el diseño se
ajuste de acuerdo
con la resolución de
pantalla del usuario
(view port) usando
media queries.
¿Qué es el RWD?
¿Qué es el RWD?
http://mattkersley.com/responsive/?http://sony.com
¿Qué es el
RWD?
Si tienes una laptop, tablet o smart
phone puedes ver de lo que hablo
dirigiéndote a estas direcciones:
•http://achv.in/rwdrob
•http://mattkersley.com/responsive/?{website_url}
Simon Collison
Food Sense
Clean Air Commute Challenge
FlexSlider
¿Qué es el RWD?
Más ejemplos
•http://foodsense.is
•http://earthhour.fr
•http://w3conf.org
•http://mediaqueri.es
•http://fourkitchens.com
•http://achieveinternet.com
La gran pregunta
¿Construyo el tema (theme)
HTML + CSS + JS
a mano
-O-uso un tema
contrib?
The big question
¡OK!
¡Entienden el punto!
Para más ejemplos:
http://designmodo.com/
responsive-design-examples
¿Quién necesita el RWD?
Necesitas RWD si:
•Estás empezando de cero
•Quieres cortar costos
•Quieres que funcione aún si
lanzan nuevos dispositivos
¿Por qué es relevante?
• 1.8 billiones
de conexiones a internet en el mundo
hoy.
• 6.8 billiones
• 3.4 billiones
de gente en el mundo hoy.
de gente con dispositivos móviles en el
mundo hoy. ( por ahí de la ½ de la población mundial )
¿Por qué es relevante?
Se trata de la
gente, no de
los aparatos
¿Por qué es relevante?
• 1.3 billiones
de usuarios móviles en el mundo
hoy.
( Incluye WAP y “la web común” )
• 1/3
de los
usuarios de internet
acceden únicamente por via móvil
¿Por qué es relevante?
El futuro
es ahora
¿Por qué es relevante?
Es muy
convenien
te
¿Por qué es relevante?
RWD nos permite ajustar el diseño y mostrar
solo la información relevante primero:
•Horario de operación
•Teléfono
•Dirección con enlace a tu app de nav.
•Un link para ver el menú.
Lo demás puede esperar / ahorra bandwidth.
¿Por qué es relevante?
Ya en tu escritorio puedes ver todo lo no
esencial sobre este restaurante.
•Fotos exquisitas.
•Te hacen la boca agua
•Todo eso tan importante que la agencia de
mercadeo recomendó.
•El perfil del chef y sus premios, etc…
¿Por qué es relevante?
• Evita el keyhole browsing.
• No deberías necesitar una lupa
para navegar deste tu teléfono
Hola Media Queries y CSS3
In its essence a media
query consists of a media
type and an expression to
check for certain
conditions of a particular
media feature. The most
commonly used media
feature is width.
CSS3 & Media Queries
La ausencia de soporte
para @media queries es
de hecho el primer
@media query.
CSS3 & Media Queries
En tu CSS:
@media screen and (min-width: 480px) {
.content { float: left; }
.social_icons { display: none }
// y así consecutivamente...
}
CSS3 & Media Queries
O en los encabezados de tu sitio:
<link rel="stylesheet" href="this.css"
media="(min-width: 960px)">
CSS3 & Media Queries
Al restringir las reglas de CSS al
tamaño de la pantalla donde se
despliega podemos ajustar a la
medida la presentación de la misma
únicamente para dicho tamaño.
Breakpoints más comunes
•320 x480 px:
Smartphone
•480 x 320 px:
Smartphone in
landscape orientation
•768 x 1024 px:
iPad/tablet
•1024 x 768 px: iPad in
landscape
orientation/netbook
•Anything larger:
Desktop/laptop
computer
•Anything smaller: a
feature phone
¿Cómo diseñamos para RWD?
Simple:
Usa el Mobile First Approach y
favorece el Progressive
Enhancement en lugar del
tradicional Graceful
Degradation
Mobile First Approach
Mobile First Approach
Graceful Degradation
• Se enfoca en la construcción de la página web
para los buscadores más avanzados /
capaces.
• Se espera que los navegadores más antiguos
tengan una mala experiencia, pero pasable.
• Se pueden hacer ajustes para browsers
particulares ( no son lo principal )
Progressive Enhancement
• Se enfoca en el contenido. ( no los
navegadores )
• Piensa del contenido hacia afuera. ( M&M maní )
– Cacahuate: Contenido, con (x)html rico
y semántico
– Cubierto de una rica y cremosa capa de
CSS
– JS es la coraza dura dulce
Progressive Enhancement
Progressive Enhancement consiste de los
siguientes fundamentos:
•El contenido básico y su funcionalidad debe ser accesibleen
todos los navegadores.
•El markup semántico y liviano contiene todo el contenido.
•Diagramación avanzada  CSS externo.
•Funcionalidad avanzada  JavaScript externo.
•Repetar las preferencias de navegación del usuario final.
Progressive Enhancement
Beneficios:
•Accesibilidad: Las páginas con PE son
más accesibles por su naturaleza.
•SEO: Ya que el contenido básico
siempre está accesible.
•Desempeño: Responsive = Rápido
Juguetes nuevos para tu cajón
http://lab.maltewassermann.com/viewportresizer/
Juguetes nuevos para tu cajón
http://respondr.webhoard.net/
Juguetes nuevos para tu cajón
http://designmodo.com/responsive-test/
Media Query Debugger
http://johanbrook.com/design/cs
s/debugging-css-media-queries
pero y… ¿qué hay de nuevo?
RWD ha estado
alrededor por un
buen tiempo, pero no
ha pasado de moda.
pero y… ¿qué hay de nuevo?
Éstos son algunos de los
desarrollos nuevos
favoritos en Diseño Web
Responsivo
pero y… ¿qué hay de nuevo?
Zen & Zenstrap
Bootstrap
Zurb-Foundation
Boilerplate
Omega
pero y… ¿qué hay de nuevo?
La etiqueta <picture> y
por lo tanto el módulo
Picture.
Vs: adaptive-image, ais cs_adaptive_image,
responsive_images and resp_img, rwdimages
pero y… ¿qué hay de nuevo?
FlexSlider
Como views_slideshow pero
responsivo y con capacidad de
responder al taco.
Y soporta el módulo picture, además
pero y… ¿qué hay de nuevo?
•
•
•
•
fit_text
fitvids
responsive_embeds
backstretch *
Para llevar
1. HTML5 Boilerplate (http://h5bp.com)
2. Design Sketch Sheets
(http://jeremypalford.com/archjournal/responsive-web-design-sketch-sheets)
3. GoldenGridSystem.com
4. Foldy960
(http://github.com/davatron5000/Foldy960)
5. FitText (http://fittextjs.com/)
Para llevar
6. 320 and up
(http://stuffandnonsense.co.uk/projects/32
0andup)
7. Gridless
(http://thatcoolguy.github.com/gridlessboilerplate)
8. Skeleton (http://www.getskeleton.com/)
9. ResizeMyBrowser.com
10.Responsive Design Testing
(http://mattkersley.com/responsive)
Tarea
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_qu
eries
• https://github.com/fourkitchens/train-rwd
(via @FourKitchens’ @rupl)
• http://www.leveltendesign.com/blog/markcarver/responsive-drupal-theming-done-rightway-least-now-anyway
Créditos
•Mi primera clase de RWD
fue en un taller impartido por
Four Kitchens
•Revisen sus programas de
entrenamiento.
•http://fourkitchens.com
¿Preguntas o Comentarios?
Rob Montero
• dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: [email protected]
¡Los esperamos!
launch with confidence
¡GRACIAS!
Demo Time!
We will be demoing a couple of examples,
one will be plain HTML5 + CSS using h5bp
and the other will be similar but using
Drupal.
If you want to play with this at home, feel
free to download the resources at:
https://github.com/fourkitchens/train-rwd