Maquetació líquida i elàstica
Descobreixo a 5.1.1. una interessant combinació d'estils per estructurar una web fent que el resultat tingui alhora característiques d'una estructura líquida (relativa al tamany de la lletra) i d'una elàstica (relativa al tamany de la finestra).
El que s'aconsegueix és que l'amplada de la pàgina, tot i tenir un tamany relatiu al de la lletra, no sobrepassi l'amplada del propi navegador.
El truc consisteix simplement en crear un disseny líquid i aplicar-li un max-width del 100% per tal que no sobrepassi l'amplada del propi navegador. També se li poc aplicar un min-width per evitar que s'intenti encabir un text massa gran en una finestra massa petita.
Ah, per variar no funciona a l'IE on simplement queda com si només s'hagués aplicat un disseny líquid.
Comment this post
Fields marked with * are required.
8 comments
Federico
01/30/2006 | #
Mis disculpas por el castellano. :)
Esta ténica sí es posible hacerla funcionar en IE, pero usando la extensión propietaria
expressionpara calcular en todo momento el ancho del contenedor según las condiciones de la ventana:max-widthymin-widthen Internet Explorer.Francesc Rosàs
01/30/2006 | #
Tens raó, de fet vaig llegir el teu article però no li vaig fer massa cas ;-)
Simplement em refería al fet que els
max-*imin-*no estan soportats a l'IE y que per tant no funcionarà tal qual.Ah, no problemo per parlar castellà ;-)
Mans
02/03/2006 | #
Líquida i elàstica...la podriem anomenar maquetació condó!
En realitat no entenc què té d'especial aquest tipus de maquetació Rooz, o estic en plan lerdo o és una cosa que s'ha fet tota la vida utilitzant widths i margins.
(O potser vas per davant i estàs dissenyant Web 3.0...)
Salut, i a veure si et veig el pèl algun dia!!
P.D. La teva fotu és molt xunga
Francesc Rosàs
02/03/2006 | #
En sí no té res d'especial i de tant simple que és segurament no es mereix ni un nom però és una combinació de tècniques que no havia vist aplicada enlloc i que trobo que funciona força bé.
Si vols veure'n les diferències pots provar aquestes webs a diferents tamanys de finestra i lletra: Minid.net (elàstica, no queda bé en resolucions altes i, encara que no és el cas, tampoc acostuma a quedar bé en finestres petites), a.css (líquida, t'obliga a fer scroll si tens la lletra grossa o la finestra petita), Microsiervos (fixa, se sol desquadrar a tamanys grans de lletra). Pots provar la combinació de la que es parla al post a la web de 5.1.1. o a aquesta mateixa.
Entenc que els casos que plantejo són extrems i que la majoria d'usuaris no en notarà els "defectes" a menys que vagin amb puterio (es a dir, com estic fent jo ara).
Tas
02/07/2006 | #
Haig d'admetre que a mi també m'ha costat entendre el que volies dir. No es un tema complicat, tot lo contrari, es bastant senzill. Potser es aixo i el nom que se li posa a aquest diseny el que crec que ens ha confos a primera vista al Mans i a mi.
Es interessant saber quines possibilitat exiteixen per "moldejar" el text dintre d'una web, sobretot per dispositius que siguin reduïts, tipo telèfon mòvil o palm. Es en aquestes esferes on crec que pot ser útil.
Jo intento crear sempre les capes amb un tamany fix, no em vull complicar la vida. El model que faig servir es el de sempre. Capa principal amb "margin 0 auto" si va centrada i les capes que hi van dintre amb tamany fix.
Crec que es important establir un màxim de caràcters per linia. Ara no recordo on ho vaig veure (crec que a Minid), pero hi ha un estudi que no se com es diu i esta fet per no se qui (m'encanta ser tan precís) que parla del caràcters màxims que ha de tenir un text per linia, per tal de no cansar la vista del lector. Evidentment també hi tenen a veure el tamany, el tipus i el color de la font.
Cada vegada es troben més webs sensibles amb aixo. Ja no trobes tantes págines amb linies de text que van de punta a punta del navegador... com la majoria de pàgines de debian o de documentació linux en general.
Crec que es un tema super interessant.
Ei Ros a veure si fem un cafè aviat :)
Mans
02/07/2006 | #
quan feu el cafè aviseu, i de pas, muntem una empresa en un plis.
Francesc Rosàs
02/07/2006 | #
El que he vist sovint recomanat és una amplada de línia entre els 30 i els 35 ems (per facilitar a l'ull el salt de línia), un text ben contrastat amb el fons (però sense arribar a ser negre sobre blanc per no cansar la vista) i una font amb serifa (que es veu que són més fàcils de llegir).
Després hi ha el "marginat", l'espaiat entre línies, els ríos de blancos, ... en fi, que al final m'acostumo a passar tot això pel forro i ho faig com em sembla que queda millor però tot i així va bé saber els motius d'aquestes recomanacions.
Una eina web que va força bé per aquestes coses és Typetester.
Ah, i aviam què dius de la documentació "linuxera", que del que corre per Internet és potser lo més accessible i quan el que busques és contingut i no pijeries gràfiques és lo millor que hi ha. Però sí, és lletja a matar ;-)
Tas
02/09/2006 | #
Molt útil la web de Typetester... merci tiu :)
Ei a veure si es veritat, fem un cafe i de pas una empresa...Quan comencem? xD