cauciuc fix sau șablon flexibil, care este cel mai bine pentru tine, iteye
cauciuc fix sau un model elastic: Care este mai bine pentru tine?
Sursa: smashingmagazine.com
Problema de a web-designeri si programatori asociate cu tipul de model a fost în jur de mai mulți ani: fix de cauciuc, șablon, elastic sau hibrid? Fiecare tip are propriile avantaje și
deficiențe. Dar decizia finală depinde de gradul de utilizare. selecție greșită tip de model poate ucide toate avantajele serviciului.
Deci, de ce toată această discuție? Faptul că designul vine în jos pentru ușurința de utilizare și destul de greu să-l echilibru, astfel încât toți utilizatorii să fie confortabil în care nu în funcție de ce echipamentele pe care le folosesc atunci când vizitați site-ul.
La etapa de proiectare a unui șablon de site-ul, care va fi destinate unui public larg, proiectantul trebuie să ia în considerare toți vizitatorii, și să ia în considerare diferențele dintre ele:
- rezoluția ecranului,
- browser-ul,
- Maximizați fereastra browser-ului,
- panou suplimentar browser-ul utilizatorului,
- La fel ca sistemul de operare și platforma de utilizator.
Fără standarde specifice în proiectarea, designerii se confruntă cu problema într-un moment în care aproape totul este gata.
1. Diferențele dintre șablonul de tip fix și cauciuc / lichid
Cele mai multe dintre dezvoltatori și designeri sunt conștienți de aceste diferențe și sunt elementare pentru ei. Dar noi încă trecem peste aceste definiții.
model fix
model fix are o lățime fixă tip, iar toate componentele în interiorul acestuia au nici un procent din lățime sau mai sus, în pixeli (px).
Este important să ne amintim că un model fix rămâne fixat în lățimea sa, indiferent de tipul de browser și permisiunea de utilizator.
În captura de ecran, putem vedea un exemplu de aspect cu lățime fixă.
Blocuri cu lățime clar definită de 520, 200 și 200 de pixeli. Lățimea unității principale este egală cu 960 pixeli, care este un standard în design modern, ca utilizatorii utilizează bolshenstvo 1024 × 768 sau mai mare.
șablon de cauciuc
Atunci când se utilizează un șablon de cauciuc, inclusiv toate blocurile din interiorul principala utilizare procente Descriere lățime care permite stretching lățimea modelului în conformitate cu rezoluția ecranului utilizatorului.
Captura de ecran arată că lățimea tuturor elementelor specificate în procente. Acest lucru este folosit de unii designeri pentru a întinde lățimea modelului.
2. Fix șablon lățime
Mulți dezvoltatori prefera sa cauciuc dimensiuni fixe, deoarece ei cred că este mai ușor. Și atunci el vede proiectantul și utilizatorul vede.
Există mai multe „pro“ și „contra“ de șabloane de cauciuc și cu lățime fixă șablon
„Pentru“
„Împotriva“
- Impunerea de lățime fixă poate crea un spațiu mare gol pentru utilizatorii cu rezoluții de ecran mai mare, de rupere astfel „secțiunea de aur“, „regula treimilor“, precum și alte principii de design.
- Rezoluția ecranului mici poate afecta aspectul barei de defilare orizontală, care nu este deosebit de frumos.
- textura fără sudură, și pratterny lung necesită imagini de înaltă rezoluție.
- Într-o lățime fixă a modelelor pierd, în general, atunci când vine vorba de uzabilitate.
Exemple de modele cu lățime fixă
Următoarele cinci exemple de sugerate designeri care prefera modele cu lățime fixă.
Aceste site-uri includ mai multe module, și elemente de design. Aceasta este o bună abordare atunci când se utilizează o lățime fixă. Proiectantul, astfel, are mai mult control și plasarea de unități suplimentare nu se teme să facă o greșeală.
Apropo, în toate aceste exemple, proiectantul folosește o, latime, imagine de fundal repetitiv pentru percepția frumuseții la rezoluții înalte.
3. Argumente împotriva „izolare a zonelor“ lățime fixă Web pagină
Dacă utilizați un șablon de lățime fixă în propriile proiecte, ar trebui să știți că există modalități de a crea un design de înaltă calitate, care intrece toate „impotriva“.
statistică
După cum puteți vedea 640? 480 nu apar în statistici. Dar faptul că o astfel de autorizație, după toate există încă unii utilizatori, dar Menge unul lor la sută, iar acest lucru permite designerilor să ignore astfel de vizitatori.
Chiar și oamenii care fac folosesc această permisiune, ei o vor folosi, probabil, în principal, pe laptop-uri și nu l-ar folosi pe un PC.
Toate cele patru site-uri au schimbat template-uri pentru rezoluția cea mai comună. Chiar și cele mai mari companii din rețea, cred că vizitatorii lor de înaltă rezoluție afișează.
Pentru un alt studiu în ceea ce privește rezoluția ecranului, să ia o privire la sursele de mai jos:
Sau 760px 960 x?
Tot ce se spune aici este că cele mai multe dintre designerii folosesc o lățime de 960 sau de 760 de pixeli. Lățimea de 960 pixeli arata bine utilizatorilor cu o rezoluție de
1024 × 768 sau mai mare, și există spațiu pe laturile. Dezaynery care doresc să aibă grijă de către utilizator rezoluție 800 × 600, lățimea de model este setat la 790 pixeli. De asemenea, se arată bine la rezoluții mai mari.
centru întotdeauna modelul
Lucrul cu șabloane lățime puteți paria că centrul unității principale este situată cât mai aproape posibil de centrul ferestrei browser-ului fix. Acest lucru creează un echilibru bun și este adesea atins prin utilizarea (margin:. 0 auto, în caz contrar, utilizatorii cu rezoluție mare ecran se va vedea unitatea principală stânga lipicios.
4. cauciuc design pagina
Designerii pot elimina utilizarea unui șablon de cauciuc pentru mai multe motive, precum și avantajele acestei abordări nu sunt adesea luate în considerare. În continuare ne vom uita la argumente pro și contra ale șablonului de cauciuc.
„Pentru“
- model de cauciuc este mai atractiv pentru utilizator, deoarece se adaptează la rezoluția sa.
- Padding pe marginile ferestrei browserului și alte padding uita-te întotdeauna la fel pe toate browserele și toate rezoluțiile.
- În cazul în care șablonul este funcțional și bine concepute, care vă permite să scapi de prokrtki bandă orizontală la rezoluții mai mici.
„Împotriva“
Exemple de proiectare de cauciuc
Mai jos putem vedea două exemple într-o varietate de rezoluții de ecran. În primul exemplu, rezoluția este mai mare, respectiv, vom vedea mai mult spațiu alb. O a doua rezoluție este mai mică.
5. Dezvoltarea de cauciuc șablon
În dezvoltarea șablonului de cauciuc, este posibil să aveți mai multe probleme, unele dintre ele pot fi rezolvate prin intermediul așa-numitele trucuri.
Creați un design simplu
Mai mici de șablon grafică și aspectul provocator. cu atât mai ușor va funcționa. Acest lucru va ajuta, de asemenea permise atunci când bolshenstve.
Cu un design și un cod curat, probleme de compatibilitate sunt mai ușor rezolvate.
Smashing Magazine, de exemplu, folosește un șablon de cauciuc, care este întinsă și îngustat meniul din antetul paginii și blocul de conținut. O utilizare CSS regulă corectă în situația în care fluxul de conținut se execută în coloana laterală.
Min-Max lățime și lățime
Cei doi parametri CSS (min-lățime / max-lățime), poate fi utilizat pentru fixarea lățimii paginii la rezoluție foarte mare și mică.
În cazul unei rezoluții mici, o bară de defilare orizontală, ca și în cazul în care folosim un șablon cu lățime fixă. Prezentate mai jos sunt două exemple care demonstrează acești parametri
:
Ne pare rau, dar Internet-Explorer nu intelege min-lățime și max-lățime. Prin urmare, trebuie să folosim CSS «expresia» IE proprietate.
* Latime HTML # diviziune: expresie (document.body.clientWidth> 776. "776px" "auto".); / * Definește max-lățime pentru IE * /
max-width: 33em; / * Aceasta este pentru toate celelalte browsere normale * /
>
6. Design flexibil
Design flexibil este a treia parte a revizuirii noastre. Acest tip de design include atât elementele fixe de lățime și cauciuc.
Acesta acționează prin determinarea cantității în unități de em. Citatul de mai jos explică ceea ce em și de ce este util.
„Pixel - Neestimată acest punct de pe ecranul computerului atunci când«em»este pătratul dimensiunea fontului. Pe măsură ce dimensiunea fontului, «em» este o unitate relativă care corespunde cu setări personale dimensiunea textului utilizatorului. "
- Patrick Griffiths, A List Apart
In timp ce designul flexibil pare cea mai bună opțiune, este tot la fel are propria „pentru“ și „contra“, ca la fel ca și cele două tipuri anterioare de template-uri.
„Pentru“
- Dacă șablonul este proiectat corect, acest tip de model poate fi foarte prietenos pentru utilizator. Scopul este de a scala toate elementele, în conformitate cu preferințele utilizatorului.
- template-uri flexibile combină avantajele a două tipuri discutate mai sus.
„Împotriva“
- Chiar și luând în considerare cele de mai sus, acest tip de model poate crea în continuare o mare problemă pentru dezvoltator. Este nevoie de o excelentă înțelegere a principiilor de aspect și de testare în diferite browsere și rezoluții.
- Acest tip de model este mai dificil de a crea decât cele de mai sus, și yuzabilnost suplimentare pentru site-ul dvs. poate fi lipsită de sens.
- În funcție de utilizarea de CSS si HTML, unele modele de acest tip pot potrebyvat stiluri CSS suplimentare și trucuri pentru IE6
Exemple de design flexibil
Tipuri elastice de cauciuc și de modele sunt similare în aparență, astfel încât acestea să fie confundate. Deci, template-uri flexibile folosesc em în loc de procente și depind în primul rând de dimensiunea fontului. Deci, prin creșterea fontului utilizator crește dimensiunea și toate elementele de design.
7. Cum de a alege abordarea corectă?
Alegerea tipului de șablon ar trebui să depindă de site-ul special. Ar trebui să cântărească toate argumentele pro și contra.
Portofoliu, cel mai bine este de a alege un șablon de lățime fixă, astfel încât veți avea mai mult control asupra integrității designului.
În plus, va fi posibil să se controleze lățimea conținutului propus. Mulți designeri alege un model fix, deoarece este mai ușor și mai convenabil.
Cu toate acestea, cei care doresc să ajungă la o compatibilitate de 100% pentru a petrece mai mult timp în curs de dezvoltare șablon de cauciuc. În acest caz, cel mai important lucru nu este spațiul gol din jurul marginilor modelului, iar procentul de utilizatori care monitorizează rezoluția spasobnost mici. Pentru site-urile cu un public larg, chiar și un procent mic de utilizatori este important. În plus, astfel de proiecte trebuie să fie un design curat pentru o ea potrivi mai bine la șablonul de cauciuc.
Încă nu poate decide? Șablonul flexibil poate fi de ieșire. Dacă ispolzovat corect șablon flexibil, se poate rezolva problema de alegere. Designerii pot folosi principiile de proiectare elastice folosind em pentru font și blocuri, și de a combina definiția lățimea în pixeli și procente. (Aproximativ Eugene Che :. În opinia mea, aceasta este cea mai bună opțiune)
Ce designeri
Acest lucru face un designer de note excelente la lucrul cu cei care doresc să lucreze cu template-uri și nu cunosc îndeajuns de proiectare în ansamblu:
„Revenind la problema. Noi case.edu folosi lățime fixă cauza“:
- model de cauciuc este complex, iar noi oferim oameni cu modele diferite de pregătire și pot rupe șabloane de cauciuc legkostb.
(fișiere HTML simplu, și nu șabloanele Dreamweaver.) - Vrem să fim siguri că oamenii nu vor folosi linii lungi care conduc la lizibilitatea slabă și șablon lacrimă.
- Încercăm să limiteze utilizatorii, deoarece oamenii au tendința de a utiliza spațiul disponibil.
Dacă au monitoare mari, care vor fi bine, dar dacă matenkie - aceasta va duce la consecințe rele.
După cum puteți vedea, site-urile noastre sunt larg răspândite în rândul persoanelor cu diferite niveluri de cunoaștere. Dacă am lucrat pe un site ca un designer, aș face acest lucru, în conformitate cu conținutul site-ului ".
Mai multe avantaje în ceea ce privește modelul fix:
Multe browsere precum Safari 3 sau mai mare (Safari 4 pe drum), Firefox 2 de mai sus IE6 și mai sus (care trebuie privite ca depășite)
dimensiunea paginii pot fi scalate în conformitate cu dimensiunea fontului. ceea ce face aspectul unui cauciuc sau un șablon elastic destul de complicat, iar bolshestvo utilizatorii nu acorde o atenție la ea. "
Două observații în sprijinul șablonului de cauciuc:
„Modelele de cauciuc sunt corect afișate în diferite rezoluții. Nu există nici un punct în dezbaterea pe această temă. În plus, statisticile referitoare la rezoluția monitorului - este un mit; Unele disloca browser-ul pentru ecran complet, unele folosi bare de instrumente, bare laterale și alte widget-uri. face fereastra de browser-ul nu este standard.
cazuri evidente în care ar trebui să utilizați șabloane flexibile:
„Cred ca template-uri" mai elastice. - este cea mai bună opțiune. Pentru șabloanele flexibile, trebuie să specificați o lățime maximă. pentru a vă asigura că linia nu va fi prea lung.
Sunt un utilizator Windows, și desfaceți fereastra de browser pentru întreaga suprafață ecranului.
Ce zici de gradul de utilizare, de design de cauciuc este mai potrivit pentru oameni. care doresc să controleze lățimea conținutului, lățimea browser-ului deschis. Pentru mai puțin utilizatorii cu experiență vă va potrivi, probabil, cea mai bună opțiune flexibilă,. Deoarece șablonul controlează lățimea maximă. "
Explicarea cum un designer poate combina toate cele trei opțiuni pentru a obține cele mai bune:
„Cea mai mare parte din cauciuc, bara laterală fixă și (poate) unele părți elastic. Aici metoda preferată de mine.
Am ispoolzuyu întotdeauna 600 pixeli ca un limitator de blocuri de text (max-lățime / sau hack IE).
Folosind min / max pentru toți, atunci conținutul este în 600 - 1200px si toate centrata. Nu fără hacks pentru IE / câștiga.
Toate testate de la 600 la 2400 pixeli în lățime (se referă la rezoluția ecranului). Textul de maxim 600px, iar pagina este întinsă la lățimea conținutului.
Vizitatorii pot vedea exact ceea ce doresc. Acesta este de a face mai ușor de citit. Cred că acest lucru este un compromis.
În cazul în care structura site-ului este bun, atunci chiar și persoanele cu vedere slabă va fi în măsură să crească textul masshtal și nu vor avea probleme cu proiectarea ecranului, deoarece modelul va crește în lățime, datorită faptului că acesta nu este fixat în lățime. Și nu există probleme. "