a avea o versiune mobilă a site-ului dvs. web este o necesitate în zilele noastre și singura modalitate sigură de a face proiectul dvs. web accesibil de pe dispozitive mobile. Deci, dacă aveți dreptate pe cale de a lansa un site web, sunteți obligat să ia această problemă în considerare pentru a face un succes. Aveți deja un site web și doriți să îl actualizați pentru a-l face mobil? Informațiile furnizate mai jos vă vor fi utile și pentru dvs.
există mai multe moduri de a începe un site mobil astăzi. Alegerea celei mai potrivite soluții depinde de mai mulți factori, cum ar fi tipul site-ului, vârsta și caracteristicile, propriile obiective de design web, abilitățile și cerințele. Cele mai răspândite soluții sunt următoarele:
- crearea de design receptiv, atunci când un utilizator vizitează același site web (care se afișează diferit în ceea ce privește regulile speciale legate de CSS) de pe desktop și dispozitive mobile;
- versiune separată a site-ului mobil bazată pe abordarea numai pentru mobil, atunci când aveți două interfețe care funcționează în mod consecvent și pot fi găzduite chiar pe domenii/subdomenii diferite;
- aplicație mobilă completă, care poate fi fie un produs autonom cu o arhitectură pre-proiectată dezvoltată pentru o anumită platformă, fie un instrument de previzualizare separat (cum ar fi un browser web) care se aplică unui singur site web.
oricare dintre aceste opțiuni funcționează excelent pentru crearea de site-uri web mobile. Depinde de proprietar doar să aleagă cea mai potrivită soluție. Să aruncăm o privire la cele mai răspândite (și cele mai convenabile) modalități de dezvoltare a proiectelor mobile acum.
cum se face o versiune mobilă a unui site web (constructor de site-uri web)
dacă nu aveți încă un site web, este logic să alegeți un serviciu care vine cu suport de proiectare receptiv și/sau are un editor mobil integrat separat. Un constructor de site-uri web va funcționa cel mai bine în acest scop, deoarece aceste platforme sunt create în mare parte pentru dezvoltarea de site-uri web prietenoase pentru Dispozitive mobile și, astfel, își fac inițial toate blocurile, widget-urile și elementele de interfață receptive în mod implicit. Ca urmare, proiectele construite cu ele, se afișează excelent pe ecrane desktop și mobile, fără a fi nevoie să creați o versiune mobilă separată. Să examinăm această opțiune prin utilizarea Wix website builder.
Wix este cel mai popular constructor de site-uri SaaS, care permite pornirea/gestionarea oricărui tip de proiect web, Fie că este un blog, un portofoliu, o pagină de destinație, un site web de afaceri sau chiar un magazin web. Toate șabloanele disponibile în galeria sa extinsă (există peste 550 dintre ele aici până acum), precum și paginile web pe care utilizatorii le creează de la zero sunt adaptate automat pentru navigarea mobilă.
este posibil să configurați separat o versiune de site pentru desktop și mobil aici, dar nu există încă o opțiune de previzualizare a tabletei. Ce puteți face aici este să ascundeți blocurile și elementele de interfață selectate și să modificați/configurați fundaluri unice aici. Mai mult, Wix are funcții specifice legate de mobil, cum ar fi:
- afișarea panoului de lansare rapidă (puteți adăuga un buton de apel telefonic, link-uri către rețelele sociale/mesageri etc. aici);
- butonul „Sus” ;
- ecran de întâmpinare (un fel de ecran de încărcare animat care permite afișarea salutărilor emoționale sau introducerea unei mărci/mărci comerciale înainte de a accesa efectiv un site web);
- schemă de culori personalizată pentru panoul browserului Chrome;
- serviciul de optimizare automată a conținutului și a aspectului paginii web pentru Dispozitive mobile (aceasta este o opțiune destul de convenabilă pentru paginile web create de designeri neexperimentați).
Wix are, de asemenea, o aplicație mobilă care vă permite să gestionați un site web, dacă primiți un abonament care include acces la instrumente profesionale de afaceri.
cum se face o versiune mobilă a site-ului CMS (WordPress)
ca orice alt CMS, WordPress nu acordă atenție unui dispozitiv folosit pentru a ajunge la un site web. Platforma oferă doar varianta de proiectare specificată în setările implicite.
încă are sens să evidențiem serviciile dezvoltatorilor web aici, deoarece WordPress este unul dintre acele CMS, al cărui design al panoului administrativ se poate adapta dispozitivelor mobile (aceasta înseamnă că un site web va fi convenabil nu numai pentru vizitatori, ci și pentru proprietarul său, care îl va putea edita, configura și umple cu conținut de pe un dispozitiv mobil). În plus, există aplicații pentru smartphone-uri care sunt aplicabile nu numai pentru un CMS clasic, ci și pentru un cloud WordPress.com platforma, de asemenea.
ca urmare, o versiune de site mobil se dovedește a fi un merit al unui șablon în sine în 99% din cazuri. Singura excepție este pluginurile sau Scripturile speciale care pot redirecționa utilizatorii către o temă mobilă separată (de exemplu, pe baza rezoluției ecranului sau a modelului dispozitivului).
cum se creează o versiune de site mobil cu WordPress de la zero
Dacă intenționați doar să lansați un site web, atunci problema nu este atât de acută – trebuie doar să alegeți șablonul potrivit. Sortimentul de teme receptive este mai mult decât suficient chiar și în catalogul oficial CMS. Trebuie să vă asigurați că designul selectat aderă absolut la funcțiile declarate. Același lucru este despre platforme alternative precum ThemeForest sau TemplateMonster.
dacă viteza de încărcare și parametrii High PageSpeed Insights contează cu adevărat pentru dvs., atunci există șabloane speciale care garantează până la 100 de puncte în testele de profil, cum ar fi tema Neve, de exemplu. Cu toate acestea, desenele care nu se pot adapta la ecranele smartphone-urilor nu sunt destul de răspândite în aceste zile.
cum să înlocuiți un șablon WordPress cu unul receptiv
dacă dețineți deja un site web pentru o perioadă destul de lungă de timp și șablonul său este învechit fiind creat inițial pentru a se potrivi cu formatele de ecran la scară largă, atunci ar trebui să luați în considerare posibilitatea de a înlocui un design vechi de site web cu unul nou. O astfel de abordare are mai multe avantaje, și anume:
- Desktop și versiunea site-ul mobil va avea același stil;
- nevoia de a gestiona două tipuri de interfață va fi eliminată;
- nu va trebui să scrieți funcții și algoritmi complexi pentru a defini rezoluția ecranului și tipul de dispozitiv pe care un utilizator trebuie să-l redirecționeze către designul separat;
- temele comerciale vin frecvent cu suport tehnic și, astfel, veți putea obține răspunsuri la toate întrebările dvs. și pentru a configura o nouă temă nu mai rea decât cea anterioară.
dezavantajele sunt de asemenea disponibile aici. Șabloanele vin adesea cu coduri scrise de analiză, contoare, blocuri de anunțuri etc. Unele dintre ele introduc chiar tipuri de materiale separate, ceea ce declanșează necesitatea de a transfera toate aceste elemente într-un nou șablon. Toate greșelile potențiale pot avea un impact negativ asupra rezultatelor motorului de căutare. Dacă aveți utilizatori obișnuiți, este posibil să nu le placă ideea și chiar să refuze să vă viziteze site-ul web. Astfel, trebuie să analizați cu atenție viitorul comutator de proiectare pentru a lua în considerare toate nuanțele posibile.
cum se face un șablon învechit receptiv
ideea de a face un șablon învechit receptiv nu este la fel de complicat cum ar părea inițial. Cu toate acestea, nu are sens să-l încercați, dacă vă lipsesc abilitățile de nișă sau cel puțin elementele de bază ale designului web. Oricum, există întotdeauna posibilitatea de a angaja un web designer pentru a vă ajuta cu asta.
ideea principală este să adăugați interogări media CSS, pe baza cărora stilurile în cascadă vor fi adăugate special pentru rezoluțiile de ecran necesare. Aruncați o privire la exemplu acum:
@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}
de exemplu, dacă grila principală arăta astfel:
va avea următorul aspect în HTML:
<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>
stiluri pentru aceste cutii sunt plasate în fișiere șablon CSS cu punct în picioare la început ceea ce înseamnă că aceasta este clasa CSS:
.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}
dacă înlocuim lățimea fixă sau relativă cu 100% pentru rezoluția ecranului sugerată, atunci grila va arăta după cum urmează:
pentru a ajunge la un astfel de rezultat, este suficient să adăugați interogarea media la foile de stil (exemplul furnizat mai jos este aplicabil pentru toate dispozitivele cu lățimea ecranului de 1024 pixeli și mai jos):
@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}
rețineți că comentariile furnizate între paranteze sunt menționate exclusiv ca eșantion, ele nu pot fi transferate în codul CSS real.
ce capcane pot apărea cu o astfel de realizare de design receptiv? Din păcate, există multe dintre ele:
- întregul aspect al paginii web poate fi încălcat, deoarece nu numai blocurile cheie disponibile pe o pagină pot avea lățime fixă. Acestea pot fi, de asemenea, imagini, blocuri de știri pe o pagină de pornire/într-o categorie, Blocuri de descriere a autorului și alte elemente. Este imposibil să le identificăm pe toate simultan. Fiecare dintre ele va trebui editat imediat ce este identificat.
- volumul paginii web nu se va modifica, ceea ce va avea un impact negativ asupra vitezei de descărcare cu conexiune lentă la Internet (nicio optimizare nu va fi posibilă în astfel de condiții).
- conform recomandărilor motorului de căutare, fonturile de pe dispozitivele mobile ar trebui să fie ușor de citit fără a mări. Acest lucru va declanșa necesitatea redefinirii tuturor dimensiunilor fontului pentru titluri, texte corporale, citate, liste (numerotate și nenumerotate) etc.
- un antet și un meniu complex ar trebui să fie complet refăcute. Este logic să lăsați doar un logo mic al site-ului web, o pictogramă de căutare (dacă aveți această opțiune) și o pictogramă de profil (dacă este utilizat un sistem de autorizare). Un meniu desktop ar trebui să fie mai bine ascuns și înlocuit cu o pictogramă „sandwich” (pictograma meniului). În majoritatea șabloanelor responsive populare, acest lucru este implementat de două meniuri paralele: primul este destinat ecranelor desktop și este afișat numai pe PC, în timp ce al doilea este destinat numai dispozitivelor mobile (este afișat pe baza acelorași interogări media numai pe dispozitive mobile).
- dacă structura casetelor principale diferă, de exemplu, bara laterală este afișată în stânga, dar nu în dreapta, în timp ce toate widget-urile vor fi afișate în fața conținutului principal, deși este mai logic să le plasați mai jos.
- în afară de fișierele CSS, stilurile site-ului web pot fi înlocuite cu scripturi JS, va fi mai dificil să le găsiți și să le editați.
acestea sunt doar câteva dintre potențialele capcane. Astfel, este logic să angajați un expert în design web pentru a finaliza sarcina.
avantajele interogărilor media fac posibilă ștergerea codului incorect în orice moment. Aceste stiluri nu sunt afișate pe site-ul principal.
cum se adaugă o versiune de site web receptivă cu pluginuri
unele CMS folosesc propriile seturi de extensii, în timp ce altele nu le au deloc. WordPress coed cu cele mai remarcabile pluginuri pentru crearea de site-uri web receptive, și anume:
- Jetpack – funcția de creare automată a versiunilor mobile a fost întreruptă din martie 2020;
- WPtouch – este disponibil în versiuni gratuite și plătite, extensia are propriile pluginuri și teme precum pluginul de organizare a cache-ului separat, pluginul de creare a aplicațiilor web, pluginul de optimizare a imaginilor, pluginul de creare AMP etc. Procesul de trecere de la desktop la tema mobilă cu WPtouch este finalizat fără a schimba adresele URL ale paginilor web, ceea ce contează foarte mult pentru SEO;
- WP Mobile Menu – Meniu receptiv pentru Dispozitive mobile (vă va fi util, dacă trebuie să înlocuiți un meniu voluminos și complex al versiunii site – ului desktop cu un meniu receptiv și compact pentru Dispozitive mobile);
- WP Mobile Detect-pluginul definește inițial că o persoană folosește un dispozitiv mobil și oferă rezultatul ca o valoare adevărată/falsă. Acest lucru îl face aplicabil pentru implementarea opțiunii de comutare a șablonului sau pentru afișarea anumitor blocuri de interfață;
- WP Mobile Edition-plugin-ul poate converti site-uri WordPress în aplicații web full-featured. Utilizatorii pot adăuga o pictogramă a site – ului web pe desktop-urile smartphone/tabletă pentru a o utiliza în format ecran complet (fără cadre și file de browser);
- mobile Smart-un plugin identifică faptul că dispozitivul se referă la clasa mobilă și apoi comută temele la cea alternativă, care este compatibilă cu dispozitivele mobile. O versiune Pro vine cu suport integrat de meniuri mobile, widget-uri speciale, opțiunea de gestionare plugin (un set separat pot fi furnizate pentru Dispozitive mobile), comutator de domeniu (pentru punerea în aplicare a muncii corecte a două versiuni independente site-ul) etc.
dezvoltatorii Web s-au asigurat că extensiile au rămas nerevendicate, deoarece mulți proprietari de site-uri web au decis să treacă la versiuni de șabloane receptive. Astfel, majoritatea acestor pluginuri nu au fost actualizate pentru o perioadă destul de lungă de timp, ceea ce poate duce la incompatibilitatea cu versiunea actuală a platformei. Singura excepție este WPtouch.
lucrul cu fiecare plugin va avea propriile particularități. Unele dintre ele oferă șabloane mobile gata făcute, în timp ce altele recomandă descărcarea extensiilor terță parte sau crearea celor proprii.
dacă preferați să lucrați cu o versiune de site mobil pe subdomeniu / adresă alternativă, atunci iată nuanțele de care ar trebui să fiți conștienți:
- acestea sunt site-uri diferite pentru motoarele de căutare și este foarte rău că conținutul lor nu este unic;
- pentru ca motoarele de căutare să „lipească” adresa URL și să înțeleagă că acesta este același site web, toate atributele linkului ar trebui să fie organizate corespunzător:
-
- atribut link … rel= „alternativ”href=” URL-pagina mobilă” – pentru versiunile desktop;
- atribut link … rel=” canonical”href=” URL-pagini Web desktop ” – pentru șabloane mobile.
- dacă conținutul din diferite versiuni ale paginilor web diferă, riscați să primiți sancțiuni pentru camuflare (pentru înlocuirea conținutului).
cum se face versiunea mobilă a site-ului HTML
în măsura în care site-urile HTML nu au funcții dinamice, nu veți putea analiza o rezoluție a ecranului unui dispozitiv și să treceți de la un șablon desktop la tema mobilă pe baza rezultatului. Tot ce aveți nevoie este să reproiectați complet grila de aspect și stilurile elementelor problematice.
am analizat deja cum să facem acest lucru – acest lucru se face prin interogări media. Cele mai dificil de adaptat machete sunt cele cu lățimea fixă și poziția elementelor.
nimic nu va funcționa fără abilități de nișă specializate și imersiune în cod CSS/HTML. Este logic să angajați un profesionist de web design chiar de la început sau să schimbați designul cu altul pe care îl puteți cumpăra sau comanda sau pur și simplu să dezvoltați o nouă pagină web de la zero, de exemplu, folosind Mobirise offline website builder, de exemplu. În cele din urmă, poate fi timpul să vă deplasați la infrastructura cloud și să alegeți unul dintre constructorii de site-uri online.
site-uri Separate pentru mobil și Desktop sau un singur site web: care este mai bine?
după cum sa menționat mai sus, având un site mobil este o necesitate pentru orice proprietar de afaceri. Acesta este un mod sigur de a asigura o prezentare de afaceri de calitate pe web, de a genera trafic și de a garanta experiența utilizatorului de neegalat. Întrebarea Este: are sens să creați două versiuni de site web separate pentru ecrane mobile și desktop sau să construiți un site web receptiv care să se afișeze excelent pe ambele tipuri de dispozitive?
în general, pornirea unui site web receptiv este o soluție mai eficientă și mai practică. Se elimină necesitatea de a crea două site-uri diferite, cu diverse domenii/subdomenii, URL-uri și structura internă. Astfel de site-uri confundă adesea vizitatorii și pot declanșa probleme, atunci când vine vorba de optimizarea SEO, marketingul pe internet și alte metode de promovare conexe. În schimb, veți obține un proiect care se va afișa la fel de bine pe ecranele desktop și mobile.
cât costă o versiune mobilă a site-ului web?
costul unei versiuni mobile a site-ului web depinde, în general, de o platformă cu care îl porniți. Dacă alegeți un constructor de site-uri online precum Wix, acesta poate fi absolut gratuit, deoarece sistemul vă permite să creați site-uri web care sunt pregătite pentru mobil în mod implicit. Cu toate acestea, planul Wix gratuit nu vă permite să vă conectați propriul nume de domeniu, ceea ce va face imposibilă obținerea la maximum a performanței proiectului.
în măsura în care Wix are o politică de prețuri destul de distinctivă și versatilă, puteți alege oricare dintre planurile sale de a lansa un site web. Luați în considerare doar obiectivele dvs. de design web, tipul și specializarea proiectului, precum și bugetul pe care sunteți gata să îl investiți, în timp ce alegeți cel mai preferat abonament. Fiecare plan Wix vine cu o gamă largă de caracteristici speciale și termeni care afectează costul final. Cel mai ieftin abonament pe site vă va costa 13 USD/lună, în timp ce prețul celui mai accesibil plan de bază pentru afaceri începe de la 23 USD/lună.
v-ați hotărât să utilizați WordPress pentru crearea de site-uri web receptive? Apoi, costul proiectului va depinde în cele din urmă de prețul de plugin-uri va merge pentru. Extensiile WordPress sunt în general poziționate ca fiind gratuite, dar o parte din caracteristicile lor devin disponibile după ce faceți upgrade la versiunea Pro. De exemplu, costul WPtouch Pro va varia de la 79 USD până la 359 USD pe an. Tocmai de aceea, pare rezonabil să treceți la un șablon receptiv gata. Astfel de teme sunt cumpărate o singură dată, în timp ce costul lor constituie în jur de 40-80 USD. În cazul în care încă decideți să angajeze un dezvoltator web profesionist pentru a reproiecta o temă învechită pentru tine Costul va fi discutat individual, în funcție de complexitatea proiectului.
linia de fund
nu este un secret faptul că orice site web ar trebui să aibă o versiune mobilă pentru a rămâne în căutare cu publicul țintă astăzi. Există aproape pe oameni care nu folosesc dispozitivele mobile pentru a naviga pe web, în căutarea pentru serviciile și produsele de care au nevoie. Astfel, procesul de optimizare a site-ului dvs. mobil va depinde în cele din urmă de platforma selectată.
Dacă intenționați doar să lansați un site web, este logic să acordați preferință unuia dintre cei mai populari constructori de site-uri online. Wix va funcționa cel mai bine în acest scop. În cazul în care rulați deja un site web alimentat de CMS precum WordPress, atunci este mai bine să îl înlocuiți cu o temă receptivă. Cu toate acestea, pluginurile care oferă suport mobil pot fi destul de scumpe, în timp ce o reproiectare completă a șabloanelor va fi o adevărată provocare, mai ales dacă intenționați să faceți față sarcinii în mod independent.
oricum, nu are sens să creați o versiune mobilă separată a site-ului dvs. web. Vă veți confrunta cu probleme legate de dezvoltarea proiectului și de sprijinul său suplimentar. O soluție mult mai simplă și rezonabilă este de a face site-ul dvs. mobil-receptiv de la început.