introducción al diseño adaptable para móvil

Presentación del webinar 18 de mayo de 2013.

Experto: Johann Paul Echavarría Zapata – Ingeniero Informático http://video.futurodigital.org/diseno_web/

http://appsmedellin.com/ http://apps.co/

Diseño adaptable (responsive design)

No es una moda, es la respuesta ACTUAL a un problema real

No hay un estándar claro aun. Puede haber uno en un futuro próximo.

Enfoques:

Bootstrap: http://twitter.github.io/bootstrap/getting-started.html#examples Nueva página: Experimental: http://www.layoutit.com/

1. Copiar buenos diseños de plantillas de productos que ya resolvieron el problema.

Jquery Mobile:

• http://jquerymobile.com/

• http://jquerymobile.com/demos/1.2.1/

Copiar buenas ideas

• http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/

• http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/

• http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Herramientas

• 1. Redimensionamiento manual de browser (simple y buena).

• 2. Visualización en dispositivos físicos.

• 3. ISH: http://bradfrostweb.com/demo/ish/

Media query

• Condiciones en css :

@media screen and (max-width:[ANCHO]px) {

/* Nuestras nuevas reglas con este ancho o menos de pantalla */

}

@media screen and (min-width:[ANCHO]px) {

/* Nuestras nuevas reglas con este ancho o más de pantalla */

}

@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) {

/* Nuestras nuevas reglas con este ancho o más de pantalla */

}

Casos típicos:

Un dispositivo móvil en vertical (como más suele usarse), sin importar su verdadera resolución, suele adoptar una resolución de dispositivo de 320px de ancho.

En horizontal esta resolución se adapta al tamaño real de pantalla, pero suele quedar entre los 400px y los 600px. Por ejemplo en un Samsung Galaxy S2 adopta 530px de ancho

En tablets esta resolución depende de la del dispositivo pero suele quedar en los modelos más vendidos por encima de los 600px, aunque puede llegar a los 1024px

Ejemplo:

@media screen and (max-width: 800px) {

}

@media screen and (max-width: 600px) {

}

@media screen and (max-width:960px) {

}

Trucos 1

• Compatibilidad con < IE9:

– Agregar Línea en etiqueta HEAD:

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

• No usar atributo style="" manejar todos los estilos desde css.

• ZOOM:

– <meta name="viewport" content="width=device-width, initial-scale=1.0" />

– <meta name="viewport" content="width=[Pixeles del mínimo ancho para visualizar bien la web]" />

• Tamaño de contenedores en porcentajes en vez de pixeles. width="50%" y no width="500px“. También en propiedades como: margin, font-size, padding.

• Los menús deben tener un tratamiento apropiado. Ver Bootstrap.

Trucos 2

IMAGEN RESPONSIVE : img { max-width: 100%; height: auto; } Max-Width en contenedores: .container { width: 800px; max-width: 90%; } Partir palabras para poder dividir ancho: .break-word { word-wrap: break-word; } http://webdesignerwall.com/demo/responsive-css-tricks/ http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.html

Pasar de menor a mayor resolución (o viceversa)

• Digamos que usted inicia con un sitio de ancho grande, 1020px. Verifique el sitio en la pantalla más grande que puede tener en sus manos y asegúrese de que se ve muy bien. Ahora modifique el tamaño de la ventana y hágala más pequeña hasta que el diseño se ponga feo. Ahí está su primer punto de inflexión. Establecer una media query para ese punto y arreglar lo que se requiera. Una vez que haya terminado modificar el tamaño de la ventana y encontrar el siguiente punto de fealdad. Repita estos pasos hasta que esté satisfecho.

• ¡Con paciencia!

Diseño adaptable aplica sólo a diseño gráfico y no a compatibilidades entre navegadores.

• Utilice referencias de CSS para emplear propiedades y reglas estándar consultando compatibilidad multibrowser.

• http://www.w3schools.com/cssref/

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference

REFERENCIAS

• http://blog.ikhuerta.com/transforma-tu-web-en-responsive-design

• http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/

• http://www.netmagazine.com/tutorials/build-basic-responsive-site-css

• http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

• http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/

• http://owltastic.com/

• http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/

¡GRACIAS!