Dudas con responsive, compatibilidad y resoluciones

[ferminako]

Buenas a to2,

Tras haber leido diversos tutoriales,y visionar algunos videos, necesito respuesta a dos preguntas:

¿Que resoluciones he de tener en cuenta en mi web? Dado que he visto quien solo toma en cuanta medidas del iphone 340 ahasta 720 y de ahi en adelante, u otras paginas que tienen en cuenta mas resoluciones y si esta en modo apaisado o no , cmo aki http://css-tricks.com/snippets/css/m...ndard-devices/ ¿No son demasiadas?

Y en segundo lugar , dado que mi responsive se hara sobre html5+css+js debo tener en cuenta la retrocompatibilidad, seria suficiente con esto?

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
 

Gracias!!!

[chichote]

Hola. primero que todo me gusta la idea de que gente no se quede dormida, experimente y sea inquieta.

Dicho lo anterior, con respecto a tu primera pregunta, no existe una verdad absoluta, depende mucho del tipo de negocio, mercado, etc, pero aun asi mas vale la pena prevenir. Personalmente trabajo desde 320px para arriba, a no ser que el cliente me exija 280px. Generalmente la escala va de 320, 480, 768, 1024, 1280, 1366, 1600, 1920.

Pero hay mas medidas intermedias. Te recomiendo descargarte Electric Mobile Studio 2012, es un emulador muy bueno, tienes para hacer test a iphone, ipad, responsive en general, puedes manipular los UserAgent desde IE6 en adelante, claro pasando por iphone, ipad, Ipod, chrome, etc.

Con respecto a la retro compatibilidad, yo utilizo tambien css3-mediaqueries.js para IE y versiones antiguas de Firefox. Si bien esta libreria trabaja desde IE5 en adelante, la verdad lo utilizo para IE7 en adelante, IE6 y 5 no existen en mis trabajos.

Te dejo un trabajo que hice hace poco http://ab.drilo.cl/ y va desde 320 a 1280.

Saludos.

[ferminako]

Gacias por tu respuesta, y que es más optimo cargar un css por cada resolucion tipo <link rel="stylesheet" media.... o un css con todas las opciones como aki...

Código CSS:

<style>
#contenedor{
background: crimson;
width:200px;
height: 200px;
}
 
@media screen and (min-width : 1024px){
    #contenedor{
      background: blue;
    }
}
</style>
 

Y las mediaqueries mejor por min, o por max wdth segun disposiivo :

Código CSS:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="dispositivoMovil.css" />
 

[chichote]

Da lo mismo si los tratas por min o por max, son condicionales que existen para poder discriminar entre dos o mas opciones, si el resultado es el que esperas, entonces está bien.

Con respecto a si cargar todo en un archivo o en varios. Por tema de carga prefiero hacerlo en un solo archivo, es mas rápido cargar un archivo que 5 archivos diferentes, pero existen momentos en que es innegable la necesidad de utilizar mas de un archivo, por ejemplo cuando estas buscando cross-browser, por ejemplo

Código HTML:

<!--[if IE 9]>
	<link rel="stylesheet" href="css/ie7-8.css" media="screen" />
<![endif]--> 

La idea es minimizar, cuantos menos archivos debas cargar mejor, lo mismo para los js.

[ferminako]

gracias chichote ;)