Design adaptivă a site-ului - cu privire la modul de punere în aplicare pentru bloguri WordPress

Design receptivă un site modern, este un indicator cheie al calității sale.

Mai mult decât atât, motoarele de căutare rang site-uri adaptate pentru dispozitive mobile mai loiali. Acest lucru este valabil mai ales pentru Google substație, care impune în mod direct pe site-urile acestor cerințe.

Ce este design-ul adaptiv al site-ului

Cum de a face site-ul adaptiv

• Template adaptiv.
• Versiunea mobilă a site-ului.
• Instalarea unei aplicații speciale pe dispozitiv utilizator.

Experiența arată că cea mai bună soluție este de a crea un șablon de adaptare. Alte două moduri de a rezolva această problemă prea, dar vizibil inferioară primei metode.

Dacă utilizați o versiune mobilă a site-ului numărul de muncă, timp și bani este comparabil cu dezvoltarea și perfecționarea șablonului adaptiv.

Dar când se adaugă acțiuni de operare pentru a menține relevanța site-ului mobil, sincronizarea informațiilor cu site-ul principal. Iar pentru promovarea SEO întrebări suplimentare sunt adăugate la camere duble, etc.

Instalarea aplicației pe dispozitive mobile și nu depinde de tine. În primul rând, nu fiecare dispozitiv poate fi implementat. În al doilea rând, este nevoie de cunoștințe suplimentare și de acțiune, și nu toți utilizatorii vor fi de acord cu complicații.

Rezumând, putem concluziona: crearea design receptiv pentru site-ul dvs. este cea mai eficientă soluție pentru un site mic sau mediu.

site-ul Adaptive aspect

Pentru a crea un design receptiv va trebui să recurgă la impunerea tehnologiei adaptive. Esența ei este după cum urmează:
Asigurați-șablon „cauciuc“

Asta nu este bine fixat pe lățimea paginii și de a folosi unități relative. Asta este de a face șablonul proporțional compresibil, care este „de cauciuc“.

În acest scop, lățimea paginii este dat css proprietate max-lățime în loc de lățime, și au în raport cu această valoare, lățimea celorlalte elemente sunt selectate în procente (%).

Se determină „puncte de control“ lățimea ecranului

Determinarea este nevoie de punctele de control (CT) lățimea ecranului pentru planificarea acțiunii în continuare.

Ecran de planificare pentru fiecare aspect CT

Conform acestor puncte de testare compun aranjamentul unităților individuale de pe un site, astfel încât acestea sunt corect reflectate pe dispozitivele mobile.

Pentru mai multe informații despre care se ocupă cu astfel de probleme, puteți face cunoștință cu cursuri gratuite de pe echipa de design adaptiv WebFormMySelf.

anchete mass-media

trebuie să utilizați interogări media pentru a seta punctele de control. Aceste standarde directive CSS3 pentru gestionarea conținutului de afișare a paginilor pentru diferite rezoluții de ecran.
Această directivă arată următoarele:

șablon receptivă pentru bloguri WordPress pe

șablon adaptivă pentru blog-ul dvs. pe WordPress poate fi realizat în mai multe moduri.

1. Instalați plugin-ul corespunzător.
2. Cumpara model gata de adaptare.
3. Adaptarea unui șablon existent de unul singur sau să solicite un tehnician de service.

Decizia de a ține pasul cu timpul, am început, de asemenea, de formare pentru a se adapta blog. Despre plug-in-uri pentru a se adapta WP pe internet o mulțime de informații. Am făcut cunoștință cu activitatea și cerințele populare plugin-uri și a decis că aplicarea lor nu ar fi cea mai bună soluție pentru blog-ul meu.

Cumpara un șablon receptiv moderne pe internet este, de asemenea, destul de ușor, ar fi bani. Dar este necesar ca șablonul pe care doriți și să îndeplinească toate dorințele.

Pe scurt, m-am oprit la al treilea exemplu de realizare, și a decis să se adapteze propriul șablon.

șablon adaptiv pentru WordPress pe cont propriu

După trecerea în revistă a principiilor de proiectare de adaptare pentru dispozitive mobile, cu bucurie m-am dus la locul de muncă, dar am simțit că cunoștințele mele de html, css, php nu este suficient.

Și a început să graviteze spre cumpararea unui template-uri gata făcute, dar în acest moment a fost informat cu privire la cursul celor două Andreev BIERNACKI și Kudła «WordPress-Master de la bloguri personale la Premium Template“. Unul dintre blocurile Cursul a învățat șablon de adaptare terminat pentru dispozitive mobile.

Pretul cursului a fost comparabil cu prețul unui nou model de adaptare modernă. Așa că am decis să-și petreacă această sumă la achiziționarea cursului și de a primi în loc de template-uri gata făcute - cunoștințe. Cred. Că investiția a fost corectă și se justifică pe deplin.

Cine este interesat de acest curs - urmați acest link. Dar, mai întâi, începe cu un drum liber, de asemenea, o mulțime de materiale utile.

După cum sa dovedit, pentru a se adapta șablonul destul de probabil tine. Puteți verifica acest lucru trăgând de marginea din dreapta al mouse-ului a ferestrei browser-ului și urmăriți în același timp:

• În ceea ce îngustează lățimea ecranului.
• Așa cum se duce în jos bara laterală.
• Cum de a micșora imaginea.
• Cum imagini în antetul pierdut.
• Ca meniu să stea în două linii.

În cazul în care să descrie cu acuratețe activitatea desfășurată, am făcut următoarele:

1. El a abandonat lățimea fixă ​​a paginii. Eu folosesc max-lățime în loc de lățime.
2. Se determină lățimea elementelor individuale - conținutul de bază a barei laterale, capace, meniuri, subsol în% în raport cu lățimea paginii.
3. Lăsând doar bara laterală dreapta. O bara laterală informații transferate de la stânga la dreapta. În versiunea anterioară au două bare laterale de pe blog a fost - în stânga și dreapta a blocului de conținut.
4. Creat 520 breakpoint pixeli și modificările necesare stabilite de acestea.

Am verificat rezultatele de adaptare pe Google și a primit o evaluare pozitivă și laudă, chiar de la el.

Evident, acest lucru a trebuit să fie adăugate la fișierul header.php descriere meta viewport. În caz contrar, nici un fel. Iată descrierea:

Servicii controale afișa site-ul de pe dispozitive mobile

În timp ce lucrează la o adaptare a modelului nu este foarte util în cazul în care nu aveți aceste dispozitive la îndemână.
Prin urmare, pentru astfel de scopuri, puteți profita de serviciile pe care simuleaza afișarea site-ului pe diferite dispozitive cu diferite lățimea ecranului.

Listele cu cei care se utilizează în lucrarea sa.

Materialele de pe acest subiect