Er WordPress-responsive temaer til virksomheder det rigtige valg?

lydhøre wordpress-temaer til erhvervslivet

Siden et par år tilbage, da Google meddelte, at mobilvenlighed er en rankingfaktor, er mobil eller responsivt webdesign ikke længere en eftertanke for små og mellemstore virksomhedswebsteder.

Mobilenheder udgør i dag en betydelig andel af webtrafikken (53% i 2019).

Virksomheder, der tilbyder en dårlig oplevelse for mobile brugere, risikerer at miste kunder og indtægter. Der er flere måder at give en god mobiloplevelse på, men lydhør design er det bedste valg for SMV'er, der bruger WordPress.

Denne form for design er less dyrt, tilbyder en samlet oplevelse og sammenhængende branding på tværs af enheder, og det er bedre for SEO-mobil-first-design er Googles foretrukne mobiloptimeringsstrategi. (Selv deres crawlers kigger på et websted fra en mobilenhed).

Indhold[show]

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

Hvis du ikke allerede er fortrolig med konceptet, er her en nøddeskalforklaring: det er design, der bruger CSS-medieforespørgsler og et proportionalt gitterdesign for at ændre den måde, sider vises på, afhængigt af enhedens størrelse.

For eksempel stables elementer, der spænder over en side vandret i en desktop-browser, lodret på en smartphone-browser. Billeder og type ændres for at afspejle enhedens skærmstørrelse.

Kernen i responsivt design er CSS-medieforespørgsler.

CSS-stilark bruges til at kontrollere, hvordan en webside ser ud: farverne, den bruger, sidens layout, dens typografi osv. Medieforespørgsler tillader en designer kun at anvende CSS-regler, når en bestemt betingelse er opfyldt. (dvs. hvis en skærmstørrelse ligner en mobilskærm, skal du anvende design, der passer til mobiltelefoner, men hvis den er større, skal du anvende design til større skærme ...).

Forhåbentlig kan du se, hvordan det er nyttigt at skabe forskellige designs til forskellige skærmlayouter. Medieforespørgsler giver en udvikler mulighed for f.eks. At sige, at hvis webbrowservinduet har en bestemt bredde, skal der anvendes et specifikt regelsæt.

En typisk medieforespørgsel ser sådan ud:

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

I eksemplet ovenfor er standardbredden for klassen .my_container indstillet til 800px.

Vi ønsker selvfølgelig ikke, at det skal være så bredt på en smallere enhed, så vi bruger en medieforespørgsel.

Medieforespørgslen her angiver en betingelse - hvis browserens vandrette bredde er 600px eller less, bredden på .my_container skal være 500px. Hvis det udløses af, at betingelsen er sand, har reglerne i medieforespørgslen forrang frem for "standard" -reglen.

Responsivt design til forretningstemaer udnytter disse funktioner i CSS til at ændre præsentationen af ​​websider afhængigt af enhedens skærmstørrelse, størrelsen på browservinduet, enhedens retning og mange andre faktorer.

2. Responsive Design-rammer

Unless du er allerede bekendt med CSS - og selvom du er det - nyder du måske ikke ideen om at skrive medieforespørgsler for alle aspekter af dit responsive virksomheds WordPress -tema, hvor designrammer spiller ind.

En responsiv designramme tager sig af meget af kompleksiteten ved at oprette et websted, der henvender sig til skærme med forskellige størrelser.

Den mest populære designramme er Bootstrap - med versioner fra v3.0 og fremefter fuldt mobile først. Bootstrap inkluderer et stort antal funktioner, der ikke vedrører os her, men nøglen til Bootstraps implementering af lydhørhed er dens gitter.

Anbefalet læsning: Sådan konverteres PSD til WordPress-tema ved hjælp af Bootstrap i 5 trin: en tutorial og Elementor vs Divi - hvilket er pengene værd?

I stedet for at bede dig om at skrive dine egne medieforespørgsler implementerer Bootstrap et system, der deler en HTML-side i et gitter med rækker og kolonner. I stedet for at skrive medieforespørgsler vedlægger brugerne klasser til deres WordPress-temas HTML for at opdele siden i henhold til gitteret.

For at tage et trivielt eksempel, tænk på en webside med to søjler.

På store skærme vil vi have kolonnerne vist ved siden af ​​hinanden. På små skærme vil vi have dem til at stable oven på hinanden.

twocolumn responsivt forretningsdesign

 

Vores HTML ville se sådan ud:

  Dette er søjle XNUMX


Dette er kolonne to

Med Bootstrap Grid CSS inkluderet på siden, ville denne HTML skabe det layout, vi leder efter.

Når siden indlæses i et vindue, der er mindre end det, der er angivet for Bootstraps indbyggede medieforespørgsler til mellemstore kolonner, stabler de oven på hinanden i stedet for at spænde over siden.

Du kan se mere komplekse eksempler på, hvordan dette fungerer i Bootstrap-dokumentation.

Bootstrap er ikke den eneste ramme, der giver et gitter af denne slags; der er faktisk snesevis af alt fra omfattende webdesignrammer som Bootstrap og Foundation, til lette gitterrammer som Simple Grid, der ikke indeholder andet end gitteret.

En alternativ tilgang er blevet stadig mere populær i løbet af de sidste år, en som indeholder alle markup -ændringer til CSS (eller SASS) filer, frem for at kaste HTML-sider med ikke-semantisk markup.

SASS lydhøre designgitter systemer som Susy og Bourbon pænt udnytte kraften i SASS at oprette rammer, der holder sidelayoutkoden, hvor den skal være - i CSS -filerne, hvilket giver mulighed for renere HTML.

Hvilke udviklere vælger er et spørgsmål om smag og erfaring, men vi foretrækker det personligt SASS-baserede grid-systemer, der lader mig skrive semantiske websider, der ikke er fulde af ikke-semantiske klassenavne og overdreven div nesting.

3. Responsive designtema-rammer

Rammer som Bootstrap og Foundation er gode til webdesignere, men de gør ikke meget for at hjælpe WordPress-udviklere med at finde et forspring, når de bygger nye skabeloner.

Heldigvis er der mange lydhøre WordPress-temarammer, der giver et forudbygget fundament.

1. Genesis

genesis framework til business wordpress temaer

Genesis er en meget populær temaramme fra StudioPress (som vi har gennemgået fuldt ud her). Selvom det er rettet mere mod erfarne WordPress-udviklere end nybegyndere, er det ikke for svært at få fat i, hvis du har en smule af PHP- og CSS-viden.

Genesis er et overordnet design, hvorfra det er muligt at oprette et hvilket som helst antal børnetemaer. Hvis du foretrækker at købe børnetemaer uden hylde og tilpasse det, tilbyder StudioPress mange forskellige børnetemaer, der passer til alle typer websteder.

Udover dette tema har vi ofte højt vurderede WordPress-temaer, så du kan tage en god beslutning om at købe eller ej.

2. Themify Builder

simpelt forretningstema af themify

Hvis du ikke er en PHP- og CSS-whiz, kan du måske overveje et plugin til skabelonbygger som Themify.

I stedet for at få dig til at rulle ærmerne op og dykke ned i koden, tilbyder Themify Builder en intuitiv træk-og-slip-grænseflade til at skabe fuldt responsive WordPress-temaer. Med Themify kan du vælge mellem en række forudbyggede temaer eller designe dine egne fra bunden.

Themify opsummerer alle implementeringsoplysninger, der ligger til grund for webdesign til forskellige skærmstørrelser, hvilket gør det lettere at få dit websted til at køre hurtigt.

3. Komponenter

komponenter tema generator

Komponenter var en fantastisk løsning til oprettelse af tilpassede responsive WordPress-temaer fra Automattic, firmaet bag WordPress.com.

For at bruge komponenter vælger du blot et layout fra listen - klassisk blog, forretningsside, portefølje, blandt andre - og komponentsitet vil spytte en SASS-baseret skabelon med mobil-første layout og både desktop- og mobilmenuer.

Desværre er komponenter blevet afbrudt.

4. Divi

Divi, som vi også nedenfor vil nævne som et af de bedste WordPress-temaer, der skal bruges til virksomheder, startede som et tema.

Til sidst udviklede det sig til at blive et tema, en træk-og-slip-sidebygger, og nu med sine sidste udgivelser også en komplet temabygger. På dette tidspunkt er Divi en komplet WordPress-temaramme, der kan bruges til at oprette enhver form for tema, du har brug for, med sit brede udvalg af værktøjer.

4. WordPress-responsive temaer til virksomheder

Hvis du hellere bare vil købe noget klar til din virksomhed, har du tusinder at vælge imellem, nogle bedre end andre. Responsivitet ses som en "must-have" -funktion på WordPress-temamarkedet, og næsten alle udviklere hævder, at deres produkt er lydhørt. Denne funktion kan dog være vanskelig, og selv erfarne udviklere kan have problemer med dens korrekte implementering.

Før vi fortsætter, kan du tjekke vores fulde opsamling af WordPress-temaer til forretnings- og virksomhedswebsteder.

Når det er sagt, hvis du vælger et af disse populære designs, som alle kan tilpasses til at imødekomme dine virksomheds behov, går du ikke langt galt.

Divi

divi elegant themes

Divi er et enormt populært responsivt WordPress -tema til virksomheder (eller noget andet egentlig), en sidebygger (Divi Builder), og også en temabygger.

Produktet kommer fra Elegant Themes - en etableret virksomhed, der har skabt mange af mine foretrukne WordPress -produkter. Divi er et "batteri-inkluderet" tema-det leveres med alle funktioner, du måtte ønske.

Blandt højdepunkterne er Divi builder, som lader brugerne opbygge layout uden kodning, atten præfabrikerede layouts at vælge imellem og intelligent implementeret lydhørhed det betyder, at dit websted vil se godt ud, uanset om det vises på en stationær pc med en enorm skærm eller en smartphone med lille skærm.

Prøv Divi nu, og få 10% i rabat indtil oktober 2021

Anbefal læsning: hvis du er tilbøjelig til at bruge Divi tjek CollectiveRay's fuld Divi anmeldelse.

Avada

Avada WordPress forretningstema

Avada er en anden meget populær vare.

Avada er en funktionsrig som Divi og er perfekt egnet til opbygning af forretningssteder, der kan tilpasse sig forskellige skærmstørrelser. Ligesom Divi bemyndiger Avada brugere uden kodningskoteletter til at oprette unikke websteder.

Avada visuelle sidebygger (Fusion) er en fornøjelse at bruge, og produktet indeholder et hvilket som helst antal tankevækkende detaljer, der gør det til et glimrende valg til less teknisk tilbøjelig WordPress -webstedsejer.

Anbefalet læsning: Endnu en gang for større temaer har vi oprettet en fremragende Avada WordPress tema anmeldelse så du fuldt ud kan forstå, hvordan det kan hjælpe dig.

Tjek Avada nu

X

x wp forretningsresponsivt tema

X er endnu et lydhørt WordPress-tema til virksomheder, der har til formål at gøre det let at komme i gang med et smukt og unikt design, der ser godt ud på enhver enhed.

En af de markante funktioner i X er dens udvidelsessystem.

I stedet for at implementere funktioner inden for skabelonens kerne, giver X adskillige funktionsudvidelser, herunder et gitter, TypeKit-integration, en skyder og galleri-plugins. Ved at opdele funktionalitet i udvidelser kan brugerne vælge de funktioner, de har brug for, og undgå at indlæse deres websted med overflødig kode, der kan føre til ydeevne og sikkerhedsproblemer.

Tjek X demo nu

Andre skabeloner til forretning på Themeforest

Hvis de temaer, vi har set her, ikke begejstrer dig, skal du ikke bekymre dig, der er hundreder af WordPress-responsive temaer (til alle former for forretning, organisationer og i alle slags specifikke nicher) at vælge imellem på Themeforest.

Når du vælger et produkt fra det udvalgte udvalg på Themeforest, skal du være opmærksom på brugernes vurderinger - de hjælper dig med at sortere hveden fra agnet. Du skal også være opmærksom på, hvor for nylig artiklen blev opdateret.

Hvis det ikke er blevet opdateret i flere måneder, bør du overveje at kigge andre steder; forældede temaer kan forårsage kompatibilitets- og sikkerhedsproblemer.

5. Hvorfor er lydhørhed det bedste valg for dit forretningssted?

Responsivitet er ikke den eneste måde at håndtere mobil webtrafik på.

Alternativer inkluderer dedikerede mobilwebsteder og native apps og PWA'er (en hybrid mellem mobilwebsites og apps). Problemet med hver tilgang er, at de kræver mere arbejde end et lydhørt sted.

Hvis din virksomhed vælger en mobilapp eller PWA, skal den investere i dens design, udvikling, vedligeholdelse og promovering. Penge og tid fordeles mellem et websted og en app - eller flere apps for at imødekomme populære mobile platforme.

Dette design tillader dog SMV'er at opretholde en codebase og afsætte ressourcer til at skabe det bedste websted, de kan. Der er omstændigheder, hvor native apps er det bedste valg, men for de fleste SMV'er er lydhørhed en bedre ressourceudnyttelse.

Forestil dig en potentiel klient, der søger efter en tjeneste, din virksomhed tilbyder, mens du bruger sin iPhone. Hun finder, hvad hun vil, og lægger det som bogmærke til senere.

Den aften åbner hun bogmærket på sin stationære computer, og webstedet ser forfærdeligt ud, fordi hun bogmærker den mobile version. Dette scenario er ikke så slemt, som hvis webstedet overhovedet ikke havde nogen mobilversion, og hun blev tvunget til at håndtere den umodificerede desktopversion på sin telefon - ingen kan lide at klemme og panorere for at finde det, de ønsker - men et dette design ville tillade, at det samme websted og de samme links fungerer som beregnet på begge enheder.

At have et websted, der reagerer på brugerens enhed, giver også virksomheder mulighed for at levere sammenhængende branding på tværs af alle kontaktpunkter.

Webstedet ser det samme ud, omend tilpasset, og det vil give den samme navigation, det samme udseende og den samme oplevelse. Små virksomheder med begrænsede budgetter har ofte ikke ressourcerne til at opretholde ensartet kvalitet på tværs af flere webstedsversioner og apps.

Responsivitet betyder, at de ikke behøver.

Ligesom brugere ikke bør tilbydes en fragmenteret oplevelse, er det bedre for søgetrafik, hvis der er en kanonisk online placering for en virksomhed. Ifølge Google fordelene ved responsivt design inkluderer:

  • Opbevaring af dit desktop- og mobilindhold på en enkelt URL, hvilket er lettere for dine brugere at interagere med, dele og linke til og for Googles algoritmer til at tildele indekseringsegenskaberne til dit indhold.

  • Google kan opdage dit indhold mere effektivt, da vi ikke behøver at gennemgå en side med de forskellige Googlebot-brugeragenter for at hente og indeksere alt indholdet.

Google er i stand til at fortælle, om brugerne har en god oplevelse på dit websted. Hvis du ikke tilbyder et mobilvenligt websted, vil afvisningsprocenten for mobilbrugere skyrocket. De fleste af dem springer tilbage til søgemaskinen. Google ved, hvornår en bruger straks vender tilbage til SERP'erne efter at have klikket på et resultat og bruger afvisningsprocent som et rangeringssignal.

Endelig er responsivitet for WordPress -brugere den letteste og billigste metode til at give en god oplevelse for mobilbrugere. Mange af de bedste premium -temaer er designet til at være lydhøre, og omkostningerne ved at tilpasse et eksisterende tema til lydhørhed kan være betydeligt less end omkostningerne ved at udvikle en native app.

I betragtning af disse fordele er responsivt design for små og mellemstore virksomhedsejere, der bruger WordPress-temaer, den bedste vej fremad i en verden, hvor mobil internetbrug kun vil vokse.


Om forfatteren
David Attard
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...