Aprende sobre las últimas tendencias en diseño responsivo usando Drupal. Diseña tu sitio web en minutos usando uno de los temas recomendados.

1. Launch withLaunch with
confidenceconfidence
DiseñoDiseño
ResponsivoResponsivo¿Qué hay de nuevo?¿Qué hay de nuevo?
Twitter: @rmonterooTwitter: @rmonteroo
#DrupalCampMX #RWD#DrupalCampMX #RWD

2. RobMontero- AchieveInternet
Rob is un ingeniero
senior para Achieve
Internet.
Más de 10 años de
experiencia
haciendo desarrollo
web y 4+ haciendo
Drupal
exclusivamente.
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 con
confianza.
Trabajamos para sitios de
alta demanda,
plataformas y ambientes
estrictos.

3. Agenda
• ¿Qué es el
RWD?
• Ejemplos
• ¿A mano o
theme?
• ¿Lo necesito?
• Relevancia
• Los buzzwords
• Nuevos juguetes
• ¿Qué hay de
nuevo?
• Themes
• <picture>
• FlexSlider
• Bgstretch
• Para llevar
• Preguntas

4. ¿Qué¿Qué
eses
RWD?RWD?

5. DiseñoWebResponsivo
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

6. ¿Quéesel RWD?

7. ¿Quéesel RWD?

8. http://mattkersley.com/responsive/?
http://sony.com

9. ¿Quéesel¿Quéesel
RWD?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}

10. SimonCollison

11. FoodSense

12. CleanAirCommuteChallenge

13. FlexSlider

14. ¿Quéesel RWD?
Más ejemplos
•http://foodsense.is
•http://earthhour.fr
•http://w3conf.org
•http://mediaqueri.es
•http://fourkitchens.com
•http://achieveinternet.com

15. Lagranpregunta
¿Construyo el tema (theme)
HTML + CSS + JS
a mano
- O -
-uso un tema contrib?

16. Thebigquestion

17. ¡OK!¡OK!
¡Entienden el¡Entienden el
punto!punto!
Para más ejemplos:Para más ejemplos:
http://designmodo.com/http://designmodo.com/
responsive-design-examplesresponsive-design-examples

18. ¿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

19. ¿Por qué es relevante?
•1.8 billiones de conexiones a
internet en el mundo hoy.
•6.8 billiones de gente en el mundo
hoy.
•3.4 billiones de gente con dispositivos
móviles en el mundo hoy. ( por ahí de la ½ de la población
mundial )

20. ¿Por qué es relevante?
Se trata
de la
gente, no
de los

21. ¿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

22. ¿Por qué es relevante?
El
futuro

23. ¿Por qué es relevante?
Es muy
conven
iente

24. ¿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.

25. ¿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…

26. • Evita el keyhole browsing.
• No deberías necesitar una
lupa para navegar deste tu
teléfono
¿Por qué es relevante?

27. 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.

28. CSS3 & Media Queries
La ausencia de soporte
para @media queries es
de hecho el primer
@media query.

29. CSS3 & Media Queries
En tu CSS:
@media screen and (min-width:
480px) {
.content { float: left; }
.social_icons { display: none }
// y así consecutivamente...
}

30. CSS3 & Media Queries
O en los encabezados de
tu sitio:
<link rel="stylesheet" href="this.css"
media="(min-width:
960px)">

31. CSS3&MediaQueries
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.

32. Breakpointsmáscomunes

33. ¿CómodiseñamosparaRWD?
Simple:
Usa el Mobile First Approach y
favorece el Progressive
Enhancement en lugar del
tradicional Graceful
Degradation

34. MobileFirstApproach

35. MobileFirstApproach

36. 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 )

37. ProgressiveEnhancement
• 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

38. ProgressiveEnhancement
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.

39. 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

40. Juguetes nuevos para
tu cajón
http://lab.maltewassermann.com/viewport-
resizer/

41. Juguetes nuevos para
tu cajón
http://respondr.webhoard.net/

42. Juguetes nuevos para
tu cajón
http://designmodo.com/responsive-test/

43. Media Query DebuggerMedia Query Debugger
http://johanbrook.com/design/chttp://johanbrook.com/design/c
ss/debugging-css-media-ss/debugging-css-media-
queriesqueries

44. peroy… ¿quéhaydenuevo?
RWD ha estado
alrededor por un
buen tiempo, pero no
ha pasado de moda.

45. peroy… ¿quéhaydenuevo?
Éstos son algunos de los
desarrollos nuevos
favoritos en Diseño Web
Responsivo

46. peroy… ¿quéhaydenuevo?
Zen & Zenstrap
Bootstrap
Zurb-Foundation
Boilerplate
Omega

47. peroy… ¿quéhaydenuevo?
La etiqueta <picture> y
por lo tanto el módulo
Picture.
Vs: adaptive-image, ais cs_adaptive_image,
responsive_images and resp_img, rwdimages

48. peroy… ¿quéhaydenuevo?
FlexSlider
Como views_slideshow pero
responsivo y con capacidad de
responder al taco.
Y soporta el módulo picture, además

49. peroy… ¿quéhaydenuevo?
• fit_text
• fitvids
• responsive_embeds
• backstretch *

50. Parallevar
1. HTML5 Boilerplate (http://h5bp.com)
2. Design Sketch Sheets
(http://jeremypalford.com/arch-
journal/responsive-web-design-sketch-
sheets)
3. GoldenGridSystem.com
4. Foldy960
(http://github.com/davatron5000/Foldy960)
5. FitText (http://fittextjs.com/)

51. Parallevar
6. 320 and up
(http://stuffandnonsense.co.uk/projects/3
20andup)
7. Gridless
(http://thatcoolguy.github.com/gridless-
boilerplate)
8. Skeleton (http://www.getskeleton.com/)
9. ResizeMyBrowser.com
10.Responsive Design Testing
(http://mattkersley.com/responsive)

52. Tarea
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_q
ueries
• https://github.com/fourkitchens/train-rwd
(via @FourKitchens’ @rupl)
• http://www.leveltendesign.com/blog/mark-
carver/responsive-drupal-theming-done-right-
way-least-now-anyway

53. Créditos
•Mi primera clase de RWD
fue en un taller impartido por
Four Kitchens
•Revisen sus programas de
entrenamiento.
•http://fourkitchens.com

54. Rob Montero
• dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: rob@achieve.la
¿Preguntas o Comentarios?

55. ¡Los esperamos!

56. launch withlaunch with
confidenceconfidence
¡GRACIAS!

57. 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