Moduri de a optimiza site-ul pentru dispozitive mobile

Cum de a verifica dacă site-ul este adaptat pentru dispozitive mobile?

De obicei, optimizarea internă este realizată în scopul de a îmbunătăți poziția în problema prin îmbunătățirea resursei. Prin urmare, ar fi logic și mobilitatea în primul rând ne-o punem motoarele de căutare.

În noua versiune a apărut instrument Yandex.Webmaster pentru verificarea rapidă a paginilor individuale pe „mobiloprigodnost“. Acest concept include prezența Yandex tag viewport, dimensiunea textului de cel puțin 12pt, se potrivesc complet pe ecran, fără conținut de derulare pe orizontală, precum și absența conținutului nu este susținută de dispozitive mobile. În caz de pagini inadaptați este prea mult, există o notificare specială în secțiunea de audit tehnic.

Google, ca rândul său, oferă deja mai multe moduri de a optimiza site-ul pentru dispozitive mobile:

Chiar și mai multe instrumente utile în motoarele de căutare populare:

Ce se poate face pentru a optimiza site-ul pentru dispozitive mobile?

aspect „cauciuc“

Dacă setați dimensiunea unui element standard de schimbare (aceleași pixeli), va avea aceeași lățime, înălțime, indiferent de dispozitiv. În practică, aceasta înseamnă plecat în străinătate imaginea ecranului pentru a derula textul orizontal și slab ușor de citit.

metaetichetă viewport este utilizat pentru a informa cu privire la dimensiunea și scala browser-ul paginii. El a declarat într-un container și este un pas necesar pentru „mobilizarea“ a site-ului. Fără această etichetă, browsere mobile vor afișa pagina modul în care el ar fi pe un calculator, dar cu ecran mic, veți obține un pic elemente vyrviglazno și text inconfortabil.

Directiva @media poate fi utilizată pentru a personaliza designul pentru diferite dispozitive și rezoluții de ecran.

De exemplu, pentru anumite stiluri apar numai pe ecrane cu o rezoluție mai mică de 960 x, trebuie să adăugați containerul aceste linii:

De asemenea, puteți specifica diferite tipuri de dispozitive și specificațiile acestora, minime, și rezolutie maxima, etc. O mulțime de exemple, o zi am de gând cu forțele și să le aducă într-un articol lung. Abonează-te la știri. să nu piardă. O privire la materialul până când posibilitățile de utilizare a tag-ul div. E cel mai recent exemplu de doar descrie detaliile @media de aplicare pentru a configura un design unic pentru diferite tipuri de dispozitive.

Versiune mobilă v.s. șablon adaptiv

Cu toate acestea, punerea în aplicare a metodelor de mai sus pot provoca unele probleme, mai ales pentru incepatori. Unele setări Directiva, meta tag-uri ... Brrr. Doar porniți un plugin special sau să instalați o temă de adaptare. Acesta din urmă, întâmplător, chestii generale la îndemână și util.

• Ușor de utilizat: Activează cu un singur clic, plus o pereche de setări de bază (și chiar și atunci nu întotdeauna);
• posibilitatea, în orice moment pentru a activa / dezactiva.

• plugins inhiba site-ul de încărcare;
• selecție modestă de opțiuni de design. De fapt, dacă nu săpa în intestine de plugin-ul, veți obține un site standard, ca două picături de apă similare cu alte mii de persoane care folosesc această opțiune;
• pot exista probleme cu utilizarea simultană cu plugin-uri în cache. De exemplu, atunci când cache-ul devine pagină mobilă și afișează, ulterior, chiar de la un calculator;
• existența unor butoane de rețele sociale și alte elemente care urmează să fie adăugate manual nu este asigurată întotdeauna de setările adaosurilor standard. În practică, este plină de dor La fel ca și Repostare unui segment de public larg.

In viitor, prin efectuarea de modificări în șablonul, trebuie să adere la principiile de layout flexibil: specificați toate dimensiunile în procente, mai degrabă decât pixeli, astfel încât elementele se adapteze la dimensiunea ecranului.

Plus. design frumos fără sarcină inutilă pe site.

Minus. în cazul în care site-ul a existat mult timp, schimbând subiectul poate fi din cauza unui număr de dificultăți, așa cum va trebui să re-transfere părți importante ale paginii (contoarele. butoane, pictograme etc.) pentru noul șablon.