Modelele Css sunt fixe, din cauciuc, elastice

Lățimea fixă ​​a modelelor

Pro-urile acestui aspect

Cons

  • Declarată „optimul pentru lizibilitate maximă“ lățime nu poate îndeplini în mod adecvat rolul lor în cazul în care textul de pe site-ul a fost crescut în mod semnificativ, cu o neschimbată înălțimea rândului de text la dimensiunea (în acest caz, se dovedește că textul „dilueaza“, și este foarte greu de perceput) . Cu toate acestea, trebuie remarcat faptul că, dacă există un design bun, această problemă apare numai atunci când textul este foarte puternic mărit;
  • Utilizatorii cu monitoare mici (640 × 480 pixeli, de asemenea, nu trebuie să uităm despre dispozitivele mobile) vor avea o bară de derulare orizontală pe site cu o lățime de 760 de pixeli. Deși aceasta este o problemă foarte rară;
  • Un site care are o lățime de 760 pixeli poate părea destul de urât (prea îngust) pe monitoarele cu o rezoluție mare a ecranului;
  • Lățimea mici a recipientului primar poate limita un număr rezonabil de coloane în structura, dar poate fi, de asemenea, un avantaj, deoarece face crearea site-ului, luând în considerare un astfel de cadru rigid (de exemplu, mai ales o mulțime de bibelouri și tehnici de proiectare nu pot fi aplicate, deoarece acestea sunt restricțiile impuse ).

Sfaturi pentru un layout cu lățime fixă

Exemplu de bloc cu lățime fixă

Aspectul cauciucului

Un aspect de cauciuc este obținut dacă containerul principal nu specifică o lățime la toate (implicit va fi de 100%) sau setarea lățimii în procente. Cu alte cuvinte, fără a lua în considerare frontierele și materialele de umplutură, un sit care are o lățime de 100% va ocupa întreaga parte vizibilă a ecranului fără a crea o bară de derulare orizontală.







Pro-urile modelului de cauciuc

  • Cu un aspect competent, aspectul cauciucului vă permite să obțineți o versatilitate deosebită pe ecran, indiferent de lățimea ferestrei clientului utilizatorului. În practică, acest lucru este destul de rar, dar, teoretic, dacă totul se face corect, atunci acest lucru este posibil;
  • Aspectul de cauciuc coincide cu aspectul folosit de browserul implicit, ceea ce îl consideră "corect din punct de vedere ideologic". Dar este posibil să se ia în considerare dorința dezvoltatorului de a face un site "corect din punct de vedere ideologic" un plus față de confortul utilizării acestuia? Cred că puteți;
  • Aspectul de cauciuc al site-ului vă permite să utilizați rezoluția ecranului disponibil la maxim. Cea mai mare parte a conținutului paginii va fi "deasupra liniei de pliere" (adică, vizibilă fără derularea suplimentară a paginii). Totuși ...

Luați în considerare dezavantajele acestui aspect

  • Prea multe pagini de text ușor de citit și dorința de a umple întregul spațiu disponibil pot fi în detrimentul confortului utilizatorilor. Prea mult text poate "împinge" utilizatorul și poate face site-ul congestionat sau haotic. Există o zicală: „Spațiul gol vinde» ( «spațiu alb vinde», nu știu echivalentul rusesc al expresiei, se înțelege că spațiul gol este necesar să se mărească concentrarea asupra conținutului), și este adevărat chiar și pentru site-uri web;
  • Dacă constrângerea aspectul lățime de a utiliza CSS-max lățime de proprietate (care nu este acceptat de Internet Explorer (IE) versiunea 6 și versiunile anterioare, pe scurt, general (slab) sprijinit) și doar să fie un aspect guru poate fi un rezultat al căutării pentru „ideologia dreapta“ get în cel mai bun caz, un site care va fi greu de folosit. Imaginați-vă că trebuie să citiți un șir mai mare de 1000 de pixeli și sunteți conștienți de această problemă.

Câteva sfaturi pentru utilizarea acestui aspect







  • Folosiți aspectul cauciucului strict în acest scop. Nu vă lăsați aspirațiile să facă tot ceea ce este "corect din punct de vedere ideologic" pentru a predomina asupra bunului simț. Trebuie să existe un motiv destul de bun pentru a utiliza acest tip de aspect. Dacă tot decideți să o utilizați, asigurați-vă că aspectul de cauciuc al site-ului dvs. arată bine în majoritatea rezoluțiilor ecranului. În caz contrar, lăsați-o, jocul nu merită lumânarea;
  • Când se folosește un aspect de cauciuc care aveți o zonă cu o lățime fixă, așa că, de fapt, ai un cauciuc hibrid și aspect fix, iar lățimea minimă este determinată de lățimea blocurilor fixe sau cea mai mare a obiectelor (de exemplu, imagini). Fii atent. Dacă doriți să creați un site cu aspect de cauciuc, ar trebui să fie așa și nu numai în cuvinte;
  • Dacă ați făcut încă un hibrid de aspect cauciucat și fix (așa cum este prezentat, de exemplu, în ghidul meu CSS, asigurați-vă că acesta pare ok la o rezoluție de 800 × 600.

Și, de fapt, un exemplu

Formă elastică

Atunci când se utilizează o structură elastică, mărimea containerului principal și a altor elemente (importante) este specificată în em. Em sunt direct proporționale cu dimensiunea textului sau fontului. Prin urmare, pe măsură ce mărimea textului pe pagină crește, dimensiunile partițiilor specificate în em vor crește proporțional.

Un exemplu de aspect elastic poate fi văzut în prezentarea CSS Zen Garden (un hibrid limitat de aspect elastic și de cauciuc). Din câte știu, aceasta este singura viziune a CSS Zen Garden, care este flexibilă și accesibilă cât mai mult posibil cu un layout neautorizat (specificat inițial). Sunt mândru de acest fapt (de fapt, un exemplu foarte bun, dar în Opera mea 9.22, la o lățime mai mică de 150 de unități de pixeli „bump“ pe fiecare parte, efectul descris mai sus în structura de cauciuc de culoare roșie).

Beneficiile unui aspect elastic

  • Dacă totul se face corect, atunci acesta este un aspect foarte stabil, deoarece totul se schimbă proporțional. Ca urmare, cu orice redimensionare, totul este încă bun;
  • Formatul elastic este un lucru destul de complicat, este incredibil de rece și de fiecare dată când este o provocare pentru tine în primul rând. Prima mea cunoștință cu el a fost pe site-ul lui Tommy Olsson (care, aparent, este un bun exemplu de a face site-uri elastice). El ma impresionat, ma facut sa zambesc si sa ma gandesc profund despre cum stiu putin (impresionat de dracu din mine). Cel mai bun exemplu ar fi să măriți textul pe site-uri cu un aspect elastic: trebuie doar să țineți apăsată tasta Ctrl și să rotiți rotița mouse-ului ... Vă pot auzi deja să spuneți "wow"

Contra de un aspect elastic

  • În ciuda atractivității și eleganței sale, nu știu cu adevărat aplicarea ei bună, mă face să mă întreb de ce este nevoie?
  • Dacă nu limitați mărimea containerului extern, atunci acest aspect poate fi o adevărată calamitate pentru utilizator: se va întinde mai larg, și mai larg și mai larg - fără nici un avantaj vizibil.

Câteva sfaturi despre aspectul elastic

  • Dacă aveți de gând să facă cu ajutorul unui aspect elastic, asigurați-vă că funcționează pe monitoare mici. Altfel, de ce este chiar necesar?
  • Limitați dimensiunea blocului elastic, determinând dimensiunile containerului exterior (folosind o lățime de cauciuc sau fixă, adică, creând un aspect hibrid). De exemplu, #wrapper . Adepții „ideologia drept“ poate argumenta că nu ar fi adevărat layout flexibil că el este astfel limitată sau hibridizat, dar în schimb întreb: Care este diferența? Da, "ideologia corectă" este minunată și frumoasă, dar nu și atunci când vine vorba de ușurința în utilizare (cuvinte de aur!);
  • Amintiți-vă că IE 6 și mai puțin nu suportă proprietatea max-lățime, asigurați-vă că atunci când setați cel mai mare text în IE, nu vedeți o bară orizontală de defilare la 1024 × 768. În orice caz, puteți vedea soluția mea pentru CSS Zen Garden. Următorul pas este de a face planul deja pentru rezoluția de 800 × 600 cu aceeași condiție. De exemplu, puteți vedea aspectul meu flexibil al site-ului de găzduire (un hibrid limitat de aspect cauciucat și elastic). Am de gând să-l întorc în termen de un an, dar acum exemplul este destul de lucru.

Exemplu de aspect elastic

În concluzie

După cum puteți vedea, fiecare dintre tipurile de machete descrise are pluses și minusuri (poate că știți și alții?). Și nu pot spune cu certitudine care sunt cele mai bune. Este doar un nivel de reprezentare a site-ului, așa cum am menționat la început, prin urmare, cu o mare responsabilitate și mai puțină încredere pot spune că oricare dintre aceste aspecte pot fi aplicate pentru aspectul de site-uri web accesibile, user-friendly. Astfel, nu ne propunem să te ridici nici suporteri traseu de „corectitudine ideologică“ a face ceva doar pentru că este „corect“, în detrimentul accesibilității și utilizabilității. Nu încerc să le critice, pentru că ei ne fac să reflectăm asupra fiecare pas și sunt o sursă de inspirație, dar dacă urmați pașii lor, se face cu prudență. Să aveți un scop și va exista un plan. "Doar pentru că" nu este un motiv suficient - așa îi spun copiilor mei.







Trimiteți-le prietenilor: