Adaptarea site-ului pentru dispozitive mobile: instrucțiuni pas-cu-pas. Versiunea site-ului mobil

Adaptarea mobilă a site-ului devine din ce în ce mai populară datorită creșterii numărului de smartphone-uri și tablete. Ce este? Ce avantaje oferă? Mai ales această problemă este relevantă pentru proprietarii de magazine online, site-uri web ale diferitelor companii de servicii, bloguri și forumuri populare. Cum poate fi adaptat site-ul pentru dispozitivele mobile? Iată o scurtă listă a problemelor pe care le vom lua în considerare în cadrul articolului.

Informații generale

Deci, mai întâi, să analizăm ce este proiectare adaptivă. Acesta este numele unei configurații în care același cod HTML este trimis tuturor dispozitivelor, dar dimensiunea elementelor este ajustată prin CSS. Diferitele roboți de căutare pot recunoaște astfel de site-uri, cu condiția ca paginile și resursele să fie deschise pentru scanare. Pentru a informa browserele despre această posibilitate, este folosită o etichetă meta-nume: "viewport". Care este adaptarea site-ului pentru dispozitivele mobile?

Luați în considerare eticheta

Deci, trebuie să vă asigurați că eticheta meta name este "viewport". Pentru ce? Acesta conține instrucțiuni pentru browser cu privire la modul de ajustare a mărimii și dimensiunii paginii, luând în considerare lățimea ecranului dispozitivului din care este vizualizat site-ul. Dacă nu adăugați acest element mic, pagina implicită va fi pagina proiectată pentru computere. Însă browserele mobile vor încerca să optimizeze conținutul, ceea ce va duce la creșterea fontului, la scalabilitatea conținutului sau la afișarea conținutului care urcă pe ecran. Este plăcut? Nu, versiunea mobilă a site-ului în acest caz va cauza doar percepție negativă. La urma urmei, fonturile vor fi disproporționate, va trebui să defilați pagina și să efectuați o serie de acțiuni care, deși sunt secundare, sunt încă obositoare. Verificați dacă adaptarea site-ului pentru dispozitivele mobile poate fi utilizată cu ajutorul unui smartphone, tabletă sau al unor servicii și programe speciale. Desigur, primele două opțiuni sunt mai preferabile, dar dacă aveți nevoie de o analiză atentă din poziția diferitelor dispozitive și economisiți timp, atunci acestea vor face.

Care sunt avantajele adaptării site-ului pentru dispozitivele mobile?

Utilizarea acestei abordări permite:

1. Utilizatorii distribuie conținut în cazurile în care are o singură adresă.
2. Algoritmii motoarelor de căutare obțin parametrii exacți ai paginii, nu există confuzii cu diferite versiuni.
3. Reduceți probabilitatea de eroare.
4. Reduceți timpul de descărcare din cauza lipsei re-indexării.
5. Salvați resurse.

În plus, pagina adaptivă este mai ușor de creat, decât mai multe versiuni ale uneia dintre ele. Adaptarea site-ului pentru dispozitive mobile (pentru a face acest lucru este foarte posibil), nu este ceva greu de știut jаvascript suficient și capabil să lucreze cu foi de stil în cascadă (CSS) și imagini. Există multe abordări pentru îndeplinirea sarcinii. În cadrul articolului, vor fi luate în considerare trei variante cele mai populare:

1. Concentrați-vă pe jаvascript.
2. Combinarea.
3. Utilizarea dinamică a jаvascript.

Să le analizăm în detaliu.

Adaptarea folosind jаvascript

În acest caz, se folosește un conținut. Și folosind jаvascript, formatarea se schimbă cu mecanismul paginii. Totul în astfel de cazuri depinde de platformă. Acest algoritm este similar cu interogările media pentru o foaie de stil cascadă. Luați în considerare un mic exemplu de lucru în practică. Deci, avem o pagină cu codul HTML, în care este plasat elementul

combinație

În acest caz, adaptarea site-ului pentru dispozitivele mobile este folosită datorită combinării atât a capabilităților jаvascript, cât și a funcțiilor serverului. Cum arată schema generală? Utilizatorul vizitează site-ul de pe un anumit dispozitiv. jаvascript primește informații despre ceea ce a folosit și îl transmite pe server. Acesta generează codul necesar, care este apoi trimis către dispozitiv. Informațiile despre acest lucru sunt stocate în cookie-uri. Iar la vizita ulterioară, serverul citește datele de la ei. Particularitatea acestei abordări este posibilitatea de a folosi diferite versiuni de cod HTML. Cu toate acestea, pentru o funcționare corectă este necesar să se aibă grijă de prezența antetului Vary: User-agent. Versiunea mobilă a site-ului în acest caz necesită un pic mai multă forță de muncă.

jаvascript dinamic și alte opțiuni

În acest caz, se prevede că va fi furnizat același cod cu elementul specificat, indicând un fișier extern al cărui conținut variază în funcție de agentul utilizat. Adică, vom avea o pagină dinamică înaintea noastră. Cum se realizează acest lucru? Mulți oameni folosesc același Vary: User-agent pentru acest lucru. Și când lucrați cu pagini, informațiile vor fi de asemenea actualizate în timp real, ceea ce este cu siguranță foarte bun. Cu privire la teorie, poți încă să vorbești foarte mult. Cum să nu vă amintiți diva (

Pregătirea pentru implementare

Trebuie remarcat faptul că există două abordări ale sarcinii de creare a unui sit adaptiv:

1. Manual.
2. Automat.

Inițial, este necesar să alegeți ce cale să mergeți. Deci, plug-in-ul pentru adaptarea site-ului pentru dispozitive mobile vă va ajuta să efectuați rapid toate lucrările. Dar numai în cazul în care totul este creat în conformitate cu anumite reguli clar reglementate. Dacă resursa a fost creată în funcție de acestea, programul pentru adaptarea site-ului pentru dispozitivul mobil trebuie să efectueze toate problemele. Din cauza unor astfel de restricții și, uneori, a altor momente și a lipsei de libertate deplină a creativității, cele mai multe aleg în favoarea tuningului manual. Un program, deși ajută literalmente în câteva minute să obțină o versiune atractivă a resurselor, dar are totuși anumite dezavantaje.

Poziție flexibilă

Pentru ca noi să scoatem o "bomboană" literală, trebuie să folosim doar unități relative de măsurare. În practică, fonturile sunt toate personalizate pentru em, iar mărimea elementelor este specificată în procente. Deși puteți folosi periodic (dacă vreți cu adevărat) și px, dar este mai bine să le faceți fără ele. Când specificați o lățime sau o înălțime, trebuie să utilizați un număr fix fix fix, cum ar fi 1080, 1260 sau 768, și un procentaj. Ca exemplu - lățimea: 90%. Puteți face și 80%, și 99%, și 100%. Totul depinde de dorința stăpânului. Dar cum rămâne cu textul care apare pe un anumit element? În acest caz, există o formulă foarte bună: lățimea fontului este împărțită de același factor al componentei de fundal, iar noi obținem pretenția noastră. Uneori se întâmplă ca numerele să fie foarte lungi. De exemplu, standardul este 1260. Și utilizatorii care au o lățime a ecranului de 780 vin. Când împărțim, obținem un număr foarte lung. Este necesar să rotunji? Situația de aici este complicată. Mulți nu sfătuiesc categoric. Este mai bine să analizăm situația și să evaluăm cât de mare este precizia. Puteți, de exemplu, să setați să ia în considerare numai două, trei, patru sau zece zecimale. Crede-mă, este un lucru simplu, această adaptare a site-ului pentru dispozitivele mobile. CSS, dacă conține intrări fără erori, poate reproduce totul.

Fonturi flexibile, imagini și interogări media

Implicit, în browsere, dimensiunea fontului este setată la 16 px. Dar, așa cum am spus deja, această abordare este extrem de nedorită pentru noi. Ce să facem în acest caz? Apoi divizăm valoarea cerută de cea de bază. Luați în considerare câteva exemple:

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

Rezultatul trebuie scris în mărimea fontului, adăugând după colon. Cu toate acestea, dacă aceste valori sunt ulterior incluse în altă parte, trebuie reținut că valoarea pe care am introdus-o va fi afișată.

Și acum despre imagini. Puteți adăuga totul fie la atributele lor, fie la foaia de stil cascadă, utilizând o lățime maximă. Nu uitați că dimensiunea este dată în procente! Și câteva cuvinte despre anchetele mass-media. Ele pot fi folosite în acele cazuri când este necesar să se pună anumite condiții. De exemplu, dacă lățimea ecranului este mai mică de 1260 pixeli, vor fi aplicate regulile imbricate în interogarea media. Ce pot face? Dacă avem o imagine de fundal frumoasă, care ar trebui afișată complet și utilizatorul are un mic ecran, în astfel de cazuri, puteți prescrie că acesta este eliminat. Într-un fel, interogările media seamănă cu instrucțiunea if. Dar particularitatea lor este o individualitate foarte mare. Ei pot înregistra toate modificările care trebuie făcute atunci când lucrează cu browsere de anumite dimensiuni.

concluzie

Numărul de dispozitive mobile și de persoane care le utilizează este în continuă creștere. Prin urmare, este foarte de dorit ca în structura sitului, chiar și cele mai mici detalii, să nu mai vorbim de concepte, au fost elaborate înainte de dezvoltarea sitului. La urma urmei, este necesar să se asigure că utilizatorii care intră pe site de pe telefoane nu descarcă date pe care nu le vor afișa. De ce? Ei bine, este elementar - să nu încetinească încărcarea paginilor. Și este mai bine să vă asigurați că datele sunt încărcate în porțiuni mici, iar site-ul însuși a lucrat rapid și eficient.