diseño responsivo en drupal: ¿qué hay de nuevo?

57
Launch with Launch with confidence confidence Diseño Diseño Responsivo Responsivo ¿Qué hay de nuevo? ¿Qué hay de nuevo? Twitter: @rmonteroo Twitter: @rmonteroo #DrupalCampMX #RWD #DrupalCampMX #RWD

Upload: rob-montero

Post on 11-Jul-2015

166 views

Category:

Engineering


1 download

TRANSCRIPT

Page 1: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Launch with Launch with confidenceconfidenceDiseño Diseño ResponsivoResponsivo¿Qué hay de nuevo?¿Qué hay de nuevo?

Twitter: @rmonterooTwitter: @rmonteroo#DrupalCampMX #RWD#DrupalCampMX #RWD

Page 2: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Rob Montero - Achieve Internet

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.

Page 3: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 4: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Qué ¿Qué es es

RWD?RWD?

Page 5: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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.

Page 6: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Qué es el RWD?

Page 7: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Qué es el RWD?

Page 8: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 9: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Qué es el ¿Qué es el 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}

Page 10: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Simon Collison

Page 11: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Food Sense

Page 12: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Clean Air Commute Challenge

Page 13: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

FlexSlider

Page 14: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿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

Page 15: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

La gran pregunta

¿Construyo el tema (theme)

HTML + CSS + JSa mano

- O - -uso un tema contrib?

Page 16: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

The big question

Page 17: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¡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

Page 18: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿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

Page 19: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿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 )

Page 20: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Por qué es relevante?

Se trata de la gente, no de los aparatos

Page 21: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿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

Page 22: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Por qué es relevante?

El futuro

es ahora

Page 23: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Por qué es relevante?

Es muyconveniente

Page 24: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 25: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 26: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

• Evita el keyhole browsing.

• No deberías necesitar una lupa para navegar deste tu teléfono

¿Por qué es relevante?

Page 27: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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.

Page 28: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

CSS3 & Media Queries

La ausencia de soporte para @media queries es de hecho el primer @media query.

Page 29: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

CSS3 & Media Queries

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

Page 30: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

CSS3 & Media Queries

O en los encabezados de tu sitio:

<link rel="stylesheet" href="this.css" media="(min-width: 960px)">

Page 31: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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.

Page 32: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Breakpoints más comunes

Page 33: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¿Cómo diseñamos para RWD?

Simple:Usa el Mobile First Approach y favorece el Progressive Enhancement en lugar del tradicional Graceful Degradation

Page 34: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Mobile First Approach

Page 35: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Mobile First Approach

Page 36: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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 )

Page 37: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 38: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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.

Page 39: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 40: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Juguetes nuevos para tu cajón

http://lab.maltewassermann.com/viewport-resizer/

Page 41: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Juguetes nuevos para tu cajón

http://respondr.webhoard.net/

Page 42: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Juguetes nuevos para tu cajón

http://designmodo.com/responsive-test/

Page 43: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Media Query Debugger Media Query Debugger

http://johanbrook.com/design/chttp://johanbrook.com/design/css/debugging-css-media-ss/debugging-css-media-queriesqueries

Page 44: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

pero y… ¿qué hay de nuevo?

RWD ha estado alrededor por un

buen tiempo, pero no ha pasado de moda.

Page 45: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

pero y… ¿qué hay de nuevo?

Éstos son algunos de los desarrollos nuevos

favoritos en Diseño Web Responsivo

Page 46: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

pero y… ¿qué hay de nuevo?

Zen & ZenstrapBootstrap

Zurb-FoundationBoilerplate

Omega

Page 47: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 48: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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

Page 49: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

pero y… ¿qué hay de nuevo?

• fit_text• fitvids• responsive_embeds• backstretch *

Page 50: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Para llevar

1. HTML5 Boilerplate (http://h5bp.com)2. Design Sketch Sheets

(http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets)

3. GoldenGridSystem.com4. Foldy960

(http://github.com/davatron5000/Foldy960)5. FitText (http://fittextjs.com/)

Page 51: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Para llevar6. 320 and up

(http://stuffandnonsense.co.uk/projects/320andup)

7. Gridless (http://thatcoolguy.github.com/gridless-boilerplate)

8. Skeleton (http://www.getskeleton.com/)9. ResizeMyBrowser.com10.Responsive Design Testing

(http://mattkersley.com/responsive)

Page 52: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Tarea

• http://www.w3.org/TR/css3-mediaqueries.

• https://developer.mozilla.org/en/CSS/Media_queries

• 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

Page 53: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Créditos

•Mi primera clase de RWD fue en un taller impartido por Four Kitchens

•Revisen sus programas de entrenamiento.

•http://fourkitchens.com

Page 54: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

Rob Montero

• dgo.to/@rmontero

• @rmonteroo

• /in/rmontero

Email: [email protected]

¿Preguntas o Comentarios?

Page 55: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

¡Los esperamos!

Page 56: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

launch with launch with confidenceconfidence

¡GRACIAS!

Page 57: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

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