Herramienta para comprobar diseño responsable

[paxarin]

BUenos días a todos.
Vamos a ver si me podeis sacar de una gran duda que tengo.
Como muchos sabreis menos IE todos los navegadores tienen un complemento para las resoluciones y así poder comprobar dichos diseños.
Pues bien hasta ahora basandome en ellos diseñaba los css para moviles. Pero ya estoy cansado de comprobar que luego de hacer el css no se ve igual en todos los navegadores siempre varia algo.
Comprobaba los diseños con http://quirktools.com
Alguien podria decirme o recomendarme alguna herramienta que sea fiable para esto?

[pzin]

responsive = responsivo no es responsable.

Yo algún día hablé de Browserstack.

No obstante, lo que yo suelo hacer es reducir el tamaño del navegador, con eso ya tienes de sobra. Luego puedes usar servicio que comentaba para un recorrido final, por si acaso.

[Zeromm]

la mejor sin duda es http://www.browserstack.com/

Te hablarán de muchas otras http://beta.screenqueri.es/ http://www.responsinator.com/ http://www.opera.com/es/developer/mobile-emulator http://mattkersley.com/responsive/ http://quirktools.com/screenfly/ o http://ami.responsivedesign.is/# entre muchas otras, pero todas esas no son nada fiable, ya que lo unico que hacen es meter un div de un ancho concreto y meterlo dentro, y eso es lo mismo que si tu redimensionas el navegador, y de esta forma no se emula el funcionamiento de cada dispositivo y por lo tanto no sirven para nada (o casi nada).

Browserstack usa virtualizadores que además de emular el ancho de cada dispositivo emula su SOS, lo que lo hace tremendamente eficaz y acierta en un 95% de como lo ves ahí, a como se va a ver en el dispositivo que quieres verlo. Además, tiene un sinfín de virtualizadores (Ipad 2/3.. Iphone 4/5... smartphones, explorer 6/7/8/9/10/11... firefox, chrome, opera, safari, etc etc...).

Eso si, solo tienes unos dias de prueba y después es de pago. Yo pagué el año pasado 200€ y ahora tendré que renovar la licencia, pero vamos... la voy a renovar encantado!!

[paxarin]

Iniciado por pzin

responsive = responsivo no es responsable.

Yo algún día hablé de Browserstack.

No obstante, lo que yo suelo hacer es reducir el tamaño del navegador, con eso ya tienes de sobra. Luego puedes usar servicio que comentaba para un recorrido final, por si acaso.

responsive design
No se puede uno fiar solo de eso, ya que luego la sorpresa es muy facil.

[paxarin]

Iniciado por Zeromm

la mejor sin duda es http://www.browserstack.com/

Te hablarán de muchas otras http://beta.screenqueri.es/ http://www.responsinator.com/ http://www.opera.com/es/developer/mobile-emulator http://mattkersley.com/responsive/ http://quirktools.com/screenfly/ o http://ami.responsivedesign.is/# entre muchas otras, pero todas esas no son nada fiable, ya que lo unico que hacen es meter un div de un ancho concreto y meterlo dentro, y eso es lo mismo que si tu redimensionas el navegador, y de esta forma no se emula el funcionamiento de cada dispositivo y por lo tanto no sirven para nada (o casi nada).

Browserstack usa virtualizadores que además de emular el ancho de cada dispositivo emula su SOS, lo que lo hace tremendamente eficaz y acierta en un 95% de como lo ves ahí, a como se va a ver en el dispositivo que quieres verlo. Además, tiene un sinfín de virtualizadores (Ipad 2/3.. Iphone 4/5... smartphones, explorer 6/7/8/9/10/11... firefox, chrome, opera, safari, etc etc...).

Eso si, solo tienes unos dias de prueba y después es de pago. Yo pagué el año pasado 200€ y ahora tendré que renovar la licencia, pero vamos... la voy a renovar encantado!!

Gracias por la respuesta!!
200€ vale la licencia al año?

[Zeromm]

Iniciado por paxarin

Gracias por la respuesta!!
200€ vale la licencia al año?

Si... pero ¿cuanto te costaría comprar todos los dispositivos más usados actualmente para poder testear como se ve tu web en ellos? ¿5.000€ mas o menos?

200€ para poder tener esa comprobación es muy barato

[pzin]

Realmente es más caro, ya que son $421 al año (más de 300€). Puedes ver la lista de precios en su web.

Pero como digo, y contrario a lo que dicen los demás, te vale a grandes rasgos usar aquello de reducir la ventana del navegador. Luego Chrome también trae por defecto para emular unos cincuenta dispotivos (Kindle, iPhone/iPad, Samsung, etc), además de emular pantallas táctiles y cosas así.

[Zeromm]

Iniciado por pzin

Realmente es más caro, ya que son $421 al año (más de 300€). Puedes ver la lista de precios en su web.

Pero como digo, y contrario a lo que dicen los demás, te vale a grandes rasgos usar aquello de reducir la ventana del navegador. Luego Chrome también trae por defecto para emular unos cincuenta dispotivos (Kindle, iPhone/iPad, Samsung, etc), además de emular pantallas táctiles y cosas así.

Ostras... pues yo tenía en mente que pagué 200€... no se, a lo mejor subió o simplemente es que empiezo a perder memoria, que también puede ser xDDD

Y lo de que es igual redimensionar el navegador.. bueno, ahí discrepo. Yo me cansé de redimensionar mis navegadores y que la web se viera bien en todos los navegadores más comunes, y que mis clientes me vinieran con: "oyeee, que en mi Ipad 3 no se ve bien!!"... "en mi Iphone 4 no funciona el menú"... "en mi smartphone se descoloca el header..."... y desde que he comprado esta licencia no he vuelto a tener ese problema, y les entrego a mis clientes una web que ellos en su dispositivo ya ven perfecta.

Pero bueno, esta es mi experiencia :)

[pzin]

¿Y cómo solucionabas esas pequeñas diferencias?

[Zeromm]

Iniciado por pzin

¿Y cómo solucionabas esas pequeñas diferencias?

Cuando esos problemas surgen la solución es buscar soluciones alternativas en el css que hagan lo mismo pero de otra forma, de manera que funcione bien en todas partes.

[pzin]

Iniciado por Zeromm

Cuando esos problemas surgen la solución es buscar soluciones alternativas en el css que hagan lo mismo pero de otra forma, de manera que funcione bien en todas partes.

Entonces era un problema de CSS mal hecho, por lo que habiéndolo hecho bien desde un principio valía perfectamente usar lo de disminuir el ancho del navegador.

Si era una pregunta trampa. Pero es que la mayoría de fallos de CSS en lo que se refiere a compatibilidad con navegadores surgen de CSS mal formado. No todo, pero casi todo lo que se ve por aquí y allá.
En realidad es un problema de que a veces los navegadores interpretan algo bien erróneamente y luego eso se toma como eso como que está bien hecho. Afortunamente cada vez ocurre menos.

[Zeromm]

Iniciado por pzin

Entonces era un problema de CSS mal hecho

Teniendo en cuenta que css es algo enorme y que crece dia a dia y que además hay que tener en cuenta algunos navegadores que trabajan de manera distinta el css o directamente no lo trabajan, que cada dia salen versiones más modernas de los navegadores más usados y dispositivos nuevos que pueden trabajar de manera distinta alguna propiedad css y que una web puede llegar a tener 10.000 lineas de css por lo menos... pues la verdad, conozco maquetadores que han realizado proyectos para Disney o Microsoft y que ni ellos consiguen hacer un css de 10.000 lineas perfecto sin que haya que retocar algo en algún dispositivo o navegador.

Pero si tú consigues hacer un css enorme sin ningún error... pues genial, en ese caso no compres la licencia de Browserstack... queda claro que yo no tengo tanto nivel de css como tú, entonces me compro la licencia y entrego mis proyectos a mi cliente de manera perfecta, aún teniendo que corregir algunas cosas.