responsive design

:: Diseño Web Liquido - Actualidad / Herramientas ::






por Felipe Vega

PATINES RESPONSIVE?


CAT RESPONSIVE








"Las especies que sobreviven no son las más fuertes, ni las más rápidas, ni las más inteligentes; sino aquellas que se adaptan mejor al cambio."




- Charles Darwin

TENDENCIAS


ALGO MAS...






Para más información pueden visitar

HTML

CSS




Dispositivos









COMO SER RESPONSIVE

2 COMPONENTES



1.  %  






/* NO mas STATIC WIDTH 

EL TAMAÑO DEBE SER DINÁMICO */




%

TABLAS FLEXIBLES

[FLUID grids, responsive grids, liquid grids]


FRAMEWORKS





2.    media queries


definición simple:

Lógica en CSS?

Sintáxis: 


USO


IMPORTANTE




CONSIDERACIONES


UA 

vs.

MODERNIZR

and

standard breakpoint sizes

UA

user agent


STANDARD BREAKPOINT SIZES



MODERNIZR.JS

small JavaScript library that detects the availability of native implementations for next-generation web technologies

Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don’t let them through otherwise.

INSPIRACIÓN


HERRAMIENTAS


DREAMWEAVER


ADOBE EDGE INSPECT

PARA VER COMO SE DEBERIA AJUSTAR EL CONTENIDO en tiempo real



IMAGENES / OPTIMIZACIÓN DE CARGA


Y COMO PROBAMOS?




una mas


PRUEBAS MÁS AVANZADAS


http://www.browserstack.com/ 

problemas con ie?

[Internet dEstroyer]

TIEMPO DE PROBAR EN 

IE



Los media queries de CSS3 no funcionan correctamente en IE... 

 Nada que no pueda solucionarse con super Javascript - https://github.com/scottjehl/Respond





MUCHAS GRACIAS!





GIFS TAKEN FROM http://thecodinglove.com

responsive design

By Felipe Vega

responsive design

  • 1,025