¿estas usando maquetación fluida?

[cristian_cena]

Estube evaluando sobre las maneras de encarar un diseño multi-resolución, creo que en esta época donde vivimos rodeados de casi incontables resoluciones de pantalla y donde el front-end tiene tanta importancia es sumamente interesante pensar en encarar con maquetación fluida a nuestros proyectos.

Así es que mediante un comentario de un colega y un tweet de un usuario de este foro dí con dos proyectos interesantes: cssgrid y foundation

Al mismo tiempo he observado que se está utilizando mucho masonery, un plugin escrito en jquery.

Me gustaría saber su experiencia con la maquetación fluida, concreatamente que estan usando o que usarían, que le ha dado buenos resultados y que otra cosa le fué una mala experiencia.

Desde ya muy agradecido de sus opiniones.

[Carlangueitor]

Yo la uso muy de vez en cuando. Realmente no creo que haya necesidad de hacerlo, si pone un ancho de 960px no tendrás problemas con monitores de 1024px de ancho para arriba. Muchos dicen que es útil para los dispositivos móviles, pero yo soy de la idea de que no se debe solo arreglar el ancho para que una página sea visualizada en un dispositivo móvil, deben ser páginas muy diferentes.

Saludos

[alexk]

yo solo le eh visto utilidad... en el admin de algún proyecto o CMS... por que contiene muchas tablas de información y formularios... y al no tener un ancho limitado se ve bien ordenadita la info y demás... hasta ahora personalmente no eh tenido necesidad de aplicarlo a otro tipo de proyecto... pero bueno ya veremos

[cristian_cena]

Hola muchachos, antes que nada muchas gracias por las respuestas:

Iniciado por Carlangueitor

si pone un ancho de 960px no tendrás problemas con monitores de 1024px de ancho para arriba.

Justamente carlangueitor, quiero empezar a pensar para abajo, en encarar proyectos "cross-resolution". En donde utilizemos hojas de estilos propias para 2 o 3 resoluciones, ajustándo el diseño para móviles, logrando una visualización decente en tablets y monitores menores a 1024x768, y en posteriores aprovechar del diseño líquido trabajando con una maqueta centrada.

Lo de la grilla fluida o flexible me parece interesante como "transición" entre estas hojas de estilo.

Hace poco empezé a usar esto. Si bien no uso exacta la implementación que hacen en esa pagina, tomé de ahí las bases y utilizo javascript (jquery) para detectar la resolución y cargar una hoja de estilos segun la resolución por defecto (inmediatamente luego de cargarse el documento) y según la resolución luego de un evento "rezise" de la ventana del navegador.

Esto de la grilla flexible supongo vendría a complementar muy bien. Aunque es algo que de momento estoy investigando y que me gustaría usar en un futuro cercano.
De alguna manera me propuse a través de este tema recolectar sus experiencias, ya que puede que existan soluciones mejores que aún no haya visto.
Valoro mucho sus opiniones, un abrazo.

[IsaBelM]

a mi media queries, con sus pros y contras, me parece un método muy interesante.
por abrir otra línea paralela, habéis usado wurfl??

[Carlangueitor]

Iniciado por cristian_cena

Justamente carlangueitor, quiero empezar a pensar para abajo, en encarar proyectos "cross-resolution". En donde utilizemos hojas de estilos propias para 2 o 3 resoluciones, ajustándo el diseño para móviles, logrando una visualización decente en tablets y monitores menores a 1024x768, y en posteriores aprovechar del diseño líquido trabajando con una maqueta centrada.

Vuelvo a recalcar algo de lo que comenté más arriba:

Las páginas que se visualizarán en un dispositivo móvil (lease como teléfono celular, para separar de las tabletas) no solo deben ser compatibles en resolución de pantalla, hay muchos aspectos para tener en cuenta, no solo el ancho de la pantalla, se me hace una locura querer mostrar la misma información que ves en un monitor de 15" en una pantalla de 4". Si quieren ahondamos más en ese tema.

Por otro lado, hablando de tabletas, si no me equivoco el iPad resolución de 1024x768, el Playbook tiene una de 1024x600, lo mismo la Galaxy Tab, la tableta de Motorola, la XOOM tiene resolución de 1200x800. La mayoría de las Tabletas Chinas tienen resolución de 1024x600. Con aun ancho de 960px vas de lujo.

También es cierto que es usar una maquetación líquida para móviles es excelente, pero repito que no debe ser la misma página que la que vemos en una PC de escritorio.

Saludos

[cristian_cena]

De acuerdo carlangueitor, coincido completamente en lo que dices, más nada impide técnicamente que lleves adelante cambios radicales de diseño entre una hoja de estilos y la otra.
Sobre las resoluciones de las tabletas, muy buena data, esto me aclara porque todos trabajan con solo 2 hojas de estilo. de los 750px aprox. para abajo líquido para móviles. y en posteriores 960px centrado. y entre estas dos de manera flexible.

Dentro de los sitemas de grilla tradicionales de css, como lo son 960grid o blueprint también tenemos grillas flexibles.
Si bien todo termina en una grilla flexible y un switch de hojas de estilos, me gusta ver proyectos para poder desarmarlos y analizar la forma en que están hechos.

Gracias isabel, veré wurfl y media queries. son opciones muuuy buenas asi que antes de opinar lo voy a leer y probar.

De momento detecto los navegadores y sus versiones con browser.php. Intento no incluir hojas de estilos "parche" pero no siempre lo logro y termino recurriendo a esta clase. wurfl viene a ampliarme los horizontes con esto al permitir detectar equipos, muchas gracias .

Para detectar las resoluciones uso jquery. $(window).width(); por ejemplo para detectar el ancho por defecto y el método rezise() para vigilar cuando se redimensiona la ventana y actuar en consecuencia. Hasta acá vengo bien crossbrowser con la idea de no salirme del ie7+, media queries supongo será IE9+.

Muchas gracias por sus opiniones. Un saludo.

[Carlangueitor]

Iniciado por cristian_cena

De acuerdo carlangueitor, coincido completamente en lo que dices, más nada impide técnicamente que lleves adelante cambios radicales de diseño entre una hoja de estilos y la otra.

Claro, pero insisto (a riesgo de parecer molesto) que las páginas para Dispositivos móviles no solo tienen que variar en diseño, es un mundo aparte.Desde cuestiones de Usabilidad, hasta cuestiones de Ancho de banda y memoria cache del teléfono deben ser tomadas en cuenta.

No es el tema principal de este hilo y creo que lo estoy llevando para otro lado, pero mira las páginas de twitter y facebook versión móvil, aunque las dos fácilmente pudieron ser solo modificadas mediante CSS. Pero no, son páginas diferentes, por ejemplo no vemos una sidebar (hay algunas opciones en la parte de abajo, pero no es lo mismo), algunas imágenes tampoco están.

Y volviendo al tema inicial, la página móvil de facebook, está maquetada con navegación fluida, algo totalmente aceptable.

Saludos

[IsaBelM]

yo en lugar de jquery, uso js + asp. en este caso he intentado traspolar el asp a php. como verás sólo detecta ie8 (por que mis conocimientos de php son muy limitado. y tener que usar matrices ...) pero como ejemplo ilustrativo creo que se entenderá.

con php se detecta el navegador y su versión. en caso que sea ie8 (que no soporta media queries) invoca la función. en la función se detecta el ancho de pantalla y se cambia el atributo media a all (que si es soportado por ie8-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<link href="./style.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1280px)"/>
<script type="text/javascript">
function fnc() {
if (screen.width <= 1280) {
var diana = document.getElementsByTagName('link')[0];
diana.media = 'all';
}
}
</script>
</head>
<body>

<div class="caja">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit,
</div>



<?php
$pajar = $_SERVER['HTTP_USER_AGENT'];
$aguja = 'MSIE 8.0';
$busqueda = strpos($pajar, $aguja);
if ($busqueda !== false) {
?>
<script type="text/javascript">
fnc();
</script>
<?php
}
?>
</body>
</html>

el css de caja algo sencillo

.caja {
background: yellow;
width: 500px;
height: auto;
margin: 0 auto;
}

[Tedel]

Yo uso simplemente CSS para la maquetación fluida. No es necesario complicarla con nada más.

[cristian_cena]

@carlangueitor, lejos de parecer molesto, contento porque hay debate, entonces tal vez lo mejor sea redirigir a un layout específico y optimizado. Esto partiendo de detectar la resolución o bien el equipo con wurfl.

@IsaBelM, sobre detectar browsers, yo también hice algunas pruebas, aquí con jquery browser plugin. Aquí con browser.php (me quedé con esta solo por ser server-side) aunque bueno, también hace uso del user-agent, lo bueno nada más es que escribes poco gracias por el codigo.

@Tedel, claro, todos usamos solo css, pero que haces con las resoluciones/dispositivos?

Saludos.