Är WordPress-responsiva teman för företag det rätta valet?

lyhörd wordpress teman för företag

Sedan några år sedan, när Google meddelade att mobilvänlighet är en rankningsfaktor, är mobil eller lyhörd webbdesign inte längre en eftertanke för små och medelstora webbplatser.

Mobila enheter utgör idag en betydande del av webbtrafiken (53% år 2019).

Företag som erbjuder en dålig upplevelse för mobilanvändare riskerar att förlora kunder och intäkter. Det finns flera sätt att ge en bra mobilupplevelse, men mottaglig konstruktion är det bästa valet för små och medelstora företag som använder WordPress.

Denna typ av design är less dyrt, erbjuder en enhetlig upplevelse och sammanhållet varumärke på alla enheter, och det är bättre för SEO-mobil-first-design är Googles föredragna strategi för mobiloptimering. (Även deras sökrobotar tittar på en webbplats från en mobil enhet).

Innehåll[Show]

1. Vad är responsiv design och hur påverkar det WordPress-teman för företag?

Om du inte redan är bekant med konceptet, här är en nötskalförklaring: det är design som använder CSS-mediefrågor och en proportionell rutnätdesign för att ändra hur sidorna visas beroende på enhetens storlek.

Till exempel staplas element som spänner över en sida horisontellt i en skrivbordsbläddrare vertikalt på en smartphone-webbläsare. Bilder och typ ändras så att de återspeglar enhetens skärmstorlek.

Kärnan i responsiv design är CSS-mediefrågor.

CSS-stilark används för att kontrollera hur en webbsida ser ut: färgerna den använder, sidans layout, dess typografi och så vidare. Mediefrågor tillåter en designer att selektivt tillämpa CSS-regler endast när ett visst villkor är uppfyllt. (dvs. om en skärmstorlek ser ut som en mobilskärm, använd mönster som är lämpliga för mobiltelefoner, men om de är större, använd sedan mönster för större skärmar ...).

Förhoppningsvis kan du se hur det är användbart för att skapa olika mönster för olika skärmlayouter. Mediefrågor tillåter en utvecklare att säga, till exempel om webbläsarfönstret har en viss bredd, bör en specifik uppsättning regler tillämpas.

En typisk mediefråga ser ut så här:

. min behållare {
bredd: 800px;
}
@media (max-bredd: 600 pixlar) {
.min_container {
bredd: 500px;
}
}

I exemplet ovan är standardbredden för klassen .my_container inställd på 800px.

Självklart vill vi inte att den ska vara så bred på en smalare enhet, så vi använder en mediefråga.

Mediefrågan här anger ett villkor - om webbläsarens horisontella bredd är 600 pixlar eller less, min_containers bredd bör vara 500px. Om det utlöses av att villkoret är sant har reglerna i mediefrågan företräde framför "standard" -regeln.

Responsiv design för affärsteman utnyttjar dessa funktioner i CSS för att ändra presentationen av webbsidor beroende på enhetens skärmstorlek, webbläsarfönstrets storlek, enhetens orientering och många andra faktorer.

2. Responsiva designramar

Unless du är redan bekant med CSS - och även om du är det - kanske du inte tycker om tanken på att skriva mediefrågor för varje aspekt av ditt responsiva företags WordPress -tema, det är där designramar spelar in.

En responsiv designram tar hand om mycket av komplexiteten i att skapa en webbplats som passar för skärmar med olika storlekar.

Den mest populära designramen är Bootstrap - med versioner från v3.0 och framåt som helt mobila först. Bootstrap innehåller ett stort antal funktioner som inte berör oss här, men nyckeln till Bootstraps implementering av respons är dess nät.

Rekommenderad läsning: Så här konverterar du PSD till WordPress-tema med Bootstrap i 5 steg: en handledning och Elementor vs Divi - vilket är värt pengarna?

I stället för att be dig att skriva dina egna mediefrågor implementerar Bootstrap ett system som delar upp en HTML-sida i ett rutnät med rader och kolumner. I stället för att skriva mediefrågor kopplar användare klasser till sitt WordPress-temas HTML för att dela sidan enligt rutnätet.

För att ta ett trivialt exempel, tänk på en webbsida med två kolumner.

På stora skärmar vill vi att kolumnerna ska visas bredvid varandra. På små skärmar vill vi att de ska staplas ovanpå varandra.

twocolumn responsiv affärsdesign

 

Vår HTML skulle se ut så här:

  Detta är kolumn ett
</div>

Detta är kolumn två
</div>
</div>

Med Bootstrap Grid CSS inkluderad på sidan skulle denna HTML skapa den layout vi letar efter.

När sidan laddas i ett fönster som är mindre än det som anges för Bootstraps inbyggda mediefrågor för medelstora kolumner, staplas de ovanpå varandra istället för att spänna över sidan.

Du kan se mer komplexa exempel på hur detta fungerar i Bootstrap-dokumentation.

Bootstrap är inte det enda ramverket som ger ett nät av denna typ; i själva verket finns det dussintals, allt från omfattande ramar för webbdesign som Bootstrap och fundament, till lätta rutnätramar som Simple Grid som inte innehåller annat än rutnätet.

Ett alternativt tillvägagångssätt har blivit allt mer populärt under de senaste åren, ett som innehåller alla ändringar av markeringar till CSS (eller SASS) filer, snarare än att fylla HTML-sidor med icke-semantisk markering.

SASS lyhörd design grid system som Susy och Bourbon snyggt utnyttja kraften i SASS att skapa ramar som håller sidlayoutkoden där den ska vara - i CSS -filerna, vilket möjliggör renare HTML.

Vilka utvecklare väljer är en smak och erfarenhet, men vi föredrar det personligen SASS-baserade rutsystem som låter mig skriva semantiska webbsidor som inte är fulla av icke-semantiska klassnamn och överdriven div-häckning.

3. Responsiva designramar för design

Ramar som Bootstrap och Foundation är bra för webbdesigners, men de hjälper inte WordPress-utvecklare som letar efter ett försprång när de bygger nya mallar.

Lyckligtvis finns det många lyhörda WordPress-temaramar som ger en förbyggd grund.

1. Genesis

genesis framework för business wordpress -teman

Genesis är ett enormt populärt temaramverk från StudioPress (som vi har granskat helt här). Även om det riktar sig mer till erfarna WordPress-utvecklare än nybörjare, är det inte så svårt att ta itu med om du har en smula av PHP- och CSS-kunskap.

Genesis är en överordnad design från vilken det är möjligt att skapa ett valfritt antal barnteman. Om du föredrar att köpa en temat för barn från hylla och anpassa det, erbjuder StudioPress många olika barnteman som passar alla typer av webbplatser.

Förutom detta tema har vi ofta högt rankade WordPress-teman så att du kan fatta ett bra beslut om du vill köpa eller inte.

2. Themify Builder

enkelt affärstema av themify

Om du inte är en PHP- och CSS-whiz kanske du vill överväga ett plugin för mallbyggare som Themify.

I stället för att få dig att rulla upp ärmarna och dyka in i koden, erbjuder Themify Builder ett intuitivt dra-och-släpp-gränssnitt för att skapa helt responsiva WordPress-teman. Med Themify kan du välja mellan en rad förbyggda teman eller designa dina egna från grunden.

Themify tar bort alla implementeringsdetaljer som ligger bakom webbdesign för olika skärmstorlekar, vilket gör det lättare att få din webbplats igång snabbt.

3. Komponenter

komponenter teman generator

Komponenter var en bra lösning för att skapa anpassningsbara responsiva WordPress-teman från Automattic, företaget bakom WordPress.com.

För att använda komponenter väljer du helt enkelt en layout från listan - klassisk blogg, företagsajt, portfölj, bland annat - och komponentsajten kommer att spotta ut en SASS-baserad mall med mobil-första layouter och både skrivbords- och mobilmenyer.

Tyvärr har komponenter avvecklats.

4. Divi

Divi, som vi också kommer att nämna nedan som ett av de bästa WordPress-teman att använda för företag, började som ett tema.

Så småningom utvecklades det till att bli ett tema, en drag-and-drop-sidbyggare och nu med sina senaste utgåvor, också en fullständig temabyggare. Vid denna tidpunkt är Divi ett fullständigt WordPress-temaramverk som kan användas för att skapa alla typer av teman du behöver, med sitt breda utbud av verktyg.

4. WordPress-responsiva teman för företag

Om du hellre bara vill köpa något redo för ditt företag har du tusentals att välja mellan, några bättre än andra. Lyhördhet ses som en "måste-ha" -funktion på WordPress-temamarknaden, och nästan alla utvecklare kommer att hävda att deras produkt är lyhörd. Den här funktionen kan dock vara knepig och även erfarna utvecklare kan ha problem med dess korrekta implementering.

Innan vi går vidare kanske du vill kolla in vår fullständiga sammanfattning av WordPress-teman för affärs- och företagswebbplatser.

Med det sagt, om du väljer en av dessa populära mönster, som alla kan anpassas för att möta dina företags behov, kommer du inte att gå långt fel.

Divi

divi elegant themes

Divi är ett enormt populärt responsivt WordPress -tema för företag (eller något annat egentligen), en sidbyggare (Divi Builder), och även en temabyggare.

Produkten kommer från Elegant Themes - ett etablerat företag som har skapat många av mina favorit -WordPress -produkter. Divi är ett "batteri-inkluderat" -tema-det kommer med alla funktioner du kan önska.

Bland höjdpunkterna finns Divi builder, som låter användare bygga layouter utan kodning, arton färdiga layouter att välja mellan och intelligent implementerade mottaglighet det betyder att din webbplats kommer att se bra ut, oavsett om den visas på en stationär dator med en enorm bildskärm eller en liten skärmslagen smartphone.

Prova Divi nu och få 10% rabatt till Oktober 2021

Rekommendera läsning: om du är benägen att använda Divi kolla CollectiveRay's fullständig Divi-recension.

Avada

Avada WordPress-affärstema

Avada är en annan mycket populär artikel.

Avada är en funktionsrik som Divi och passar perfekt för byggandet av affärssidor som kan anpassas till olika skärmstorlekar. Liksom Divi ger Avada användare utan kodkotletter möjlighet att bygga unika webbplatser.

Avada visuella sidbyggare (Fusion) är ett nöje att använda, och produkten innehåller ett antal genomtänkta detaljer som gör det till ett utmärkt val för less tekniskt benägna WordPress -webbplatsägare.

Rekommenderad läsning: Återigen, för stora teman, har vi skapat en utmärkt Avada WordPress-temagranskning så att du kan förstå hur det kan hjälpa dig.

Kolla in Avada nu

X

x wp affärskänsligt tema

X är ännu ett lyhörd WordPress-tema för företag som syftar till att göra det enkelt att komma igång med en vacker och unik design som ser bra ut på alla enheter.

En av de utmärkande funktionerna i X är dess förlängningssystem.

Istället för att implementera funktioner i kärnan i mallen, tillhandahåller X ett flertal funktionstillägg, inklusive ett rutnät, TypeKit-integration, ett skjutreglage och galleriprogram. Genom att dela funktionalitet i tillägg kan användarna välja de funktioner de behöver och undvika att ladda sin webbplats med överflödig kod som kan leda till prestanda och säkerhetsproblem.

Kolla in X-demo nu

Andra mallar för företag på Themeforest

Om teman vi har tittat på här inte upphetsar dig, oroa dig inte, det finns hundratals WordPress-responsiva teman (för alla typer av företag, organisationer och i alla typer av specifika nischer) att välja mellan på Themeforest.

När du väljer en produkt från det urval som finns på Themeforest, var noga med att vara noga med användarnas betyg - de hjälper dig att sortera vete från agnet. Du bör också notera hur nyligen artikeln uppdaterades.

Om den inte har uppdaterats på flera månader bör du överväga att söka någon annanstans. föråldrade teman kan orsaka kompatibilitets- och säkerhetsproblem.

5. Varför är lyhördhet det bästa valet för din företagswebbplats?

Lyhördhet är inte det enda sättet att hantera mobil webbtrafik.

Alternativ inkluderar dedikerade mobilwebbplatser och inbyggda appar och PWA (en hybrid mellan mobilwebbplatser och appar). Problemet med varje tillvägagångssätt är att de kräver mer arbete än en responsiv webbplats.

Om ditt företag väljer en mobilapp eller PWA måste den investera i design, utveckling, underhåll och marknadsföring. Pengar och tid delas mellan en webbplats och en app - eller flera appar för att tillgodose populära mobilplattformar.

Denna design tillåter dock små och medelstora företag att upprätthålla en kodbas och ägna resurser åt att skapa den bästa webbplatsen de kan. Det finns omständigheter där infödda appar är det bästa valet, men för de flesta små och medelstora företag är lyhördhet en bättre resursanvändning.

Föreställ dig att en potentiell kund söker efter en tjänst ditt företag erbjuder när du använder sin iPhone. Hon hittar vad hon vill och bokmärker det för senare.

Den kvällen öppnar hon bokmärket på sin stationära dator, och sajten ser hemsk ut eftersom hon bokmärker mobilversionen. Det här scenariot är inte så dåligt som om webbplatsen inte hade någon mobilversion alls, och hon tvingades hantera den omodifierade skrivbordsversionen på sin telefon - ingen gillar att nypa och panorera för att hitta vad de vill - men en denna design skulle låt samma webbplats och samma länkar fungera som avsett på båda enheterna.

Att ha en webbplats som svarar på användarens enhet gör det också möjligt för företag att tillhandahålla sammanhängande varumärken över alla kontaktpunkter.

Webbplatsen kommer att se likadan ut, om än anpassad, och den kommer att ge samma navigering, samma utseende och känsla och samma upplevelse. Små företag med begränsade budgetar har ofta inte resurser för att upprätthålla en jämn kvalitet i flera versioner och appar för flera webbplatser.

Lyhördhet betyder att de inte behöver.

Precis som användare inte bör erbjudas en fragmenterad upplevelse är det bättre för söktrafik om det finns en kanonisk online-plats för ett företag. Enligt Google, fördelarna med responsiv design inkluderar:

  • Att hålla ditt skrivbords- och mobilinnehåll på en enda URL, vilket är lättare för dina användare att interagera med, dela och länka till och för Googles algoritmer för att tilldela indexeringsegenskaperna till ditt innehåll.

  • Google kan upptäcka ditt innehåll mer effektivt eftersom vi inte behöver genomsöka en sida med de olika Googlebot-användaragenterna för att hämta och indexera allt innehåll.

Google kan berätta om användarna har en bra upplevelse på din webbplats. Om du inte erbjuder en mobilvänlig webbplats kommer avvisningsfrekvensen för mobilanvändare att skjuta i höjden. De flesta av dem hoppar tillbaka till sökmotorn. Google vet när en användare omedelbart återvänder till SERP efter att ha klickat på ett resultat och använder avvisningsfrekvenser som en rankningssignal.

Slutligen, för WordPress -användare, är lyhördhet den enklaste och billigaste metoden för att ge en bra upplevelse för mobilanvändare. Många av de bästa premiumteman är utformade för att vara lyhörda och kostnaden för att anpassa ett befintligt tema för lyhördhet kan vara betydligt less än kostnaden för att utveckla en inbyggd app.

Med tanke på dessa fördelar, för små och medelstora företagare som använder WordPress-teman, är responsiv design överlägset den bästa vägen framåt i en värld där mobil webbanvändning bara kommer att växa.


Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...