Kuinka tehdä mobiiliversio sivustostasi

verkkosivujesi mobiiliversio on nykyään pakollinen ja ainoa varma tapa saada web-projektisi saataville mobiililaitteilla. Niin, jos olet oikeassa aikeissa käynnistää sivuston, sinun on otettava tämä asia huomioon, jotta se onnistuu. Onko sinulla jo verkkosivusto ja haluat päivittää sen, jotta se olisi mobiiliystävällinen? Alla olevat tiedot ovat hyödyllisiä myös sinulle.

mobiilisivuston voi nykyään aloittaa monella tavalla. Sopivimman ratkaisun valinta riippuu useista tekijöistä, kuten sivuston tyypistä, iästä ja ominaisuuksista, omista web-suunnittelun tavoitteista, taidoista ja vaatimuksista. Laajimmat ratkaisut ovat seuraavat:

• responsiivinen suunnittelun luominen, Kun käyttäjä vierailee samalla verkkosivustolla (joka näyttää eri tavalla erityisten CSS: ään liittyvien sääntöjen suhteen) työpöydältä ja mobiililaitteilta;
• erillinen mobiilisivuston versio, joka perustuu vain mobiiliin lähestymistapaan, kun sinulla on kaksi käyttöliittymää, jotka toimivat johdonmukaisesti ja joita voidaan jopa isännöidä eri verkkotunnuksilla/aliverkkotunnuksilla;
• täysimittainen mobiilisovellus, joka voi olla joko itsenäinen tuote, jossa on ennalta suunniteltu arkkitehtuuri, joka on kehitetty tietylle alustalle, tai erillinen esikatselutyökalu (kuten verkkoselain), joka soveltuu vain yhdelle verkkosivustolle.

mikä tahansa näistä vaihtoehdoista toimii erinomaisesti mobiilisivujen luomisessa. Omistajan tehtävä on vain valita sopivin ratkaisu. Katsotaanpa katsomaan laajin (ja kätevin) tapoja mobiili projektikehitys nyt.

miten tehdä mobiiliversio verkkosivustosta (Website Builder)

jos sinulla ei vielä ole verkkosivustoa, on järkevää valita palvelu, jossa on reagoiva suunnittelutuki ja/tai erillinen integroitu mobiilieditori. Verkkosivujen rakentaja toimii parhaiten tähän tarkoitukseen, koska nämä alustat on useimmiten luotu mobiiliystävällisten verkkosivustojen kehittämiseen, ja siten ne tekevät aluksi kaikki lohkonsa, widgettinsä ja käyttöliittymäelementtinsä oletusarvoisesti reagoiviksi. Tämän seurauksena projektit rakennettu heidän kanssaan, näyttää hyvin työpöydällä ja mobiili näytöt ilman tarvetta luoda erillinen mobiiliversio. Tarkastellaan tätä vaihtoehtoa käyttämällä Wix website builder.

Wix on maailmanlaajuisesti suosittu All-in-one SaaS-sivuston rakentaja, joka mahdollistaa minkä tahansa verkkoprojektin aloittamisen/hallinnan, olipa kyseessä blogi, portfolio, aloitussivu, yrityssivusto tai jopa verkkokauppa. Kaikki sen laajassa galleriassa saatavilla olevat mallit (niitä on jo yli 550) sekä käyttäjien tyhjästä luomat verkkosivut mukautetaan automaattisesti mobiiliselailuun.

tässä on mahdollista erikseen asettaa työpöytä-ja mobiilisivuversio, mutta tabletin esikatseluvaihtoehtoa ei vielä ole. Mitä voit tehdä täällä on piilottaa valitut lohkot ja käyttöliittymä elementtejä ja muokkaamalla / perustamalla ainutlaatuisia taustoja täällä. Lisäksi Wixissä on erityisiä mobiiliin liittyviä ominaisuuksia, kuten:

• Pikalaukaisupaneelin näyttö(voit lisätä puhelupainikkeen, linkkejä sosiaalisiin verkostoihin / viestinviejiin jne. tässä);
• ”ylös” – nappi;
• Welcome screen (eräänlainen animoitu latausruutu, joka mahdollistaa tunteellisten tervehdysten näyttämisen tai brändin/tavaramerkin esittelyn ennen kuin varsinaisesti käytät verkkosivustoa);
• mukautettu värimaailma Chrome-selainpaneelille;
• automaattisen sisällön ja verkkosivujen asettelun optimoinnin palvelu mobiililaitteille (tämä on melko kätevä vaihtoehto kokemattomien suunnittelijoiden luomille verkkosivuille).

Wixillä on myös mobiilisovellus, jonka avulla voit hallita verkkosivustoa, jos saat tilauksen, joka sisältää pääsyn ammattimaisiin liiketoiminnan työkaluihin.

Kuinka tehdä mobiiliversio CMS: n verkkosivusta (WordPress)

kuten mikään muu CMS, WordPress ei kiinnitä huomiota laitteeseen, jota käytetään verkkosivustolle pääsemiseen. Alusta tarjoaa vain oletusasetuksissa määritetyn suunnitteluvaihtoehdon.

on silti järkevää korostaa web-kehittäjien palveluita Täällä, koska WordPress on yksi niistä CMS-järjestelmistä, joiden hallintopaneelin suunnittelu voi sopeutua mobiililaitteisiin (tämä tarkoittaa, että sivusto on kätevä paitsi kävijöille, myös sen omistajalle, joka voi muokata, perustaa ja täyttää sen mobiililaitteen sisällöllä). Lisäksi älypuhelimille on sovelluksia, jotka soveltuvat paitsi klassiselle CMS: lle, myös pilvelle WordPress.com laituri myös.

tämän seurauksena mobiilisivuston versio osoittautuu itse mallin ansioksi 99 prosentissa tapauksista. Ainoa poikkeus ovat erityiset laajennukset tai skriptit, jotka voivat ohjata käyttäjät erilliseen mobiiliteemaan (esimerkiksi näytön resoluution tai laitemallin perusteella).

miten luoda mobiilisivuston versio WordPress tyhjästä

jos olet juuri aikeissa käynnistää sivuston, niin ongelma ei ole niin akuutti – sinun täytyy vain valita oikea malli. Valikoima reagoiva teemoja on enemmän kuin tarpeeksi jopa virallisessa CMS luettelo. Sinun täytyy varmistaa, että valittu muotoilu noudattaa ehdottomasti ilmoitettuja toimintoja. Sama koskee vaihtoehtoisia alustoja, kuten ThemeForest tai TemplateMonster.

jos latausnopeudella ja suurella Sivunopeudella Insights-parametreilla on sinulle todella merkitystä, on olemassa erikoismalleja, jotka takaavat profiilitesteissä jopa 100 pistettä, kuten esimerkiksi Neve-teema. Kuitenkin malleja, jotka eivät voi sopeutua älypuhelimen näytöt, eivät ole aivan yleisiä näinä päivinä.

miten korvata WordPress-malli reagoivalla

jos omistat jo verkkosivuston melko pitkään ja sen malli on vanhentunut, koska se on alun perin luotu vastaamaan suuren mittakaavan näyttömuotoja, kannattaa harkita mahdollisuutta korvata vanha verkkosivusto uudella. Tällaisella lähestymistavalla on useita etuja, nimittäin:

• työpöytä-ja mobiilisivuston versio on sama tyyli;
• tarve hallita kahta käyttöliittymätyyppiä poistuu;
• sinun ei tarvitse kirjoittaa monimutkaisia funktioita ja algoritmeja määrittelemään näytön resoluutio ja Laitetyyppi, jonka käyttäjän on ohjattava hänet erilliseen suunnitteluun;
• kaupalliset teemat tulevat usein teknisen tuen mukana, joten voit saada vastauksia kaikkiin kysymyksiisi ja perustaa uuden teeman, joka ei ole huonompi kuin edellinen.

haitat löytyvät myös täältä. Mallien mukana tulee usein kirjallisia koodeja analytiikasta, laskureista, mainoslohkoista jne. Jotkut niistä jopa ottaa käyttöön erillisiä materiaalityyppejä, mikä laukaisee tarpeen siirtää kaikki nämä elementit uuteen malliin. Kaikki mahdolliset virheet voivat vaikuttaa kielteisesti hakukoneen tuloksiin. Jos sinulla on säännöllisiä käyttäjiä, he eivät ehkä pidä ajatuksesta ja saattavat jopa kieltäytyä vierailemasta sivustossasi. Näin ollen sinun täytyy perusteellisesti analysoida tulevaa suunnittelukytkintä harkitaksesi kaikkia mahdollisia vivahteita.

miten saada vanhentunut malli reagoimaan

ajatus vanhentuneen mallin tekemisestä reagoivaksi ei ole niin monimutkainen kuin se saattaa aluksi vaikuttaa. Kuitenkin, se ei todellakaan ole järkeä kokeilla sitä, jos puuttuu niche taitoja tai ainakin web design perusasioita. Joka tapauksessa, on aina mahdollisuus palkata web suunnittelija auttaa sinua, että.

pääideana on lisätä CSS-mediakyselyitä, joiden perusteella kaskadityylejä lisätään erityisesti vaadittavia näyttötarkkuuksia varten. Katso esimerkkiä nyt:

@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...}

esimerkiksi, jos pääverkko näytti tältä:

sillä on HTML-muodossa seuraava ulkoasu:

<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>

näiden laatikoiden tyylit on sijoitettu CSS-mallitiedostoihin, joissa piste seisoo alussa merkiten, että tämä on CSS-Luokka:

.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)}

jos korvaamme kiinteän tai suhteellisen leveyden 100%: lla ehdotetulle näytön resoluutiolle, ruudukko näyttää seuraavasti:

tällaisen tuloksen saavuttamiseksi riittää mediakyselyn lisääminen tyylilevyihin (alla oleva esimerkki soveltuu kaikkiin laitteisiin, joiden näytön leveys on 1024 pikseliä ja alle):

@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)}}

koska suluissa esitetyt huomautukset mainitaan ainoastaan otoksena, niitä ei voida siirtää varsinaiseen CSS-koodiin.

mitä sudenkuoppia voi syntyä näin reagoivalla suunnittelun toteutuksella? Valitettavasti niitä on paljon:

• koko web-sivun asettelua voidaan rikkoa, koska sivulla saatavilla olevien avainlohkojen lisäksi niillä voi olla tasaleveys. Nämä voivat olla myös kuvia, uutislohkoja etusivulla / luokassa, tekijän kuvauslohkoja ja muita elementtejä. On mahdotonta tunnistaa niitä kaikkia kerralla. Jokainen niistä on muokattava heti, kun se on tunnistettu.
• verkkosivun tilavuus ei muutu, mikä vaikuttaa negatiivisesti latausnopeuteen hitaalla Internet-yhteydellä (optimointi ei ole mahdollista tällaisissa olosuhteissa).
• hakukonesuositusten mukaan mobiililaitteiden fonttien tulisi olla helposti luettavissa zoomaamatta ulos. Tämä aiheuttaa tarpeen määritellä uudelleen kaikki kirjasinkoot otsikoita, tekstikehyksiä, lainausmerkkejä, luetteloita (numeroitu ja numeroimaton) jne.varten.
• otsikon ja monimutkaisen valikon tulisi olla kokonaan uusittu. On järkevää jättää vain pieni verkkosivun logo, hakukuvake (jos sinulla on tämä vaihtoehto) ja profiilikuvake (jos käytössä on valtuutustietojärjestelmä). Työpöytävalikon pitäisi olla parempi piilottaa ja korvata ”sandwich” – kuvakkeella (valikkokuvake). Useimmissa suosituissa responsive-malleissa tämä toteutetaan kahdella rinnakkaisella valikolla: ensimmäinen on tarkoitettu työpöydän näytöille ja se näkyy vain PC: llä, kun taas toinen on tarkoitettu vain mobiililaitteille (se näytetään samojen mediakyselyiden perusteella vain mobiililaitteilla).
• jos pääruutujen rakenne eroaa, esimerkiksi sivupalkki näytetään vasemmalla mutta ei oikealla, kun taas kaikki widgetit näytetään pääsisällön edessä, vaikka on loogisempaa sijoittaa ne alemmaksi.
• CSS-tiedostoja lukuun ottamatta verkkosivujen tyylit voidaan korvata JS-skripteillä, joita on vaikeampi löytää ja muokata.

nämä ovat vain joitakin mahdollisia sudenkuoppia. Siksi on järkevää palkata web design asiantuntija suorittaa tehtävän.

mediakyselyiden edut mahdollistavat virheellisen koodin poistamisen milloin tahansa. Nämä tyylit eivät näy pääsivustolla.

kuinka lisätä reagoiva Verkkosivuversio liitännäisillä

jotkut CMS: t käyttävät omia laajennussarjojaan, kun taas toisilla niitä ei ole lainkaan. WordPress coed merkittävin plugins reagoiva sivuston luomiseen, nimittäin:

• Jetpack – automatisoidun mobiiliversion luontiominaisuuden käyttö on lopetettu maaliskuusta 2020 lähtien;
• WPtouch – on saatavilla Ilmaisina ja maksullisina versioina, laajennuksella on omat liitännäiset ja teemat, kuten erillinen välimuistin organisaatioliitännäinen, verkkosovellusten luontiliitännäinen, kuvan optimointiliitännäinen, AMP-luontiliitännäinen jne. Prosessi siirtyminen työpöydältä mobiili teema WPtouch on valmis muuttamatta web-sivun URL, joka merkitsee paljon SEO;
• WP Mobile Menu – responsiivinen valikko mobiililaitteille (se on kätevä sinulle, jos sinun täytyy korvata Iso ja monimutkainen valikko työpöydän web – version reagoiva ja kompakti valikko mobiililaitteille);
• WP Mobile Detect-plugin määrittelee aluksi, että henkilö käyttää mobiililaittetta ja antaa tuloksen todellisena/vääränä arvona. Tämä tekee siitä sovellettavan mallin kytkentävaihtoehdon täytäntöönpanoon tai tiettyjen liitäntälohkojen näyttämiseen;
• WP Mobile Edition – liitännäinen voi muuntaa WordPress-sivustot monipuolisiksi verkkosovelluksiksi. Käyttäjät voivat lisätä verkkosivuston kuvakkeen älypuhelimeensa/tablet – pöytätietokoneisiinsa käyttääkseen sitä koko näytön muodossa (ilman kehyksiä ja selaimen välilehtiä);
• Mobile Smart-liitännäinen Tunnistaa, että laite viittaa mobiililuokkaan ja vaihtaa sitten Teemat vaihtoehtoiseen, mobiililaitteiden kanssa yhteensopivaan. Pro-versio tulee integroitu tuki mobiili valikot, erityinen widgetit, plugin hallinta vaihtoehto (erillinen joukko voidaan tarjota mobiililaitteille), domain kytkin (toteuttamiseen oikean työn kaksi riippumatonta verkkosivuilla versiot) jne.

Web-kehittäjät ovat varmistaneet, että laajennukset jäivät lunastamatta, koska monet verkkosivujen omistajat ovat päättäneet siirtyä reagoiviin malliversioihin. Siten, suurin osa näistä plugins ei ole päivitetty melko pitkään aikaan, mikä voi johtaa yhteensopimattomuuteen nykyisen version Alustan. Ainoa poikkeus on WPtouch.

jokaisella liitännäisellä on omat erityispiirteensä. Jotkut niistä tarjoavat valmiita mobiilipohjia, kun taas toiset suosittelevat kolmannen osapuolen laajennusten lataamista tai omien laajennusten luomista.

jos haluat mieluummin käyttää mobiilisivuston versiota aliverkkoosoitteessa/vaihtoehtoisessa osoitteessa, Tässä ovat vivahteet, joista sinun tulisi olla tietoinen:

• nämä ovat eri sivustoja hakukoneet ja se on todella huono, että niiden sisältö ei ole ainutlaatuinen;
• jotta hakukoneet ”liimaisivat” URL-osoitteen ja ymmärtäisivät, että kyseessä on sama verkkosivusto, kaikki linkin attribuutit tulisi järjestää oikein:
• • attribuutti link … rel= ”alternate” href=” URL-mobile page” – työpöytäversioille;
  • attribuutti link … rel=” canonical”href =” URL-desktop web pages ” – mobiilipohjille.
• jos sisältö eri web-sivun versiot eroavat toisistaan, olet vaarassa saada sanktioita peittäminen (sisällön korvaaminen).

miten tehdä mobiiliversio HTML-sivustosta

sikäli kuin HTML-sivustoilla ei ole dynaamisia toimintoja, et voi analysoida laitteen näytön resoluutiota ja siirtyä työpöytämallista mobiiliteemaan tuloksen perusteella. Kaikki mitä tarvitset on täysin uudelleen ulkoasu grid ja tyylejä ongelmallisia elementtejä.

olemme jo käyneet läpi, miten se tehdään-tämä tapahtuu mediakyselyiden kautta. Vaikeimmin muokattavia asetteluja ovat tasaleveät ja elementtien sijainti.

mikään ei onnistu ilman erikoistuneita niche-taitoja ja CSS/HTML-koodin upottamista. On järkevää joko palkata web design pro alusta alkaen tai muuttaa suunnittelu toiseen voit ostaa tai tilata, tai yksinkertaisesti kehittää uuden web-sivun tyhjästä, esimerkiksi mobirise offline website builder, esimerkiksi. Lopuksi, se voi olla korkea aika siirtyä pilvi infrastruktuuri ja valita yksi online-sivuston rakentajat.

erilliset sivustot mobiililaitteille ja työpöydälle vai yksi sivusto: kumpi on parempi?

kuten edellä mainittiin, mobiilisivusto on jokaisen yrityksen omistajan pakollinen. Tämä on varma tapa varmistaa laadukas liiketoiminnan esitys verkossa, luoda liikennettä ja taata vertaansa vailla käyttäjäkokemuksen. Kysymys kuuluu: onko järkevää luoda kaksi erillistä verkkosivustoversiota mobiili-ja työpöytänäytöille tai rakentaa reagoiva verkkosivusto, joka näyttää hyvältä molemmissa laitteissa?

yleisesti ottaen yhden reagoivan verkkosivuston perustaminen on tehokkaampi ja käytännöllisempi ratkaisu. Se poistaa tarpeen luoda kaksi erilaista verkkosivustoa, joissa on erilaisia verkkotunnuksia / aliverkkotunnuksia, URL-osoitteita ja sisäinen rakenne. Tällaiset sivustot usein hämmentävät kävijöitä ja ne voivat aiheuttaa ongelmia, kun se tulee SEO optimointi, internet-markkinointi ja muut liittyvät edistäminen menetelmiä. Sen sijaan saat yhden projektin, joka näyttää yhtä hyvin työpöydällä ja mobiililaitteilla.

kuinka paljon verkkosivuston mobiiliversio maksaa?

verkkosivuston mobiiliversion hinta riippuu yleensä alustasta, jolla sen aloittaa. Jos valitset online website builder kuten Wix, se voi olla täysin ilmainen, koska järjestelmän avulla voit luoda sivustoja, jotka ovat mobiili-valmis oletuksena. Ilmainen Wix-suunnitelma ei kuitenkaan anna sinun liittää omaa verkkotunnustasi, mikä tekee mahdottomaksi saada irti projektisi suorituskyvystä.

sikäli kuin Wixillä on varsin omaleimainen ja monipuolinen hinnoittelupolitiikka, voi valita minkä tahansa sen suunnitelmista perustaa verkkosivusto. Vain harkita web design tavoitteet, projektin tyyppi ja erikoistuminen sekä budjetti olet valmis investoimaan siihen, kun valitset edullisin tilaus. Jokaisessa Wix-suunnitelmassa on laaja valikoima erikoisominaisuuksia ja ehtoja, jotka vaikuttavat lopullisiin kustannuksiin. Halvin verkkosivuilla tilaus maksaa $13/mo, kun taas hinta edullisin liiketoiminnan perussuunnitelma alkaa $23 / mo.

Oletko päättänyt käyttää WordPressiä reagoivien verkkosivujen luomiseen? Sitten kustannukset projektin lopulta riippuu hinnasta plugins menet. WordPress laajennukset ovat yleensä sijoitettu ilmaiseksi niistä, mutta osa niiden ominaisuuksia vielä tulee saataville, kun päivität Pro-versio. Esimerkiksi WPtouch Pron hinta vaihtelee 79 dollarista jopa 359 dollariin vuodessa. Juuri siksi tuntuu järkevältä siirtyä valmiiseen reagoivaan malliin. Tällaisia teemoja ostetaan kerran, kun taas niiden kustannukset ovat noin $40-80. Jos päätät vielä palkata ammattimaisen web-kehittäjän suunnittelemaan vanhentuneen teeman uudelleen, kustannukset käsitellään erikseen riippuen projektin monimutkaisuudesta.

Bottom Line

ei ole mikään salaisuus, että millä tahansa verkkosivustolla pitäisi olla mobiiliversio, jotta kohdeyleisön kysyntä pysyisi nykyäänkin. On lähes ihmisiä, jotka eivät käytä mobiililaitteita selata web, etsien palveluja ja tuotteita he tarvitsevat. Näin, prosessi sivuston mobiili optimointi lopulta riippuu valitun alustan.

jos suunnittelet juuri verkkosivujen avaamista, on järkevää suosia yhtä suosituimmista nettisivustojen rakentajista. Wix toimii parhaiten tähän tarkoitukseen. Jos olet jo ajaa verkkosivuilla powered by CMS kuten WordPress, niin se on parempi korvata se reagoiva teema. Liitännäiset, jotka tarjoavat mobiilitukea, voivat kuitenkin olla melko kalliita, kun taas täydellinen mallin uudelleensuunnittelu on todellinen haaste, varsinkin jos aiot selviytyä tehtävästä itsenäisesti.

joka tapauksessa ei ole mitään järkeä luoda erillistä mobiiliversiota verkkosivuilleen. Kohtaat ongelmia, jotka liittyvät hankekehitykseen ja sen jatkotukeen. Paljon yksinkertaisempi ja kohtuullinen ratkaisu on tehdä sivustosi mobiilisti reagoiva alusta alkaen.