Design web adaptabil și receptiv. Șablon adaptiv pentru WordPress. Adaptabilitate „cu puțin sânge”

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 un adaptiv folosind CSS.

Cum să faci un aspect de site responsiv

In primul rand, dacă ai început să te machiezi design adaptiv site-ul web, 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 dovedește că dacă nu scrieți codul pe care l-am indicat mai sus, browserul mobil nu înțelege că site-ul este adaptiv ș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:

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 aspect care se ocupă de aspectul adaptiv al site-urilor.

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 receptiv, 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.

Astăzi, majoritatea oamenilor accesează Internetul prin intermediul gadgeturilor mobile - tablete, telefoane, iar în acest sens, optimizarea site-ului include și nou nivel. Dacă un utilizator intră ș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%, că va pleacă și începe să cauț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 este o versiune mobilă a unui site web, cum se realizează și care este cea mai bună metodă 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;
unu adresa 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 să clasifice 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 opri versiune mobila- 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 mici, resurse simple cu un minim de informatii si multimedia, fara 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 există și aici câteva dezavantaje:

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 tipuri variate informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate la fel de mult ca atunci când vizitați 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 adresa browser.

Desigur, aici există și dezavantaje, cum ar fi 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 ieftin mod de a face 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 ar trebui să uităm asta motor de căutare Google, ca și Yandex, astăzi impune cerințe serioase pentru versiunile mobile, așa că există o șansă mare de a vă reduce poziția 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. Design mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, cele de marcă). Este mai bine dacă unul dintre ele este alb. Împărtășiți spațiul ecran micî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 fluxuri de stiri in 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ă, stradă, apartament separat, 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 intră interogare de căutare„Ace de tricotat din metal”, dar în sfatul instrumentului vede „ace de tricotat de 5 mm”, „ace de tricotat de 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ție, 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, crearea unui site nou pe un subdomeniu și mutarea la acesta prin redirecționare, folosind șabloane gratuite sau crearea unei aplicații mobile cu care utilizatorul poate intra mai convenabil. si ramai pe pagina.

Aspectul adaptiv modifică designul paginii în funcție de comportamentul utilizatorului, platformă, dimensiunea ecranului și orientarea dispozitivului și este o parte integrantă a dezvoltării web moderne. Vă permite să economisiți semnificativ și să nu trebuie să desenați design nou pentru fiecare rezoluție, dar modificaț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 crearea de imagini adaptive, dar schimbând doar dimensiunea, vom lăsa greutatea imaginii la fel, motiv pentru care timpul de încărcare va fi mai mare. dispozitive mobile va creste.

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 permisiunile mari și mici: mai întâi imagine mică cu prefix .r(pentru a arăta că imaginea ar trebui să fie adaptativă), apoi un link către imagine 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, îl puteți identifica ș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.

Ecran @media și (lățime minimă: 600 px) ( .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 stilurilor se poate face cu 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șare opțională a conținutului

Abilitatea de a micșora și rearanja elementele pentru a se potrivi pe ecrane mici este excelentă. Dar 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 fișier alternativ cu stiluri 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.

Tema acestei luni este receptivitatea site-ului, așa că am decis să vorbim mai multe despre ce este aceasta. design web responsive, de ce este nevoie și care sunt principiile de bază ale designului web responsive.

Designul web adaptiv este o direcție destul de nouă în proiectarea resurselor web, dar acum este unul dintre principalii indicatori ai calității site-ului web. În acest articol vom vorbi despre ce este responsive web design și ce poate fi acesta.

Ce este designul web responsive

Design web responsive (în Limba engleză„Responsive web design”) este designul paginilor web care oferă o experiență excelentă pentru utilizator. diverse dispozitive ah, conectat la internet.

Aceasta înseamnă că același site poate fi vizualizat cel mai mult diferite dispozitive, indiferent de rezoluția și formatul ecranului - smartphone-uri, tablete, laptopuri etc. În același timp, vizualizarea va fi la fel de convenabilă pentru toate formatele - utilizatorii de dispozitive mobile, de exemplu, nu vor trebui să extindă zonele individuale ale site-ului pentru a nu pierde linkul dorit.

Designul responsive are ca scop să facă paginile web și afișarea conținutului lor adecvate pentru dispozitivul pe care sunt vizualizate.

De ce ai nevoie de design web responsive?

1) O mare varietate de dispozitive de pe care puteți accesa Internetul. În prezent, există multe dispozitive pe care oamenii le folosesc, inclusiv pentru a accesa Internetul. Toate aceste dispozitive variază în ceea ce privește dimensiunea ecranului, rezoluția și, prin urmare, modul în care un site web poate fi afișat pe ele. Prin urmare, este important ca site-ul dvs. să arate bine și să se afișeze corect pentru orice utilizator, indiferent de dispozitivul pe care îl folosește.

2) Popularitatea dispozitivelor mobile cu acces la Internet și creșterea traficului de internet mobil. Odată cu popularitatea tot mai mare a dispozitivelor mobile, numărul de utilizatori care accesează site-uri web de pe acestea a crescut considerabil, așa că nu le mai puteți ignora pur și simplu - nu este vorba de una sau două persoane la fiecare șase luni, aceasta este o parte semnificativă a audienței dvs., și ar trebui să fie confortabil folosind site-ul dvs. (altfel nu o vor face).

3) Informații urgente. Dacă resursa dumneavoastră conține știri/informații urgente și există o mare probabilitate ca utilizatorul să fie nevoie să citească aceste informații de pe telefon (pentru că nu are alte dispozitive la îndemână) în acest moment timp, trebuie avut grijă să se asigure că are posibilitatea de a face acest lucru.

Diferența dintre un site web responsive și o versiune (aplicație) mobilă a unui site web

Versiunile mobile ale site-urilor web și aplicațiilor mobile, special concepute pentru diverse dispozitive mobile, rezolvă și problema ușurinței vizualizării site-ului, dar au unele dezavantaje.

1) Pentru fiecare tip sistem de operare aveți nevoie de propria dvs. versiune a aplicației/site-ului web. Acest lucru necesită resurse suplimentare, atât timp, cât și bani.

2) Necesitatea de a descărca aplicația. Pentru a utiliza aplicația dvs., utilizatorii trebuie să o descarce. Acest lucru necesită un efort suplimentar din partea utilizatorilor și mulți nu vor face acest lucru decât dacă sunt absolut siguri că au într-adevăr nevoie de aplicație și intenționează să o folosească în mod regulat.

3) Separarea traficului. Din punct de vedere al promovării site-ului, o aplicație mobilă nu este convenabilă deoarece împarte tot traficul de resurse în trafic pe site și trafic pe aplicații, ceea ce va arăta ca mai puțin trafic pe site.

4) Necesitatea integrării materialelor de șantier. În cazul unei aplicații mobile, trebuie fie să sincronizați site-ul cu aplicația ( resurse aditionale), sau faceți o muncă dublă pentru a umple șantierul și aplicația cu materiale.

Spre deosebire de aplicatii mobile, designul adaptiv este o adresă de site, un design, un sistem de management și conținutul site-ului.

Desigur, designul adaptiv are și dezavantajele sale, principalul dintre acestea fiind noutatea relativă a tehnologiei și, ca urmare, lipsa unor specialiști buni și a cunoștințelor despre proiectarea site-urilor web adaptive.

Principiile designului receptiv

Designul începe cu o versiune responsive a site-ului web pentru dispozitive mobile. În această etapă, designerii se străduiesc să transmită corect sensul și ideile principale folosind un mic ecran și doar o coloană. Conținutul este redus dacă este necesar, eliminând cele inutile blocuri de informațiiși lăsând cele mai importante.

Proiectare pentru dispozitive mobile din primele etape („mobile first”);
Utilizarea unui aspect flexibil, bazat pe grilă;
Utilizarea imaginilor flexibile;
Lucrul cu interogări media;
Aplicarea îmbunătățirii incrementale.

Tipuri layout-uri adaptive

Articolul despre Habrahabr prezintă principalele tipuri de layout-uri adaptive care există în prezent.

1) cauciuc

Ușor de implementat și evident pentru tipul de utilizator de prezentare a site-ului. Blocurile principale sunt comprimate la lățimea ecranului dispozitivului mobil, unde acest lucru este imposibil - sunt rearanjate într-o bandă lungă.

2) Transferarea blocurilor

O modalitate evidentă pentru un site cu mai multe coloane: atunci când reduceți lățimea ecranului blocuri suplimentare(barele laterale) sunt mutate în partea de jos a aspectului.

3) Schimbați aspectul

Această metodă este cea mai convenabilă atunci când citiți un site de pe diferite dispozitive: este dezvoltat un aspect separat pentru fiecare rezoluție a ecranului. Metoda necesită multă muncă, prin urmare mai puțin populară decât cele două anterioare.

Schimbarea layout-ului Fragment al site-ului LukeW Ideeare + Design 4) Adaptabilitate „cu costuri reduse”

O metodă foarte simplă, potrivită pentru site-uri simple. Obținut prin simpla scalare a imaginilor și a tipografiei. Nu foarte popular, pentru că... lipsit de flexibilitate.

Adaptabilitate cu puțin sânge. Fragment din site-ul LukeW Ideation + Design 5) Panouri

O metodă care a venit din aplicațiile mobile, unde meniu suplimentar poate apărea la atingerea orizontală sau verticală. Principalul dezavantaj- acțiuni neevidente pentru utilizator: este foarte neobișnuit să vezi navigarea mobilă pe un site web. Dar, în timp, metoda poate deveni destul de populară.

Trebuie amintit că machetele prezentate mai sus nu sunt solutii universale- pentru fiecare proiect este necesara alegerea celei mai potrivite metode pentru nevoi si capacitati.

Crearea unui șablon de site web receptiv este destul de ușoară, dar menținerea elementelor echilibrate în toate punctele din șablon este o adevărată artă. ÎN această lecție Prezintă 5 metode de utilizat în CSS pentru un șablon receptiv. Sunt unele foarte simple Proprietăți CSS, cum ar fi lățimea minimă, lățimea maximă, depășirea și valorile relative, dar toate joacă un rol important în dezvoltarea designurilor receptive.

1. Video adaptiv

Acest truc CSS permite videoclipului încorporat să se întindă până la limitele specificate.

Video (poziție: relativă; padding-bottom: 56,25%; înălțime: 0; overflow: ascuns; ) .video iframe, .video object, .video embed (poziție: absolut; sus: 0; stânga: 0; lățime: 100% ; înălțime: 100% )

2. Lățimea minimă și maximă

Proprietatea max-width vă permite să setați lățimea maximă a unui element. Ar trebui folosit pentru a preveni extinderea unui element dincolo de un anumit cadru.

Container cu proprietatea de lățime maximă

Exemplul de mai jos definește dimensiunea containerului ca 800px, dar stabilește limita de dimensiune la 90%.

Container (lățime: 800px; lățime maximă: 90%; )

Imagine adaptivă

Puteți face o imagine redimensionată automat la dimensiunea maximă folosind proprietățile max-width:100% și height:auto.

Imagine (lățime maximă: 100%; înălțime: automată; )

Codul de mai sus este pentru imagine adaptativă funcționează în IE7 și IE9, dar nu funcționează în IE8. Pentru a corecta situația, trebuie să adăugați proprietatea width:auto. Puteți folosi condițional regula CSS special pentru IE8 sau mai jos truc dat pentru IE:

@media \0screen ( img ( width: auto; /* for ie 8 */ ) )

proprietatea lățimii min

Proprietatea min-width este opusul proprietății max-width. Setează lățimea minimă posibilă a elementului. Mai jos este un exemplu de utilizare a proprietății min-width pentru a preveni câmpul de intrare să devină prea mic atunci când micșorați.

3. Valori relative

Într-un șablon receptiv, utilizarea valorilor relative poate simplifica foarte mult codul CSS și poate îmbunătăți aspect proiecta.

Câmpuri relative

Mai jos este un exemplu de comentarii care folosesc lățimea relativă a marginii din stânga pentru a crea indentare într-o structură arborescentă. În loc de valoare absolută px folosește o valoare procentuală pentru Nivelul următor pe listă. În partea stângă a figurii, puteți vedea asta pe dispozitivele mobile spatiu disponibil pentru elementele listei pot să nu fie suficiente pentru afișarea normală dacă sunt utilizate valori absolute.

Dimensiunea relativă a fontului

Folosind valori relative pentru dimensiunea fontului (em sau %), puteți obține cu ușurință modificări corespunzătoare în înălțimea liniilor și dimensiunile indentării atunci când adaptați șablonul la dimensiunea ecranului dispozitivului. De exemplu, toate elementele asociate sunt redimensionate automat atunci când setați dimensiuni noi de font pentru elementul părinte.

Umplutură relativă

Figura de mai jos demonstrează beneficiile utilizării unei valori % relative pentru umplutură. Blocul din stânga are spațiu dezechilibrat atunci când se aplică valori absolute px. Blocul din dreapta are Frumoasa priveliste cu umplere proporţională de conţinut.

4. Truc cu overflow:proprietatea ascunsă

Puteți împiedica înfășurarea textului în jurul unui element folosind proprietatea de overflow. Foarte simplu și mod util. Puteți despacheta textul în jurul elementului anterior și puteți menține structura conținutului.

Proprietatea max-width vă ajută să încadrați text care nu poate fi spart (cum ar fi o adresă URL lungă) pe mai multe rânduri în loc de doar unul.

Despărțire-cuvânt (înfășurare cuvânt: ruptură-cuvânt; )