1 / 57

Launch with confidence

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. Más de 10 años de experiencia haciendo desarrollo web y 4+ haciendo Drupal exclusivamente.

sylvia
Télécharger la présentation

Launch with confidence

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  4. ¿Qué es RWD?

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

  6. ¿Qué es el RWD?

  7. ¿Qué es el RWD?

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

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

  10. Simon Collison

  11. Food Sense

  12. Clean Air Commute Challenge

  13. FlexSlider

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

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

  16. The big question

  17. ¡OK! ¡Entienden el punto! Para más ejemplos: http://designmodo.com/ responsive-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 aparatos

  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 futuroesahora

  23. ¿Por qué es relevante? Esmuy conveniente

  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. ¿Por qué es relevante? • Evita el keyhole browsing. • No deberías necesitar una lupa para navegar deste tu teléfono

  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 soportepara @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 & 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.

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

  33. ¿Cómo diseñamos para RWD? Simple: Usa el Mobile First Approachy favorece el Progressive Enhancementen lugar del tradicionalGraceful Degradation

  34. Mobile First Approach

  35. Mobile First Approach

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

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

  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 Debugger • http://johanbrook.com/design/css/debugging-css-media-queries

  44. pero y… ¿qué hay de nuevo? RWD ha estadoalrededorpor un buentiempo, pero no ha pasado de moda.

  45. pero y… ¿qué hay de nuevo? Éstos son algunos de los desarrollos nuevos favoritos en Diseño Web Responsivo

  46. pero y… ¿qué hay de nuevo? Zen & Zenstrap Bootstrap Zurb-Foundation Boilerplate Omega

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

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

  49. pero y… ¿qué hay de nuevo? • fit_text • fitvids • responsive_embeds • backstretch *

  50. Para llevar HTML5 Boilerplate (http://h5bp.com) Design Sketch Sheets(http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets) GoldenGridSystem.com Foldy960(http://github.com/davatron5000/Foldy960) FitText (http://fittextjs.com/)

More Related