Kuinka tehdä verkkosivustostasi mobiiliystävällinen

Kesällä 2015 tehtiin ensimmäistä kertaa mobiililaitteiden kautta enemmän Google-hakuja kuin työpöydällä – ja sinäkin’d parempi uskoa heitä’olen vain noussut siitä lähtien!


Jos sinä’kun luet tämän artikkelin, olet todennäköisesti sinäkin’olet jo tietoinen mobiiliystävällisen verkkosivuston tärkeydestä ja haluamme varmistaa, että omasi tarjoaa loistavan kokemuksen matkapuhelimen käyttäjille. Voimme opettaa sinulle kuinka tehdä se!

Jotta verkkosivustosi olisi mobiiliystävällinen, sinäkin’Minun täytyy:

  1. Valitse mobiililaitteisiin reagoiva teema tai malli
  2. Poista sisältösi
  3. Tee kuvat ja CSS mahdollisimman kevyiksi
  4. Vältä salamaa
  5. Muuta painikkeen kokoa ja sijoittelua
  6. Sijoita linkkisi pois
  7. Käytä suurta ja luettavaa kirjasinta
  8. Poista ponnahdusikkunat
  9. Testaa säännöllisesti

Mutta ensinnäkin, mitä mobiiliystävällinen todella tarkoittaa?

Kun puhumme a ‘mobiililaitteisiin sopiva’ verkkosivusto, me’puhutaan erilaisen näyttämisestä ‘versio’ verkkosivustollasi kävijöille, jotka tarkastelevat sivustoasi mobiililaitteilla, jotta he saavat paremman kokemuksen.

Voit saavuttaa tämän monilla tavoilla:

  • Vastuullinen muotoilu – kotisivusi’Suunnittelu mukautuu näytön kokoon riippumatta siitä, oletko sinä’muutat vain työpöydän välilehden kokoa tai selaat mobiililaitteella tai tablet-laitteella.
  • Dynaaminen tarjoilu – kävijöille näytetään erilainen, tarkoitukseen rakennettu versio sivustosta, laitteesta riippuen’katsot uudelleen.
  • Mobiilisovellus – joissain tapauksissa täysin erillisen sovelluksen käyttäminen mobiiliyleisöllesi on järkevää (vaikka tällaisessa tapauksessa sinun tulisi myös varmistaa, että verkkosivustosi on tyhjästä niille, jotka eivät’halua ladata sitä).

Responsiivinen suunnittelu on vähäinen minne sinun pitäisi pyrkiä, ja se’mitä Google suosittelee. Se sanoi, uskomme sen’on syytä muokata edelleen automaattisesti luomaa mobiilisivustosi – haluathan lopulta pyrkiä fantastiseen mobiilikäyttäjäkokemukseen pikemminkin kuin ‘hyväksyttävä’ yksi.

Jos luulet mobiilisovelluksen toimivan sivustoltasi, suosittelemme ottamaan yhteyttä kehittäjään, joka voi auttaa sinua tässä.

Tässä on joitain muita artikkeleita, joista saatat nauttia:

Kuinka suunnitella verkkosivusto – Jos sinä’aloittaessasi verkkosivustosi suunnittelun (tai suunnittelun uudelleen!), tutustu tähän artikkeliin vaiheittaisesta oppaasta ja tärkeimmistä huomioitavista seikoista.

Kuinka luoda verkkosivusto – Haven’t ole vielä aloittanut sivustosi? Ei hätää, tämä opas opastaa sinut läpi koko prosessin!

5 parasta SEO-verkkosivustojen rakentajaa – Kaikilla verkkosivustojen rakentajilla, joilla on vahva SEO, tulee mobiiliystävällisyys, joka on paistettu suoraan malleihinsa. Tässä on viisi parasta.

1

Valitse mobiililaitteisiin reagoiva teema tai malli

Okei, niin tämä on ensimmäinen askel, ja se’s iso: valitse mobiililaitteisiin reagoiva teema tai malli!
Koska mobiililaitteisiin reagoiva suunnittelu on niin tärkeä, se on’jotain, joka melkein jokainen suosituin verkkosivustojen rakentaja on katettu kaikissa malleissaan. Esimerkiksi:

Ruututila – on vedenpitävä matkaviestinvaste, ja se olisi paras valinta, jos sinä’rakennat sivuston uudelleen tyhjästä ja katso mobiili kokemus ensisijaiseksi tavoitteeksi.

Wix – kaikki mallit reagoivat mobiililaitteisiin, mutta muista tarkistaa mobiili näkymä aina menemällä. Koska Wix-sivustot ovat niin muokattavissa, toisinaan suuria muutoksia ei tarvitse tehdä’t käännä niin saumattomasti, ja sinä’Minun on tehtävä säätämistä.

Jos sinä’uudelleen rakentamalla sivusto CMS-järjestelmää, kuten WordPressiä, varmista, että teema, jonka valitset rakentaaksesi sivustosi, vastaa mobiililaitteisiin – tai jos’olet jo rakentanut sivuston, siirry sivustoon, joka on!

Vain etsiä ‘herkkä teema’ WordPressissä’ omalla teemakirjastolla tai kolmannen osapuolen sivustolla, kuten Themeforest. Muista lukea arvosteluja ja, jos mahdollista, katso näitä sivustoja, jotka käyttävät tätä teemaa matkapuhelimellasi, jotta voit arvioida kokemuksen itse.

Auta! Entä jos minä’M ei-reagoivassa teemassa, ja voin’t vaihtaa sitä?

Jos verkkosivustosi on rakennettu käyttämällä vanhaa, reagoimatonta teemaa tai mallia, ja sinä’Jos et voi vaihtaa sitä, yritä lisätä tämä koodirivi jokaiselle sivulle’tunniste:

Tämä tarkoittaa, että sivusi tulee automaattisesti muotoilla uudelleen laitteen leveyden mukaiseksi, vaihtamalla maisematyylisestä muotokuvaksi.

2

Poista sisältösi

Sinä’olet valinnut ihanan reagoivan teeman tai mallin, joten nyt sinä’uudelleen kaikki asetettu, eikö? Väärä!

Oikealle mallille tai teemalle siirtyminen on iso askel, mutta se’se on vain yksi monista, jotka sinun tulee ottaa, jotta mobiili kokemus olisi täydellinen.

Nyt se’on aika katsoa verkkosivustosi automatisoitua mobiilinäkymää ja poistaa se takaisin:

Tislaa tarjouksesi

Suorita sivusi päätavoite’uudelleen, ja don’epäröi tehdä tästä paljon näkyvämpi matkapuhelimen versiossa.

Katso tätä esimerkkiä Trainline:

Trainline mobiiliystävällinen esimerkki

Kotisivun tarkoituksena on rohkaista käyttäjiä etsimään junalippuja, ja tämä muoto on keskittynyt mobiiliversioon. Pöytäkoneversiossa tämä vaikuttaa liian tylsältä, mutta mobiiliversiossa se toimii.

Vältä suuria tekstin paloja

Verkkosivustosi kopion tulisi olla lyhyellä ja makealla parasta aikaa (lukuun ottamatta blogiviestejä, kuten tämä!), Mutta mobiililaitteissa tämä tulee entistä tärkeämmäksi. Tutustu verkkoon kirjoittamista koskeviin vinkkeihimme ja vie virtuaaliset sakset pitkiin tekstin palasiin.

Lyhennä lomakkeita

Pitkien lomakkeiden täyttäminen on työtä parhaimmillaan, mutta matkapuhelimella? Liikkeellä? Unohda! Pitkät lomakkeet menettävät lukijasi nopeammin kuin osaat sanoa ‘Tämä on pakollinen kenttä’. Varmista jokainen lomake’uudelleen näyttäminen matkapuhelimella vaatii vain tietoja’s ehdottoman välttämätöntä.

Yläkärki! Ärsyttävä automaattinen korjaus on varma tapa muuttaa lomakkeen täyttäminen merkittäväksi ajanhukkaan. Säästä lukijoidesi stressi kytkemällä se pois päältä. Jos sinulla on pääsy lomakkeen koodiin, varmista, että automaattikorjauksen kenttä on asetettu kohtaan korjaus- = pois. 3

Tee kuvat ja CSS mahdollisimman kevyiksi

Verkkosivustosi tekeminen mahdollisimman kevyeksi on aina hyvä idea – mutta mitä se oikein tarkoittaa? No, jokainen verkkosivustosi elementti on virtuaalinen ‘paino’ – onko se’s video tai kuva, jolla on tiedostokoko tai koodi, joka on ladattava joka kerta, kun verkkosivustoa napsautetaan.

Google on ollut erittäin selvä siitä, että verkkosivustojen nopeus on tärkeä sijoitustekijä, mikä tarkoittaa hidasta (a.k.a. ‘raskas’) verkkosivustot häviävät kilpailulle hakukoneiden tulossivuilla (SERP).

Matkapuhelimissa tämä on entistä tärkeämpää. Jos sinä’Olet koskaan yrittänyt ladata verkkosivun etäältä, vain katsellaksesi, että kukin elementti putoaa paikoilleen tuskallisesti hitaasti’Ymmärrän miksi.

Joten mitä voit tehdä asialle?

Pakkaa kuviasi

Kun sinä’lataa minkä tahansa kuvan sivustollesi – mobiili- tai tietokoneversioon – sen’On erittäin tärkeää, että pakkaat kuvat ilmaisella online-työkalulla, kuten kraken.io. Tämä pienentää huomattavasti kuvien tiedostokokoa vaarantamatta kuvan laatua.

Isännöi videoitasi kolmannen osapuolen kanssa

Lähettämällä videoitasi kolmannelle osapuolelle ja upottamalla ne sivustollesi, se tarkoittaa virtuaalista ‘paino’ näistä videoista pidetään suurelta osin valitulla sivustolla, ei omassa.

Wistia on suosittu alusta tähän, mutta YouTube toimii myös – sinä’Haluan vain varmistaa’kytkeä automaattitoisto uudelleen pois päältä, jotta liittymätön video ei toimi’t pelata omasi jälkeen. Voit tehdä tämän yksinkertaisesti:

  • Siirry WordPress-sivullesi tai viestiin
  • Etsi sulautettu koodi ja napsauta ‘teksti’ kieleke
  • Etsi osa, joka sanoo src =”youtubeurlhere”
  • Lisätä ?autoplay = 0&rel = 0 jälkeen youtubeurlhere
  • Koodin pitäisi nyt olla src =”youtubeurlhere? autoplay = 0&rel = 0 “
  • Osuma ‘Päivittää’ ja sinä’re hyvä mennä

Yläkärki! Jos et’luulet, että sisältösi laskisi liian hyvin YouTubessa (jotkut videot eivät’t tekevät paljon järkeä ilman koko sivun kontekstia), varmista, että asetat näkyvyyden arvoon ‘noteeraamaton’. Tällä tavalla kukaan ei kompastu siihen mihinkään kuin verkkosivustoosi. 4

Vältä salamaa

Flashia käytetään usein animaatioiden luomiseen, mutta se ei yleensä ole’t, jota mobiililaitteet tukevat, joten sitä on parasta välttää kokonaan.

5

Muuta painikkeen kokoa ja sijoittelua

Melkein jokainen verkkosivusto käyttää painikkeita linkittääksesi toisiin osioihin tai lomakkeisiin. Mutta a ‘hyvä’ -painikkeesta voi nopeasti tulla ‘huono’ painike matkapuhelimella, jos se’s väärässä paikassa tai on väärä koko.

Ajattele kuinka pidät ja käytät puhelinta. Mahdollisuudet olet sinä’Käytä peukaloitasi melkein kaikkeen, mikä tarkoittaa mitä tahansa’t peukaloitumisesta tulee tuskallista kipua.

Tässä’s mihin sinun tulisi pyrkiä sijoittamaan CTA: t mobiilisivustolle:

Mobiiliystävällisen verkkosivuston luominen: minne lisätä CTA-sopimuksia

Joten nyt sinä’olet saanut painikkeet oikeaan paikkaan’on aika tehdä niistä oikean kokoinen. Se tarkoittaa yleensä sinua’Sinun on laajennettava niitä vähän – se’On paljon vaikeampaa napsauttaa tarkasti peukalolla kuin hiirellä.

6

Sijoita linkkisi pois

Puhuminen siitä, kuinka vaikeaa on napsauttaa tarkasti peukalolla eikä hiirellä, tuo meidät hienosti seuraavaan kohtaan: katso linkkejäsi!

Tarkemmin sanottuna sinä’Haluan tarkistaa, että kaikki mobiilisivustosi hyperlinkit:

  • Aren’t liian lähellä toisiaan, jotta ihmiset eivät napsauttaisi vääriä vahingossa.
  • Linkki sivuille, jotka ovat myös mobiililaitteille optimoituja saumattomalle käyttäjän matkalle.

7

Käytä suurta ja luettavaa kirjasinta

Se’s suositteli, että käytät työpöydällä vähintään 14 kuvapisteen fonttikokoa, mutta muista testata miltä se näyttää mobiiliversiossasi – saatat löytää sen näyttävän hieman pieneltä ja’Haluan pompata sitä hiukan.

Tarkista myös fontin luettavuus. Se’Yksi asia kokeilla kokeellisempaa kirjasinta työpöydällä, mutta tämä siirto ei todennäköisesti kannattaisi mobiililaitteissa. Se sanoi, sinä’Haluan pitää fontit sellaisina kuin ‘tuotemerkillä’ kaikilla alustoilla.

Kun työskentelet sivustosi mobiilinäkymässä, sinä’sinulla on paljon pienempi alue leikkiä varten. Työpöydällä voit välittää tekstiä rivinvaihdoilla ja kuvilla. Kokeile mobiililaitteissa lihavointia tai isoja isojen rivien kirjoittamista sen sijaan, että ne eivät sulautuisi toisiinsa.

8

Poista ponnahdusikkunat

Huolellisessa käytössä ponnahdusikkunat voivat toimia todella hyvin sivuston työpöytäversiossa. Olet ehkä huomannut ne’uudelleen jotain jota käytämme melko harvoilla sivuilla täällä WBE: ssä.

Mutta kun kyse on mobiililaitteista, ponnahdusikkunoita vältetään parhaiten. Paitsi että sinulla on pienempi näyttö käsitellä, mutta voit’t räätälöi ponnahdusikkuna laukaisemaan avainhetkellä, esimerkiksi kun käyttäjä menee poistumaan näytöstä.

9

Testaa säännöllisesti

Paras tapa selvittää mobiilisivustosi mobiiliystävällisyys on testata sitä! Sinä’Haluan tehdä tämän kolmella eri tavalla:

Suorita URL-osoitteita Googlen kautta’s mobiiliystävällinen työkalu

Googlella on ilmainen mobiiliystävällinen testaustyökalu, jolla kuka tahansa voi testata, kuinka mobiiliystävällinen jokin annettu URL on – olipa se’s kotisivulle (kuten alla) tai sivustosi sivulle.

Googlen mobiiliystävällinen testi

Kokeile erilaisia ​​laitekokoja työpöydältäsi

Upea tapa tarkistaa sivustosi reagoivuus on vain leikkiä avoimen verkkosivustosi välilehden muodossa. Kun vähennät välilehden leveyttä, sinun tulee huomata, että sivustosi alkaa ‘sopimus’ ja morph mobiiliystävällisempään versioon.

Voit nopeasti testata minkä tahansa ulkonäön mobiililaitteissa napsauttamalla hiiren kakkospainikkeella verkkosivusi ja valitsemalla ‘Tarkastaa’, ja napsauta sitten kahden näytön kuvaketta, joka näkyy työkalurivillä ylhäällä:

Näytä mobiiliversio työpöydältä

Kuinka tehdä verkkosivustosi mobiiliystävälliseksi: yhteenveto

Kiitos, että seuraat meitä, kun selitimme miten verkkosivustostasi tulee mobiiliystävällinen. Tässä’s nämä vaiheet jälleen:

Kuinka tehdä verkkosivustostasi mobiiliystävällinen:

  1. Valitse mobiililaitteisiin reagoiva teema tai malli
  2. Poista sisältösi
  3. Tee kuvat ja CSS mahdollisimman kevyiksi
  4. Vältä salamaa
  5. Muuta painikkeen kokoa ja sijoittelua
  6. Sijoita linkkisi pois
  7. Käytä suurta ja luettavaa kirjasinta
  8. Poista ponnahdusikkunat
  9. Testaa säännöllisesti

Hyvä uutinen useimmille sivustoille on, että suurin osa kovasta työstä tehdään todennäköisesti sinulle aiheen tai mallin avulla. Se sanoi, uskomme sen’kannattaa tehdä yllä kuvatut ylimääräiset säädöt, jotta matkapuhelimesi käyttäjät saavat loistavan kokemuksen eikä hyväksyttävän kokemuksen. Loppujen lopuksi tilastot sanovat’Ovat todennäköisesti suurimman osan käyttäjistä!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map