Ovatko WordPressin reagoivat teemat yrityksille oikea valinta?

reagoivat Wordpress-teemat yrityksille

Muutama vuosi sitten, kun Google ilmoitti, että matkapuhelinystävällisyys on sijoitustekijä, mobiili tai reagoiva verkkosivujen suunnittelu ei enää ole jälkimarkkina pienten ja keskisuurten yritysten verkkosivustoille.

Mobiililaitteet muodostavat nykyään merkittävän osan verkkoliikenteestä (53% vuonna 2019).

Yritykset, jotka tarjoavat huonoa kokemusta mobiilikäyttäjille, voivat menettää asiakkaita ja tuloja. On olemassa useita tapoja tarjota hyvä mobiilikokemus, mutta reagoiva suunnittelu on paras valinta pk-yrityksille, jotka käyttävät WordPressiä.

Tällainen muotoilu on less kallis, tarjoaa yhtenäisen kokemuksen ja johdonmukaisen brändäyksen eri laitteilla, ja se on parempi hakukoneoptimoinnille-mobiili-ensimmäinen muotoilu on Googlen ensisijainen mobiilin optimointistrategia. (Jopa niiden indeksointirobotit katsovat sivustoa mobiililaitteella).

Sisällys[show]

1. Mikä on responsiivinen suunnittelu ja miten se vaikuttaa WordPress-liiketoiminnan teemoihin?

Jos et ole vielä perehtynyt käsitteeseen, tässä on pähkinänkuoressa selitys: se on muotoilu, joka käyttää CSS-mediakyselyjä ja suhteellista ruudukkosuunnittelua muuttamaan sivujen näyttötapaa laitteen koosta riippuen.

Esimerkiksi elementit, jotka ulottuvat sivulle vaakasuunnassa työpöydän selaimessa, pinotaan pystysuunnassa älypuhelimen selaimessa. Kuvien ja tyypin kokoa muutetaan vastaamaan laitteen näyttökokoa.

Reagoivan suunnittelun ytimessä ovat CSS-mediakyselyt.

CSS-tyylisivuja käytetään hallitsemaan verkkosivun ulkonäköä: sen käyttämiä värejä, sivun asettelua, typografiaa ja niin edelleen. Mediakyselyjen avulla suunnittelija voi soveltaa valikoivasti CSS-sääntöjä vain tietyn ehdon täyttyessä. (ts. jos näytön koko näyttää mobiilinäytöltä, käytä matkapuhelimille sopivia malleja, mutta jos se on suurempi, käytä malleja suuremmille näytöille ...).

Toivottavasti voit nähdä, kuinka siitä on hyötyä erilaisten kuvioiden luomisessa eri näytön asetteluille. Mediakyselyjen avulla kehittäjä voi sanoa esimerkiksi, jos verkkoselaimen ikkunalla on tietty leveys, sovellettava erityisiä sääntöjä.

Tyypillinen mediakysely näyttää tältä:

.my kontti {
leveys: 800px;
}
@media (enimmäisleveys: 600 kuvapistettä) {
.my_container {
leveys: 500px;
}
}

Yllä olevassa esimerkissä luokan .my_container oletusleveydeksi on asetettu 800 kuvapistettä.

Emme tietenkään halua, että se on niin leveä kapeammalla laitteella, joten käytämme mediakyselyä.

Mediakysely tässä määrittelee ehdon - jos selaimen vaakasuuntainen leveys on 600 pikseliä tai less, .my_container -leveyden tulisi olla 500 pikseliä. Jos sen laukaisee ehto, joka on tosi, mediakyselyn säännöt ovat etusijalla "oletussääntöön" nähden.

Yritysaiheiden reagoiva suunnittelu hyödyntää CSS: n näitä ominaisuuksia verkkosivujen esityksen muuttamiseksi laitteen näytön koon, selainikkunan koon, laitteen suunnan ja monien muiden tekijöiden mukaan.

2. Reagoiva suunnittelukehys

Unless olet jo perehtynyt CSS: ään - ja vaikka oletkin - et ehkä nauti ajatuksesta kirjoittaa mediakyselyitä reagoivan liiketoiminnan WordPress -teemasi jokaiselle osa -alueelle, jossa suunnittelukehykset tulevat esille.

Reagoiva suunnittelukehys huolehtii suuresta osasta sellaisen sivuston luomisen monimutkaisuutta, joka palvelee erikokoisia näyttöjä.

Suosituin suunnittelukehys on Bootstrap - versiot v3.0: sta eteenpäin ovat täysin mobiilikäyttöisiä. Bootstrap sisältää valtavan määrän ominaisuuksia, jotka eivät koske meitä täällä, mutta avain Bootstrapin reagoivuuden toteuttamiseen on sen ruudukko.

Suositeltua lukemista: Kuinka muuntaa PSD WordPress-teemaksi Bootstrapilla 5 vaiheessa: opetusohjelma että Elementor vs Divi - mikä on eniten rahan arvoinen?

Sen sijaan, että Bootstrap pyytää sinua kirjoittamaan omia mediakyselysi, Bootstrap ottaa käyttöön järjestelmän, joka jakaa HTML-sivun riveihin ja sarakkeisiin. Mediakyselyjen kirjoittamisen sijaan käyttäjät liittävät luokkia WordPress-teeman HTML-koodiin jakamaan sivun ruudukon mukaan.

Ajattele triviaali esimerkki kaksisarakkeisesta verkkosivusta.

Suurilla näytöillä haluamme, että sarakkeet näytetään vierekkäin. Pienillä näytöillä haluamme heidän pinoavan päällekkäin.

kaksikolonninen reagoiva liiketoiminnan suunnittelu

 

HTML-tiedostomme näyttäisi tältä:

  Tämä on sarake yksi


Tämä on sarake kaksi

Kun sivulla on Bootstrap Grid CSS, tämä HTML loisi haluamasi asettelun.

Kun sivu ladataan ikkunaan, joka on pienempi kuin Bootstrapin sisäänrakennetuille mediakyselyille keskisuurille sarakkeille määritetty, ne pinotaan päällekkäin sen sijaan, että ne ulottuisivat sivulle.

Näet monimutkaisempia esimerkkejä siitä, miten tämä toimii Bootstrap-ohjeet.

Bootstrap ei ole ainoa kehys, joka tarjoaa tällaisen ruudukon; Itse asiassa on olemassa kymmeniä, jotka vaihtelevat kattavista verkkosivujen kehyksistä, kuten Bootstrap ja perusta, kevyisiin ruudukkorakenteisiin, kuten Simple Grid, jotka eivät sisällä muuta kuin ruudukko.

Vaihtoehtoinen lähestymistapa on tullut yhä suositummaksi viime vuosina, ja se sisältää kaikki CSS: n merkintöjen muutokset (tai SASS) tiedostoja sen sijaan, että roskaisi HTML-sivuja ei-semanttisella merkinnällä.

SASS reagoivat suunnittelujärjestelmät, kuten Susy että Bourbon Siisti hyödyntää voimaa SASS luoda kehyksiä, jotka pitävät sivun asettelukoodin siellä, missä sen pitäisi olla - CSS -tiedostoissa, mikä mahdollistaa puhtaamman HTML -koodin.

Kehittäjien valitseminen on maku- ja kokemuskysymys, mutta me henkilökohtaisesti pidämme parempana SASS-pohjaiset ruudukkojärjestelmät, joiden avulla voin kirjoittaa semanttisia verkkosivuja, jotka eivät ole täynnä ei-semanttisia luokkien nimiä ja liiallista div-sisäkkäisyyttä.

3. Reagoiva suunnitteluteema

Bootstrapin ja Foundationin kaltaiset kehykset ovat erinomaisia ​​web-suunnittelijoille, mutta ne eivät auta paljon WordPress-kehittäjiä etsimässä etumatkaa uusien mallien rakentamisessa.

Onneksi on olemassa monia reagoivia WordPress-teemakehyksiä, jotka tarjoavat ennalta rakennetun perustan.

1. Mooseksen kirja

genesis framework liiketoiminnan wordpress -teemoille

Genesis on erittäin suosittu teemakehys StudioPressiltä (jonka olemme tarkastelleet kokonaan täällä). Vaikka se on suunnattu enemmän kokeneille WordPress-kehittäjille kuin aloittelijoille, siihen ei ole liian vaikea päästä käsiksi, jos sinulla on katkera PHP- ja CSS-tietämys.

Genesis on päämalli, josta on mahdollista luoda mikä tahansa määrä lapsiteemoja. Jos haluat ostaa hyllyyn sopivia lapsiteemoja ja mukauttaa niitä, StudioPress tarjoaa monia erilaisia ​​lapsiteemoja, jotka sopivat kaiken tyyppisille sivustoille.

Tämän teeman lisäksi meillä on usein erittäin arvostettuja WordPress-teemoja, jotta voit tehdä hyvän päätöksen ostamisesta vai ei.

2. Themify Builder

yksinkertainen liiketoiminnan teema by themify

Jos et ole PHP- ja CSS-vihje, kannattaa harkita mallinrakentajalaajennusta, kuten Themify.

Sen sijaan, että pakottaisit käärimään hihasi ja sukeltamaan koodiin, Themify Builder tarjoaa intuitiivisen vedä ja pudota -käyttöliittymän täysin reagoivien WordPress-teemojen luomiseen. Themify-sovelluksen avulla voit valita joukon valmiita teemoja tai suunnitella oman alusta alkaen.

Themify tiivistelmät pois kaikki toteutuksen yksityiskohdat, jotka perustuvat web-suunnitteluun eri näyttökokoille, mikä helpottaa verkkosivustosi nopeaa käyttöönottoa.

3. Komponentit

komponenttien teema generaattori

Komponentit olivat loistava ratkaisu mukautettavien reagoivien WordPress-teemojen luomiseen Automatticilta, joka on WordPress.comin takana oleva yritys.

Jos haluat käyttää komponentteja, valitse yksinkertaisesti asettelu luettelosta - muun muassa klassinen blogi, yrityssivusto, portfolio - ja Komponentit -sivusto sylkee SASS-pohjainen malli, jossa on mobiili-ensimmäiset asettelut ja sekä pöytä- että mobiilivalikot.

Valitettavasti komponentit on lopetettu.

4. Divi

Divi, jonka mainitsemme myös jäljempänä yhtenä yritystoiminnassa käytettävistä WordPress-teemoista, aloitti teemana.

Lopulta siitä kehittyi teema, vedä ja pudota -sivun rakennustyökalu ja viimeisimpien julkaisujensa myötä myös täydellinen teemanrakentaja. Tässä vaiheessa Divi on täysi WordPress-teemakehys, jota voidaan käyttää luomaan minkä tahansa tarvitsemasi teema laajalla työkaluvalikoimallaan.

4. WordPressin reagoivat teemat yrityksille

Jos haluat mieluummin ostaa jotain valmis yrityksellesi, sinulla on valittavissa tuhansia, jotkut parempia kuin toiset. Reagointikykyä pidetään välttämättömänä ominaisuutena WordPress-teemamarkkinoilla, ja melkein jokainen kehittäjä väittää tuotteensa reagoivan. Tämä ominaisuus voi kuitenkin olla hankalaa, ja jopa kokeneilla kehittäjillä voi olla vaikeuksia sen asianmukaisessa toteutuksessa.

Ennen kuin jatkat eteenpäin, saatat haluta tarkistaa täydellisen yhteenvedon WordPress-teemat yrityksille ja yrityssivustoille.

Jos valitset yhden näistä suosituista malleista, jotka kaikki voidaan räätälöidä vastaamaan yrityksesi tarpeita, et mene paljon väärin.

divi

divi elegant themes

Divi on erittäin suosittu reagoiva WordPress -teema yrityksille (tai mille tahansa muulle oikeastaan), sivunrakentaja (Divi Builder), ja myös teemanrakentaja.

Tuote on peräisin Elegant Themes - vakiintunut yritys, joka on luonut monia suosikki WordPress -tuotteitani. Divi on "paristojen mukana" -teema-siinä on kaikki ominaisuudet, joita haluat.

Kohokohtia ovat mm Divi builder, jonka avulla käyttäjät voivat rakentaa asetteluja ilman koodausta, valita kahdeksantoista valmiista asettelusta ja toteuttaa ne älykkäästi reagointikykyä tämä tarkoittaa, että sivustosi näyttää hyvältä riippumatta siitä, katsotko sitä pöytätietokoneessa, jossa on valtava näyttö tai pienellä näytöllä varustettu älypuhelin.

Kokeile Diviä nyt ja saat 10% alennusta lokakuu 2021

Suosittele lukemista: jos olet taipuvainen käyttämään Diviä tarkistaa CollectiveRay's täydellinen Divi-arvostelu.

Avada

Avada WordPress Business -teema

Avada on toinen erittäin suosittu tuote.

Avada on monipuolinen kuin Divi, ja se soveltuu erinomaisesti liiketilojen rakentamiseen, jotka voivat sopeutua erilaisiin näytön kooihin. Kuten Divi, Avada antaa käyttäjille, joilla ei ole koodausta, rakentaa ainutlaatuisia sivustoja.

Avadan visuaalinen sivunmuodostin (Fusion) on ilo käyttää, ja tuote sisältää kaikenlaisia ​​harkittuja kosketuksia, jotka tekevät siitä erinomaisen valinnan less teknisesti taipuvainen WordPress -sivuston omistaja.

Suositeltavaa luettavaa: Olemme jälleen kerran luoneet tärkeimmille aiheille erinomainen Avada WordPress -teeman tarkistus joten voit täysin ymmärtää, miten se voi auttaa sinua.

Katso Avada Now

X

x wp liiketoimintaan reagoiva teema

X on jälleen yksi reagoiva WordPress-teema yrityksille, jonka tarkoituksena on helpottaa pääsyä vauhtiin kauniilla ja ainutlaatuisella muotoilulla, joka näyttää hyvältä millä tahansa laitteella.

Yksi X: n erityispiirteistä on sen laajennusjärjestelmä.

Sen sijaan, että ominaisuuksia toteutettaisiin mallin ytimessä, X tarjoaa lukuisia ominaisuuslaajennuksia, kuten ruudukon, TypeKit-integraation, liukusäätimen ja gallerian laajennukset. Toimintojen jakaminen laajennuksiksi antaa käyttäjille mahdollisuuden valita tarvitsemansa ominaisuudet ja välttää lataamasta sivustoaan tarpeettomalla koodilla, joka voi johtaa suorituskykyyn ja turvallisuusongelmiin.

Katso nyt X-esittely

Muita yrityspohjia Themeforesta

Jos täällä tarkastelemamme teemat eivät innosta sinua, älä huoli, niitä on satoja WordPressin reagoivat teemat (kaikenlaisille yrityksille, organisaatioille ja kaikenlaisille erityiskohteille) valita Themeforestista.

Kun valitset tuotteen Themeforestissa olevasta valikoimasta, muista kiinnittää tarkkaan huomiota käyttäjien arvioihin - ne auttavat sinua lajittelemaan vehnän akanoista. Ota myös huomioon, kuinka äskettäin tuote päivitettiin.

Jos sitä ei ole päivitetty useita kuukausia, kannattaa harkita etsimistä muualta; vanhentuneet teemat voivat aiheuttaa yhteensopivuus- ja tietoturvaongelmia.

5. Miksi reagointikyky on paras valinta yrityksesi sivustolle?

Reagointikyky ei ole ainoa tapa käsitellä mobiiliverkkoliikennettä.

Vaihtoehtoina ovat erilliset mobiilisivustot ja natiivisovellukset ja PWA: t (hybridi mobiilisivustojen ja -sovellusten välillä). Jokaisen lähestymistavan ongelmana on, että ne vaativat enemmän työtä kuin reagoiva sivusto.

Jos yrityksesi valitsee mobiilisovelluksen tai PWA: n, sen on investoitava sen suunnitteluun, kehittämiseen, ylläpitoon ja myynninedistämiseen. Raha ja aika on jaettu verkkosivuston ja sovelluksen tai useiden sovellusten kesken suosittujen mobiilialustojen mukauttamiseksi.

Tämän suunnittelun ansiosta pk-yritykset voivat kuitenkin ylläpitää yhtä kooditietokantaa ja omistaa resursseja parhaan mahdollisen verkkosivuston luomiseen. On tilanteita, joissa natiivisovellukset ovat paras valinta, mutta useimmille pk-yrityksille reagointi on resurssien parempi käyttö.

Kuvittele, että potentiaalinen asiakas etsii palvelua, jota yrityksesi tarjoaa, kun hän käyttää iPhoneaan. Hän löytää mitä haluaa ja lisää sen kirjanmerkkeihin myöhempää käyttöä varten.

Sinä iltana hän avaa kirjanmerkin pöytätietokoneellaan, ja sivusto näyttää kauhealta, koska hän merkitsi kirjanmerkiksi mobiiliversiota. Tämä skenaario ei ole niin huono kuin jos sivustolla ei olisi mobiiliversiota, ja hänet pakotettiin käsittelemään puhelimen muokkaamatonta työpöytäversiota - kukaan ei pidä nipistämisestä ja panoroinnista löytääksesi haluamansa - mutta tämä malli anna saman verkkosivuston ja samojen linkkien toimia molemmilla laitteilla.

Jos sinulla on yksi käyttäjän laitteeseen vastaava sivusto, yritykset voivat myös tarjota yhtenäisen brändäyksen kaikissa yhteyspisteissä.

Sivusto näyttää samalta, vaikkakin mukautetulta, ja se tarjoaa saman navigoinnin, saman ulkoasun ja saman kokemuksen. Pienillä yrityksillä, joilla on rajoitettu budjetti, ei usein ole resursseja ylläpitää tasaista laatua useissa sivustoversioissa ja sovelluksissa.

Reagointikyky tarkoittaa, että heidän ei tarvitse.

Aivan kuten käyttäjille ei pitäisi tarjota hajanaisia ​​kokemuksia, se on parempi hakuliikenteelle, jos yritykselle on yksi kanoninen online-sijainti. Googlen mukaan Responsiivisen suunnittelun etuja ovat mm:

  • Pidä työpöytä- ja mobiilisisältösi samassa URL-osoitteessa, mikä on käyttäjien helpompaa olla vuorovaikutuksessa, jakaa ja linkittää sekä Googlen algoritmeille määrittää indeksointiasetukset sisältösi.

  • Google voi löytää sisältösi tehokkaammin, koska meidän ei tarvitse indeksoida sivua Googlebotin eri käyttäjäagenttien kanssa kaiken sisällön noutamiseksi ja indeksoimiseksi.

Google pystyy selvittämään, onko käyttäjillä hyvä kokemus sivustostasi. Jos et tarjoa mobiililaitteille sopivaa sivustoa, mobiilikäyttäjien poistumisprosentit nousevat taivaalle. Suurin osa heistä palautuu hakukoneelle. Google tietää, kun käyttäjä palaa heti SERP: iin napsautettuaan tulosta ja käyttää palautumisprosentteja sijoitussignaalina.

Lopuksi, WordPress -käyttäjille reagointikyky on helpoin ja halvin tapa tarjota hyvä kokemus mobiilikäyttäjille. Monet parhaista premium -teemoista on suunniteltu reagoiviksi, ja olemassa olevan teeman mukauttaminen vastaamiseen voi maksaa merkittävästi less kuin natiivisovelluksen kehittämisen kustannukset.

Kun otetaan huomioon nämä edut, WordPress-teemoja käyttäville pienille ja keskisuurille yrityksille reagoiva suunnittelu on ylivoimaisesti paras tapa edetä maailmassa, jossa mobiiliverkon käyttö vain kasvaa.


kirjailijasta
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...