• Subiect: HTML&CSS
• Timp video: 00:22:38
• Dificultate: in medie
• Programe de aplicație: Dreamweaver CS4

În această lecție vom analiza în detaliu toate capcanele unui astfel de aparent concept simplu, ca lățimea elementului. Să înțelegem în ce constă și ce reprezintă de fapt. Vom lua în considerare și munca proprietățile plutitoare. Să ne uităm la un exemplu de ce elementele plutitoare se mută la linie nouă, și vom rezolva această problemă. Să luăm în considerare și să rezolvăm problema colapsării granițelor blocurilor.

Tehnica 2: Creați un meniu cauciuc folosind liste

• Subiect: HTML&CSS
• Timp video: 00:16:13
• Dificultate: in medie
• Programe de aplicare: Dreamweaver CS4

Navigarea este poate cea mai importantă parte a site-ului. Și un site de cauciuc, de regulă, are și navigație din cauciuc. Crearea unui meniu de cauciuc folosind tabele nu este dificilă. Dar când vine vorba de crearea unui astfel de meniu folosind liste, apar multe întrebări. În acest tutorial vom crea un meniu cauciuc folosind liste. Să ne uităm la teoria din spatele creării unui astfel de meniu. Vom identifica și rezolva eventualele probleme.

Tehnica 3. Aranjarea elementelor prin poziţionare

• Subiect: HTML&CSS
• Timp video: 00:23:39
• Dificultate: in medie
• Programe de aplicare: Dreamweaver CS4

Adesea apar situații când trebuie să suprapuneți elemente. Sau forțați ca elementul să fie amplasat, de exemplu, în colțul din dreapta jos, indiferent de modul în care sunt amplasate blocurile din jur. Această problemă rezolvă cel mai bine proprietatea poziţie. În acest tutorial ne vom uita la elementele de poziționare. Să lucrăm la suprapunerea elementelor folosind proprietatea z-index. Să aflăm conditie necesara pentru a lucra proprietăți z-index.

Tehnica 4: Centrarea unui element cu lățime variabilă

• Subiect: HTML&CSS
• Timp video: 00:11:45
• Dificultate: in medie
• Programe de aplicare: Dreamweaver CS4

La așezarea planurilor de cauciuc, apare adesea o situație când este necesară centrarea unui element. Când se cunoaște lățimea elementului de centrat, nu apar probleme. Lucrurile se complică atunci când lățimea blocului care trebuie centrat este necunoscută sau poate varia. În această lecție ne vom uita la un exemplu de centrare a unui bloc cu lățime variabilă, folosind exemplul de creare a navigării în pagină.

Tehnica 5. Alinierea blocurilor la lățimea blocului de cauciuc

• Subiect: HTML&CSS
• Timp video: 00:16:00
• Dificultate: in medie
• Programe de aplicare: Dreamweaver CS4

Uneori apare o sarcină atunci când trebuie să aranjați mai multe blocuri pe toată lățimea bloc părinte. Adică primul bloc ar trebui să fie la marginea din stânga, ultimul bloc ar trebui să fie la marginea dreaptă. Și distanțele dintre celelalte elemente ar trebui să fie aceleași. Acest lucru este ușor de realizat atunci când așezați un aspect cu lățime fixă. Dar vom complica problema și o vom rezolva într-o lecție pentru un bloc de cauciuc.

Atunci când creați un site web în studioul nostru, se acordă multă atenție aspectului de înaltă calitate a paginilor web. Mai multe informatii Am scris despre aspectul site-ului în studioul nostru într-un alt articol. Astăzi aș dori să vorbesc despre tipurile de aspect - cauciuc și fix. În fiecare zi, folosim evoluțiile giganților străini de internet precum Google, Microsoft și Facebook. Ne așezăm la iMac-uri și PC-uri compatibile cu IBM și folosim standardele calculatoarelor, creat de oameni de știință americani. Cu toate acestea, datorită nouă a apărut ceva făcut aproape „pe genunchi”, cu dezavantaj imens finanţează, aproape din pur entuziasm, o comunitate foarte vizibilă de www-resurse la scară globală, numită cel mai adesea Runet (Internetul rusesc). Deși nu există o graniță clară între „al nostru” și „nu al nostru” într-adevăr, deoarece Rețeaua este internațională prin definiție, site-urile interne sunt caracterizate de o serie de trasaturi caracteristice, distingându-le de fundalul global.

Pe plan extern Segment de limbă rusă retea globala foarte diferit de Occident. În timp ce segmentul american și orice alt segment al Internetului este pur practic, designerii noștri web concurează între ei în eleganța, stilul și atractivitatea vizuală a proiectelor lor. Se pare că nu există un astfel de număr de site-uri web frumoase și complete funcțional în altă parte.

Unul dintre aspectele care este inevitabil menționat în legătură cu designul web intern este aspectul „cauciuc” (markup). În RuNet, standardul este considerat a fi un aspect în care designul ocupă 100% din ecran, indiferent de rezoluție, în timp ce site-urile occidentale sunt cel mai adesea realizate pe o grilă rigidă și fixate în lățime.

Expresia argotică „cauciuc” (întindere, nefixată) se referă la o metodă de formare a unei pagini de site web în care blocurile principale își aranjează pozițiile relative în funcție de dimensiunea ferestrei browserului. În acest caz, modificarea proporțiilor ferestrei browser duce la o modificare a proporțiilor site-ului. De obicei, dimensiunile coloanei sau blocurilor sunt setate ca procent din lățimea ferestrei.

Dispunerea contragreutății față de cauciuc este un aspect fix. În acest caz, site-ul are o lățime strict definită și proporții strict definite ale coloanelor sale principale. Adică, în cele mai multe cazuri, site-ul este „mai îngust” decât fereastra browserului, situată fie în centrul ferestrei, fie apăsat în stânga sau (extrem de rar) marginea dreaptă a ferestrei. Spațiul rămas pe ecran este umplut cu fundal.

Ambele abordări au propriile lor caracteristici individuale, argumente pro și contra. În acest articol, voi încerca să explic prin exemple motivele pentru care dezvoltatorii aleg un aspect de un tip sau altul.

Aspect fix

Un site cu aspect fix are o lățime constantă, indiferent de rezoluția ecranului utilizatorului. Lățimea cel mai des folosită este de 960 sau 1000 pixeli - o dimensiune care garantează utilizatorilor cu o rezoluție a ecranului de 1024×768 px (cel mai frecvent caz) și mai mare capacitatea de a vizualiza site-ul în mod normal, fără a deranja. defilare orizontală.

Statistici de utilizare rezoluțiile ecranuluiîn 2011:

1280x1024 – 14,8%
1280x800 – 14,4%
1024x768 – 13,8%
1366×768 – 10,1%
1440x900 – 9,9%
1680x1050 – 9,2%
1920x1080 – 6,2%
1920×1200 – 4,5%
1600×900 – 2,5%
1152×864 – 1,5%
1360×768 – 1,3%
800×600 – 0,6%

Avantajele aspectului fix:

1. Lățimea este fixă ​​pentru toate browserele, astfel încât sunt mai puține probleme cu imaginile, formularele, videoclipurile și alte conținuturi care au o lățime fixă;
2. Aspectul fix previne întinderea excesivă a liniilor de text ale site-ului în lățime;
3. Aspectele fixe sunt realizate mai rapid și mai ușor, ceea ce este foarte important pentru proiectele urgente;
4. Aspectele cu lățime fixă ​​sunt adesea mai ușor de stilizat, în funcție de efectele utilizate.

Dezavantajele aspectului fix:

• Aspectul paginii se poate deteriora semnificativ dacă utilizatorii măresc manual dimensiunea fontului în browser (de regulă, această funcție este folosită de persoanele cu deficiențe de vedere). Datorită faptului că lățimea blocului de text este fixă ​​și nu se modifică proporțional cu dimensiunea fontului, apar distorsiuni în designul paginii.
• La rezoluții mai mici decât cea pentru care este proiectat aspectul, în browser va apărea derulare orizontală. Deși rezoluția este mai mică de 1024x768 px calculatoare personale– este deja o raritate pentru smartphone-uri și netbook-uri care sunt răspândite astăzi, acesta este un lucru comun.
• Aspect fix va lăsa mult spațiu liber pentru utilizatori Rezoluție înaltă ecran;
• Lățimea relativ mică a unui site cu aspect fix limitează adesea plasarea materialelor publicate.

Un bun exemplu de aspect fix este site-ul web de închiriere a proprietății pe care l-am finalizat recent.

Dispunerea cauciucului

Dispunerea cauciucului este creată fără o dimensiune specifică a carcasei, dar folosind proprietăți procentuale. Cu alte cuvinte, 100% lățimea site-ului va ocupa tot spațiul disponibil pe ecranul monitorului.

Avantajele aspectului cauciucului:

• Aspectul de înaltă calitate se poate adapta la aproape orice rezoluție a ecranului, ceea ce îl face universal;
• Aspectele fluide bine concepute pot elimina defilarea orizontală la rezoluții mai mici;
• Un site web cu aspect de cauciuc poate folosi pe deplin spațiul monitorului.

Dezavantajele aspectului cauciucului:

• Redundanța elementelor site-ului care se potrivesc pe monitoare mari poate deruta utilizatorii și poate face site-ul prea supraîncărcat;
• Dacă nu sunt utilizate restricții privind lățimea blocurilor de text de pe un site, atunci acestea devin problematice de citit;
• Dezvoltatorul trebuie să poată testa afișarea corectă a site-ului pe toate dimensiunile posibile de ecran;
• În unele cazuri, designerul trebuie să deseneze mai multe opțiuni de aspect pentru rezoluții diferite;
• Deoarece aspectul cauciucului este mai complex, necesită o adaptare mai atentă la diferite browsere.

Cel mai browsere web populare, pentru care, în primul rând, se efectuează testarea:

Un exemplu de semn de cauciuc este site-ul nostru Transit Production

De asemenea, tipurile de cauciuc includ aspecte hibride și elastice. Hybrid este cel mai comun tip de layout, care include atât dimensiuni fixe, cât și relative ale elementelor - un fel de compromis între aspectul HTML fix și flexibil. Majoritatea webmasterilor folosesc acest tip de aspect atunci când dezvoltă un site web.

Când se utilizează aspectul elastic, dimensiunea containerului principal și a altor elemente (importante) este specificată în unități speciale - em. Em sunt direct proporționale cu dimensiunea textului sau a fontului. Prin urmare, pe măsură ce dimensiunea textului de pe pagină crește, dimensiunile secțiunilor specificate în em vor crește proporțional.

Toate tipurile de aspect de cauciuc sunt mai solicitante în ceea ce privește timpul și abilitățile dezvoltatorilor, dar aproape întotdeauna permit utilizarea cea mai eficientă a spațiului monitorului și oferă utilizatorului o interfață convenabilă și universală. Cu toate acestea, înainte de a începe să proiectați un site web, trebuie să decideți dacă efortul pentru „cauciuc” este justificat și dacă prezentarea informațiilor în acest formular va fi într-adevăr cea mai eficientă pentru acest caz?

Aspectele sunt împărțite după principiul și tipul de afișare:

1) Împărțire după principiul afișajului:

a) Aspect fix (static).
b) Dispoziție din cauciuc (întindere).
c) Aspect adaptiv - .

Când comandați un aspect de site responsive, este specificat pentru ce lățime a ecranelor trebuie să faceți adaptabil. De exemplu, rezoluția unui smartphone este de 320x480, în timp ce ecranul smartphone-ului funcționează în două moduri - orientare portret și orientare peisaj. Pentru unele site-uri puteți face unul adaptiv pentru Orientarea peisajuluiși pentru orientare portret. Pentru alte site-uri, este mai practic să-l faci adaptabil doar pentru orientarea peisajului. Uneori, nu există niciun punct practic în distrugerea conținutului site-ului pentru orientare portret dacă site-ul poate fi vizualizat normal pe un smartphone în modul peisaj. Mai mult, majoritatea oamenilor folosesc o tabletă mai degrabă decât un smartphone pentru a vizualiza site-uri web, deoarece... tableta are dimensiuni mariși este mai convenabil să vizualizați site-uri pe el. Este mai practic să determinați pentru ce să faceți adaptativ pe baza designului și conținutului site-ului.

Problemă de scalare în browserele mobile

Uneori se întâmplă așa - ai făcut-o aspect adaptiv paginile site-ului, dar browserele mobile (Opera, Mozilla, Yandex etc.) nu acordă nicio atenție adaptării dvs., de parcă nu ar exista deloc adaptare. Un browser mobil pur și simplu micșorează întreaga pagină web, astfel încât întreaga pagină web să se potrivească pe ecranul dispozitivului pe care vizualizați site-ul.

Situația poate fi corectată prin, ce este în recipientul de cap, în cod sursa pagini web, trebuie să scrieți meta eticheta de vizualizare. De exemplu,

Să ne uităm la valoarea atributului de conținut
1) width=device-width Aceasta arată că lățimea ferestrei de vizualizare este egală cu lățimea ecranului dispozitivului pe care este vizualizat site-ul nostru.
2) initial-scale=1.0 cu aceasta aratam ca scara paginii la incarcare este de 100%.

Uneori, site-urile interzic utilizatorului să mărească pagina pe care o vizualizează., adică utilizatorul vede întotdeauna pagina web așa cum este și nu o poate face mai mare sau mai mică. Acest lucru se face prin specificarea maxim-scale=1.0, minimum-scale=1.0, user-scalable=no în valoarea atributului de conținut.

Dimensiunea fontului în browserele mobile

Se întâmplă adesea ca fontul din browserele mobile să devină mai mare decât ceea ce a fost specificat în timpul aspectului. Acest lucru poate duce la denaturarea designului. Browsere mobile măriți în mod arbitrar dimensiunea textului pentru a-l face mai convenabil pentru citire, așa cum cred ei. Cât de mult se modifică dimensiunea fontului depinde de tipul fontului, lățimea elementului, browser, dispozitiv, rezoluția ecranului etc.

Există unele soluții prin CSS, dar nu ajută peste tot și nu întotdeauna. De exemplu.

html *(
înălțime maximă: 1000000px;
text-size-adjust: niciunul;
}

Pentru a reduce voința de sine dispozitive mobileÎn ceea ce privește dimensiunea fontului, fiecare font utilizat poate fi inclus ca fișier. Pentru o mai bună compatibilitate între browsere, fontul este inclus în mai multe formate: ttf, woff, svg, eot (pentru IE8 și mai puțin). Acest lucru este valabil și pentru fonturi sigure. Fișierele cu fonturi sunt incluse folosind regula @font-face

În același timp, utilizarea fișierelor cu fonturi poate crește diferența de font atunci când sunt afișate pe un computer în browsere diferite.

Orice design este o soluție la probleme: estetică, care trebuie să funcționeze în mod corect; o comoditate care ar trebui să conducă la sau să îmbunătățească o anumită metodă de utilizare specificații standardși așa mai departe. Layout-ul este una dintre etapele implementării unui proiect web, care este proiectat direct de designer. Atunci când alege tipul de aspect, designerul decide sarcini specifice, să încercăm să înțelegem care dintre ele mai exact.

Pentru a înțelege problemele rezolvate de cauciuc, merită să începem cu istoria originii sale.

Primele site-uri cu un aspect adaptat la dimensiunea ecranului (cauciuc) au apărut în timpul dispariției monitoarelor cu o rezoluție de 640-480, utilizare activă permisiuni 800-600 si primii reprezentanti 1024-768. Merită să recunoaștem că aria de 640-480 și 800-600 este mică pentru percepția completă a informațiilor. De asemenea, trebuie să agățați navigarea și un banner (erau mai eficiente în acele vremuri). Întinzându-ne site-ul de 1,6 ori pe orizontală, vom aduce cel puțin cumva formatul site-ului mai aproape de formatul de coală A4, care este bine acceptat de toată lumea. Să facem astfel o mare favoare proprietarilor de monitoare „mari” scumpe și noi. Mai mult, întindem nu numai elemente pe pagină, ci și blocuri de text care scad în înălțime, iar asta uneori elimină derularea! (și acesta este de 30 de pixeli!). Beneficiile sunt evidente!

Se dovedește, sarcina principală„cauciucat” - pentru a oferi spațiul necesar pentru conținut, fără a încălca demnitatea proprietarilor de monitoare vechi.

Deoarece luăm în considerare aspectul „cauciuc” în timpul nostru, merită să acordăm atenție flotei moderne de monitoare. iar asta (dacă uităm de netbook-uri) este de la 1024 x 768 la 2048 x 1152. Matematic, obținem o diferență de 2 ori, care nu este cu mult mai mare de acum 10 ani.

Raportul dintre dimensiunile dintre monitoarele mari și mici a fost aproape păstrat, sarcinile stabilite pentru designeri au rămas aceleași?

CUM FUNCTIONEAZA.

Pentru început, aș dori să mă uit la principalele metode de scalare și la caracteristicile acestora. De asemenea, merită remarcat faptul că site-urile sunt de obicei scalate pe orizontală.

1. Blocurile de text se pretează bine la întinderea orizontală. Ei transportă uneori până la 90% din toate informațiile de pe site (ceea ce înseamnă că sunt multe! Există ceva de scos!). Dar pur și simplu nu le poți întinde la nesfârșit. Atenția noastră are o anumită rezervă de „perseverență”. Dacă șir de text devine prea lung, ne este greu să-l citim - obosim. Nu degeaba ziarele folosesc restricții privind lățimea unui bloc de text de aproximativ 50-55 de caractere, iar aceasta, chiar și cu spațierea dintre litere crescută, este mai mică de jumătate din lățimea unei foi A4. În general, cel mai optim șir lung pentru rapid și lectura usoara Sunt luate în considerare 45 de caractere. Există și un minim, este de aproximativ 20-25 de caractere. Adică, un bloc de text poate fi mărit de la un minim la un maxim lizibil de cel mult 2 ori. Nu este recomandat să împărțiți un text în mai multe coloane, ca într-un ziar. Pentru că atunci când vedem textul, derularea de sus în jos, revenirea în sus la începutul celei de-a doua coloane va fi extrem de incomod. Pe baza acestui fapt, dacă textul este blocul principal al paginii, atunci nu îl putem întinde nici măcar la 900 px! Mai puțin este mai bine.

2. Distanța dintre diverse elemente site-ul. Cu nivelul corect de calificare, aceste zone ale site-ului pot fi scalate, aparent fără pierderi. Dar există un „Dar”. Faptul este că „spațiul gol” nu este doar un „supliment” pe pagină. Spațiile dintre blocuri îndeplinesc sarcini foarte specifice: separă, grupează blocuri similare și pun accent pe ceea ce este cel mai important. Toate aceste probleme sunt rezolvate prin variarea dimensiunii spațiilor. de exemplu, mai multe blocuri separate prin spații mici sunt percepute vizual ca fiind legate sau de valoare egală. Block având multe în jurul lui spatiu liber cu siguranță valoroasă, poate cea principală de pe pagină.

Dacă procedăm doar de la diferența de dimensiuni ale blocurilor, atunci nu contează deloc cât de mult le întindem, pentru că se vor întinde proporțional. Se pare că toți ar trebui să facă față sarcinilor lor... Dar apoi apare un alt „Dar”. Cert este că intervalele au și propriul „caracter”. Poate că acest lucru va părea nesemnificativ pentru cineva departe de domeniul designului, dar vă voi aminti de munca unui dansator, muzician și cântăreț. Un dansator neprofesionist poate executa aceleași mișcări ca un maestru, un muzician începător va cânta aceleași note, un cântăreț va cânta aceeași melodie. Vom recunoaște munca, dar cel mai probabil vom simți diferența. Dacă facem goluri între blocurile aferente de 5 mm, acestea vor fi percepute ca legate, dar dacă le întindem la 10-15 mm, atunci vor începe să separe irevocabil „rudele”. Și situația nu va fi salvată nici măcar prin faptul că proporțional acesta este cel mai mic decalaj de pe pagină.

Caracter " locuri goale„poate influența caracter general pagini. De exemplu, locurile cauciucate distrug adesea senzația necesară de precizie, stabilitate și fiabilitate. Nu voi intra prea mult în această problemă, pur și simplu pentru că este un subiect destul de specific, care este bine acoperit în literatura de specialitate despre design, compoziție și arte plastice.

3. Tot felul de grafice și tabele cu conținut text. Dacă tabelele au multe coloane, iar graficele au multe puncte, atunci spațiul suplimentar vă permite să vedeți etichetele care sunt prea lungi pentru celule. Graficele avansate arată mai bine schimbări mici și frecvente de direcție. În aceste cazuri specifice, cauciucul poate fi necesar.

4. Imaginile raster, atunci când sunt întinse, produc distorsiuni și moire când sunt întinse într-o direcție. Dar puteți redimensiona întreaga imagine păstrând proporțiile. Sau puteți modifica dimensiunea „ferestrei” imaginii, păstrând în același timp dimensiunea reală. Este necesar să măriți dimensiunea imaginilor în cazurile în care aceste imagini trebuie afișate cât mai mult posibil. marime mare, de exemplu, în serviciile foto, în portofoliile de designeri și fotografi... Cu toate acestea, într-un fel sau altul, acest lucru este asociat cu complicații tehnice suplimentare.

Video. S-ar putea să mă înșel, dar încă nu am întâlnit opțiuni pentru pur și simplu scalarea unei ferestre de film în flux (oricum este o tehnologie care necesită mult resurse). De regulă, aceasta este o fereastră de dimensiune reală + capacitatea de a viziona videoclipul pe ecran complet. Dar rețelele noastre sunt încă departe de a fi ideale și nu este nevoie să vorbim despre o tranziție totală la formatul video.

Widgeturi, navigare. De regulă, acestea sunt elemente care primesc multă atenție utilizatorului. Al lor componente interne, desigur, sunt scalabile. Dar modificarea proporțiilor ajustate ale designerului duce adesea la o pierdere a lizibilității acestor componente. În general, aceste componente ar trebui să fie luate în considerare individual, în fiecare caz, principalul lucru este să nu uităm de pericolul de a „cădea” vizual componenta. Ei bine, ca întotdeauna, sunt necesare trucuri tehnologice.

Pe lângă aspectele pur artistice și legile percepției informației, mai există și problema „obosei” ochilor noștri. În parte, acest lucru este atins mai sus în standardele sanitare pentru blocurile de text. Nu voi intra în cifre. Un exemplu simplu: puțini oameni ar atârna o coală de hârtie la locul de muncă Informații importante pentru proiectul curent, în spatele tău sau în lateral, adesea schițele, diagramele și notele sunt lipite în general în zona monitorului. Cu cât alergăm mai departe cu ochii, cu atât mai repede obosim. La scară de ecran, acest lucru pare mai puțin semnificativ. Dar să luăm în considerare 2 imagini diferite la marginile din stanga si dreapta ale monitorului de 22 inch deja trebuie sa ne intoarcem putin capul, monitoarele au devenit deja prea mari pentru miscare doar cu ochii. După 4-5 ore de navigare în rețea, atenția utilizatorului va fi suficient de neconcentrată încât îi va deveni dificil să găsească informațiile de care are nevoie pe site-ul tău întins.

După ce am analizat principalele metode de scalare și limitările componentelor asociate cu acestea, putem ajunge la concluzia că componentele în sine de multe ori pur și simplu nu au o marjă de „cauciuc”. Desigur, unele restricții pot fi neglijate, dar acest lucru poate duce la inconveniente pentru utilizatori, pierderea imaginii inerente designului sau complexitatea tehnică nerezonabilă a paginii.

CE AVEM.

Designerii, 10 ani mai târziu, încă rezolvă problema lipsei spațiului de lucru și o rezolvă folosind „dispunerea cauciucului”, care întinde toate materialele disponibile pe ecranul monitorului. Dar monitoarele noastre au trecut de mult linia percepției normale! Puteți să nu fiți de acord cu acest lucru în timp ce urmăriți următoarea continuare a sagăi STAR WARS sau jucați shooter-ul cu același nume. Imaginea filmului și a jocului sunt similare cu ceea ce vedem cu ochii noștri în viață. Conține o mulțime de informații inutile, chiar și cel mai eficient unghi al vederii noastre este de doar 5°. Datorită unghiului redus, creierul este descărcat de informații inutile. Nu ne interesează toate detaliile, ci doar imaginea de ansamblu. Iar spațiul neperceput creează doar un „anturaj” suplimentar - masa verde a pădurii, mulțimea... Adăugați la asta faptul că percepem cel mai bine centrul ecranului și este extrem de incomod pentru noi să studiem ceva la marginile... Iar pagina site-ului este detalii, texte, anunturi si navigare. Da, poți forța o persoană să caute totul ecran mare. Și, de regulă, o găsește. O persoană poate citi text chiar și în colțul din dreapta jos al ecranului cu font în 9 puncte. Numai acest lucru se întâmplă cu prețul unor eforturi suplimentare de vedere și atenție, deși mici la prima vedere. Adăugați la aceasta orele suplimentare de lucru ale designerului și designerului de layout pentru a dezvolta acest tip de layout.

Este demn de remarcat faptul că mulți designeri au ajuns la concluzia că este imposibil să trageți la nesfârșit conținutul, la fel ca și comprimarea acestuia. Înțelegerea acestui lucru a dat naștere la „semi-cauciuc”. Dacă o persoană este suficient de confortabilă pentru a percepe informații la 900 px lățime (puțin mai multa latime foaia A4), atunci de dragul de a rezolva ce problemă ar trebui să o întindem la 1100 px? Și asta în ciuda faptului că chiar și rezoluția minimă monitoare moderne se încadrează într-o lățime de 1024 px, ceea ce înseamnă că nu este nevoie să-l comprimați.

Da, nu putem decât să fim de acord că, odată cu creșterea dimensiunilor monitorului, ne confruntăm cu problema spațiului în exces, care acum trebuie ascuns (sunt aceleași câmpuri albe de pe părțile laterale ale ecranului). Dar pentru aceasta puteți folosi un fundal, grafică suplimentară, care nu poartă o încărcare semantică și nu necesită atenție suplimentară. Nu este deloc necesar să atingeți blocurile de informații.

După ce au primit o „încărcare de vivacitate” de la sfârșitul secolului al XX-lea, când chiar au existat probleme cu spațiul, designerii continuă să rezolve probleme inexistente, iar clienții deja „educați” cer ca aceste probleme să fie rezolvate.

Poți auzi adesea despre „legile rețelei”, ca și cum nu ar avea nimic de-a face cu regulile tipografice. Cu toate acestea, principalul lucru într-o tipografie este prezentarea textului tipărit. Și până când video și sunetul înlocuiesc textul (care reprezintă mult mai mult de 50% din conținutul site-urilor), și încă vedem cu ochi biologici, ar fi o prostie să renunțăm la cercetările și experiența acumulată pe parcursul a câteva sute de ani de tipografie. Mai mult decât atât, textul de pe monitoare este mult mai rău decât textul tipărit datorită rezoluției sale scăzute (72 dpi față de 200 dpi sau mai mult), iar monitoarele în sine nu ajută la odihnă ochii.

Pentru cei care se îndoiesc de realitatea problemelor de percepție, le sugerez să se uite la 4 opțiuni pentru a posta texte aici: nano.a5.ru

JUSTIFICARE.

Cu toate acestea, nu ar trebui să negați complet utilizarea aspectului cauciucului. Este perfect pentru situatiile in care o suprafata de prezentare mai mare reprezinta un avantaj. De exemplu, tabele construite dinamic cu conținut text și un număr mare de coloane, lungimea suplimentară a celulelor vă permite să exprimați text lung. Sau când cerințe specifice portofoliile de designeri, fotografi, artiști, atunci când au nevoie să-și prezinte multe dintre lucrările lor deodată, arată nivelul general, fără a se concentra asupra vreunuia în special. Dar acestea sunt cazuri speciale care trebuie luate în considerare separat.

Există un alt caz de utilizare a layout-ului scalabil, care nu necesită niciun argument pentru dreptul de a exista - cauciucul, ca dispozitiv artistic. Dar în acest caz, un sfat celebru ia o nouă formă:

Faceți numai site-uri web de cauciuc = Faceți numai site-uri web roșii (verzi, albastre, portocalii etc.)!

P.S.
Cred că mulți oameni au întâlnit expresii precum: „ Bun designer trebuie să fie capabil să facă anvelopele potrivite!” După părerea mea, capacitatea de a-l alege pe cea potrivită este mult mai importantă: cauciucuri sau nu?

„Aspect cauciuc

Toate șabloanele pe care le-am creat aveau o lățime fixă: adică lățimea unităților, coloanelor, zonelor etc. rămâne constantă atunci când fereastra browserului este redimensionată. Cele mai multe site-uri web de succes comercial au folosit acest principiu încă de la apariția internetului. Această abordare s-a dovedit a fi cea mai mare metoda eficienta aspect care vă permite să creați un design de calitate într-un mediu care nu este întotdeauna prietenos cu designerii.

Totuși, nu pot să nu iau în considerare aspect „cauciuc”.– crearea de pagini care își schimbă dimensiunea în funcție de zona de vizualizare.

Designerii doresc să creeze site-uri care să țină cont cu adevărat de preferințele utilizatorilor. Prin urmare, nu putem renunța la argumentele convingătoare vizate împotriva pagini cu latime fixa si intervenind in spate aspect „cauciuc”. În esență, o lățime fixă ​​a paginii web reflectă înclinația designerului de a controla utilizarea reală, în timp ce paginile care se modifică în funcție de vizualizarea țin cont mai întâi de nevoile utilizatorului.

Putem spune că, cu o dimensiune mare a ecranului, site-ul ar trebui să ocupe întregul zona accesibila, și atunci când mărime mică– scade în mod corespunzător. Nu ar fi pe deplin corect să spunem că aspectul „fluid” încearcă să se adapteze tuturor utilizatorilor, dar sarcina sa este aproape de aceasta. Internetul este un conglomerat de multe sisteme care servesc grupuri largi de utilizatori în moduri care se potrivesc cel mai bine nevoilor lor individuale. Sunteți de acord că aceeași percepție asupra conținutului sau funcționalității aceluiași site este imposibilă. De ce aspect ar trebui sa fie la fel pentru toata lumea? Dispunerea fluidă este mai potrivită pentru Internet și ține mai bine cont de punctele sale forte și părţile slabe decât paginile cu dimensiune fixă. După cum am menționat mai devreme, cu cât soluția este mai naturală, cu atât este mai eficientă.

Până de curând, capacitățile de web design nu ne-au permis să ne bucurăm pe deplin de aspectul „fluid”. Noile capabilități ale browserului, împreună cu inovațiile care știe dispozitivul în CSS și JavaScript, permit designerilor să creeze pagini mult mai dinamice.

Designerii inovatori se pot angaja acum în ceea ce este cunoscut sub numele de design web „responsiv”. Ethan Marcotte, un susținător puternic, susține că această abordare deschide noi posibilități:

Puteți face site-ul convenabil și atractiv ca aspect, folosind tehnologii standard, astfel încât site-ul să fie nu numai mai flexibil, ci și să se adapteze mediului în care este implementat.

Aceste tehnologii se dezvoltă incredibil de rapid, așa că am decis să nu le acopăr în cartea mea. Cele mai bune practiciîn domeniul responsive web design nu au fost încă găsite.

Cu toate acestea, principiile de bază ale designului rămân valabile indiferent de dezvoltarea unei noi abordări. De asemenea, este adevărat că designerii ar trebui să continue să împărtășească controlul asupra propriilor creații cu utilizatorii care doresc să-și controleze acțiunile. Ar fi o greșeală să credem că responsive web design înseamnă a oferi utilizatorilor control total pentru că în realitate au nevoie doar unele functii. Utilizatorii speră că designerii nu numai că le vor oferi un shell, ci și o vor rafina suficient pentru a fi ușor de gestionat.

Designerul ar trebui să ia unele decizii pentru utilizator, dar nu toate, ci doar cele care ajută la percepție. Designerul permite utilizatorului să controleze aspectele percepției care sunt cele mai importante pentru obiectivele sale, dar utilizatorul trebuie să se simtă în continuare stabil și de încredere.

Designul web responsiv nu ușurează această sarcină. De fapt, el complică. Vor fi și mai multe situații care trebuie luate în considerare, mai multe combinații de elemente interfața cu utilizatorul V diverse combinatii, ceea ce va face dificilă perceperea site-urilor. Acest lucru face ca grila să fie și mai importantă pentru designul general; crearea unei grile puternice la baza designului web receptiv îl va face mai solid și mai fiabil.

Aceleași principii de design bazate pe grilă pot fi utilizate atât în ​​aspectul fluid, cât și în designul web receptiv. Unitățile pot fi combinate în coloane și zone, iar dimensiunile elementelor pot fi modificate în funcție de parametrii de bază ai grilei. Aceste elemente ar trebui să crească și să se micșoreze în funcție de aceiași parametri, dar este important să rețineți că nu totul trebuie să se schimbe. Unele elemente pot și ar trebui să rămână neschimbate. Într-un mediu în care elementele își schimbă dimensiunile la nesfârșit, este foarte important să menținem coerența și să oferim utilizatorilor un fel de referință. Pe măsură ce această teorie se dezvoltă, vor apărea noi oportunități pentru designerii care lucrează în acest domeniu. Dar rolul central al designerului va rămâne neschimbat - persoana care gestionează percepția utilizatorului.

Din cartea Adobe InDesign CS3 autor Zavgorodniy Vladimir

Aspect cu mai multe coloane Principala caracteristică de design a oricărui ziar este aspectul cu mai multe coloane. Deoarece este dificil să ne imaginăm o linie de lungimea unei pagini întregi de ziar, designerul împarte pagina în coloane separate; numărul lor depinde de formatul ziarului Când

Din cartea 300 cele mai bune programe pentru toate ocaziile autor Leontiev Vitali Petrovici

Aspect cu ilustrații O altă caracteristică a aspectului revistei care este important de reținut este cantitate mare imagini. Dacă pentru un articol de ziar (mai scurt, ocupând o parte a paginii) sunt suficiente una sau două ilustrații, atunci mai lungi articole de revistă cere

Din cartea Despre ce nu scriu cărțile Delphi autorul Grigoriev A.B.

Designul final și aspectul prospectului Prima sarcină în proiectarea finală a prospectului este proiectarea inscripției „Nou”, care a fost probabil o explozie pentru cititorii noștri de mult timp. Pentru design, vom alege o imagine simplă tehnică care este atât de des folosită în

Din cartea HTML 5, CSS 3 și Web 2.0. Dezvoltarea de site-uri web moderne. autor Dronov Vladimir

Dispunerea finală a paginii Dispunerea finală a paginii în cazul nostru se va reduce la următoarele operațiuni: plasarea informațiilor de serviciu pe pagină (de exemplu, antete și subsol); umplerea paginii cu text real (programe TV reale, selecție de real

Din cartea HTML 5, CSS 3 și Web 2.0. Dezvoltarea de site-uri web moderne autor Dronov Vladimir

Aspectul textului Prima sarcină de aspect va fi atribuirea de stiluri textului importat. De asemenea, ar trebui să eliminați cele inutile linii goale(care sunt de obicei folosite pentru titluri și barele laterale într-o compunere), lăsând doar o linie goală între textul barei laterale și următorul obișnuit

Din cartea Mobiles First! de Wroblewski Luke

Aspect și pregătirea textului înainte de presare

Din cartea autorului

1.3.4.2. Operații cu linii de cauciuc și raster Acum trebuie să oferim utilizatorului posibilitatea de a desena linii. Pentru aceasta folosim o linie standard „de cauciuc”: utilizatorul apasă butonul din stanga mouse-ul și, ținându-l, mișcă mouse-ul. Atâta timp cât butonul este apăsat,

Din cartea autorului

Din cartea autorului

Aspect cu mai multe coloane Aspectul cu mai multe coloane este ceva care lipsește de mult timp în designul web. Unii entuziaști îl implementează de mult timp folosind tabele sau containere, dar acum au mijloace „legale” de a împărți textul într-un număr arbitrar de coloane.

Din cartea autorului

7 Aspect PRINCIPIILE ORGANIZĂRII CONȚINUTULUI și elementele de interfață utilizate la dezvoltarea designului site-urilor obișnuite pot fi, fără îndoială, utile la proiectare aplicații web mobile. Dar cum poți fi sigur că aceste principii vor fi relevante pentru oricare?