$30 off During Our Annual Pro Sale. View details »

Responsive Web Design para todos

Pablo Lobos
November 02, 2013

Responsive Web Design para todos

Más que una tendencia o una moda, Responsive Web Design es el camino a seguir para hacer los contenidos accesibles para todos los usuarios. Fundamentos, metodologías y técnicas básicas y avanzadas para estar alineados con el futuro de la Web.

Pablo Lobos

November 02, 2013
Tweet

More Decks by Pablo Lobos

Other Decks in Design

Transcript

  1. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design Metodologías y técnicas

    para todos
  2. @pablo_lobos StartechConf, Oct 2013 Why? Hoekom? Hoekom? ॄ㜮䏆ʁ ॄ㜮䏆ʁ 8BBSPN

    8BBSPN )WPSGPS г ѓ ќ щ ё ј ќ щ ё ј )WPSGPS 1PVSRVPJ 1FSDIÉ 1FSDIÉ Por qué? Why?
  3. @pablo_lobos StartechConf, Oct 2013 Internet es más que solo computadores

    Internet is more than computers
  4. @pablo_lobos StartechConf, Oct 2013 El acceso a internet desde dispositivos

    móviles crece año a año de manera exponencial. Every year internet access from mobile devices is growing exponentially
  5. @pablo_lobos StartechConf, Oct 2013 2015 Móviles Computadores Para el 2015

    el acceso a internet desde móviles será mayor que el de computadores de escritorio. In 2015, internet access from mobile devices will be higher than access desktop computers.
  6. @pablo_lobos StartechConf, Oct 2013 Porcentaje de acceso desde móviles en

    EEUU Percentage of access from mobile devices in US 60% 78% 40% Fuente http://www.lukew.com/ on Smashing Conference
  7. @pablo_lobos StartechConf, Oct 2013 Samsung LG HTC Motorola Apple

  8. @pablo_lobos StartechConf, Oct 2013 ANDROID IOS Windows Phone Blackberry

  9. @pablo_lobos StartechConf, Oct 2013 Cada día hay más activaciones de

    teléfonos con Android que nacimientos. Every day there are more Android phone activations than births.
  10. @pablo_lobos StartechConf, Oct 2013 No podemos darnos el lujo de

    limitar el acceso a nuestros contenidos. We can not afford to limit access to our contents.
  11. @pablo_lobos StartechConf, Oct 2013 Acoge la diversidad! Embrace diversity!

  12. @pablo_lobos StartechConf, Oct 2013 El contenido debe fluir entre los

    distintos dispositivos Content must flow between devices
  13. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design Ubicuidad Ubiquity Flexibilidad

    Flexibility Futuro Future
  14. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design Una mezcla de

    técnicas que permiten que un sitio se adapte al tamaño y al contexto de uso de múltiples dispositivos. A mix of techniques that allow a site to adapt to size and context of use of multiple devices.
  15. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Unidades flexibles ‣ Grillas fluidas ‣ Media Queries Flexible units / Fluid grids / Media Queries
  16. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Unidades flexibles Son esenciales para que los contenidos se adapten a distintas medidas de pantalla. No mas px, debemos usar %, em y rem para definir las medidas de los diferentes elementos. Flexible units: No more px, use %, em and rem to define element parameters.
  17. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Unidades flexibles body{ font-size: 16px; } h1{ font-size: 3em; } Este es un párrafo Título principal
  18. @pablo_lobos StartechConf, Oct 2013 Responsesive Web Design / Elementos básicos

    ‣ Unidades flexibles Elementos mediales flexibles Flexible media
  19. @pablo_lobos StartechConf, Oct 2013 Responsesive Web Design / Elementos básicos

    ‣ Unidades flexibles Componentes escalables Scalable components Botón Botón Botón Botón
  20. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Grillas fluidas Usando % para definir las medidas de la diagramación básica de nuestro sitio permitimos que se adapte a la medida del browser. Using % to define our basic layout, We allow our site to adapt to the width of the browser (device).
  21. @pablo_lobos StartechConf, Oct 2013 75% 100% 25% Responsive Web Design

    / Elementos básicos ‣ Grillas fluidas 75% 100% 25% col1
  22. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Grillas fluidas Es tan simple como eso, pero también existen muchos framework que hacen mas fácil la creación de grillas. http://www.fitgrd.com/ http://www.getskeleton.com/ http://getbootstrap.com/ http://foundation.zurb.com/ Is simple as that, but there are many frameworks with pre made grids to make even easier
  23. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Media Queries Son propiedades CSS que permiten definir css especifico para ciertos elementos dependiendo por ejemplo del ancho del browser. CSS properties that are used to define specific css for certain elements depending for example in the browser´s width.
  24. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Media Queries Breakpoints: Es un punto específico donde se genera un cambio en el css según una propiedad del dispositivo. Breakpoints: are specific points where a css change is triggered by a property of the device. breakpoint
  25. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Media Queries
  26. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Media Queries Como definir los breakpoints? Un error comun es usar las medidas de los dispositivos mas usados. 320px = Iphone 768px = Ipad How to define breakpoints? A common mistake is to use the width of most used devices.
  27. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Elementos básicos

    ‣ Media Queries Los dispositivos van mutando constantemente y cada vez salen nuevas especificaciones. Debemos diseñar para que los usuarios vean bien nuestros contenidos en cualquier dispositivo, no solo en algunos. Cuando un elemento de contenido se ve mal, debemos definir un breakpoint. Devices are constantly evolving. We must design so users can see the contents in any device. So when a element starts to look bad, then you define a breakpoint.
  28. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design Más allá de

    lo básico Beyond basics
  29. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Media Queries, not everything is width Los breakpoints pueden ser determinados dependiendo de muchos criterios, no solo el width. Se puede detectar: color, aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, pixel- density Breakpoints can be based on various aspects like: color, aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, pixel-density
  30. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Media Queries, not everything is width
  31. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Feature detection No todos los dispositivos ni navegadores tienen las mismas capacidades. Gracias a Modernizr podemos detectar si alguna capacidad esta presente o no en el dispositivo actual y proporcionar un css especial dependiendo de esa condición. Modernizr
  32. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Carga condicional de recursos A los usuarios de dispositivos móviles o limitados hacemos que carguen menos CSS y JS o CSS y JS optimizado para ellos. Modernizr
  33. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Imágenes optimizadas Imágenes más livianas y pequeñas para móviles, imágenes más grandes para pantallas grandes. Response.js
  34. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Reestructuración de contenidos 1 2 3 1 2 3 1 2 3
  35. @pablo_lobos StartechConf, Oct 2013 Responsive Web Design / Beyond basics

    Reestructuración de contenidos Intention.js 1 2 3 1 2 3 1 2 3
  36. Gracias! @pablo_lobos hola@pablolobos.com