launch with confidence diseño responsivo ¿qué hay de nuevo? twitter: @rmonteroo #drupalcampmx...

Launch with confidenceLaunch with confidence

Diseño ResponsivoDiseño Responsivo¿Qué hay de nuevo?¿Qué hay de nuevo?

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

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.

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

¿Qué es ¿Qué es RWD?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?

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

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

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 + JSa mano

- O - -uso un tema contrib?

The big question

¡OK!¡OK!¡Entienden el punto!¡Entienden el punto!

Para más ejemplos:Para más ejemplos:

http://designmodo.com/http://designmodo.com/

responsive-design-examplesresponsive-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 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 )


Se trata de la gente, no de los aparatos


•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


El futuro

es ahora


Es muyconveniente


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.


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…

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


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


O en los encabezados de tu sitio:

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


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

¿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

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


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/viewport-resizer/

http://fittextjs.com/




http://respondr.webhoard.net/



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


Media Query Debugger Media Query Debugger

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

pero y… ¿qué hay de nuevo?

RWD ha estado alrededor por un

buen tiempo, pero no ha pasado de

moda.


Éstos son algunos de los desarrollos nuevos favoritos en Diseño Web Responsivo


Zen & ZenstrapBootstrap

Zurb-FoundationBoilerplate

Omega


La etiqueta <picture> y por lo tanto el módulo Picture.

Vs: adaptive-image, ais cs_adaptive_image, responsive_images and resp_img,

rwdimages


FlexSlider

Como views_slideshow pero responsivo y con capacidad

de responder al taco.Y soporta el módulo picture,

además


• fit_text• fitvids• responsive_embeds• backstretch *

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

Para llevar

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

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

Créditos

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

•Revisen sus programas de entrenamiento.

•http://fourkitchens.com

Rob Montero

•

dgo.to/@rmontero

• @rmonteroo

• /in/rmontero

Email: [email protected]

¿Preguntas o Comentarios?

¡Los esperamos!

launch with confidencelaunch 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

launch with confidence diseño responsivo ¿qué hay de nuevo? twitter: @rmonteroo #drupalcampmx...

Documents