„Mobilizare” generală: trecerea la designul adaptiv. Cerințe de design receptiv. Șablon de blog WordPress receptiv

Astăzi, majoritatea oamenilor accesează Internetul prin intermediul gadgeturi mobile- tablete, telefoane, in acest sens, optimizarea site-ului include si nou nivel. Dacă intră un utilizator și vede că site-ul nu este optimizat pentru dispozitive mobile: imaginea nu poate fi vizualizată, butoanele s-au mutat, fonturile sunt mici și imposibil de citit, designul este denaturat - 99 din 100% pe care îl va părăsi și începeți să căutați altul mai convenabil. Și va bifa caseta că resursa este irelevantă, adică nu corespunde interogării de căutare. Prin urmare, designul paginii trebuie adaptat la diverse dispozitive mobile. Ce s-a întâmplat versiune mobila site-ul, cum să-l faci și ce metodă este cea mai bună de utilizat? Citiți mai multe în acest articol.

Deci sunt patru căi cheie adaptați site-ul pentru o versiune mobilă.

Metoda unu - design receptiv

Șabloanele adaptive implică schimbarea imaginii site-ului web în funcție de dimensiunea ecranului. De regulă, acestea sunt setate la 1600, 1500, 1280, 1100, 1024 și 980 pixeli standard. Interogările sunt folosite pentru implementare. Nu se schimba singur.

Avantajele acestei metode includ:

dezvoltare convenabilă, deoarece structura în sine se adaptează la parametrii ecranului și orice actualizare nu necesită dezvoltarea unui design de la zero, este suficient să corectați CSS și HTML;
o singură adresă URL - utilizatorul nu trebuie să-și amintească mai multe nume, nu este nevoie de o redirecționare (redirecționare de la o adresă la alta), ceea ce poate complica munca unui webmaster și este mai ușor pentru un motor de căutare să sorteze și clasați o resursă cu o singură adresă.

Desigur, șabloanele adaptive au și dezavantajele lor, care, apropo, depășesc avantajele lor. Cu toate acestea, mulți dezvoltatori aderă la acest concept special, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are un design responsive. Deci, dezavantajele:

Designul responsive nu acceptă aceleași sarcini pe un dispozitiv mobil ca pe un desktop. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde cel mai probabil utilizatorul va avea nevoie de informații despre ratele de schimb sau bancomatele din apropiere, atunci acest design este destul de suficient. Dar dacă este o resursă structurată complexă, cu multe secțiuni și subsecțiuni, atunci este puțin probabil să atragă vizitatorii.
Încărcarea lentă transformă site-ul tău preferat într-unul urât. Acest lucru este valabil mai ales pentru resursele în care există o abundență de animații, videoclipuri, ferestre pop-up și altele. elemente active. Datorită greutății mari, pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca și căutarea pozițiilor site - a cădea.
Incapacitatea de a dezactiva versiunea mobilă este un alt dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, nu puteți face nimic pentru a-l deschide, spre deosebire de site-urile unde îl puteți dezactiva și trece la un domeniu obișnuit.

Cu toate acestea, o astfel de versiune mobilă a site-ului rapid, fără abilități și costuri speciale, vă permite să adaptați resursa la orice gadget. Dar, având în vedere deficiențele enumerate, este potrivit pentru resurse mici, simple, cu un minim de informații și multimedia, fără navigare dificilăși animație. Pentru un site complex sunt potrivite alte 2 metode.

Metoda a doua - o versiune separată a site-ului

Această metodă este foarte comună și adesea face un site mai ușor de utilizat pe un dispozitiv mobil. Esența sa este de a crea o versiune separată a paginii, concepută pentru aplicație și situată pe un URL sau subdomeniu separat, de exemplu, m.vk.com. În același timp, funcționalitatea principală este păstrată, designul site-ului pur și simplu arată diferit. Avantajele acestei metode sunt evidente:

interfață de utilizator convenabilă;
este ușor să schimbați și să faceți modificări, deoarece versiunea există separat de resursa principală;
datorită greutății sale reduse, o versiune separată a site-ului funcționează mult mai rapid decât un șablon adaptiv;
Cel mai adesea este posibilă trecerea la versiunea principală a paginii de pe cea mobilă.

Dar acest lucru nu este lipsit de dezavantajele sale:

Mai multe adrese - versiuni desktop și mobile ale site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii transferă adesea din versiunea desktop în versiunea mobilă, dar dacă această pagină nu există în versiunea mobilă, utilizatorul va primi o eroare. Aici apar dificultăți cu motoarele de căutare, cărora le este dificil să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
Versiunea mobilă a site-ului de pe computer, dacă un utilizator o accesează din greșeală, va arăta ridicol, ceea ce poate afecta și traficul.
Această versiune este adesea foarte redusă, desktop, astfel încât utilizatorul va primi funcționalități foarte limitate. Dar, în același timp, dacă ceva lipsește, vizitatorul poate merge la versiunea completa pagini.

În general, un site mobil separat se justifică și este cel mai comun mod de a adapta o resursă pentru dispozitive mobile. El este popular printre marile magazine online, de exemplu, Amazon.

A treia cale este proiectarea RESS

Motorul de căutare Google sprijină în mod activ această direcție a designului mobil. Acesta este cel mai dificil, mai costisitor, dar metoda eficienta adaptați site-ul pentru telefon sau tabletă. Se numește RESS. Aceasta vizează o resursă într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. Pentru Android - de pe GooglePlay și pentru Apple - de pe iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile și au capacitatea de a găzdui diverse tipuri de informații, în timp ce memoria telefonului și traficul de internet nu sunt consumate la fel de mult ca atunci când se vizitează un site prin intermediul unui browser. Ele sunt ușor de accesat, deoarece linkul va fi întotdeauna pe ecranul la îndemână și nu este nevoie să introduceți un nume complex în bara de adrese a browserului.

Desigur, aici există și dezavantaje, precum complexitatea dezvoltării, costurile ridicate ale forței de muncă un numar mare programatori, necesitatea de a face mai multe opțiuni de aspect. Uneori, dispozitivul mobil nu este recunoscut de aplicație. Regulat suport tehnic, corectarea deficiențelor. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei propuse datorită funcționării productive, neîntrerupte.

Cel mai mod ieftin faceți un site web mobil

Toate metodele de mai sus necesită muncă, deși nu întotdeauna lungă și complexă, dar încă plătită pentru webmaster. Dacă nu vedeți o nevoie urgentă pentru o astfel de dezvoltare, o versiune mobilă simplă și gratuită a site-ului vi se va potrivi. Care este cel mai simplu mod de a o face?

Descărcați șabloane speciale (plugin-uri) pentru design responsive. De exemplu, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile și altele. Ele vă vor ajuta să afișați mai corect site-ul pe telefon și veți primi mai multe sfaturi despre ce ar trebui corectat pentru a adapta mai bine pagina la versiunea mobilă.

Cu siguranță, aceasta metoda greu potrivit pentru resurse serioase. Mai degrabă, este oportunitate gratuită Destinat site-urilor mici și simple, blogurilor, fluxurilor de știri. De asemenea, nu trebuie să uităm că motorul de căutare Google, precum Yandex, impune astăzi cerințe serioase versiunilor mobile, așa că există șanse uriașe de a vă scădea clasamentul folosind această metodă.

Cu această metodă, cel mai probabil, reclamele și bannerele pop-up vor fi tăiate, dar pagina se va încărca rapid și fără întârzieri.

Principii de creare a versiunilor mobile

Nu contează dacă versiunea mobilă a site-ului a fost creată gratuit sau cu ajutorul unui staff de webmasteri, dacă a fost realizată folosind sistemul RESS sau folosind un șablon adaptiv. Cel mai important lucru este că, pentru ca acesta să funcționeze eficient, trebuie să respectați câteva extrem de multe principii importante. Deci, cum ar trebui să fie versiunea mobilă a site-ului? Cum să-l faci productiv, eficient și productiv?

Îndepărtăm tot ce nu este necesar

Minimalismul este ceea ce ar trebui să încerce un dezvoltator al unei versiuni mobile a unui site web. Imaginați-vă cât de dificil este să percepeți informații pline de culori, butoane, bannere și pe care trebuie să le parcurgeți la nesfârșit în căutarea materialul necesar. Designul mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, culori de marcă). Este mai bine dacă unul dintre ele este alb. Împărțiți spațiul mic de pe ecran în zone clare și lizibile. Cheile virtuale trebuie să fie vizibile pentru ca utilizatorul să știe clar unde să apese și să vadă - aici este produsul, aici este formularul de completare a datelor, aici sunt informațiile despre livrare și plată.

Toate opțiuni suplimentare, care ar fi util în versiunea desktop și ar face viața mai ușoară utilizatorului, nu va aduce decât complicații aici. Lăsați doar elementele cele mai importante. Animaţie, bannere publicitare, multimedia va încetini cel mai probabil funcționarea site-ului sau a aplicației și va distrage atenția de la lucrul principal.

Aliniere

Problema alinierii nu este mai puțin presantă, deoarece dacă este făcută incorect, utilizatorul va primi doar terminațiile cuvintelor importante. În general, este acceptat să se alinieze stânga și vertical. Imaginați-vă că defilați prin fluxul de știri de pe telefon. Faceți acest lucru de sus în jos, dar nu la stânga sau la dreapta.

O asociere

Când nu există posibilitatea unui lanț lung de tranziții, încercați să combinați mai mulți pași într-unul singur. De exemplu, un site necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde în fiecare celulă individuală există o casă separată, stradă, apartament etc. Pentru a nu forța utilizatorul să încerce să intre în multe mici celule, cereți-i să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, este necesară și deconectarea un numar mare de informație. De exemplu, în meniul derulant aveți o listă cu peste 80 de orașe în care se efectuează livrarea. Grupați-le după regiune, astfel încât utilizatorul să nu fie nevoit să defileze prin această listă imensă. Când mută cursorul peste un centru regional sau regiune, va apărea o altă listă de orașe.

Liste

Apropo, despre liste. Există două dintre ele - fixate în ordine alfabetică sau altă ordine și cu substituție. Alegerea lor depinde de ceea ce va fi listat.

Fixed este convenabil dacă utilizatorul știe exact ce caută. De exemplu, orașul, numărul sau data. A doua opțiune este potrivită pentru nume lungi, complexe sau pentru cazurile în care există multe variații ale aceluiași nume, iar fiecare aduce utilizatorul cu un pas mai aproape de obiectiv. Opțiunea de înlocuire automată este folosită mai des atunci când un vizitator are nevoie de ajutor. De exemplu, un site de tricotat oferă să cumpere ace de tricotat. Utilizatorul introduce interogarea de căutare „Ace de tricotat metal”, iar în indiciu vede „Ace de tricotat 5 mm”, „Ace de tricotat 4,5 mm”, etc.

Completare automată

Acest punct se aplică în special site-urilor unde vând ceva online și trebuie să completați formulare standard pentru plată, livrare etc. Dacă o persoană face o achiziție de pe telefonul său, atunci cel mai probabil nu are timp să ajungă la computer , ceea ce înseamnă că procesul de achiziție trebuie făcut cât mai rapid și convenabil posibil.

Pentru a face acest lucru, formularele pot conține date deja completate, puteți apela la cele mai populare răspunsuri. De exemplu, introduceți data de astăzi, metoda de plată în numerar, orașul, dacă lucrați în aceeași regiune. Ele pot fi modificate, dar dacă atingeți ținta, timpul utilizatorului va fi salvat.

Totul se citește, totul se vede

Când creați designul versiunii mobile a site-ului, amintiți-vă că telefonul fiecăruia este diferit, la fel și viziunea lor. Site-ul dvs. va fi probabil vizualizat pe un ecran mic, astfel încât fonturile ar trebui să fie simple și lizibile, butoanele ar trebui să fie suficient de mari pentru a fi făcute clic fără a fi duse la o altă pagină, iar imaginile ar trebui să se deschidă separat și mari, mai ales dacă despre care vorbim despre magazinul online.

Câteva statistici

Când vorbim despre adaptarea unui site web la dispozitivele mobile, nu se poate să nu recurgă la statistici pentru a înțelege cât de important este acest proces pentru promovarea online.

Numerele sunt după cum urmează. Astăzi, 87% din populație folosește gadgeturi, aparent cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd creșterea comerțul mobil de 100 de ori în următorii 5 ani. Cu toate acestea, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că traficul de Internet și piața e-commerce Doar o mică parte a 5-a este ocupată.

Gândește-te la aceste numere. Are sens să vă adaptați resursa? Desigur ca da. Mai mult, în timp ce sunt atât de multe spatiu liber pe această piață, vă puteți lua propriul segment în ea.

Unde este nevoie de versiunea mobilă?

Utilizarea versiunii mobile este recomandabilă pentru orice platformă care urmărește să obțină un rating ridicat. La urma urmei, acesta este un impact direct asupra utilizatorului, creând condiții confortabile pentru ca acesta să rămână pe site-ul tău.

Următoarele nu pot exista fără o versiune mobilă:

portaluri de știri, deoarece acestea sunt ceea ce majoritatea oamenilor văd de pe telefoanele lor în drum spre serviciu sau școală;
rețelele sociale - din același motiv, plus că există și factorul comunicării online, ceea ce înseamnă că pentru aceasta trebuie creat un chat convenabil, ușor de înțeles;
cărți de referință, site-uri cu navigare etc., unde oamenii se întorc când caută ceva;
Magazinele online sunt o oportunitate de a atrage clienți care nu pierd timpul la cumpărături, ci cumpără totul prin internetul mobil.

În loc de o concluzie

Astăzi tehnologii mobile sunt într-o etapă de creștere și dezvoltare activă, prin urmare, depunând eforturi pentru a obține liderul pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cererilor tot mai mari ale utilizatorilor, site-urile trebuie să fie permanent modernizate și adaptate la diferite dispozitive. Este clar că, dacă o persoană este incomod să fie pe o anumită resursă, nu poate obține informații despre un produs sau preț acolo, să plaseze o comandă, să afle despre livrare, atunci va găsi site-ul unde toate acestea vor deveni posibile. Prin urmare, pentru a câștiga competiția, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Versiunea mobilă a site-ului Android sau iOS vă va ajuta să faceți acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, creând un site nou pe un subdomeniu și trecerea la acesta prin redirecționare, folosind șabloane gratuite sau creație aplicatie de mobil, cu ajutorul căruia utilizatorul poate intra și rămâne mai comod pe pagină.

Din 21 aprilie 2015, motorul de căutare Google, iar din 2 februarie 2016, Yandex, au adus modificări regulilor lor de publicare a paginilor pe interogare de căutare utilizator de internet.

Acum, pentru cei care folosesc internetul de pe dispozitive mobile, pozitii de top motorul de căutare va afișa în primul rând site-uri adaptive, adică acele site-uri care vor fi cel mai convenabil de vizualizat dispozitive mobile.

Datorită noilor reguli motoare de căutare, pentru o mai bună relevanță a resursei pe Internet, site-ul trebuie să suporte acum design adaptiv. Va trebui să refaceți puțin site-ul și gata. :)

Pentru a înțelege cum funcționează un site web receptiv, să creăm cel mai simplu șablon din care vom crea unul adaptiv:

Design adaptiv

corp(
fundal: #CEE9E8;
}
p, br, h1, h2, h3, h4, h5, h6 (
padding-stânga: 20px;
umplutură-dreapta: 20px;
}
#wrapper(
fundal: #ccc;
latime: 100%;
lățime maximă: 1000px;
marja: 0 auto;
margine-sus: 5px;
inaltime: auto !important;
}

#antet(
chenar: 0px solid #000;
fundal: #00cc00;
latime:100%;
lățime maximă: 1000px;
înălțime: 150px;
margine:0 auto;
margin-top:0px;
}
#header h1 (
dimensiunea fontului: 3.5em;
text-shadow: niciunul;
text-align: centru;
captuseala-top: 0,5em;
}

#conținut #colDreapta(
fundal: #00ccff;
plutește la stânga;
margine-stânga: 0%;
latime:25%;
}

#conținut #colLeft(
plutește la stânga;
margine-dreapta:0px;
latime:75%;
}

#subsol (
fundal: #F0DA0E;
latime: 100%;
lățime maximă: 1000px;
inaltime: 90px;
marja: 0 auto;
căptușeală-top: 0.7em;
clar: ambele;
}

/* Porniți Wrapper */
Siglă
/* Începe conținut */
Design adoptiv
Bara laterală
/* Încheierea conținutului */
subsol
/* End Wrapper */

#wrapper este cadrul site-ului, ceea ce unește întreg șablonul este situat înainte de eticheta de închidere;

#header este antetul site-ului; acesta poate fi plasat fie înainte, fie după wrapper.

#header h1 - logo.

#conținut - servește ca element bloc, combină colLeft și colRight.

#colDreapta - bară laterală.

#colLeft - spațiu pentru conținut.

#footer - subsolul site-ului.

Toate aceste elemente, header, colLeft, colRight, footer trebuie să fie independente unele de altele. Ele pot fi mutate și schimbate ca în jocul „Tag”. Și toate acestea vor depinde de ce dispozitiv mobil va fi vizualizat site-ul (dimensiunea afișajului său). Nu mă refer exact acest șablon, este cel mai simplu și nu te poți mișca prea mult aici. Alte șabloane adaptive care au coloane suplimentare unul sau două, un meniu orizontal suplimentar etc., dar mai multe despre asta mai târziu.

Iată ce s-a întâmplat, așa cum se vede pe monitorul unui computer personal:

Pe măsură ce dimensiunea ecranului scade, site-ul începe să se micșoreze, iar textul devine mic și greu de citit.

Metaetichetă Viewport

Pentru a vă asigura că textul rămâne aceeași dimensiune pe ecranele mici, trebuie să adăugați o metaetichetă pentru vizualizare între etichete:

Design adaptiv

textul va deveni clar lizibil, dar apoi va apărea o bară de defilare orizontală, deoarece două blocuri nu se potrivesc orizontal pe afișaj.

Și acest lucru nu este nici frumos, nici convenabil pentru utilizator!

Ecran media de design adaptiv al site-ului web

Pentru a afișa un site web în mod normal pe telefoane mobile cu extensii diferite, utilizați interogări media pe ecranul media. Puțin mai sus, am vorbit despre jocul „Tag”. Deci, cu ajutorul ecranului media, se creează un design adaptiv pentru orice ecran al unui dispozitiv mobil. Elementele site-ului pot fi schimbate de la stânga la dreapta, de sus în jos și undeva mărite sau reduse. Puteți crea propriul design adaptiv al site-ului web pentru fiecare dispozitiv mobil.

În exemplul nostru, bara de site nu este poziționată corect folosind ecranul media, o vom coborî sub conținut; Să facem asta nu numai pentru această extensie, dar și pentru dispozitivele mobile cu extensie de la 240px la 375px inclusiv. Adică, pe un telefon cu o rezoluție a ecranului mai mare de 375px, bara de site nu va mai coborî.

Ecran @media și (lățime minimă: 240 px) și (lățime maximă: 375 px)

#subsol (
fundal: #F0DA0E;
latime: 100%;
lățime maximă: 1000px;
inaltime: 90px;
marja: 0 auto;
clar: ambele;
}

#antet (
dimensiunea fontului: 0.7em;
}
#wrapper #colLeft (
float:none;
latime:100%;
margine-dreapta:0px;
}
#wrapper #colRight (
margine-stânga:0px;
margine-sus: 25px;
float:none;
latime:100%;
}

Această interogare media specifică reguli pentru dispozitivele mobile cu un ecran nu mai mare de 375 px

#header - în antetul site-ului am redus dimensiunea logo-ului, deoarece cu o extensie mică este posibil să nu se potrivească.

#wrapper #colLeft - a anulat alinierea stângă float:none, a făcut lățimea conținutului Ecran complet lățime:100%, iar bara laterală scade sub conținut.

#wrapper #colRight - a făcut indentarea barei laterale din marginea conținutului-top:25px, width:100% din lățimea barei de site pe ecran complet.

Ecran @media și (lățime minimă: 376 px) și (lățime maximă: 768 px)

Ecran @media și (lățime minimă: 376 px) și (lățime maximă: 768 px) (

#wrapper #colLeft (
float:none;
latime:100%;
margine-dreapta:0px;
}
#wrapper #colRight (
margine-stânga:0px;
margine-sus: 25px;
float:none;
latime:100%;
}
}

Ecran @media și (lățime minimă: 240 px) și (lățime maximă: 375 px) (

#antet (
dimensiunea fontului: 0.7em;
}
#wrapper #colLeft (
float:none;
latime:100%;
margine-dreapta:0px;
}
#wrapper #colRight (
margine-stânga:0px;
margine-sus: 25px;
float:none;
latime:100%;
}
}

Mi se pare mai convenabil să creez reguli separat pentru fiecare extensie populară sau nu atât de populară, cu ajustarea precisă a oricărui element și dimensiunea fontului pe dispozitiv:

Ecran @media și (lățime maximă: 768 px)
ecran @media și (lățimea maximă: 640px)
Ecran @media și (lățime maximă: 375 px)
...

Dar asta nu înseamnă că o interogare media extinsă ca și (lățime minimă: 376 px) și (lățime maximă: 768 px), ar trebui ignorat. Cel extins va fi destul de suficient în CSS, de exemplu, unde nu este nimic de ascuns, sau pentru a reduce ceva separat la schimbarea dimensiunii ecranului.

Unde să testați un site web responsive

Vedeți cum arată pe diferite dispozitive mobile cu diferite ecrane, foarte convenabil pentru quirktools.com sau direct din browser. Deschideți site-ul dvs. făcând clic butonul corect> Vizualizați codul, căutați instrumentul de redimensionare a ecranului. În browserul Google Chrome și Yandex, acesta este situat în partea de sus în centru.

Realizarea celui mai simplu site responsive s-a dovedit a nu fi atât de dificilă :) Desigur, acest lucru nu este totul aici, puteți scrie interogări media și le puteți scrie diferite extensii. Scopul a fost de a descrie însuși mecanismul de construire a unui site web adaptiv.

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

Pe parcursul existenței acestui site, am schimbat șablonul de mai multe ori și chiar l-am creat pe al meu de la zero.
Una dintre sarcinile principale atunci când alegeți un ș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ă căi diferite. Unii folosesc javascript, alții folosesc altceva. Dar eu cred că cel mai simplu și Calea cea buna este receptiv folosind CSS.

Cum să faci un aspect de site responsiv

In primul rand, Dacă decideți să creați un design web receptiv, introduceți următorul cod între etichete:

Ce prost am fost că nu am făcut asta imediat când încercam să fac un aspect adaptiv al site-ului!!!
Problema browserelor mobile este scalarea aspectului site-ului web, chiar și a celor adaptive.

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 la dispozitivul 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 socat. 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 pare că dacă nu scrieți codul pe care l-am indicat mai sus, browser mobil nu înțelege că site-ul este responsive și pur și simplu încearcă să reducă pagina site-ului astfel încât să se potrivească ecran mic telefon mobil

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

Adaptiv Aspect CSS interogări media

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

Ce zici de asta? Da, foarte simplu. ÎN fișier 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 maximum 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.

Cel mai permisiuni importante ecran, cu aspect adaptiv

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

Aceste permisiuni trebuie subliniate și acordate Atentie speciala cu aspect adaptiv. Acestea sunt cele mai comune tipuri de rezoluții de ecran.

design responsiv bootstrap

Foarte convenabil de utilizat pentru a crea adaptive layout bootstrap. 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 prin cantitatea necesară părți. De exemplu, acest design:

Va fi creat un bloc de 10 părți lățime 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 sunt angajați în aspectul adaptiv al site-urilor web.

Ei bine, cum vă place articolul? Tot 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.

Aspectul adaptiv modifică designul paginii în funcție de comportamentul utilizatorului, platformă, dimensiunea ecranului și orientarea dispozitivului și este o parte integrantă a dezvoltare web modernă. Vă permite să economisiți semnificativ și nu trebuie să desenați un nou design pentru fiecare rezoluție, ci să schimbați dimensiunea și locația elementelor individuale.

Acest articol va analiza principalele elemente ale site-ului și modul de adaptare a acestora.

Reglarea rezoluției ecranului

În principiu, puteți împărți dispozitivele în diferite categorii și puteți proiecta pentru fiecare dintre ele separat, dar acest lucru va dura prea mult timp și cine știe ce standarde vor fi în cinci ani? În plus, conform statisticilor, avem o gamă întreagă de rezoluții diferite:

Devine evident că nu vom putea continua să proiectăm pentru fiecare dispozitiv separat. Dar ce să faci atunci?

Soluție parțială: faceți totul flexibil

Bineînțeles că nu este mod perfect, dar rezolvă majoritatea problemelor.

Ethan Marcotte a creat un șablon simplu care demonstrează utilizarea aspectului receptiv:

La prima vedere poate părea că totul este ușor, dar nu este. Aruncă o privire la logo:

Dacă reduceți întreaga imagine, inscripțiile vor deveni ilizibile. Prin urmare, pentru a salva sigla, imaginea este împărțită în două părți: prima parte (ilustrare) este folosită ca fundal, a doua (logo) își schimbă dimensiunea proporțional.

Elementul h1 conține o imagine ca fundal, iar imaginea este aliniată la fundalul containerului (antet).

Imagini flexibile

Lucrul cu imagini este una dintre cele mai importante probleme atunci când lucrați cu design responsive. Există multe moduri de a redimensiona imaginile, iar cele mai multe dintre ele sunt destul de simplu de implementat. O soluție este utilizarea lățimii maxime în CSS:

Imagine (lățimea maximă: 100%;)

Lățimea maximă a unei imagini este de 100% din lățimea ecranului sau a ferestrei browserului, deci cu cât lățimea este mai mică, cu atât imaginea este mai mică. Rețineți că lățimea maximă nu este acceptată în IE, așa că utilizați lățime: 100% .

Metoda prezentată este o opțiune bună pentru creare imagini adaptive, dar schimbând doar dimensiunea, vom lăsa greutatea imaginii la fel, ceea ce va crește timpul de încărcare pe dispozitivele mobile.

O altă modalitate: imagini receptive

Tehnica, introdusă de Filament Group, nu numai că redimensionează imaginile, ci și comprimă rezoluția imaginilor pe ecrane mici pentru a accelera încărcarea.

Această tehnică necesită mai multe fișiere disponibile pe Github. Mai întâi luăm fișierul JavaScript ( rwd-images.js), dosar .htaccessȘi rwd.gif(fișier imagine). Apoi folosim ceva HTML pentru a lega rezoluțiile mari și mici: mai întâi imagine mică cu prefix .r(pentru a arăta că imaginea ar trebui să răspundă), apoi conectați-vă la imaginea mare folosind data-fullsrc:

Pentru orice ecran mai lat de 480 px, va fi încărcată o imagine cu rezoluție mai mare ( largeRes.jpg), iar pe ecranele mici se va încărca ( smallRes.jpg).

Pe iPhone și iPod Touch are o caracteristică aparte: un design creat pentru ecrane mari, pur și simplu se va micșora într-un browser cu o rezoluție mică, fără defilare sau suplimentare aspect mobil. Cu toate acestea, imaginile și textul nu vor fi vizibile:

Pentru a rezolva această problemă, utilizați metaetichetă:

Dacă scara inițială este egală cu unu, lățimea imaginilor devine egală cu lățimea ecranului.

Structură personalizabilă de aspect al paginii

Pentru modificări semnificative ale dimensiunii paginii, poate fi necesar să modificați aranjamentul general al elementelor. Este convenabil să faceți acest lucru prin dosar separat cu stiluri sau, mai eficient, printr-o interogare media CSS. Nu ar trebui să existe probleme, deoarece majoritatea stilurilor vor rămâne aceleași și doar câteva se vor schimba.

De exemplu, ai fisierul principal cu stiluri care definesc #wrapper , #content , #sidebar , #nav împreună cu culorile, fundalul și fonturile. Dacă stilurile principale vă fac aspectul prea îngust, scurt, lat sau înalt, puteți identifica acest lucru și include stiluri noi.

style.css (principal):

/* Stiluri de bază care vor fi moștenite de foaia de stil copil */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemente structurale */ #wrapper( lățime: 80%; margine: 0 auto; fundal: #fff; padding: 20px; ) #conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) # sidebar-left( lățime: 20%; float: stânga; margin-right: 3%; ) #sidebar-right( lățime: 20%; float: stânga; )

mobile.css (copil):

#wrapper( lățime: 90%; ) #conținut( lățime: 100%; ) #sidebar-left( lățime: 100%; clar: ambele; /* Stiluri suplimentare pentru noul design */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( lățime: 100%; clear: ambele; /* Stil suplimentar pentru noul nostru aspect */ border-top: 1px solid #ccc; margin-top: 20px; )

Pe ecran lat stânga și dreapta panouri laterale se potriveste bine in lateral. Pe ecranele mai înguste, aceste blocuri sunt situate unul sub celălalt pentru o mai mare comoditate.

Interogări media CSS3

Să vedem cum puteți utiliza interogări media CSS3 pentru a crea modele receptive. min-width specifică lățimea minimă a ferestrei sau a ecranului browserului la care vor fi aplicate anumite stiluri. Dacă orice valoare este sub min-width , stilurile vor fi ignorate. max-width face opusul.

@media ecran și (min-lățime: 600px) ( .hereIsMyClass ( lățime: 30%; float: dreapta; ) )

Interogarea media va funcționa numai atunci când lățimea minimă este mai mare sau egală cu 600 px.

Ecran @media și (lățime maximă: 600 px) ( .aClassforSmallScreens (clar: ambele; dimensiunea fontului: 1.3em; ) )

În acest caz, clasa ( aClassforSmallscreens) va funcționa atunci când lățimea ecranului este mai mică sau egală cu 600 px.

În timp ce lățimea minimă și lățimea maximă se pot aplica atât lățimii ecranului, cât și lățimii ferestrei browserului, este posibil să fie nevoie să lucrăm doar cu lățimea dispozitivului. De exemplu, pentru a ignora browserele deschise într-o fereastră mică. Puteți utiliza min-device-width și max-device-width pentru aceasta:

@media ecran și (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen și (min-device-width: 768px) ( .minimumiPadWidth ( clar: ambele; margin-bottom) : 2px solid #ccc) )

În special pentru iPad, interogările media au proprietatea orientare, ale căror valori pot fi fie peisaj(orizontală), sau portret(vertical):

@ecran media și (orientare: peisaj) ( .iPadLandscape ( lățime: 30%; float: dreapta; ) ) @ecran media și (orientare: portret) ( .iPadPortrait ( clar: ambele; ) )

De asemenea, puteți combina valorile interogărilor media:

Ecran @media și (lățime minimă: 800 px) și (lățime maximă: 1200 px) ( .classForaMediumScreen ( fundal: #cc0000; lățime: 30%; float: dreapta; ) )

Acest cod va rula numai pentru ecrane sau ferestre ale browserului cu lățime cuprinsă între 800 și 1200 px.

Încărcați o anumită foaie de stil pentru sensuri diferite interogările media se pot face astfel:

JavaScript

Dacă browserul dvs. nu acceptă interogări media CSS3, atunci înlocuirea stilului se poate face folosind jQuery:

$(document).ready(function())( $(window).bind(„resize”, resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Dacă lățimea este mai mică de 600 px , foaia de stil mobilă este utilizată if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Dacă lățimea este mai mare de 600 px, se folosește foaia de stil pentru desktop $("link").attr((href: "style.css")); ) ) ));

Afișaj opțional conţinut

Abilitatea de a micșora și rearanja elementele pentru a se potrivi pe ecrane mici este excelentă. Dar aceasta nu este cea mai bună opțiune. Dispozitivele mobile prezintă de obicei un set mai larg de modificări: navigare simplificată, conținut mai concentrat, liste sau rânduri în loc de coloane.

Iată marcajul nostru:

Conținut principal O bară laterală din stânga O bară laterală din dreapta

style.css (principal):

#conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) #sidebar-left( lățime: 20%; float: stânga; margine-dreapta: 3%; ) #sidebar-right( lățime: 20 %; float: left ) .sidebar-nav( display: none; )

mobile.css (simplificat):

#conținut( lățime: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Dacă dimensiunea ecranului este redusă, puteți, de exemplu, să utilizați un script sau un fișier de stil alternativ pentru a mări spațiul alb sau pentru a înlocui navigarea pentru o mai mare comoditate. Astfel, având capacitatea de a ascunde și afișa elemente, de a schimba dimensiunea imaginilor, elementelor și multe altele, puteți adapta designul oricărui dispozitiv și ecran.

Toată lumea vorbește despre design web receptiv. Dar asta înseamnă că toată lumea înțelege pentru ce este?

Designul responsive nu se referă doar la dezvoltarea de site-uri web pentru dispozitive mobile, dar aici vorbim despre adaptarea layout-urilor pentru marimi diferite ecran (vizualizări).

În acest tutorial, ne vom uita la principiile de bază din spatele designului web responsive pentru a înțelege mai bine această tehnică. În continuare, vom crea un site web receptiv care se va scala perfect pe ecrane mari și mici. Designul web responsive a devenit foarte popular în rândul din ce în ce mai mulți oameni care folosesc dispozitive mobile precum iPhone, iPad, BlackBerry și alte smartphone-uri și tablete compatibile cu internet.

Este important să înțelegeți că site-ul nu trebuie creat pentru un anumit desktop sau dispozitiv mobil. Ceea ce este important aici este capacitatea aspectului de a se adapta la diferite dimensiuni.

Frustrarea utilizatorului

Unii oameni cred că este normal ca utilizatorul să reducă funcționalitatea și să elimine conținutul pe care îl consideră neimportant. Dar cum poți fi sigur că informațiile pe care le-ai tăiat sau mutat pe o pagină secundară nu sunt conținutul care este cel mai important pentru mine?!

În primul rând, trebuie să înțelegeți că designul responsive nu este doar despre designul mobil. În al doilea rând, dezvoltarea unui site web responsive bun necesită mult timp și efort, nu doar ajutorul interogărilor media. Cu un număr mare și în creștere de dispozitive web, este foarte important să oferiți site-ului dvs. șansa de a facilita în mod eficient experiența utilizatorului.

Pentru un site web responsive, putem folosi același cod pentru ambele calculator desktop, și pentru un dispozitiv mobil. Acest lucru este convenabil deoarece nu trebuie să ajustam separat conținutul pentru fiecare dispozitiv. Dar multe site-uri web își ascund conținutul, considerându-l inutil pentru utilizatorii de telefonie mobilă. Există două probleme cu asta:

În primul rând, penalizează efectiv utilizatorii de telefonie mobilă care navighează pe site.
În al doilea rând, stilurile ascunse în CSS nu înseamnă că conținutul nu se încarcă. Acest lucru poate avea un impact masiv asupra eficienței, în special pentru cei cu conectivitate slabă.

Prin urmare, cea mai bună abordare a dezvoltării site-ului web este să luați în considerare mobil sau dispozitive mici, In primul rand. În acest fel, vă puteți concentra pe cele mai importante informații pe care site-ul dvs. trebuie să le livreze. Și apoi, dacă este necesar, puteți folosi metode condiționaleîncărcări în care grilele dvs. de aspect, imaginile mari și interogările media sunt stratificate peste un design de ecran mic existent.

Ghid pas cu pas

Pentru acest tutorial, am creat un site web care se adaptează perfect între ecrane mari și mici. Salvați tot conținutul, pe toate dimensiunile de ecran. Și cu ajutorul interogărilor media, navigarea va fi comutată de la afișare orizontală la afișare verticală, pentru dispozitivele mai mici.

Un element cheie al flexibilității în designul receptiv este lățimea fluidă a aspectului. Tot ce trebuie să faceți este să creați lățimi de wrapper, conținut și coloane care se vor adapta la diferite lățimi ale dispozitivului. Nu este nimic nou, dar este mai important acum ca niciodată. Pentru a menține lucrurile simple, vom crea o pagină fluidă constând din navigare, o imagine principală și două coloane care ține cont de plasarea pe dispozitive de diferite dimensiuni. Am inclus și respond.min.js, care permite interogărilor media să funcționeze în IE6-8.

Principal Structura HTML:

Demo de site responsive

Derulați la conținut

Siglă

Acasă
Cumpără
Serviciu
Contacte

Poveste

Istoria modelului Mercedes SL datează din 1954 - atunci nemții au prezentat Mercedes 190 SL cu două uși la Salonul Auto de la New York. Vă puteți imagina nivelul de șoc estetic în rândul vizitatorilor salonului auto de atunci. Sub caroseria de o frumusețe captivantă se afla o platformă scurtată de la Mercedes W120 Ponton sedan și o monococă din oțel. Suspensia era complet independentă - cu un braț dublu în față și arbori de axă oscilante în spate. Lungime - 4290 mm, distanta intre axe - 2400 mm.

Când vine vorba de CSS, setarea lățimii maxime este o idee bună, va împiedica scalarea site-ului pe ecrane uriașe, dar nu va împiedica micșorarea paginilor. Una dintre principalele probleme atunci când treceți de la lățime fixă la fluidă este imaginile. În CSS, există o soluție simplă la această problemă. Doar setați lățimea imaginii la 100%. Să adăugăm și automat pentru înălțimea imaginilor pentru a evita imaginile stricate în Opera și Safari pe ecrane mici:

/* Aspect */ #wrapper ( lățime: 96%; lățime maximă: 920px; margine: automată; padding: 2%; ) #principal ( lățime: 60%; margine-dreapta: 5%; float: stânga; ) deoparte ( lățime: 35%; float: dreapta; ) /* Logo H1 */ antet h1 ( înălțime: 98px; lățime: 216px; float: stânga; afișare: bloc; fundal: url(images/sllogo.png) 0 0 no- repetare; text-indent: -9999px ) /* Navigare */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul li a ( text-decoration:none; color:#333;) #skipTo ( afișare: none; ) #skipTo li ( fundal: #ccc; ) /* Imagine principală*/ #banner ( float: stânga; margin-bottom: 15px; width : 100% ) #banner img ( lățime: 100%; înălțime: auto; )

Imaginea ta va fi afișată pe ea element părinte lățimea completă și se va micșora odată cu ea. Doar asigurați-vă că lățimea maximă a imaginilor nu depășește lățimea maximă a containerului său.

Utilizarea imaginilor mari poate afecta timpul de încărcare. Prin urmare pentru mici ecrane, există o metodă receptivă pentru imagini care detectează dimensiunea ecranului utilizatorului și produce o imagine mai mică/mai mare în funcție de ceea ce este necesar. Această metodă este încă greu de numit ideală, dar merită totuși luată în considerare.

Comutați navigarea principală

Motivul principal pentru care trebuie să vă schimbați navigarea este din cauza minimizării care apare, ceea ce poate face ca butoanele să nu fie citite și să fie dificil de apăsat. Utilizarea acestei metode va ușura viața utilizatorului. Veți observa, de asemenea, în cod că am făcut modificări la secțiunile #main și aside pentru a le combina într-o singură coloană.

/* Interogări media */ @media ecran și (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) header nav li ( margine: 0; fundal: #ccc; display: block; margin-bottom: 3px; ) header nav a ( afișare: bloc; padding: 10px; text-align: center; )

Veți observa că pe unele dispozitive mobile, site-ul dvs. se va micșora automat pentru a se potrivi. a acestui ecran. Acest punct devine o problemă atunci când trebuie să creștem dimensiunea ecranului pentru a naviga prin conținut incomod.

Pentru a permite interogărilor media să intre în vigoare, un site obișnuit optimizat pentru mobil și receptiv ar trebui să conțină ceva de genul următor:

Proprietatea width este responsabilă pentru dimensiunea ferestrei de vizualizare. Poate fi setat la un anumit număr de pixeli, lățime=960 sau la valoarea lățimii dispozitivului, care este lățimea ecranului în pixeli la scară de 100%. Proprietatea initial-scale controlează scara la prima încărcare a paginii. proprietățile de scară maximă, scară minimă și scalabile de utilizator controlează modul în care utilizatorii pot scala pagina (mai mare/mai mică).