Share
Nu există nici o negare că design-ul web receptiv a câștigat popularitate și importanță încă de când Google a anunțat că site-urile mobile și receptive vor vedea un impuls în clasamentul motorului de căutare în 2015.
Cu toate acestea, designul receptiv merge mult înapoi. De fapt, primul site web cu un aspect care se adaptează la diferite lățimi de vizualizare a browser-ului a fost proiectat în jurul anului 2002. Datorită progresului în tehnologie și faptului că proiectarea pentru web a însemnat întotdeauna proiectarea pentru o multitudine de dimensiuni ale ecranului, rezultat natural.
Dar, până în 2010, termenul de design web receptiv a fost creat oficial de Ethan Marcotte, un dezvoltator independent de web care a scris și o carte despre designul web receptiv.
De atunci, tehnologia a avansat și mai mult și am văzut un număr din ce în ce mai mare de oameni care se întorc la smartphone-urile și tabletele lor, nu numai pentru a efectua apeluri și pentru a trimite mesaje, ci și pentru a căuta știrile și alte site-uri de interes. În viitor, importanța receptivă a designului web este sigur că va continua, deoarece majoritatea experților prevăd continuarea nivelurilor ridicate de utilizare a dispozitivelor mobile.
Când adăugați toate aceste lucruri, este clar că designul web receptiv este aici pentru a rămâne. Mai important, există câteva avantaje ale designului web receptiv. În acest articol, vom trece peste funcțiile și beneficiile de design sensibil la web. Vă vom arăta, de asemenea, modul în care site-ul dvs. și compania dvs. pot beneficia de adoptarea acestuia.
Designul receptiv este posibil datorită principiilor de bază pe care fiecare designer, precum și orice cadru modern și CMS, respectă:
Grilajele fluide sunt la baza nucleului de design receptiv. Grilele vă permit să aliniați elemente pe pagina dvs. și să le așezați într-un mod atrăgător de vedere, urmând o anumită ierarhie. Grilajele fluide scară în funcție de dimensiunea ecranului utilizatorului și asigurați-vă că toate elementele de pagină se potrivesc. Chiar dacă utilizarea rețelelor a fost întotdeauna prezentă în lumea designului atunci când vine vorba de designul web, grilele de reacție simple au fost dezvoltate pentru a ajuta designerii și dezvoltatorii în designul site-ului web. După acele grile receptive inițiale, o serie de cadre CSS receptive au izbucnit pe scenă, toate bazându-și codul pe o rețea fluidă.
În zilele noastre, rețelele native au ajuns la CSS sub forma "modulului CSS Grid Layout". Suportul pentru browser este destul de solid acum, oferind posibilități uriașe designerilor care doresc să exploreze rețelele fluide, receptive, fără a se baza pe cadre.
Întrebările media au existat încă de la începutul anilor 2000, dar până în 2012 acestea nu au devenit standardul W3C recomandat. Ca și grilele fluide, interogările media reprezintă o tehnologie de bază în spatele designului web receptiv. Datorită interogărilor media, un site web poate aduna date care ajută la determinarea dimensiunii ecranului pe care un vizitator îl folosește pentru a-l accesa. Odată ce dispune de acele informații, acesta încarcă condițional stilurile CSS care sunt potrivite pentru dimensiunea particulară a ecranului.
Responsabilitatea web design-ului funcționează destul de bine atunci când lucrați doar cu text. Cu toate acestea, site-urile moderne includ o mulțime de medii, cum ar fi imagini și videoclipuri, care pot fi oarecum complicate.
Modalitatea adecvată de a face față imaginilor și altor fișiere media este să utilizați proprietatea maximă a lățimii în loc să utilizați dimensiunile imaginii sau fișierului media. Un exemplu arata astfel:
img max-lățime: 100%; înălțime: auto;
Dacă doriți să includeți și alte tipuri de suporturi media, abordarea stilului devine puțin mai nuanțată. Proprietatea înălțimii nu va funcționa, așadar aplicând căptușeală în partea inferioară a unui container, atunci poziționarea suportului în acest container este calea de urmat. Această abordare (hack) a fost inițial sugerată de Thierry Koblentz încă din 2009, și este încă cel mai robust mod de a face lucrurile.
.înveliș-cu-raportul intrinsec poziție: relativă; pad-bottom: 20%; înălțime: 0; . element-la-stretch poziție: absolută; top: 0; stânga: 0; lățime: 100%; înălțime: 100%;
Odată ce adăugați acest cod CSS, toate imaginile și fișierele media se vor scala cu ajutorul browserului dvs. și nu se vor extinde peste containerul lor.
Acum, că am acoperit principiile de bază ale designului web receptiv, să ne aruncăm cu vederea avantajele pe care le aduce.
Există multe beneficii de design web receptiv. Acesta poate influența pozitiv SEO-ul dvs., ratele de conversie, experiența utilizatorului și multe alte aspecte ale afacerii dvs., care contribuie la creșterea dvs. Iată cele 12 cele mai importante caracteristici și beneficii ale designului web receptiv.
Un site web receptiv duce la o experiență mai bună a utilizatorului. Un factor major care indică calitatea experienței utilizatorilor este timpul petrecut pe site-ul dvs. Dacă le este greu să navigheze sau să folosească pentru că sunt obligați să prindă și să mărească constant, aceștia nu vor rămâne pe site-ul dvs. Web.
Dar dacă site-ul dvs. web scalare și răspunde la modificarea dimensiunii ecranului, atunci vizitatorii nu vor avea probleme la accesarea meniurilor, legăturilor, butoanelor sau completarea formularelor. Ca urmare, experiența lor de utilizare va fi mai bună și vor petrece mai mult timp pe site-ul dvs..
Îmbunătățirea experienței utilizatorilor și a gradului de utilizare a site-ului poate duce apoi la mai multe recomandări de tip word-of-mouth și clienți noi pentru afacerea dvs..
Statisticile arată că în ultimul trimestru al anului 2017, aproape 52% din traficul web global a provenit de la dispozitive mobile. Aceasta reprezintă mai mult de jumătate din traficul pe Internet și arată că nu vă puteți permite să renunțați la designul web receptiv. Începeți prin a investiga câte vizitatori provin de pe dispozitive mobile și timpul petrecut pe site-ul dvs. Apoi, implementați designul receptiv și comparați cele două numere. Odată ce site-ul dvs. se adaptează la lățimea ferestrei de vizualizare, veți observa o creștere a vizitelor pentru dispozitive mobile și o perioadă mai lungă de timp pe site de către aceiași vizitatori.
Nu cu mult timp în urmă, o practică obișnuită a implicat crearea unei versiuni mobile separate a site-ului dvs. care a fost difuzată atunci când a fost detectată o dimensiune mai mică a ecranului. Cu toate acestea, dezvoltarea unei versiuni mobile a site-ului dvs. durează mai mult timp decât dezvoltarea unui site web receptiv care arată excelent și funcționează conform destinației, indiferent de dispozitivul pe care vizitatorii dvs. îl folosesc. Un alt dezavantaj al unei versiuni de site mobil este faptul că acestea costă mai mult, deoarece dezvoltatorul dvs. trebuie să creeze două site-uri în loc de unul.
Direct legate de punctul de mai sus este mai ușor de întreținere a site-ului. Cu două versiuni ale site-ului dvs., personalul dvs. sau echipa dvs. de dezvoltare trebuie să împartă timpul și resursele pentru administrarea a două site-uri web. Cu un site web receptiv, personalul dvs. poate petrece mai puțin timp pe sarcini de întreținere și se concentrează pe sarcini mai importante, cum ar fi marketingul, testare A / B, servicii pentru clienți, dezvoltarea de produse sau conținut și mai mult.
Un alt punct de reținut cu două versiuni ale site-ului dvs. web este faptul că în esență creați conținut duplicat. În timp ce motoarele de căutare devin din ce în ce mai inteligente, trebuie încă să înțelegeți ce versiune de site este mai importantă. Dacă utilizați o versiune mobilă a site-ului dvs., conținutul dvs. rămâne același chiar dacă adresa URL este diferită.
Acest lucru poate determina ambele versiuni ale site-ului dvs. web să aibă un rang mai mic pentru motoarele de căutare, deoarece motoarele de căutare nu vor ști ce conținut este relevant. Dacă doriți ca ambele versiuni ale site-ului să funcționeze bine, ar trebui să creați două strategii și campanii separate SEO și să investiți semnificativ mai mulți bani în producerea de conținut original și unic pentru versiunea desktop și mobilă a site-ului dvs..
Deoarece au două strategii separate SEO necesită prea mult timp și bani, majoritatea proprietarilor de site-uri recurg la utilizarea unei etichete canonice pe site-ul lor mobil, care indică versiunea desktop. Ca rezultat, majoritatea site-urilor mobile separate nu sunt clasate în motoarele de căutare.
Cu un site web receptiv, toate durerile de cap de mai sus pot fi evitate cu succes. Dacă ați avea îndoieli cu privire la importanța designului web receptiv, acest lucru ar trebui să-i ușureze.
Când aveți două versiuni distincte ale site-ului dvs. web, trebuie să urmăriți două seturi de analize de pe site-ul web, astfel încât să știți de unde vin vizitatorii dvs. și cum interacționează cu conținutul dvs. Aceasta înseamnă că trebuie să urmăriți înscrierile multiple și să vă mulțumesc pagini, puncte de conversie, canale și multe altele.
Cu un site receptiv, pe de altă parte, statisticile site-ului dvs. sunt foarte simplificate pe măsură ce rămâneți pe un set unic de date. Totuși, puteți obține o imagine asupra dispozitivelor și a browserelor pe care le utilizează vizitatorii dvs., unde se scot și cât timp petrec pe site-ul dvs., dar nu va trebui să citiți date din mai multe rapoarte pentru a obține o imagine exactă.
Site-urile web responsabile tind să se încarce mai rapid pe toate dispozitivele, dar mai ales pe smartphone-uri și tablete. Datorită imaginilor receptive și a rețelelor fluide, este nevoie de mult mai puțin timp pentru încărcarea unei pagini, ceea ce are un impact direct asupra duratei vizitei utilizatorului. Potrivit cercetărilor, 53% dintre vizitatorii mobili vor abandona un site dacă paginile durează mai mult de trei secunde pentru încărcare. Aceeași cercetare arată că site-urile care se încarcă rapid beneficiază de mai mult timp petrecut pe site, precum și de rate de conversie îmbunătățite. Acest lucru vorbește despre volumele legate de importanța designului web receptiv.
Rata de respingere semnifică procentul de vizitatori pe un anumit site care navighează departe de site după ce a văzut o singură pagină. După cum am menționat mai sus, un site web receptiv înseamnă că vizitatorii vor rămâne mai mult pe site-ul dvs., ceea ce va reduce rata de respingere. Vizitatorii vor fi mai înclinați să facă clic și să citească alte pagini de pe site-ul dvs. și să exploreze tot ce aveți de oferit.
Mai mult timp pe site-ul dvs. și o rată scăzută de respingere sunt primii pași buni pentru îmbunătățirea experienței utilizatorilor și construirea încrederii. Îmbunătățirea experienței și a încrederii utilizatorilor conduc la rate de conversie mai bune, indiferent dacă conversia înseamnă înscrierea în buletinul informativ, efectuarea unei achiziții sau rezervarea unui apel. Luați în considerare pentru o clipă faptul că ratele de conversie medie a smartphone-urilor au crescut cu 64% față de desktop și este ușor de văzut de ce un site web receptiv este o necesitate.
Un altul dintre avantajele design-ului web receptiv este îmbunătățirea rangului motorului de căutare. Începând cu aprilie 2015, Google ia în considerare reacția site-ului dvs. ca fiind unul dintre semnalele care determină rangul site-ului dvs. pe pagina cu rezultatele motorului de căutare. În cazul în care site-ul dvs. nu este receptiv, motorul de căutare gigantul îl va plasa mai jos pe pagina de rezultate, în timp ce acesta va apărea mai sus dacă trece testul favorabil mobilului.
Un alt avantaj al design-ului web receptiv este îmbunătățirea rangului motorului de căutare. (Sursa: Envato Elements)Când este făcut corect, un design web receptiv poate duce la o creștere a cotelor sociale pentru conținutul dvs. Acesta este încă unul din avantajele de design web receptiv. Conținutul reactiv asociat cu butoanele responsabile pentru mass-media socială face ușor trimiterea de linkuri către paginile site-ului dvs., chiar și pe ecrane mai mici. Acest lucru vă poate ajuta să creșteți credibilitatea și să vă expuneți unui nou public, ceea ce duce la un trafic mai mare și la mai multe conversii. În același timp, semnalele sociale pot influența, de asemenea, poziția motorului dvs. de căutare în mod indirect, deoarece motoarele de căutare vor observa creșterea angajamentului și cererea de căutare.
În cele din urmă, merită menționat faptul că un site receptiv vă poate ajuta atunci când vine vorba de construirea backlink-urilor. Backlink-urile joacă un rol important în orice strategie de SEO, deoarece acestea prezintă motoarele de căutare pe care alte site-uri web le consideră site-ul o sursă de informații de încredere. Dacă site-ul dvs. nu este receptiv, alte site-uri web vor fi mai puțin incluse să vă conecteze. La urma urmei, conectarea la un site care nu oferă o experiență bună pentru utilizatori îi face să pară și rău.
După cum puteți vedea, există numeroase beneficii de design web receptiv pentru afacerea dvs. Dacă site-ul dvs. web nu este încă receptiv, planificarea unei reproiectări și a unui nou aspect fluid este un prim pas important. Vă va ajuta să determinați ce elemente de pagină sunt cele mai importante, ce pagini pot fi eliminate și cât de mult copiați pe site-ul dvs..
Odată ce sunteți clar în direcția reproiectării dvs., vă puteți scufunda în alegerea platformei potrivite și a temei sau a șablonului potrivit pentru site-ul dvs. Apoi puteți implementa sfaturile prezentate în această serie de tutoriale și puteți îmbunătăți rata de conversie a site-ului dvs., rata de angajare, SEO și multe altele.
Accentsconagua