Ce este designul web pentru SmarPhone?
Lista de verificare responsive +12 puncte pentru site-ul dvs. WordPress
Modul în care dispozitivele mobile au devenit o parte din viața noastră de zi cu zi, nu ar fi o surpriză.
Potrivit Google, peste 50 la sută din interogările de căutare din întreaga lume provin acum de pe dispozitive mobile. Privind această tendință, Google a lansat Actualizarea vitezei mobile pentru pagini în iulie 2018. Cu această actualizare, viteza paginii este acum un factor de clasificare pentru rezultatele căutării mobile.
Aceasta înseamnă că, dacă nu ați optimizat site-ul dvs. pentru mobil, ar trebui să o faceți acum. Sau riscați să pierdeți peste jumătate din audiență.
Un site web cu design atractiv este ceea ce vă va salva de la pierderea audienței și a afacerii dvs.
În acest post, voi împărtăși ce design web este responsiv și de ce este important. Voi împărtăși câteva exemple de design web responsiv. Plus o listă de verificare de 12 puncte pentru a vă asigura că site-ul dvs. WordPress este responsiv.
CE ESTE DESIGNUL WEB RECEPTIV?
Trăim într-o lume plină de dispozitive inteligente. Aceste dispozitive inteligente vin în toate formele și dimensiunile ecranului. De la ceasurile inteligente la mărimea încheieturii mâinii la televizoarele inteligente de ecran mari.
Oamenii folosesc toate aceste dispozitive pentru a răsfoi și a interacționa cu paginile web de pe internet. Aceasta înseamnă că site-ul dvs. trebuie să arate bine și să fie ușor de utilizat, indiferent de dispozitiv.
Acesta este locul unde design-ul web receptiv ajunge la salvare.
Responsabilitatea web design-ului face site-ul dvs. să arate bine și să funcționeze bine pe toate dispozitivele. În funcție de dispozitiv, această abordare de design ascunde, arată, micșorează, mări sau mută conținutul pentru a face să arate bine pe orice dispozitiv.
Responsabilitatea design-ului web se numește și designul mobil sau designul mobil. Vedeti si articolul Sfaturi web design Bucuresti
DESIGN-UL PRIETENOS PENTRU MOBIL ESTE ESENȚIAL PENTRU SITE-UL DVS. WEB
Gandeste-te la asta. Publicul dvs. a îmbrățișat deja designul receptiv.
Astăzi, 80% dintre utilizatorii de internet dețin un smartphone. Acești utilizatori cheltuiesc, în medie, 69% din timpul lor media pe smartphone-uri ( comScore ).
Întreprinderile fără un site web mobil sunt dispuse să răstoarne clienții. Potrivit socPub , un utilizator enorm de 57% spun ca nu va recomanda o afacere cu un site mobil slab proiectat.
Competiția dvs., pe de altă parte, vă pune covorul roșu pentru clienții dvs.
Potrivit MarketingLand , 72% din bugetul publicitar digital al SUA va fi cheltuit pentru publicitatea pe mobil. Și 68% dintre companii au integrat marketingul mobil în strategia de marketing globală, conform SalesForce .
Verdictul este clar. Du-te receptiv sau du-te bust.
SITE-UL DE VERIFICARE A SITE-URILOR WEB CU 12 PUNCTE DE RĂSPUNS
Dacă ați redesenat (sau ați obținut un nou site web) în ultimii ani, există șanse deja să răspundă. Deoarece reactivitatea nu mai este un add-on, majoritatea companiilor de design web oferă design receptiv ca standard.
Toate temele WordPress gratuite și premium CyberChimps sunt pe deplin receptive.
Dar asigurarea că site-ul dvs. este prietenos cu dispozitivul mobil nu este o sarcină unică. Trebuie să încercați și să actualizați periodic site-ul dvs. pentru a răspunde.
Iată o listă de verificare la îndemână pentru a vă ajuta să testați site-ul dvs. WordPress.
- Testați pe dispozitive și browsere.
Colectați date de date mobile și de trafic web din Google Analytics. Aceste date includ dispozitivele mobile și browserele utilizate pentru a accesa site-ul dvs. web. - Revizuiți mixul dispozitiv / browser la fiecare câteva luni.
Pe baza datelor colectate recent, retrageți combinațiile vechi și faceți loc pentru altele noi. - Testați conținut important.
Asigurați-vă că conținutul paginilor importante este afișat pe toate dispozitivele. Alte conținuturi compatibile pot fi ascunse pe dispozitivele mai mici. - Testați pentru ordinea conținutului în funcție de importanță.
Asigurați-vă că un conținut important apare înaintea altui conținut de suport pentru dispozitivele mai mici. - Testați performanța.
Măsurați cât timp durează site-ul dvs. pentru a reda browserele, dispozitivele și vitezele de internet. Comprimați resursele mari și utilizați cache-ul pentru a îmbunătăți performanța site-ului web. - Testați site-ul vizual.
Asigurați-vă că textul, imaginile și comenzile sunt aliniate. Și nu rulați sau nu depășiți marginile ecranului. Asigurați-vă că conținutul se derulează și se afișează corect între dispozitive. - Testați tipografia site-ului web.
Asigurați-vă că întregul conținut al textului este lizibil pe toate dispozitivele. Asigurați-vă că fontul, stilul și culorile sunt coerente. - Testați fonturile dispozitivului.
Atunci când utilizați fonturi de dispozitiv, asigurați-vă că luați în considerare fonturile de pe toate dispozitivele și sistemele de operare. Asigurați-vă că specificați fonturi implicite pentru dispozitiv în familia de fonturi a foii de stil a site-ului dvs. Web. - Testați pentru o navigare ușoară.
Asigurați-vă că elementele de navigație nu rulează sau nu depășesc marginile ecranului. Utilizați navigarea ascunsă utilizând pictograma meniului hamburger pe dispozitivele mai mici. Asigurați-vă că utilizatorul poate naviga utilizând gesturi de glisare. - Testați ferestrele pop-up de pe site
Asigurați-vă că și ferestrele de pe site-ul dvs. web sunt receptive. Acestea includ atât pop-up-uri inline cât și ferestre de browser. - Testați pentru interactivitate.
Oamenii folosesc diverse dispozitive pentru a interacționa cu dispozitivele. Tastaturi, șoareci, stilouri și, bineînțeles, degete. Asigurați-vă că comenzile dvs. sunt ușor de accesat și suficient de mari pentru robinetele cu degetul. - Optimizați mai întâi pentru mobil.
Atunci când redesignați o secțiune (sau un întreg site web), păstrați-vă la prima abordare de proiectare mobilă. Adaptați mai întâi design-ul la dispozitive mobile mai mici. Apoi construiți pentru ecrane mai mari.
- Testați pe dispozitive și browsere.
INSTRUMENTE PENTRU TESTAREA REACTIVITĂȚII SITE-ULUI WEB
Există o tona de instrumente disponibile pentru a testa dacă site-ul dvs. este receptiv. Am redus lista primilor trei pentru tine:
Instrumentul Google de testare prietenos pentru dispozitive mobile
Introduceți o adresă URL a paginii și acest instrument vă va spune dacă pagina este prietenoasă cu dispozitivele mobile. De asemenea, puteți utiliza acest instrument pentru a obține un raport de analiză la nivel local pentru reacție.
Fiind un instrument Google, aceste recomandări sunt, de asemenea, bune pentru optimizarea motoarelor de căutare.
Sunt responsabilă?
Utilizați acest instrument dacă doriți să verificați rapid cum arată site-ul dvs. pe dispozitivele obișnuite.
Din nou, introduceți adresa URL a paginii dvs. și Am I Responsive va arăta cum arată site-ul dvs. pe un desktop, laptop, tabletă și un telefon mobil.
Responsabil Design Checker
Pe de altă parte, dacă doriți să testați pagina dvs. web într-o serie de dispozitive, utilizați Responsive Design Checker.
În timp ce acest instrument funcționează similar cu Am I Responsive, vă oferă mai multe opțiuni de rezoluție a ecranului. Pe lângă dispozitivele standard, puteți să testați și pagina dvs. pe anumite dispozitive, cum ar fi Amazon Kindle și telefoane Google Pixel.
EXEMPLE DE WEB DESIGN RESPONSIVE
Nu, că știți de ce designul receptiv este esențial pentru site-ul dvs., să examinăm trei exemple care demonstrează cele mai bune practici de design receptive.
Dropbox
Zona eroului DropBox și apelul la acțiune se adaptează frumos în funcție de dimensiunea ecranului.
Observați cum apare formularul de înscriere pe ecrane mai mari. De asemenea, observați săgeata pe un ecran mai mare, sub zona eroului. Această săgeată este absentă pe dispozitivele de dimensiuni mai mici, în care utilizatorii tind să deruleze în mod natural.
Casă in copac
Meniul de navigare al site-ului Treehouse prezintă designul de navigare receptiv la cel mai bun mod.
Observați cum numărul de elemente de meniu de navigare se reduce pe măsură ce ecranul devine mai mic. Elementele de meniu de navigare absente sunt ascunse în spatele butonului pictogramei hamburger din colțul din stânga sus al antetului site-ului web.
Dribla
Conținutul Dribble se adaptează în funcție de dimensiunea ecranului utilizatorului.
Observați cum scade numărul de coloane din grila de elemente de design pe măsură ce dimensiunea ecranului devine mai mică.
CĂUTAȚI O TEMĂ WORDPRESS RECEPTIVĂ?
Nu mai căuta.
Toate temele gratuite și premium WordPress arată frumos și funcționează foarte bine pe toate dispozitivele. Uitați-vă la unele dintre temele noastre WordPress receptive.
Responsiv Pro
Responsive Pro și versiunea gratuită sunt printre primele teme WordPress receptive. Cu peste 100.000 de site-uri web care o utilizează în mod activ, această temă este încă puternică. Tema susține editorul Gutenberg și vine cu 12 scheme de culori predefinite.
Dacă sunteți în căutarea unei teme fiabile pentru mobil, Responsive Pro este soluția dvs.
Ia Responsabil Pro aici .
Răspuns Premium
Răspunsul Premium și versiunea gratuită sunt frații moderni ai temei Responsive Pro.
Nu numai că aceste teme sunt receptive, ci și construite în conformitate cu standardele WordPress din 2019, Gutenberg Editor support,
Element de sprijin pentru constructorii de pagini și 3 șabloane de pagină personalizată.
În timp ce în primul rând o temă de blog, Răspunsul poate fi de asemenea utilizat de întreprinderi mici și de soloprenori.
Primiți răspuns aici .
Kobashop
Kobashop este o temă WooCommerce WordPress premium.
Această temă receptivă vine cu o pagină de pornire personalizată pentru a vă prezenta produsele și categoriile cele mai recente prezentate, categoriile și recenziile despre produse.
Ia Kobashop aici .
CONCLUZIE
Cu peste 8,5 miliarde de dispozitive mobile active din întreaga lume, site-ul dvs. Web trebuie să asigure o experiență mobilă.
Cu toate acestea, design-ul web receptiv nu este o activitate unică. Dispozitive noi, sisteme de operare și browsere apar în fiecare zi. Trebuie să actualizați periodic lista de dispozitive și browsere pe care site-ul dvs. Web le acceptă și să le testeze pe acestea.
Dacă construiți un nou site web, există exemple bune de design receptiv pe web. Inspirați-vă de o temă sau începeți cu temele noastre WordPress receptive.
Este site-ul dvs. mobil prietenos? Cum îl testezi pentru reacție?