Er WordPress-responsive temaer for bedrifter det riktige valget?

responsive wordpress-temaer for virksomheten

Siden noen år tilbake, da Google kunngjorde at mobilvennlighet er en rangfaktor, er ikke mobil eller responsiv webdesign lenger en ettertanke for små og mellomstore bedrifter.

Mobilenheter utgjør i dag en betydelig andel av nettrafikken (53% i 2019).

Bedrifter som tilbyr en dårlig opplevelse for mobilbrukere, risikerer å miste kunder og inntekter. Det er flere måter å gi en god mobilopplevelse, men adaptiv design er det beste valget for små og mellomstore selskaper som bruker WordPress.

Denne typen design er less dyrt, tilbyr en enhetlig opplevelse og sammenhengende merkevarebygging på tvers av enheter, og det er bedre for SEO-mobil-første design er Googles foretrukne mobiloptimaliseringsstrategi. (Til og med søkeroboten deres ser på et nettsted fra en mobil enhet).

innhold[Forestilling]

1. Hva er responsivt design, og hvordan påvirker det Business WordPress-temaer?

Hvis du ikke allerede er kjent med konseptet, er det en nøtteskallsforklaring: det er design som bruker CSS-mediespørsmål og et proporsjonalt rutenettdesign for å endre måten sidene vises på, avhengig av størrelsen på enheten.

For eksempel vil elementer som strekker seg over en side horisontalt i en stasjonær nettleser, stables vertikalt på en smarttelefonleser. Bildene og typen er endret slik at de gjenspeiler skjermstørrelsen på enheten.

I hjertet av responsiv design er CSS mediespørsmål.

CSS-stilark brukes til å kontrollere hvordan en webside ser ut: fargene den bruker, sidens layout, typografi og så videre. Mediespørsmål tillater en designer å bruke CSS-regler selektivt bare når en bestemt betingelse er oppfylt. (dvs. hvis en skjermstørrelse ser ut som en mobilskjerm, bruk design som passer for mobiltelefoner, men hvis det er større, bruk deretter design på større skjermer ...).

Forhåpentligvis kan du se hvordan det er nyttig for å lage varierende design for forskjellige skjermoppsett. Mediespørsmål tillater en utvikler å si, for eksempel hvis nettleservinduet har en bestemt bredde, bør et spesifikt sett med regler brukes.

Et typisk mediespørsmål ser slik ut:

.min container {
bredde: 800px;
}
@media (maks bredde: 600px) {
.min_container {
bredde: 500px;
}
}

I eksemplet ovenfor er standardbredden til klassen .my_container satt til 800px.

Tydeligvis vil vi ikke at den skal være så bred på en smalere enhet, så vi bruker et mediespørsmål.

Mediespørringen her spesifiserer en betingelse - hvis nettleserens horisontale bredde er 600px eller less, bredden på .my_container skal være 500px. Hvis det utløses av at betingelsen er sann, har reglene i mediespørringen forrang fremfor "standard" -regelen.

Responsivt design for forretningstemaer utnytter disse funksjonene i CSS for å endre presentasjonen av nettsider, avhengig av enhetens skjermstørrelse, størrelsen på nettleservinduet, retningen på enheten og mange andre faktorer.

2. Responsive Design Framework

Unless du er allerede kjent med CSS - og selv om du er det - vil du kanskje ikke like ideen om å skrive mediespørringer for alle aspekter av ditt responsive virksomhet WordPress -tema, det er her designrammer spiller inn.

Et responsivt designrammeverk tar vare på mye av kompleksiteten ved å lage et nettsted som passer for skjermer i forskjellige størrelser.

Det mest populære designrammeverket er Bootstrap - med versjoner fra v3.0 og utover som helt mobile først. Bootstrap inkluderer et stort antall funksjoner som ikke bekymrer oss her, men nøkkelen til Bootstraps implementering av respons er nettet.

Anbefalt lesning: Slik konverterer du PSD til WordPress-tema ved hjelp av Bootstrap i 5 trinn: en veiledning og Elementor vs Divi - som er mest verdt pengene?

I stedet for å be deg om å skrive dine egne mediespørsmål, implementerer Bootstrap et system som deler en HTML-side i et rutenett med rader og kolonner. I stedet for å skrive mediespørsmål, legger brukerne kurs til WordPress-temaets HTML for å dele siden i henhold til rutenettet.

For å ta et trivielt eksempel, tenk på en webside med to kolonner.

På store skjermer ønsker vi at kolonnene skal vises ved siden av hverandre. På små skjermer ønsker vi at de skal stables oppå hverandre.

twocolumn responsiv forretningsdesign

 

HTML-en vår vil se slik ut:

  Dette er kolonne en


Dette er kolonne to

Med Bootstrap Grid CSS inkludert på siden, vil denne HTML-en skape oppsettet vi leter etter.

Når siden er lastet inn i et vindu som er mindre enn det som er spesifisert for Bootstraps innebygde mediespørsmål for mellomstore kolonner, vil de stables oppå hverandre i stedet for å strekke seg over siden.

Du kan se mer komplekse eksempler på hvordan dette fungerer i Bootstrap-dokumentasjon.

Bootstrap er ikke det eneste rammeverket som gir et rutenett av denne typen; faktisk er det dusinvis, alt fra omfattende rammer for webdesign som Bootstrap og Fundament, til lette rammeverk som Simple Grid som ikke inneholder annet enn rutenettet.

En alternativ tilnærming har blitt stadig mer populær i løpet av de siste årene, en som inneholder alle endringer i pålegg til CSS (eller SASS) filer, i stedet for å fylle HTML-sider med ikke-semantisk markering.

SASS responsive designnettsystemer som Susy og Bourbon Ryddig utnytte kraften til SASS for å lage rammer som beholder sideoppsettskoden der den skal være - i CSS -filene, noe som gir rom for renere HTML.

Hvilke utviklere velger er et spørsmål om smak og erfaring, men vi foretrekker det personlig SASS-baserte rutenettsystemer som lar meg skrive semantiske nettsider som ikke er fulle av ikke-semantiske klassenavn og overdreven div nesting.

3. Responsive Design Theme Frameworks

Rammeverk som Bootstrap og Foundation er gode for webdesignere, men de hjelper ikke mye for WordPress-utviklere på jakt etter et forsprang når de bygger nye maler.

Heldigvis er det mange responsive WordPress-temarammer som gir et forhåndsbygd fundament.

1. Genesis

genesis framework for business wordpress -temaer

Genesis er et enormt populært temarammeverk fra StudioPress (som vi har gjennomgått her). Selv om det er rettet mer mot erfarne WordPress-utviklere enn nybegynnere, er det ikke så vanskelig å ta tak i hvis du har en smule PHP- og CSS-kunnskap.

Genesis er et overordnet design som det er mulig å lage et hvilket som helst antall barnetemaer fra. Hvis du foretrekker å kjøpe temaer uten hylle og tilpasse det, tilbyr StudioPress mange forskjellige barnetemaer som passer for alle typer nettsteder.

I tillegg til dette temaet har vi ofte høyt rangerte WordPress-temaer, slik at du kan ta en god beslutning om du vil kjøpe eller ikke.

2. Themify Builder

enkelt forretningstema av themify

Hvis du ikke er en PHP- og CSS-whiz, kan det være lurt å vurdere en plugin for malbygger som Themify.

I stedet for å få deg til å brette opp ermene og dykke ned i koden, tilbyr Themify Builder et intuitivt dra-og-slipp-grensesnitt for å lage fullt responsive WordPress-temaer. Med Themify kan du velge mellom en rekke forhåndsbygde temaer, eller designe dine egne fra bunnen av.

Themify trekker bort alle implementeringsdetaljer som ligger til grunn for webdesign for forskjellige skjermstørrelser, noe som gjør det lettere å få nettstedet ditt raskt i bruk.

3. Komponenter

komponenter tema generator

Komponenter var en flott løsning for å lage tilpassbare responsive WordPress-temaer fra Automattic, selskapet bak WordPress.com.

For å bruke komponenter velger du ganske enkelt et oppsett fra listen - klassisk blogg, bedriftsnettsted, portefølje, blant annet - og komponentnettstedet spytter ut en SASS-basert mal med mobil-første oppsett og både stasjonære og mobile menyer.

Dessverre har komponenter blitt avviklet.

4. Divi

Divi, som vi også vil nevne nedenfor som et av de beste WordPress-temaene som skal brukes til forretninger, startet som et tema.

Til slutt utviklet det seg til å bli et tema, en dra og slipp sidebygger, og nå med sine siste utgivelser, også en fullstendig temabygger. På dette punktet er Divi et fullstendig WordPress-tema-rammeverk som kan brukes til å lage alle slags temaer du trenger, med sitt brede utvalg av verktøy.

4. Responsive WordPress-temaer for bedrifter

Hvis du helst bare vil kjøpe noe klart for virksomheten din, har du tusenvis å velge mellom, noen bedre enn andre. Responsivitet blir sett på som en "må-ha" -funksjon på WordPress-temamarkedet, og nesten alle utviklere vil hevde at deres produkt er responsivt. Imidlertid kan denne funksjonen være vanskelig, og til og med erfarne utviklere kan ha problemer med riktig implementering.

Før vi fortsetter, kan det være lurt å sjekke ut vår komplette oversikt over WordPress-temaer for forretnings- og bedriftsnettsteder.

Når det er sagt, hvis du velger en av disse populære designene, som alle kan tilpasses for å dekke behovene til bedriftene dine, vil du ikke gå langt galt.

Divi

Divi elegant themes

Divi er et enormt populært responsivt WordPress -tema for bedrifter (eller noe annet egentlig), en sidebygger (Divi Builder), og også en temabygger.

Produktet kommer fra Elegant Themes - et etablert selskap som har laget mange av mine favoritt WordPress -produkter. Divi er et "batteri-inkludert" tema-den kommer med alle funksjoner du måtte ønske.

Blant høydepunktene er Divi builder, som lar brukerne bygge oppsett uten koding, atten ferdiglagde oppsett å velge mellom og intelligent implementert respons det betyr at nettstedet ditt vil se bra ut, enten det blir sett på en stasjonær PC med en stor skjerm eller en smartskjerm med liten skjerm.

Prøv Divi nå og få 10% AV til Oktober 2021

Anbefaler å lese: hvis du er tilbøyelig til å bruke Divi sjekk ut CollectiveRay's full Divi anmeldelse.

Avada

Avada WordPress-forretningstema

Avada er et annet veldig populært element.

Avada er en funksjonsrik som Divi, og passer perfekt til bygging av forretningssider som kan tilpasse seg forskjellige skjermstørrelser. I likhet med Divi, gir Avada brukere uten kodekoteletter muligheten til å bygge unike nettsteder.

Avada visuelle sidebygger (Fusion) er en glede å bruke, og produktet inneholder en rekke gjennomtenkte berøringer som gjør det til et utmerket valg for less teknisk tilbøyelig WordPress -nettstedseier.

Anbefalt lesing: Nok en gang, for hovedtemaer, har vi laget en utmerket Avada WordPress tema gjennomgang slik at du fullt ut kan forstå hvordan det kan hjelpe deg.

Ta en titt på Avada Now

X

x wp forretningsresponsivt tema

X er enda et responsivt WordPress-tema for bedrifter som har som mål å gjøre det enkelt å komme i gang med en vakker og unik design som ser bra ut på alle enheter.

En av de fremtredende funksjonene til X er utvidelsessystemet.

I stedet for å implementere funksjoner i kjernen av malen, gir X mange funksjonsutvidelser, inkludert et rutenett, TypeKit-integrasjon, en glidebryter og galleriprogrammer. Ved å dele funksjonalitet i utvidelser kan brukerne velge funksjonene de trenger og unngå å laste nettstedet med overflødig kode som kan føre til ytelses- og sikkerhetsproblemer.

Sjekk ut X-demo nå

Andre maler for bedrifter på Themeforest

Hvis temaene vi har sett på her ikke begeistrer deg, ikke bekymre deg, det er hundrevis av WordPress-responsive temaer (for alle slags virksomheter, organisasjoner og i alle slags spesifikke nisjer) å velge mellom på Themeforest.

Når du velger et produkt fra utvalget som er tilgjengelig på Themeforest, må du være nøye med å ta hensyn til brukernes rangeringer - de hjelper deg med å sortere hveten fra agnet. Du bør også merke deg hvor nylig varen ble oppdatert.

Hvis den ikke har blitt oppdatert på flere måneder, bør du vurdere å lete andre steder; utdaterte temaer kan forårsake kompatibilitets- og sikkerhetsproblemer.

5. Hvorfor er responsivitet det beste valget for bedriftens nettsted?

Respons er ikke den eneste måten å håndtere mobilnettrafikk på.

Alternativer inkluderer dedikerte mobilnettsteder og innfødte apper og PWAer (en hybrid mellom mobilnettsteder og apper). Problemet med hver tilnærming er at de krever mer arbeid enn et responsivt nettsted.

Hvis virksomheten din velger en mobilapp eller PWA, må den investere i design, utvikling, vedlikehold og markedsføring. Penger og tid blir delt mellom et nettsted og en app - eller flere apper for å imøtekomme populære mobile plattformer.

Denne utformingen tillater imidlertid små og mellomstore bedrifter å opprettholde en kodebase og bruke ressurser på å skape det beste nettstedet de kan. Det er omstendigheter der innfødte apper er det beste valget, men for de fleste SMB er respons bedre bruk av ressurser.

Tenk deg en potensiell klient søker etter en tjeneste bedriften tilbyr mens du bruker iPhone. Hun finner det hun vil og bokmerker det til senere.

Den kvelden åpner hun bokmerket på den stasjonære datamaskinen, og nettstedet ser forferdelig ut fordi hun har bokmerket den mobile versjonen. Dette scenariet er ikke så ille som om nettstedet ikke hadde noen mobilversjon i det hele tatt, og hun ble tvunget til å håndtere den umodifiserte stasjonære versjonen på telefonen sin - ingen liker å klemme og panorere for å finne det de vil ha - men en denne designen ville la det samme nettstedet og de samme lenkene fungere som ment på begge enhetene.

Å ha ett nettsted som reagerer på brukerens enhet, gjør det også mulig for bedrifter å tilby sammenhengende merkevarebygging på tvers av alle kontaktpunkter.

Nettstedet vil se likt ut, om enn tilpasset, og det vil gi samme navigering, samme utseende og følelse og samme opplevelse. Små bedrifter med begrensede budsjetter har ofte ikke ressurser til å opprettholde konsistent kvalitet på tvers av flere nettstedversjoner og apper.

Responsivitet betyr at de ikke trenger det.

Akkurat som brukere ikke skal få tilbud om en fragmentert opplevelse, er det bedre for søketrafikk hvis det er en kanonisk online plassering for en bedrift. I følge Google, fordelene med responsiv design inkluderer:

  • Å holde skrivebordet og mobilinnholdet ditt på en enkelt URL, noe som er enklere for brukerne å samhandle med, dele og koble til og for Googles algoritmer for å tildele indekseringsegenskapene til innholdet ditt.

  • Google kan oppdage innholdet ditt mer effektivt, ettersom vi ikke trenger å gjennomsøke en side med de forskjellige Googlebot-brukeragentene for å hente og indeksere alt innholdet.

Google kan fortelle om brukere har en god opplevelse på nettstedet ditt. Hvis du ikke tilbyr et mobilvennlig nettsted, vil avvisningsfrekvensen for mobilbrukere skyte i været. De fleste av dem vil sprette tilbake til søkemotoren. Google vet når en bruker umiddelbart kommer tilbake til SERP-ene etter å ha klikket på et resultat og bruker avvisningsfrekvenser som et rangeringssignal.

Til slutt, for WordPress -brukere, er responsivitet den enkleste og rimeligste metoden for å gi en god opplevelse for mobilbrukere. Mange av de beste premiumtemaene er designet for å være responsive, og kostnaden for å tilpasse et eksisterende tema for respons kan være betydelig less enn kostnaden for å utvikle en opprinnelig app.

Gitt disse fordelene, for små og mellomstore bedriftseiere som bruker WordPress-temaer, er responsiv design den beste veien videre i en verden der mobilnettbruk bare kommer til å vokse.


om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...