Salutări, vizitatori ocazionali și cititori obișnuiți ai site-ului blogului!

Cu ceva timp în urmă mi-am actualizat blogul creând o temă complet wordpress de la zero. Am scris despre cum s-a întâmplat acest lucru în articolul „”. Una dintre sarcinile principale la crearea unui șablon nou este aspectul adaptiv al site-ului pentru toate rezoluțiile de ecran.

Scurtă prezentare a articolului:

Într-un articol anterior am scris deja de ce este nevoie. Dar cum să obții această adaptabilitate?

Pentru asta există moduri diferite. Unii folosesc javascript, alții folosesc altceva. Dar eu cred că cel mai simplu și calea corectă este un adaptiv folosind CSS.

Cum să faci un aspect de site responsiv

În primul rând, dacă ți-ai propus să creezi un site web responsive, între etichete lipiți următorul cod:

Ce prost am fost că nu am făcut asta imediat când încercam să fac un aspect adaptiv al site-ului!!!
Problemă browsere mobileîn scalarea lor a aspectului site-ului, chiar adaptiv.

Imaginați-vă, desenez un design, apoi notez toate stilurile și interogările necesare, verific adaptabilitatea site-ului la diferite rezoluții. Totul pare să fie bine! Dar când îmi deschid blogul pe smartphone, văd că site-ul pur și simplu s-a micșorat. Nu s-a adaptat dispozitivului mobil, ci pur și simplu a redus dimensiunea fontului, imaginilor etc.

Cum așa? Am început să verific toate stilurile pentru a vedea dacă am scris corect clasele și, în cele din urmă, am ajuns la punctul în care am verificat lățimea ferestrei browser în px folosind javascript. Am fost șocat. Când verific pe un laptop, am obținut un rezultat de 1024px și am obținut cam același rezultat la deschiderea site-ului pe un smartphone!

Dar asta nu poate fi!

Se dovedește, daca nu scrii codul pe care l-am indicat mai sus, browserul mobil nu intelege ca site-ul este responsiveși încearcă pur și simplu să facă pagina site-ului web mai mică, astfel încât să se potrivească într-un mic ecran de telefon mobil.

Din cauza prostiei și incompetenței mele, am pierdut mult timp. Dar acum îmi amintesc pentru totdeauna))).

Interogări media CSS cu aspect adaptiv

Pentru a face răspunsul utilizând CSS, trebuie să utilizați interogări media.

Cum este asta? Da, foarte simplu. În fișierul CSS trebuie să scrieți interogări precum:

Ecran @media și (lățime minimă: 1440 px) și (lățime maximă: 1599 px)( )

Acest cod înseamnă că stilurile cuprinse între „( )” vor funcționa pentru ecrane cu o lățime minimă de 1440 px și o lățime maximă de 1599 px.

Adică acele stiluri de elemente de site care trebuie adaptate în funcție de rezoluția ecranului trebuie scrise separat pentru fiecare lățime posibilă a ecranului.

Cele mai importante rezoluții de ecran pentru aspect adaptiv

• 320px- Dispozitive mobile (orientare portret);
• 480px- Dispozitive mobile (orientare peisaj);
• 600px- tablete mici;
• 768px- Tablete (orientare portret);
• 1024px- Tablete (orientare peisaj)/Netbook-uri;
• 1280 px sau mai mult- PC.

Aceste rezoluții trebuie să vă concentrați și cărora trebuie să le acordați o atenție deosebită atunci când faceți machete adaptive. Acestea sunt cele mai comune tipuri de rezoluții de ecran.

design responsiv bootstrap

Este foarte convenabil să utilizați bootstrap pentru a crea un aspect adaptiv. Comoditatea este că toate stilurile pentru adaptarea blocurilor, butoanelor, meselor etc. sunt deja înregistrate în bootstpap. Trebuie doar să vă dați seama ce clasă să atribuiți cărui element.

Pentru a începe, descărcați cea mai recentă versiune de bootstrap și conectați-o la site-ul dvs. Vă rugăm să rețineți că conectarea stilurilor și scripturilor la WordPress are propriile sale caracteristici.

Aspectul de pe Bootstrap este diferit prin faptul că lățimea blocului sau a ecranului este împărțită în 12 părți egale. Și atribuind o anumită clasă unui bloc, puteți seta lățimea blocului egală cu numărul necesar de părți.

De exemplu, acest design vă va permite să alocați un bloc lat pentru conținut de 8 părți lățime și un bloc îngust pentru o bară laterală de 4 părți lățime:

Lățimea blocurilor va fi calculată automat în funcție de lățimea ecranului. Și atunci când sunt vizualizate pe un dispozitiv mobil, aceste blocuri se vor deplasa unul sub celălalt.

De asemenea, puteți ajusta distanța blocului de la margine, din nou, la numărul necesar de piese. De exemplu, acest design:

Un bloc de 10 părți lățime va fi creat cu o indentație din stânga de 1 parte a ecranului.

Dacă te uiți la asta, lucrul cu bootstrap face munca foarte rapidă. Mai mult, aceste stiluri funcționează cu siguranță corect și nu va fi nimic strâmb pe site.

Pe viitor am de gând să postez câteva lecții despre lucrul cu bootsrap. Prin urmare, vă sfătuiesc să nu ratați acest moment.

Verificarea adaptabilității site-ului web

Dar apare întrebarea: cum să verificați adaptabilitatea site-ului? Acum ați scris interogări media în CSS, ați conectat bootstrap și ați folosit clasele necesare. Cum poți verifica dacă site-ul se adaptează corect la toate rezoluțiile ecranului?

Foarte precis și cel mai important serviciu gratuit, care merită respect și recunoștință din partea webmasterilor și a designerilor de layout care se ocupă de aspect adaptiv site-uri.

Ei bine, cum vă place articolul? Este totul clar? Dacă nu, scrieți în comentarii, ne vom da seama împreună.

Da, pentru a crea un site web responsive, trebuie să muncești din greu. Dar aceste eforturi vor fi răsplătite cu o atitudine favorabilă față de site-ul dvs. de la motoarele de căutare și, cel mai important, vizitatorii site-ului dvs.

Unul dintre principalii parametri ai fiecărui smartphone este rezoluția ecranului. Să ne dăm seama ce este și de ce contează atât de mult.

Ce este rezoluția ecranului?

Rezoluția afișajului este o valoare care se referă la numărul de pixeli de pe afișaj în lungime și lățime. Acest parametru este important deoarece determină claritatea imaginii fiecărui smartphone.

Rezoluția ecranului afectează calitatea imaginii. Cu cât este mai mare, cu atât imaginea va fi mai bună și mai clară. Dacă dispozitivul are dimensiuni mari, dar rezoluție scăzută, atunci pixelii vor fi vizibili în imagine. Numerele și simbolurile vor părea insuficient de clare și, în cazuri rare, stângace, ca pe telefoanele vechi cu buton.

Pe în acest moment 99% dintre smartphone-uri vin cu trei tipuri de ecrane

• HD (1280x720, 720p);
• Full HD (1920×1080, 1080p);
• Quad HD (2560×1440, 1440p).

Ce rezoluție a ecranului ar trebui să aleg?

Una dintre cele mai populare rezoluții de afișare a smartphone-urilor este 1280 x 720 pixeli - HD. Aproape toate gadgeturile din segmentul de preț bugetar sunt echipate doar cu acest indicator.

Dispozitivele mai puternice sunt echipate cu afișaje cu rezoluție mai mare. Smartphone-urile cu ecrane 1920 pe 1080 au apărut cu mult timp în urmă și nu mai surprind pe nimeni. Dacă diagonala smartphone-ului este de la 4,5 la 5,5 inci, cel mai potrivit este un ecran de 1920x1080 pixeli (Full HD). La o rezoluție mai mică, pixelii vor fi vizibili în imagine și utilizatorul poate simți disconfort. Aceasta este probabil media de aur - preturile sunt mici, imaginea este clara si luminoasa.

Cu o diagonală de peste 5,5 inchi sau mai mult, dispozitivele emblematice folosesc rezoluția Quad HD (2650x1440). Calitatea imaginii aici este ridicată, dar, conform , ochiul uman practic nu poate observa o diferență semnificativă. Quad HD este o caracteristică a viitorului, este necesar pentru tehnologiile de realitate augmentată și virtuală.

Jurnaliştii tehnici au strigat despre era post-PC de câţiva ani încoace, vânzările de calculatoare cu factori de formă tradiţionali scad inexorabil, la fel ca şi cotele producătorilor lor. Dar cantitatea dispozitive mobile, smartphone-uri sau tablete, este în continuă creștere.

Pentru designer, asta înseamnă, în primul rând, că, indiferent dacă specificația tehnică conține măcar ceva despre dispozitivele mobile sau nu, el trebuie să deseneze un layout astfel încât site-ul să poată fi folosit de pe un telefon (și, cu atât mai mult, o tabletă). ). Și asta înseamnă nu numai că butoanele ar trebui să poată fi lovite cu degetul. În mod ideal, desigur, site-ul ar trebui să aibă un separat versiunea mobilă, dar, după cum arată experiența noastră, majoritatea clienților nu doresc să aloce fonduri suplimentare pentru asta, dar cu siguranță se vor plânge dacă ceva nu funcționează pentru ei de pe dispozitivul lor preferat Apple.

Amintindu-ne de greșelile pe care le-au făcut designerii pe care îi cunosc, primul lucru care provoacă probleme cu layout-urile pe care le desenează este lipsa unei idei exacte despre câți pixeli vor încăpea pe un ecran cu o rezoluție nominală mai mare decât cea a unui 20'. monitor desktop. Ei bine, asta e în regulă, pentru asta a fost conceput marketingul numerelor mari. Acest articol vă va ajuta să înțelegeți situația actuală.

Vorbim de dispozitive pe Android și iOS, WP este încă exotic, iar fără experiență personală nu mă voi angaja să dau recomandări.

Dacă în document HTML Nu există metaetichete care să spună browserului mobil nimic despre lățimea la care să afișeze documentul, apoi browserele se vor comporta ca și cum lățimea documentului ar fi de 980 de pixeli. Acest lucru este valabil pentru telefoanele cu lățimea ecranului de 320 de pixeli, precum și pentru tabletele de 10 inchi care utilizează Android și iOS și un browser Webkit. Această abordare înseamnă că site-urile cu o lățime minimă de 960 de pixeli vor avea marje mici pentru a face conținutul mai ușor de citit.

Dacă lățimea minimă a documentului este mai mare, atunci comportamentul browserelor începe să difere. Safari pe iPhone/iPad va comprima pur și simplu conținutul în majoritatea cazurilor. În Android, DIP - pixeli independenți de densitate se vor manifesta, mai multe despre care mai târziu. Dacă lățimea documentului este mai mare de 980 și mai mare decât lățimea dispozitivului în DIP, va apărea un derulare la dreapta. Așadar, un site cu o lățime de conținut de 1040 pixeli va fi afișat fără derulare orizontală pe iPhone și iPad (1024 pixeli), dar cu derulare pe telefoane precum Galaxy S3 (rezoluție fizică 1280x720) sau tableta Nexus 7 (rezoluție fizică 1280x800). ).

Ce concluzii ar trebui trase? În ciuda abundenței de afișaje cu ecran lat de pe desktop-uri și laptopuri, vechea grilă bună de 960 de pixeli nu și-a pierdut relevanța. Browserele mobile au, de asemenea, capacitatea de a potrivi blocuri de text într-un format care este ușor de citit pe un dispozitiv, de exemplu, comprimând textul într-o coloană îngustă pe un telefon și mărind fontul acestuia. Acest lucru nu va funcționa dacă textul care conține blocul este strict limitat în înălțime. De fapt, nu ar trebui să creați niciodată un site web unde ceva este limitat în înălțime, mai ales dacă planificați vizitatorii de pe dispozitive mobile. Un alt inamic al dispozitivelor mobile, în special al telefoanelor, sunt elementele cu poziție: fixă. De exemplu, butonul înapoi la modă, care urmărește constant utilizatorul în jurul paginii. Și mai rău sunt matrițele mari, ca un capac fix. Astfel de elemente nu numai că ocupă spațiu util pe un ecran mic, dar rămân și în același loc atunci când sunt mărite. Problema este tipică și pentru ferestrele modale. Dacă sunt afișate în mijlocul ecranului, atunci mărirea conținutului lor de pe un telefon mobil necesită o cantitate destul de mare de dexteritate. Folosind ferestre pop-up precum „Rămâneți în contact cu noi pe rețelele sociale!”, comportarea în acest fel este în general o lipsă de respect acerbă pentru utilizatorii de dispozitive mobile, pentru că de multe ori este mai ușor să părăsești site-ul decât să închizi acest pop-up.

Să ne uităm la câteva site-uri ca exemplu.

În ciuda faptului că Lenta.ru are o versiune mobilă foarte decentă, nu există o tranziție automată la aceasta. Pe desktop, meniul fix se suprapune textului cu scalare automată. Utilizatorul se confruntă cu alegerea fie de a scala manual, fie de a nu fi prea leneș să scrie m. în url.

RBC. În general, au și o versiune mobilă, dar trecerea la aceasta se realizează numai cu pagina de start. Prin intermediul unui link direct (de la Google News, în special) puteți vedea această pânză ilizibilă. Va rămâne un vizitator pe un astfel de site? Greu.

Pop-up super canonic în stilul RBC. Un exemplu extraordinar de ceea ce nu trebuie făcut.

Intan, care a tastat ghici cine. Desigur, am înțeles perfect de ce nu poți face asta cu meniul, dar cumva nu aveam chef să mă cert. A pune o întrebare este complet în afara subiectului.

Un alt lucru care de obicei nu merită timpul pe desktop și provoacă probleme pe mobil sunt elementele de formular personalizate. Faptul că aproape că nu sunt personalizabile folosind CSS nu este doar pentru că World Wide Web Consortium a fost leneș.

De exemplu, ați desenat o listă derulantă frumoasă. Să presupunem că într-un browser desktop arată ca toate celelalte, se deschide cu un clic de mouse și se derulează cu rotița sa. Dar pe mobil, lucrul cu astfel de elemente vă va cauza mari probleme. Dacă selectarea ar fi standard, utilizatorului i se va afișa o fereastră de sistem cu o listă de tambur/dropdown, în funcție de sistemul de operare.

Nu există nicio opțiune de a atașa un fișier în iOS. Și dacă aspectul standard al unui buton sugerează utilizatorului că acesta este dezactivat, atunci un buton luminos și frumos va da senzația că ceva nu funcționează pe site-ul tău.

Desigur, în mod ideal ar trebui identificat dispozitivul mobil, iar pentru dispozitivele mobile nu ar trebui executate scripturi care vizează schimbarea interfeței standard.

O altă caracteristică enervantă a browserelor mobile este că în prezent nu memorează în cache fonturile plug-in. Același PT Sans în toate stilurile, conectat cu Google Web Fonts, durează mult timp să se încarce. În același timp, este cu greu inferior Helvetica / Roboto încorporat. Gândiți-vă bine dacă timpul suplimentar de încărcare al fontului dvs. personalizat merită.

Dimensiunile și rezoluțiile ecranului dispozitivelor mobile. Diferența dintre rezoluția fizică a ecranului și rezoluția browserului mobil

iPhone și iPad folosesc conceptul de puncte de măr. Rezoluția iPhone până la modelul 5 este de 320 x 480 pixeli. Ce este Retina Display? Retina Display folosește o densitate dublă a pixelilor, ceea ce înseamnă că există 4 pixeli fizici pe pixel. Deci, iPhone 4, cu o rezoluție fizică a ecranului de 640 pe 960 pixeli, are încă 320 pe 480 pixeli. Dar, în același timp, grafica este mai detaliată datorită utilizării imaginilor de două ori mai mari în aplicații. Pentru iPhone 5, valoarea pixelilor a crescut de la 480 la 568. Pentru iPad din toate versiunile, inclusiv Mini, rămâne neschimbată - 1024x768.

În mod implicit, la o scară de la 1 la 1, grafica standard de pe web (de exemplu, imaginea de fundal) va fi afișată ca și cum ar fi dublat în dimensiune, un pixel va fi întins cu 4 pixeli ai ecranului fizic; bitmap. Cum se folosește grafica rezoluție înaltăîntr-o astfel de situație vom lua în considerare în secțiunea următoare. Principalul lucru de reținut despre permisiuni dispozitive iOS- să nu credeți că paginile cu retină și cele non-retină au lățimi diferite. Nu, singura diferență este în densitatea pixelilor, proporțiile sunt absolut aceleași.

În Android situația este mult mai complicată, mai precisă și mai diversă. Android folosește conceptul de densități diferite de ecran (DPI). Esența sa este aceea pentru diferit dimensiuni fizice afișaj și rezoluție, modelul de comportament al punctelor diferă în funcție de scopul dispozitivului. Analogul punctelor este DIP-ul menționat mai sus.

Densitatea ecranului - 1. Această categorie include multe dispozitive, cum ar fi telefoanele 320x480 (HTC Hero, LG Optimus One), tabletele de 7 inchi 1024x600 ( Samsung Galaxy Tab, Kindle Fire), tablete de 10 inchi (Asus Transformer, Acer A500, Galaxy Tab 10’1).

Densitatea ecranului 1,33 este utilizată în tabletele de 7 inchi precum Nexus 7. Rezoluția fizică este 1280x800, în DIP - 960x600.

Densitatea ecranului 1,5 - telefoane mobile ridicat categorie de pret 2011 și medie 2012, 10 tablete inch cu FullHD. De exemplu, Nexus One 480x800 pixeli, 360x533* DIP, HTC One S - 540x960 pixeli, 360x640 DIP și Asus Transformator Pad Infinit 1920x1200 pixeli, 1280x800 DIP.

*la dezvoltatorii Android este 534, dar măsurarea lățimii browserului prin JS arată exact 533, așa că în interogările media ar trebui să vă concentrați pe această cifră.

Densitatea ecranului 2 - telefoane din categoria de preț ridicat din 2012 și literalmente câteva tablete. De exemplu, HTC One X, Samsung Galaxy S3 - rezoluție ecran 1280x720, dimensiuni în DIP 360x640. Tabletă Google Nexus 10 - rezoluție 2560x1600 pixeli, 1280x800 DIP.

Densitatea ecranului 3 - flagship 2013 cu afișaj FullHD. Cu o rezoluție de 1920x1080 pixeli, au în continuare același DIP de 360x640.

Cu toate acestea, mai există și Google Nexus 4 out-of-touch cu un ecran de 1280x768 pixeli cu o densitate de 2 (384x640). La modelele cu taste pe ecran, 42DIP ocupă panoul pentru ele, deci la modelele de acest gen (Galaxy Nexus, Nexus 4, Sony Xperia Z) în modul portret Rezoluția portretului va fi puțin mai mică, ridicându-se la 598 de pixeli.

Astfel, avem trei rezoluții pentru portrete - 320, 460 și un rar 384, și patru și jumătate peisaj - 480, 533, 568, 640 (598 cu taste soft).

Pentru tablete, acestea sunt portret 600 și 800 și peisaj 960, 1024 și 1280.

Tabelul de mai jos listează cele mai obișnuite rezoluții pentru produsele populare:

Cum să începeți să lucrați la aspectul unei aplicații mobile?

În primul rând, citiți instrucțiunile. Aplicațiile pentru diferite platforme ar trebui să arate diferit. De exemplu, urmând linkul puteți compara elemente tipice ale diferitelor sisteme de operare

Pentru a lucra la aspectul aplicației pentru iPhone, creați o pânză de 640 x 1136 (960) și utilizați multipli de două dimensiuni. Toate graficele, toate fonturile ar trebui să fie așa.

O anumită parte a ecranului din viitoarea aplicație poate fi ocupată de o bară de stare cu indicatoare de semnal, indicatori de baterie etc. Acesta este 20 de puncte în iOS și 25 DIP în Android. ÎN telefoane Android cu taste soft și tablete, 48 ​​DIP în partea de jos a ecranului este ocupat de un spațiu pentru ele (Bara de navigare). Mai mult, în dispozitivele non-canonice precum tablete Samsung datorită utilizării shell-ului proprietar al Barei de navigare și Bara de stare combinate.

Pentru o aplicație pentru telefoane Android, este important să luați o gazdă de cel puțin 720x1280. Este mai bine să mergeți direct la 1080x1960, bazat pe flagship-uri moderne.

Pentru o pânză de 720x1280, dimensiunile ar trebui să fie, de asemenea, un multiplu de doi, pentru 1080x1960 un multiplu de trei. Utilizarea 480x800 sau 640x960 ca pânză este o idee foarte proastă.

În timp ce lucrați la aspect, trebuie să reduceți periodic dimensiunea ferestrei. editor grafic la dimensiunea aproximativă a unui dispozitiv real, precum și salvați JPG și vizualizați-l pe un dispozitiv real. Este posibil să apăsați butonul cu degetul? Este textul prea mic?

Dacă utilizați un aspect de dimensiuni nepotrivite, vina pentru aspectul strâmb al aplicației sau pentru grafica sa neclară va fi în întregime a dvs.

În general, fiți atenți la detalii și amintiți-vă - pixelii și punctele/dips-urile nu mai sunt același lucru.

Optimizarea graficii Web pentru ecrane de mare densitate

Deci, am aflat că sunt mai multe opțiuni posibile densitatea pixelilor pe display. În consecință, pentru a evita efectul de grafică neclară, cunoscut și sub numele de „efectul Playstation”, trebuie fie să folosim grafice raster cu rezoluție mai mare, fie grafica vectoriala, de exemplu SVG.

Cu toate acestea, suportul SVG este încă foarte limitat și, pentru compatibilitatea cu browserele mai vechi, va trebui să utilizați în continuare un raster. O altă durere de cap ar fi folosirea sprite-urilor - valorile poziției de fundal ar trebui specificate ca procente, ceea ce ar necesita multă matematică. Cel mai puțin complicat mod este să utilizați mai multe variante ale acelorași imagini printr-o interogare media, de exemplu -webkit-min-device-pixel-ratio: 2.

După cum puteți vedea, tehnica în sine este foarte simplă și necesită prezența mai multor versiuni ale aceleiași imagini doar dacă este folosită ca imagine de fundal. Imaginile obișnuite, dacă este necesar, pot fi încărcate de două ori mai mari decât ar trebui să fie și dimensiunea cerută în pagină poate fi specificată folosind atributul style.

Dezavantajul este, de fapt, greutatea mai mare a imaginilor de înaltă rezoluție. Aici trebuie să decideți ce este mai important - conținutul pe care utilizatorul îl va vedea după o perioadă mai lungă de timp din cauza greutății paginii sau a designului.

Voturi: 416 | Vizualizari: 4271