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.
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.
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.
‣ 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.
‣ 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).
‣ 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
‣ 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.
‣ 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
‣ 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.
‣ 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.
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
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
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
pablolobos
usagimaru
thebogheart
tak073
one0
mixi_design
shuzo
majimasachi
baasie
kiyoshifuwa
cpineda57
hjmkth
brettharned
lynnandtonic
addyosmani
gr2m
honnibal
bcantrill
sugarenia
wjessup
reverentgeek
3n
yeseniaperezcruz
sferik
![Gracias! @pablo_lobos [email protected]](https://files.speakerdeck.com/presentations/e8345830257f01315c936e1ca35fb859/slide_35.jpg){kind=link}