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 cred că cea mai ușoară și mai corectă cale este adaptativa folosind CSS.

Cum să faci un aspect de site responsiv

In primul rand, dacă te-ai angajat să alcătuiești un design adaptiv al site-ului, între etichete lipiți următorul cod:

Ce prost am fost ca nu am facut asta imediat cand am incercat sa fac un layout adaptativ al site-ului !!!
Problema browserelor mobile este scalarea lor a aspectului site-ului, chiar adaptiv.

Imaginați-vă, desenez un design, apoi prescriu toate stilurile și solicitările necesare, verific adaptabilitatea site-ului când rezoluții diferite. Totul pare a fi 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 dispozitivului mobil, ci pur și simplu a redus dimensiunea fontului, imaginilor etc.

Cum așa? Am început să verific toate stilurile, dacă am scris corect clasele, ca urmare, am ajuns în punctul în care am verificat lățimea ferestrei browser în px prin javascript. Am fost socat. Cand l-am verificat pe un laptop, am obtinut un rezultat de 1024px, si am obtinut cam acelasi rezultat cand am deschis site-ul pe un smartphone!

Dar asta nu poate fi!

Se dovedește, daca nu scrii codul pe care l-am indicat mai sus, browserul mobil nu intelege ca site-ul este adaptivși încearcă să reducă pur și simplu 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))).

Interogări media CSS receptive

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

Cum este? Da, foarte simplu. În fișierul 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 ar trebui adaptate în funcție de rezoluția ecranului ar trebui scrise separat pentru fiecare lățime posibilă a ecranului.

Cele mai importante rezoluții ale ecranului pentru aspectul receptiv

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

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

design responsiv bootstrap

Este foarte convenabil să utilizați bootstrap pentru a crea un aspect adaptiv. Comoditatea este că toate stilurile pentru adaptarea blocurilor, butoanelor, meselor etc. deja înregistrat î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 diferă prin aceea 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 la numărul dorit de părți.

De exemplu, acest design va permite un bloc lat pentru conținut cu o lățime de 8 părți și unul îngust pentru o bară laterală cu o lățime de 4 părți a ecranului:

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 adâncirea blocului de la margine, din nou, după numărul de piese dorit. De exemplu, această construcție:

Acest lucru va crea un bloc care are 10 părți lățime, indentat din stânga cu 1 parte a ecranului.

Dacă vă dați seama, atunci lucrul cu bootstrap face ca lucrarea să fie foarte rapidă. Mai mult, aceste stiluri funcționează cu siguranță corect și nu va fi nimic strâmb pe site.

În viitor, am de gând să postez câteva tutoriale despre lucrul cu bootsrap. Prin urmare, vă sfătuiesc să nu ratați acest moment.

Verificarea receptivității site-ului

Dar se pune întrebarea: cum se verifică adaptabilitatea site-ului? Aici ați scris interogări media în CSS, bootstrap conectat și utilizare clasele obligatorii. Și cum verifici dacă site-ul se adaptează corect la toate rezoluțiile ecranului.

Foarte precis și important serviciu gratuit, care merită respect și recunoștință din partea webmasterilor și a designerilor de layout care sunt implicați aspect adaptiv site-uri.

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 lucrări vor fi răsplătite cu o atitudine favorabilă față de site-ul dvs. de motoare de căutare și, cel mai important, vizitatorii site-ului dvs.

Utilizatorii de internet navighează pe site-uri web diferite dispozitive cu ecrane diferite dimensiuni. Dimensiunile ecranului se schimbă constant, așa că este important ca site-ul să se adapteze la oricare dintre ele. Există două abordări principale pentru a crea site-uri web care sunt ușor de adaptat tipuri diferite dispozitive:

Design receptiv (RWD) — design receptiv- proiectarea unui site cu anumite valori de proprietate, cum ar fi o grilă de layout flexibilă, care să permită unui layout să funcționeze pe diferite dispozitive;

Design adaptiv (AWD)- Design responsive, sau afișare dinamică - proiectarea unui site cu condiții care se schimbă în funcție de dispozitiv, pe baza mai multor layout-uri cu lățime fixă.

1. Trucuri de design responsive

Filosofia designului web responsive este că site-ul este ușor de vizualizat pe orice dispozitiv, indiferent de dimensiunea ecranului. Fraza design receptiv a fost inventat de Ethan Marcotte în 2011. caracteristica principală Design web receptiv - datorită grilei fluide, aspectul reacționează automat la modificările dimensiunii ecranului, extinzându-se sau micșorându-se ca un balon.

Design receptiv(Engleză) Web Design responsive) combină trei metode - aspect flexibil bazat pe grila, imagini flexibileși interogări media.

Flexibilitatea aspectului pe baza utilizării unități relative măsurători în loc de valori fixe de pixeli, permițând reglarea lățimii în funcție de spațiul disponibil.

Flexibilitatea conținutului textului se realizează prin calcularea dimensiunilor fonturilor în raport cu dimensiunea implicită a fontului de 16 px , de exemplu, pentru marimea fontului: dimensiunea relativă de 42 px este de 42 px / 16 px = 2,625 em .

Problemă imagini flexibile rezolvată folosind regula img (lățime: 100%; lățime max: 100%;) pentru toate imaginile de pe site. Această regulă asigură că imaginile nu sunt niciodată mai largi decât containerele lor și nu depășesc niciodată dimensiunile lor reale ecrane mari.

interogări media modificați stilurile în funcție de caracteristicile dispozitivului legate de afișarea conținutului, inclusiv tipul ecranului, lățimea, înălțimea, orientarea și rezoluția ecranului. Interogările media creează un design receptiv care aplică stiluri adecvate fiecărei dimensiuni de ecran.

Mai multe trucuri de design receptiv

scalabil Grafică vectorială - Utilizați imagini svg care se scalează la orice dimensiune fără pierderi de calitate și arată bine pe ecranele Retina.

Interfețele cardurilor- folosiți așa-numitele interfețe de card - forme dreptunghiulare cu colțuri rotunjite, care sunt containere pentru conținut. Astfel de blocuri sunt unități autonome ale interfeței și sunt ușor de mutat în jurul aspectului.

Lăsați doar esențialul — receptie buna, în special pentru design responsive. Creați interfețe minimaliste receptive și prietenoase, care câștigă din ce în ce mai multă popularitate în aceste zile.

Prioritizează și ascunde corect conținutul- utilizare elemente ascunse comenzi, în special pentru dispozitivele cu ecrane mici. Ferestrele pop-up, filele, meniurile off-canvas și alte astfel de trucuri pot ajuta la reducerea numărului de elemente de pe pagină. eliberând spațiu din elemente suplimentare, veți face interfața convenabilă și ușor de utilizat.

Creați un spațiu mare pe care se poate face clic pentru butoane— cu cât zona activă a butonului este mai mare, cu atât este mai ușor pentru utilizator să interacționeze cu acesta.

Adăugați interactivitate la interfețele dvs- ca răspuns la acțiunea utilizatorului, creați o acțiune de răspuns - o animație care va funcționa atunci când treceți cu mouse-ul peste element pe dispozitive desktop și când atingeți elementul pe dispozitive mobile.

2. Setarea ferestrei de vizualizare utilizând metaeticheta viewportului

La browserele mobile pentru operare sisteme Android iar iOS nu a redimensionat automat paginile site-ului, se folosește o etichetă specială cu atributul name="viewport" . LA această etichetă permis setarea unei valori specifice pentru parametrii de lățime si scara initiala:

- initial-scale=1 spune ca dimensiunea paginii din browser va fi egala cu 100% din dimensiunea viewportului. Adică, raportul dintre pixelul fizic și pixelul css va fi 1:1;

- width=device-width spune că lățimea paginii va fi egală cu 100% din lățimea ferestrei oricărui browser. Adică, lățimea paginii site-ului corespunde cu lățimea dispozitivului, deci nu trebuie să fie scalată.

LA acest exemplu conținutul din fereastra browserului va fi de 2 ori mai mare decât dimensiunea sa fizică.

De asemenea, etichetați poate fi folosit pentru a controla cât de mult pot crește sau micșora utilizatorii lățimea paginii:

Acest cod va crește lățimea paginii la o valoare egală cu de 3 ori lățimea ecranului dispozitivului și o va reduce la jumătate din lățimea ecranului dispozitivului.

Puteți împiedica utilizatorii să scaleze folosind atributul scalabil de utilizator:

3. Șabloane universale

Cele mai multe dintre machetele folosite pentru a crea un design web receptiv se încadrează într-una dintre cele cinci categorii de modele definite de Luke Wroblewski:
Preponderent fluid(Cel mai cauciuc)
Column Drop(Coloane una sub alta),
Schimbător de aspect(Aspect în mișcare),
Tweaks minuscule(modificări mici)
de pe pânză(În afara ecranului).
În unele cazuri, o pagină poate utiliza o combinație de șabloane, cum ar fi Column Drop și Off Canvas.

3.1. Preponderent fluid

Aspect popular, compus în principal din plasă de cauciuc. Pe ecranele de lățime mare sau medie, dimensiunea acesteia rămâne de obicei neschimbată, pe ecranele mari doar marginile sunt ajustate. Pe ecranele mai mici, grila fluidă face ca aspectul să fie recalculat pentru conținutul principal și coloanele sunt stivuite una peste alta. Avantajul modelului este că are nevoie doar de un punct de întrerupere între ecranele mici și ecranele mari.

3.2. Column Drop

Coloanele sunt plasate una câte una vertical dacă lățimea ferestrei nu poate afișa tot conținutul. Drept urmare, coloanele vor fi dispuse vertical unul sub celălalt. Alegerea punctelor de întrerupere pentru acest șablon de aspect depinde de conținut și este determinată în funcție de proiect.

3.3. Schimbător de aspect

Cel mai receptiv șablon, deoarece oferă mai multe puncte de întrerupere pentru diferite lățimi de ecran. Principala diferență cu acest aspect este că, în loc să recalculăm arborele de randare și să plasezi coloanele una sub alta, conținutul este mutat. Datorită diferențelor semnificative dintre principalele puncte de control, suportul pentru acest aspect este mai mult sarcina dificila, în plus, probabil că va trebui să modificați nu numai aspectul general al conținutului, ci și elementele acestuia.

3.4. Tweaks minuscule

Șablonul contribuie modificări minore la aspect, cum ar fi ajustarea dimensiunii fontului, redimensionarea imaginilor sau mutarea conținutului. Funcționează bine pe aspecte cu o singură coloană, cum ar fi site-uri cu o singură pagină și articole cu cantitate mare text.

3.5. de pe pânză

Conținutul care este utilizat rar, cum ar fi elementele de navigare sau meniurile aplicațiilor, este plasat în afara ecranului și este afișat numai atunci când dimensiunea ecranului o permite. Pe ecranele mai mici, conținutul se deschide cu un singur clic.

4. Design receptiv

Spre deosebire de designul receptiv, design adaptiv(Adaptive Web Design) se concentrează pe dimensiunile dispozitivelor. Utilizează mai multe aspecte statice pentru diferite tipuri de dispozitive ( dispozitive mobile, tablete, computere desktop), pe baza punctelor de control (de răsturnare). Adică, layout-urile sunt încărcate când anumite dimensiuni fereastra browserului dispozitivului, iar tranzițiile între aspecte sunt mai degrabă sacadate decât fluide.

Aspectele receptive au de obicei șase opțiuni de aspect bazate pe lățimea ecranului:
320
480
760
960
1200
1600.

În machete receptive rol principal funcționalitatea joacă, adică atunci când se creează un design, se iau în considerare caracteristicile dispozitivelor, de exemplu, control tactil pentru dispozitive mobile sau spații mari pentru monitoare desktop.

Tehnici de bază de proiectare receptivă

Rămâneți la secvență- orice site trebuie să creeze relație de încredere cu utilizatorul, astfel încât acesta să se simtă confortabil atunci când navighează și interacționează cu el. Design consistent înseamnă că atunci când utilizatorul merge pe o altă pagină a site-ului, utilizatorul nu are senzația că a aterizat pe alt site. fiţi atenți mici detalii, construiți o ierarhie vizuală, elemente importante evidențiați cu aldine. Utilizați serialul schema de culori pe tot site-ul, reutilizați aceleași elemente pentru diferite situații, cum ar fi același design de pâine prăjită.

Utilizați o grilă- o structură cu 12 coloane este mai de preferat pentru controlul lățimii coloanelor și a indentărilor dintre ele.

5. Care este diferența dintre responsive și responsive web design

Aspectele receptive sunt create folosind interogări media și dimensiunile relative ale elementelor din grilă, specificate cu % . LA design receptiv scripturile de pe server determină mai întâi tipul de dispozitiv pe care utilizatorul încearcă să acceseze site-ul (desktop, telefon sau tabletă), apoi încarcă versiunea exactă a paginii care este cea mai optimizată pentru el. Elementele de grilă primesc dimensiuni fixe în pixeli.

Prin urmare, principala diferență dintre aceste tehnici este designul responsive - un aspect pentru toate dispozitivele, design adaptiv - un aspect pentru fiecare tip de dispozitiv.

6. Servicii și instrumente utile

Emulator Android pentru Windows, Linux și Mac OS X. Simulatorul iOS este disponibil numai pentru utilizatorii de Mac OS X și face parte din pachetul Xcode (disponibil gratuit din Mac App Store).

Un script PHP care rulează pe orice site web detectează dimensiunea ecranului și redimensionează imaginea pentru a se potrivi cu ea, rezultând o dimensiune mică a imaginii pe ecranele mici.

Tabele de corespondență dimensiuni fizice valori css pentru înălțime și lățime și o valoare a raportului de pixeli pentru dispozitivele mobile.

O colecție de site-uri web care utilizează interogări media și design web receptiv.

Cadru CSS bazat pe 12 coloane, max 960px. Acceptat de Chrome, Safari, Firefox, IE 7 și versiuni ulterioare, browsere mobile.

Un set de instrumente pentru dezvoltarea aplicațiilor web. Mai puțin limbaj, aspect receptiv cu 12 coloane, suport pentru dispozitive mobile, tablete și monitoare, multe componente, butoane, meniuri derulante, stil personalizat al câmpurilor de introducere, liste, titluri, etichete, pictograme, alerte, file, bare de progres, sfaturi cu instrumente, acordeon ”, „carusel” și așa mai departe, diverse plugin-uri Javascript, suport pentru schele, inclusiv aplicarea stilului Bootstrap la HTML deja creat.

Tema acestei luni este receptivitatea site-ului web, așa că am decis să aruncăm o privire mai atentă la ce este designul web responsive, de ce aveți nevoie de el și care sunt principiile de bază ale designului web responsive.

Designul web responsiv este o direcție destul de nouă în designul resurselor web, dar chiar și acum este unul dintre principalii indicatori ai calității site-ului web. În acest articol, vom vorbi despre ce este responsive web design și cum se întâmplă.

Ce este Responsive Web Design

Design web responsive (în Limba engleză Designul web responsiv este designul de pagini web care oferă o experiență excelentă pe diverse dispozitive conectate la Internet.

Aceasta înseamnă că același site poate fi vizualizat pe o varietate de 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ă anumite zone ale site-ului pentru a nu pierde linkul dorit.

Designul responsive își propune să facă paginile web și afișarea conținutului lor adecvate dispozitivului de 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 diferă î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 oricare dintre utilizatori, indiferent de dispozitivul pe care îl folosesc.

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 de pe acestea a crescut semnificativ, așa că nu îi mai puteți ignora - 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 convenabil pentru ei să folosească site-ul dvs. (altfel nu o vor face).

3) Informații urgente. Dacă resursa dumneavoastră conține știri/informații urgente și este foarte probabil 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 să vă asigurați că are ocazia să facă acest lucru.

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

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

1) Pentru fiecare tip sistem de operare aveți nevoie de aplicația dvs. / versiunea site-ului. 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ă unele efort suplimentar de la utilizatori și mulți nu vor face acest lucru decât dacă sunt siguri că au într-adevăr nevoie de aplicație și plănuiesc 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 suplimentare), fie să faceți o muncă dublă pentru a umple site-ul și aplicația cu materiale.

Spre deosebire de aplicațiile 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 buni specialistiși cunoștințe despre proiectarea site-urilor web responsive.

Principii de proiectare receptivă

Proiectarea începe cu o versiune adaptivă 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 blocurile de informații secundare și lăsându-le pe cele mai importante.

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

Tipuri de layout-uri receptive

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

1) cauciuc

Un tip de prezentare a site-ului ușor de implementat și ușor de utilizat. Blocurile principale sunt comprimate la lățimea ecranului dispozitivului mobil, acolo unde acest lucru nu este posibil - sunt reconstruite într-o bandă lungă.

2) Bloc de transfer

Modul 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 site-ul de pe diferite dispozitive: este dezvoltat un aspect separat pentru fiecare rezoluție a ecranului. Metoda este laborioasă, prin urmare mai puțin populară decât precedentele două.

4) Adaptabilitate „sânge mic”

O metodă foarte simplă, potrivită pentru site-uri simple. Obținut prin scalarea elementară a imaginilor și a tipografiei. Nu foarte popular nu are flexibilitate.

5) Panouri

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

Trebuie reținut că machetele prezentate mai sus nu sunt solutii universale- pentru fiecare proiect este necesar sa se aleaga metoda cea mai potrivita nevoilor si posibilitatilor.

Astăzi, majoritatea oamenilor intră online prin gadgeturi mobile - tablete, telefoane, în acest sens, optimizarea site-ului merge și la 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% că va ieși și începeți să căutați altul mai convenabil. A va bifa caseta că resursa este irelevantă, adică nu se potrivește cu interogarea de căutare. Prin urmare, designul paginii trebuie adaptat diverselor dispozitive mobile. Ce este o versiune mobilă a site-ului, cum se realizează și care este cea mai bună modalitate de ao aplica? Citiți mai multe în acest articol.

Deci, există patru modalități cheie de a adapta site-ul pentru versiunea mobilă.

Metoda unu - Design receptiv

Șabloanele responsive modifică imaginea site-ului î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 designului de la zero, este suficient să modificați CSS și HTML;
• unu adresa URL- utilizatorul nu are nevoie 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 dezavantajele lor, care, apropo, sunt mai mult decât avantaje. Cu toate acestea, mulți dezvoltatori aderă la acest concept, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are un design adaptiv. Deci, dezavantaje:

• Designul responsive nu acceptă aceleași sarcini pe mobil ca și pe desktop. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde informațiile despre cursul de schimb sau cele mai apropiate bancomate sunt mai probabil să fie importante pentru utilizator, atunci acest design este suficient. Dar dacă este o resursă structurată complexă, cu multe secțiuni și subsecțiuni, atunci este puțin probabil să le placă vizitatorilor.
• Încărcarea lentă transformă un site favorit într-unul plin de ură. Acest lucru este valabil mai ales pentru resursele în care animațiile, videoclipurile, ferestrele pop-up și alte elemente active sunt abundente. Datorită ponderii mari, pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca, iar pozițiile de căutare ale site-ului vor scă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 comuta 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-uri. Dar se va potrivi, având în vedere deficiențele enumerate, celor mici, resurse simple cu un minim de informații și multimedia, fără navigare și animație complexe. Pentru un site complex sunt potrivite alte 2 metode.

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

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

• interfață ușor de utilizat;
• este ușor să schimbați și să faceți modificări, deoarece versiunea există separat de resursa principală;
• din cauza greutății reduse, o versiune separată a site-ului funcționează mult mai rapid decât șablon receptiv;
• cel mai adesea este posibil să accesați versiunea principală a paginii de pe mobil.

Dar nici aici nu a fost lipsit de dezavantaje:

• Mai multe adrese - versiunea desktop și mobilă a site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii prescriu adesea de la versiunea desktop la 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 greu să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
• Versiunea mobilă a site-ului de pe computer, dacă utilizatorul îl vizitează din greșeală, va arăta ridicol, ceea ce poate afecta și traficul.
• Această versiune este adesea restrânsă puternic, 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 - RES-design

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 este direcționarea resurselor într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. Pentru Android - cu GooglePlay și pentru Apple - cu iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile, au capacitatea de a găzdui diferite feluri informații, în timp ce memoria telefonului și traficul de internet nu sunt consumate în același mod ca atunci când vizitați site-ul printr-un 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, 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 ieftin mod de a face un site web mobil

Toate metodele de mai sus implică, deși nu întotdeauna lungă și complicată, dar totuși munca plătită a unui 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. Acestea vor ajuta la afișarea mai corectă a site-ului pe telefon, în timp ce veți primi câteva sfaturi despre ceea ce trebuie corectat pentru a adapta mai bine pagina la versiunea mobilă.

Desigur, aceasta metoda greu potrivit pentru resurse serioase. Mai degrabă, ea oportunitate gratuită este destinat site-urilor mici și simple, blogurilor, fluxurilor de știri. De asemenea, nu trebuie uitat că motor de căutare Google, la fel ca Yandex, astăzi are cerințe serioase pentru versiunile mobile, așa că există o șansă mare de a vă reduce pozițiile 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, a fost realizată pe sistemul RESS sau folosind un șablon adaptiv. Cel mai important, pentru funcționarea sa eficientă, este necesar să se respecte mai multe extrem principii importante. Deci, care 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 dezvoltatorul versiunii mobile a site-ului. Imaginează-ți cât de greu este să percepi informații care sunt pline de culori, butoane, bannere și pe care trebuie să le parcurgi la nesfârșit în căutarea materialului potrivit. Designul mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, de marcă). Mai bine dacă unul dintre ei este alb. Împărțiți spațiul unui mic ecran în zone ușor de înțeles și de citit. Chei virtuale trebuie sa fie vizibil pentru ca utilizatorul sa stie clar unde sa dea click si sa vada - aici este produsul, aici este formularul de completare a datelor, aici sunt informatiile despre livrare si plata.

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 dificultăți aici. Lăsați doar elementele cele mai importante. Animaţie, bannere publicitare, multimedia, cel mai probabil, va încetini activitatea site-ului sau a aplicației și va distrage atenția de la lucrul principal.

aliniere

Problema alinierii nu este mai puțin acută, deoarece dacă este făcută incorect, utilizatorul va primi doar terminații cuvinte importante. Alinierea la stânga și alinierea verticală este în general acceptată. Imaginează-ți că defilezi fluxuri de stiri in telefon. O faci de sus în jos, dar nu în stânga sau în 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, site-ul necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde fiecare celulă individuală conține o casă, stradă, apartament separat, etc. Pentru a nu forța utilizatorul să încerce să lovească multe celule mici, întrebați el să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, se cere să se separe prea multe informații. 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 trece peste centrul sau regiunea regională, o altă listă de orașe va fi eliminată.

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 util dacă utilizatorul știe exact ce caută. De exemplu, orașul, numărul sau data. A doua opțiune este potrivită pentru nume lungi și complexe sau pentru cazurile în care există multe variații ale aceluiași nume și 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 metalice”, iar în sfatul instrumentului vede „Ace de tricotat 5 mm”, „Ace de tricotat 4,5 mm”, etc.

Completare automată

Acest punct este valabil mai ales pentru site-urile unde ceva se vinde online și trebuie să completați forme standard de plată, livrare etc. Dacă o persoană face o achiziție de pe un telefon, atunci cel mai probabil nu are timp să ajungă la un computer, ceea ce înseamnă că procesul de achiziție ar trebui să se facă cât mai rapid și comod 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ă telefoanele fiecăruia sunt diferite, la fel și vederea lor. Poate că site-ul dvs. va fi vizualizat de pe un ecran mic, deci fonturile ar trebui să fie simple și lizibile, butoanele să fie suficient de mari pentru a fi făcute clic fără a fi duse pe altă pagină, iar imaginile să se deschidă separat, mari, mai ales dacă vorbim despre magazinul online.

Câteva statistici

Apropo de adaptarea site-ului 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, gadgeturile sunt folosite de 87% din populație, 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. În același timp, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că traficul de internet și piața de comerț electronic sunt ocupate doar de o mică parte a cincea.

Gândește-te la aceste numere. Are sens să vă adaptați resursa? Desigur ca da. Mai mult decât atât, deși există atât de mult spațiu liber pe această piață, vă puteți crea propriul segment în ea.

Unde este nevoie de versiunea mobilă?

Folosirea versiunii mobile are sens pentru orice platformă care își propune să obțină un clasament înalt. La urma urmei, acesta este un impact direct asupra utilizatorului, creând pentru el conditii confortabile pentru a rămâne pe site-ul dvs.

Fără o versiune mobilă nu poate exista:

• portaluri de știri, deoarece majoritatea sunt vizualizate de pe telefon în drum spre serviciu sau spre studiu;
• rețelele sociale - din același motiv, plus că există un factor de comunicare online, ceea ce înseamnă că ar trebui creat un chat convenabil, ușor de înțeles pentru aceasta;
• referință, site-uri cu navigare etc., unde merg oamenii când caută ceva;
• cumpărături online - 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 concluzie

Astăzi tehnologii mobile sunt în stadiul de creștere și dezvoltare activă, prin urmare, străduindu-se pentru lider pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cerințelor tot mai mari ale utilizatorului, site-urile trebuie să fie permanent modernizate și adaptate diverse dispozitive. Este clar că, dacă este incomod pentru o persoană să se afle 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 va ajuta la acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, să creați un site nou pe un subdomeniu și să mergeți la el prin redirecționare, utilizați șabloane gratuite sau creație aplicatie de mobil, cu care utilizatorul poate intra mai comod și poate fi pe pagină.

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

Designul responsive nu este doar dezvoltarea de site-uri pentru dispozitive mobile, aici vorbim despre adaptarea layout-urilor la 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 extinde excelent atât pe ecrane mari, cât și pe cele 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 să fie construit pentru un anumit desktop sau dispozitiv mobil. Capacitatea aspectului de a se adapta la diferite dimensiuni este importantă aici.

Frustrarea utilizatorului

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

În primul rând, trebuie să înțelegi că designul responsive nu înseamnă doar îngrijirea design mobil. În al doilea rând, dezvoltarea unui site bun responsive necesită mult timp și efort, nu doar ajutorul interogărilor media. Având în vedere numărul uriaș și în creștere de dispozitive web, este 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 precum și pentru dispozitivele mobile. 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 va încărca. Acest lucru poate afecta masiv performanța, în special pentru cei cu conectivitate slabă.

Prin urmare, cea mai bună abordare pentru proiectarea unui site web este să luați în considerare designul dispozitivului mobil sau dispozitive mici, pentru inceput. Astfel te poți concentra pe cel mai mult Informații importante, pe care site-ul dvs. ar trebui să îl returneze. Și apoi, dacă este necesar, puteți utiliza metode de încărcare condiționată, în care grilele de aspect, imaginile mari și interogările media sunt stratificate peste un design de ecran mic deja existent.

Tutorial

Pentru acest tutorial, am creat un site web care se adaptează frumos î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 orizontal la afișaj vertical, pentru dispozitive 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 dintr-o navigare, o imagine principală și două coloane care ia în considerare locația pe dispozitive de diferite dimensiuni. Am inclus și respond.min.js, care permite interogărilor media să funcționeze în IE6-8.

Structura HTML de bază:

Siglă

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%. De asemenea, vom adăuga automat pentru înălțimea imaginii pentru a evita imaginile aplatizate î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; lățime : 100%; ) #banner img ( lățime: 100%; înălțime: automat; )

Imaginea ta va fi afișată pe elementul părinte la lățime 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 ecranele mai mici, 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 se întâmplă, care poate duce la butoane ilizibile și greu de apăsat. Folosind această metodă, îi vei face viața mai ușoară utilizatorului. De asemenea, puteți observa în cod că am făcut modificări la secțiunile #principale și laterale 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; afișare: bloc; 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. web se va micșora automat pentru a se potrivi cu dimensiunea dată a ecranului. Aici 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ă aibă efect deplin, un site obișnuit optimizat pentru dispozitive mobile ș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 o valoare a 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ă).