Share
Responsabilitatea design-ului web a reprezentat o tendință majoră de lungă durată - chiar înainte ca Mashable să declare anul 2013 ca fiind un an de design web receptiv. Asociați cu o utilizare sporită a dispozitivelor mobile de diverse dimensiuni ale ecranului și este ușor de înțeles de ce Internetul nu va înceta să vorbească despre el.
Dar ce înseamnă un design web responsabil pentru proprietarii de afaceri mici? Mai important, de ce ar trebui să vă îngrijorați cu un design web receptiv?
Când vine vorba de promovarea și comercializarea afacerii dvs., un site web bine conceput poate fi cel mai valoros activ. Dar, dacă doriți să fie cu adevărat eficient, un design atractiv nu este suficient. Site-ul dvs. trebuie, de asemenea, să fie receptiv.
Principalul motiv pentru care doriți să aveți un site web receptiv este faptul că utilizarea dispozitivelor mobile pentru navigarea pe Internet a continuat să crească de câțiva ani și nu arată semne de încetinire.
Din punctul de vedere al afacerii, aceasta înseamnă că, dacă site-ul dvs. nu răspunde bine la ecrane mai mici și este greu de citit și navigat, vizitatorii dvs. vor fi mai înclinați să se deplaseze în locul unui concurent.
Puneți pur și simplu, designul web receptiv nu este un lux, este o necesitate și acum este momentul potrivit pentru a vă asigura că site-ul dvs. este receptiv.
Dacă v-ați întrebat ce este într-adevăr un design web receptiv și de ce contează, ați ajuns la locul potrivit. În acest articol, vom explica modul în care funcționează web designul receptiv, de ce ar trebui să luați în considerare un site web receptiv și să vă prezentați câteva exemple de design web receptiv în viața reală. Hai să ne aruncăm!
Termenul de design web receptiv a fost inventat de Ethan Marcotte în 2010 și se referă la procesul de proiectare a site-urilor web care vor răspunde la dispozitivul la care sunt vizualizate pentru a oferi utilizatorilor o experiență optimă și optimă a utilizatorului.
În centrul său, designul web receptiv respectă cele trei principii principale: grilele fluidelor, mediile receptive și interogările media. În unele cazuri, design-ul web receptiv folosește și meta-tag-ul media viewport atunci când un dispozitiv nu poate determina lățimea sau scala inițială a unui site, ceea ce face ca interogările media să nu se declanșeze. Iată principiile fundamentale ale designului web receptiv:
Grilajele fluide funcționează ca orice altă rețea de design - ele vă permit să aranjați elemente pe o pagină într-un mod atractiv vizual. Cu toate acestea, spre deosebire de o rețea tradițională, o rețea de fluid se va redimensiona pe baza dimensiunii ecranului și se poate adapta la orice lățime deoarece folosește unități relative de măsură, cum ar fi procente sau unități em, în loc de unități fixe, cum ar fi pixeli.
Interogările media vă permit să deveniți și mai specifică cu designul dvs. receptiv și să îl ajustați în funcție de dimensiunea ecranului. În termeni de layman, site-urile utilizează interogări media pentru a aduna date care îi ajută să determine dimensiunea unui ecran și apoi să încarce stilurile CSS corespunzătoare.
Al treilea principiu de bază al designului web receptiv este media receptivă sau flexibilă. Dat fiind că site-urile moderne utilizează o mulțime de imagini, videoclipuri și alte fișiere media, este imperativ ca acele tipuri de conținut să răspundă unor dimensiuni diferite ale ecranului.
În mod normal, designerii vor include dimensiunile imaginii în foaia de stil CSS. Dar, acest lucru nu funcționează pentru un design receptiv datorită unităților fixe de măsură menționate mai sus. În schimb, trebuie să utilizați proprietatea cu lățime maximă pentru fișiere de imagini, videoclipuri și alte tipuri de suporturi media. Pentru a vă asigura că fișierele media nu depășesc containerul și că scară frumos pe baza dimensiunii ecranului, proprietatea maximă lățime trebuie setată la 100%.
După cum am menționat mai devreme, meta-tag-ul de vizualizare apare în joc atunci când interogările media nu se declanșează deoarece un dispozitiv nu poate determina lățimea inițială a unui site web. Pentru a combate acest lucru, Apple a ieșit cu meta-tag-ul de vizualizare.
Meta tag-ul de vizualizare are, de obicei, o scală inițială de valoare înălțime sau lățime setată la 1, care rezolvă problema nerecunoașterii scării site-ului utilizând raportul dintre înălțimea sau lățimea dispozitivului și mărimea ferestrei de vizualizare.
Acum, că am acoperit principiile de bază ale designului web receptiv, să aruncăm o privire asupra câtorva exemple de design web responsabile din lumea reală:
Fiind un dezvoltator de web, nu e de mirare că site-ul lui Susan Jean Robertson urmează cele mai bune practici atunci când vine vorba de web design-ul, care include asigurarea că site-ul ei arată excelent indiferent de dispozitivul pe care vizitatorii îl folosesc.
Deși site-ul său este destul de simplu și minim, acesta are câteva imagini care nu numai scară frumos pe baza dimensiunii ecranului, dar și trecerea de la o structură de două coloane la un layout stacked pe o coloană pe ecrane mai mici. Meniul, care se deplasează adesea la un meniu de hamburger pe ecranele mai mici, rămâne același deoarece nu are multe linkuri, astfel încât nu este nevoie să-l ascundeți.
Site-ul BMW utilizează o mulțime de imagini și clipuri video de fundal, care pot fi partea cea mai provocatoare a designului web receptiv.
Cu toate acestea, după cum puteți vedea din imaginea de mai jos, BMW face o treabă excelentă de a vă asigura că toate imaginile și videoclipurile răspund la diferite dimensiuni ale ecranului. Veți observa, de asemenea, utilizarea unui meniu de hamburger pe dispozitivele mobile.
Noile câmpuri servesc ca un exemplu frumos de site de comerț electronic care arată excelent atât pe dispozitive mobile cât și pe desktop.
Ei folosesc meniul standard de hamburger pe ecrane mai mici, iar rândurile de produse se redimensionează de la rândurile cu patru coloane în două coloane. Apelurile de acțiune rămân vizibile și ușor de efectuat pe clic, chiar dacă dimensiunea ecranului coboară și imaginile produselor scară frumos, de asemenea.
Un fundal ilustrat atrăgător este primul lucru pe care îl veți observa pe site-ul web al KlientBoost și că fundalul pare excelent indiferent de modul în care redimensionați fereastra browserului.
În afară de utilizarea unui meniu de hamburger, KlientBoost utilizează, de asemenea, o altă versiune a logo-ului pe ecrane mai mici, iar restul aspectului se comportă în mod obișnuit: mai multe coloane stivuiesc într-o coloană singulară.
Ultimul exemplu de pe lista noastră vine de la WillowTree Apps, o agenție digitală a cărei pagină web utilizează un aspect curat, cu o mulțime de imagini pentru a-și prezenta conținutul și portofoliul.
Veți observa că imaginile sunt pe deplin receptive și urmează modelul standard de a fi stivuite înainte de extrasul postului într-o coloană, similar cu restul conținutului. Aici este prezent un meniu de hamburger, precum și butoane CTA care rămân vizibile chiar și pe ecrane mai mici.
Site-urile de mai sus sunt doar vârful aisbergului atunci când vine vorba de inspirația de design web receptivă. Puteți găsi mai multe exemple în lista noastră de cele mai bune 25 exemple de design web responsibile.
Responsabilitatea web design-ului nu se referă numai la respectarea celor mai recente tendințe de design web. Adoptarea unui aspect receptiv pentru site-ul dvs. web are multe beneficii pentru afacerea dvs., care pot afecta traficul, SEO și veniturile dvs. Iată primele cinci motive pentru care ar trebui să aveți în vedere un design web receptiv pentru site-ul dvs. web.
Cel mai important motiv pentru a adopta un design web receptiv este faptul că veți oferi vizitatorilor dvs. o experiență mai bună a utilizatorilor și veți îmbunătăți gradul de utilizare a site-ului dvs. Dacă vizitatorii nu sunt forțați să deruleze imediat în toate direcțiile, prindeți și măriți pentru a vă citi conținutul, aceștia vor fi mai înclinați să rămână pe site-ul dvs. pentru o perioadă mai lungă de timp. Ei vor putea să navigheze cu ușurință de la o pagină la alta, precum și să nu aibă probleme să completeze un formular sau să facă clic pe butonul de chemare la acțiune.
După cum am menționat mai devreme, statisticile arată că mai mult de jumătate din traficul web global provine de pe dispozitivele mobile, ceea ce înseamnă că odată ce site-ul dvs. este receptiv, aveți șanse mult mai mari de a atrage acei vizitatori. Dacă aceștia aterizează pe site-ul dvs. și sunt întâmpinați cu un site care arată și funcționează excelent chiar și pe ecrane mai mici, acestea nu vor avea niciun motiv să se deplaseze, astfel încât afacerea dvs. este obligată să afișeze o creștere a potențialilor clienți și a clienților de pe dispozitivele mobile.
În afară de designul de web receptiv, o altă tendință pe Internet care a devenit o necesitate este un site web de încărcare rapidă. Și datorită rețelelor fluide și a mediilor receptive, site-urile receptive au timpi de încărcare mai buni decât site-urile web care nu răspund. Acest lucru face ca vizitatorii să petreacă mai mult timp pe site-ul dvs., ceea ce ne duce la următorul punct - ratele de conversie.
Odată ce vizitatorii petrec mai mult timp pe site-ul dvs., aveți șanse mai mari de a le converti de la vizitatori în clienți potențiali și apoi la abonați și cumpărători. Potrivit cercetărilor, ratele medii de conversie pentru dispozitivele smartphone au crescut cu 64% față de ratele de conversie de pe desktop. Acesta este un rezultat direct al unei experiențe îmbunătățite a utilizatorilor, care provine de la a avea un site ușor de utilizat în diferite dimensiuni ale ecranului și timpi de încărcare mai rapizi.
În cele din urmă, un rang SEO mai bun este cu siguranță unul dintre primele cinci avantaje ale designului web receptiv. La urma urmei, dacă nu vă puteți găsi în motoarele de căutare, obținerea unui trafic organic pentru site-ul dvs. va fi aproape imposibilă. Potrivit Google, din aprilie 2015, reactivitatea site-ului dvs. este unul dintre semnalele de clasificare care determină modul în care site-ul dvs. este afișat în motoarele de căutare. Cu toate acestea, Google nu este singurul motor de căutare care îl recomandă. Bing a declarat în mod clar pe blogul său că construirea de site-uri optimizate pentru toate platformele este cheia unei strategii SEO de succes.
Acum că am acoperit cele mai importante avantaje ale designului web receptiv, să discutăm cum puteți începe.
Primul lucru pe care ar trebui să-l faceți este să testați reactivitatea site-ului dvs. web. Puteți utiliza un instrument precum Testul Google pentru dispozitive mobile. Tot ce trebuie să faceți este să introduceți adresa URL a site-ului dvs., iar instrumentul va analiza site-ul dvs. și vă va spune dacă este receptiv sau nu. De asemenea, veți primi sugestii cu privire la ce trebuie să faceți pentru a vă asigura că site-ul dvs. este prietenos cu dispozitivele mobile.
Odată ce știți dacă site-ul dvs. este receptiv sau nu, este timpul să vă inspirați cu exemple de site-uri responsabile. Veți putea vedea exact modul în care aceste site-uri utilizează principiile de bază discutate mai sus, precum și modul în care au implementat alte caracteristici necesare.
Următorul pas este să alegeți un șablon receptiv sau o temă pentru site-ul dvs. Dacă ați folosit șabloane HTML până acum și doriți să continuați să le utilizați, există o mulțime de șabloane de răspuns HTML care pot fi selectate. Începeți cu cele mai bune șabloane HTML disponibile pe piața noastră.
Dacă WordPress este platforma aleasă de dvs., atunci veți fi fericit să știți că nu există nici o lipsă de teme responsabile WordPress fie, indiferent de industria de care aparține afacerea dvs..
După ce vă asigurați că site-ul dvs. utilizează un șablon sau o temă receptivă, este timpul să treceți la nivelul următor cu sfaturi și trucuri suplimentare. Utilizați ghidul nostru ca punct de pornire pentru a vă asigura că site-ul dvs. web oferă cea mai bună experiență posibilă pentru utilizatori și că răspunde pe deplin.
Responsabilitatea design-ului web nu va disparea în curând. De fapt, este calea viitorului și are o serie de avantaje care au un impact asupra liniei de bază a fiecărui proprietar al afacerii.
Dacă sunteți gata să luați site-ul dvs. la nivelul următor, începeți să-i faceți un makeover cu unul dintre șabloanele HTML receptiv sau cu temele WordPress și folosiți sfaturile și trucurile din acest articol pentru a vă îndrepta în direcția cea bună.
Accentsconagua