Zijn WordPress responsieve thema's voor bedrijven de juiste keuze?

responsieve WordPress-thema's voor bedrijven

Sinds een paar jaar geleden, toen Google aankondigde dat mobielvriendelijkheid een rankingfactor is, is mobiel of responsive webdesign niet langer een bijzaak voor websites van kleine en middelgrote bedrijven.

Mobiele apparaten vormen tegenwoordig een aanzienlijk deel van het webverkeer (53% in 2019).

Bedrijven die mobiele gebruikers een slechte ervaring bieden, lopen het risico klanten en inkomsten te verliezen. Er zijn verschillende manieren om een ​​goede mobiele ervaring te bieden, maar reagerend ontwerp is de beste keuze voor KMO's die WordPress gebruiken.

Dit soort ontwerp is less duur, biedt een uniforme ervaring en samenhangende branding op verschillende apparaten, en het is beter voor SEO — mobile-first design is de favoriete mobiele optimalisatiestrategie van Google. (Zelfs hun crawlers bekijken een site vanaf een mobiel apparaat).

Inhoud[Producten per pagina]

1. Wat is responsive design en hoe beïnvloedt het zakelijke WordPress-thema's?

Als u nog niet bekend bent met het concept, volgt hier een korte uitleg: het is een ontwerp dat CSS-mediaquery's en een proportioneel rasterontwerp gebruikt om de manier waarop pagina's worden weergegeven te veranderen, afhankelijk van de grootte van het apparaat.

Elementen die bijvoorbeeld een pagina horizontaal overspannen in een desktopbrowser, worden verticaal gestapeld in een smartphonebrowser. Afbeeldingen en type worden aangepast aan de schermgrootte van het apparaat.

De kern van responsive design zijn CSS-mediaquery's.

CSS-stijlbladen worden gebruikt om te bepalen hoe een webpagina eruitziet: de kleuren die worden gebruikt, de lay-out van de pagina, de typografie, enzovoort. Met mediaquery's kan een ontwerper alleen selectief CSS-regels toepassen als aan een bepaalde voorwaarde is voldaan. (dwz als een schermformaat eruitziet als een mobiel scherm, pas dan ontwerpen toe die geschikt zijn voor mobiele telefoons, maar als het groter is, pas dan ontwerpen toe voor grotere schermen...).

Hopelijk kun je zien hoe dat handig is voor het maken van verschillende ontwerpen voor verschillende schermlay-outs. Met mediaquery's kan een ontwikkelaar bijvoorbeeld zeggen dat als het webbrowservenster een bepaalde breedte heeft, een specifieke set regels moet worden toegepast.

Een typische mediaquery ziet er als volgt uit:

.mijn container {
breedte: 800px;
}
@media (max-breedte: 600 px) {
.mijn_container {
breedte: 500px;
}
}

In het bovenstaande voorbeeld is de standaardbreedte van de klasse .my_container ingesteld op 800px.

Het is duidelijk dat we niet willen dat het zo breed is op een smaller apparaat, dus gebruiken we een mediaquery.

De mediaquery hier specificeert een voorwaarde — als de horizontale breedte van de browser 600px is of less, moet de breedte van .my_container 500px zijn. Als het wordt geactiveerd doordat de voorwaarde waar is, hebben de regels in de mediaquery voorrang op de 'standaard'-regel.

Responsief ontwerp voor zakelijke thema's maakt gebruik van deze functies van CSS om de presentatie van webpagina's te wijzigen, afhankelijk van de schermgrootte van het apparaat, de grootte van het browservenster, de oriëntatie van het apparaat en vele andere factoren.

2. Responsieve ontwerpkaders

Unless je bent al bekend met CSS - en zelfs als je dat bent - vind je het misschien niet leuk om mediaquery's te schrijven voor elk aspect van je responsieve zakelijke WordPress-thema, waar ontwerpkaders een rol spelen.

Een responsief ontwerpframework zorgt voor een groot deel van de complexiteit van het maken van een site die geschikt is voor schermen met verschillende formaten.

Het meest populaire ontwerpkader is: Bootstrap - met versies vanaf v3.0 die volledig mobile-first zijn. Bootstrap bevat een groot aantal functies die ons hier niet aangaan, maar de sleutel tot Bootstrap's implementatie van responsiviteit is het raster.

Aanbevolen literatuur: Hoe een PSD naar WordPress-thema te converteren met Bootstrap in 5 stappen: een tutorial als Elementor vs Divi - wat het geld het meest waard is?

In plaats van u te vragen om uw eigen mediaquery's te schrijven, implementeert Bootstrap een systeem dat een HTML-pagina verdeelt in een raster van rijen en kolommen. In plaats van mediaquery's te schrijven, voegen gebruikers klassen toe aan de HTML van hun WordPress-thema om de pagina volgens het raster te verdelen.

Om een ​​triviaal voorbeeld te nemen, denk aan een webpagina met twee kolommen.

Op grote schermen willen we dat de kolommen naast elkaar worden weergegeven. Op kleine schermen willen we dat ze op elkaar worden gestapeld.

responsief zakelijk ontwerp met twee kolommen

 

Onze HTML zou er als volgt uitzien:

  Dit is kolom één


Dit is kolom twee

Met de Bootstrap Grid CSS op de pagina, zou deze HTML de lay-out creëren waarnaar we op zoek zijn.

Wanneer de pagina wordt geladen in een venster dat kleiner is dan het venster dat is opgegeven voor de ingebouwde mediaquery's van Bootstrap voor middelgrote kolommen, worden ze op elkaar gestapeld in plaats van de pagina te overspannen.

U kunt meer complexe voorbeelden zien van hoe dit werkt in de Bootstrap-documentatie.

Bootstrap is niet het enige raamwerk dat een dergelijk raster biedt; in feite zijn er tientallen, variërend van uitgebreide webdesign-frameworks zoals Bootstrap en Foundation, tot lichtgewicht rasterframeworks zoals Simple Grid die niets anders bevatten dan het raster.

Een alternatieve benadering is de laatste jaren steeds populairder geworden, een die alle opmaakwijzigingen in CSS (of SASS) bestanden, in plaats van HTML-pagina's te bevuilen met niet-semantische opmaak.

SASS responsieve ontwerprastersystemen zoals Susy als Bourbon Netjes gebruik maken van de kracht van SASS om kaders te creëren die de paginalay-outcode houden waar deze hoort te zijn - in de CSS-bestanden, waardoor schonere HTML mogelijk wordt.

Welke ontwikkelaars kiezen is een kwestie van smaak en ervaring, maar wij geven er persoonlijk de voorkeur aan SASS-gebaseerde rastersystemen waarmee ik semantische webpagina's kan schrijven die niet vol staan ​​met niet-semantische klassenamen en buitensporige div-nesting.

3. Responsieve ontwerpthemakaders

Frameworks zoals Bootstrap en Foundation zijn geweldig voor webontwerpers, maar ze doen niet veel om WordPress-ontwikkelaars te helpen die een voorsprong willen hebben bij het bouwen van nieuwe sjablonen.

Gelukkig zijn er veel responsieve WordPress-themaframeworks die een vooraf gebouwde basis bieden.

1. Genesis

genesis framework voor zakelijke wordpress-thema's

Genesis is een enorm populair themaframework van StudioPress (die we hier volledig hebben beoordeeld). Hoewel het meer gericht is op ervaren WordPress-ontwikkelaars dan op nieuwelingen, is het niet zo moeilijk om het onder de knie te krijgen als je een beetje PHP- en CSS-kennis hebt.

Genesis is een ouderontwerp waaruit het mogelijk is om een ​​willekeurig aantal onderliggende thema's te maken. Als u liever een kant-en-klaar child-thema koopt en deze aanpast, biedt StudioPress veel verschillende child-thema's die geschikt zijn voor alle soorten sites.

Naast dit thema hebben we vaak hoog gewaardeerde WordPress-thema's, zodat u een goede beslissing kunt nemen om te kopen of niet.

2. Themify Builder

eenvoudig zakelijk thema door themify

Als je geen PHP- en CSS-whizz bent, kun je een plug-in voor het bouwen van sjablonen zoals Themify overwegen.

In plaats van je de mouwen op te stropen en in de code te duiken, biedt Themify Builder een intuïtieve drag-and-drop-interface voor het maken van volledig responsieve WordPress-thema's. Met Themify kun je kiezen uit een reeks kant-en-klare thema's, of je eigen thema's helemaal zelf ontwerpen.

Themify abstraheert alle implementatiedetails die ten grondslag liggen aan webontwerp voor verschillende schermformaten, waardoor het gemakkelijker wordt om uw website snel up-and-running te krijgen.

3. Componenten

componenten thema generator

Components was een geweldige oplossing voor het maken van aanpasbare responsieve WordPress-thema's van Automattic, het bedrijf achter WordPress.com.

Om Components te gebruiken, kiest u eenvoudig een lay-out uit de lijst - onder andere klassieke blog, bedrijfssite, portfolio - en de Components-site spuwt een SASS-gebaseerde sjabloon met mobiel-eerste lay-outs en zowel desktop- als mobiele menu's.

Helaas is Components stopgezet.

4. Divi

Divi, dat we hieronder ook zullen noemen als een van de beste WordPress-thema's voor bedrijven, begon als een thema.

Uiteindelijk evolueerde het naar een thema, een paginabuilder met slepen en neerzetten en nu met zijn laatste releases ook een volledige themabouwer. Op dit moment is Divi een volledig WordPress-themaraamwerk dat kan worden gebruikt om elk soort thema te maken dat je nodig hebt, met zijn brede scala aan tools.

4. Responsieve WordPress-thema's voor bedrijven

Als u liever gewoon iets koopt dat klaar is voor uw bedrijf, heeft u duizenden om uit te kiezen, sommige beter dan andere. Responsiviteit wordt gezien als een "must-have" -functie op de WordPress-themamarktplaats, en bijna elke ontwikkelaar zal beweren dat hun product responsief is. Deze functie kan echter lastig zijn en zelfs ervaren ontwikkelaars kunnen problemen hebben met de juiste implementatie ervan.

Voordat we verder gaan, wil je misschien onze volledige verzameling van WordPress-thema's voor zakelijke en zakelijke sites.

Dat gezegd hebbende, als u een van deze populaire ontwerpen kiest, die allemaal kunnen worden aangepast aan de behoeften van uw bedrijf, zit u niet ver mis.

Divi

divi elegant themes

Divi is een enorm populair responsief WordPress-thema voor bedrijven (of iets anders eigenlijk), een paginabuilder (Divi Builder), en ook een themabouwer.

Het product komt van Elegant Themes — een gevestigd bedrijf dat veel van mijn favoriete WordPress-producten heeft gemaakt. Divi is een thema 'inclusief batterijen' - het wordt geleverd met elke functie die je maar wilt.

Tot de hoogtepunten behoren de Divi builder, waarmee gebruikers lay-outs kunnen bouwen zonder codering, achttien vooraf gemaakte lay-outs om uit te kiezen en intelligent geïmplementeerd responsiviteit dat betekent dat uw site er geweldig uitziet, of u deze nu bekijkt op een desktop-pc met een grote monitor of een smartphone met een klein scherm.

Probeer Divi nu en krijg 10% KORTING tot oktober 2021

Aanbevelen lezen: als je geneigd bent om Divi . te gebruiken uitchecken CollectiveRay's volledige Divi Review.

Avada

Avada WordPress Zakelijk Thema

Avada is een ander zeer populair item.

Avada is een feature-rijk als Divi, en is perfect geschikt voor het bouwen van bedrijventerreinen die zich kunnen aanpassen aan verschillende schermformaten. Net als Divi stelt Avada gebruikers in staat om unieke sites te bouwen zonder programmeerproblemen.

De visuele paginabuilder van Avada (Fusion) is een plezier om te gebruiken en het product bevat een aantal doordachte details die het een uitstekende keuze maken voor de less technisch ingestelde WordPress-site-eigenaar.

Aanbevolen Reading: Nogmaals, voor grote thema's hebben we een uitstekende Avada WordPress-themabeoordeling zodat u volledig kunt begrijpen hoe het u kan helpen.

Bekijk Avada nu

X

x wp zakelijk responsief thema

X is nog een ander responsive WordPress-thema voor bedrijven dat het gemakkelijk wil maken om aan de slag te gaan met een mooi en uniek ontwerp dat er geweldig uitziet op elk apparaat.

Een van de opvallende kenmerken van X is het uitbreidingssysteem.

In plaats van functies in de kern van de sjabloon te implementeren, biedt X tal van functie-uitbreidingen, waaronder een raster, TypeKit-integratie, een schuifregelaar en galerij-plug-ins. Door functionaliteit op te splitsen in extensies kunnen gebruikers de mogelijkheden kiezen die ze nodig hebben en voorkomen dat hun site wordt geladen met overbodige code die kan leiden tot prestatie- en beveiligingsproblemen.

Bekijk nu de X-demo

Andere sjablonen voor bedrijven op Themeforest

Als de thema's die we hier hebben bekeken je niet opwinden, maak je dan geen zorgen, er zijn er honderden WordPress responsieve thema's (voor alle soorten bedrijven, organisaties en in allerlei specifieke niches) om uit te kiezen op Themeforest.

Wanneer je een product kiest uit de selectie die beschikbaar is op Themeforest, let dan goed op de gebruikersbeoordelingen - ze zullen je helpen het kaf van het koren te scheiden. Houd er ook rekening mee hoe recent het item is bijgewerkt.

Als het een aantal maanden niet is bijgewerkt, moet u overwegen ergens anders te zoeken; verouderde thema's kunnen compatibiliteits- en beveiligingsproblemen veroorzaken.

5. Waarom is responsiviteit de beste keuze voor uw bedrijfssite?

Responsiviteit is niet de enige manier om mobiel webverkeer af te handelen.

Alternatieven zijn speciale mobiele sites en native apps en PWA's (een hybride tussen mobiele sites en apps). Het probleem met elke benadering is dat ze meer werk vergen dan een responsieve site.

Als uw bedrijf een mobiele app of PWA kiest, moet het investeren in het ontwerp, de ontwikkeling, het onderhoud en de promotie ervan. Geld en tijd worden verdeeld tussen een website en een app - of meerdere apps voor populaire mobiele platforms.

Dit ontwerp stelt het MKB echter in staat om één codebase te onderhouden en middelen te besteden aan het maken van de best mogelijke website. Er zijn omstandigheden waarin native apps de beste keuze zijn, maar voor de meeste kmo's is responsiviteit een beter gebruik van middelen.

Stel je voor dat een potentiële klant zoekt naar een dienst die jouw bedrijf aanbiedt terwijl hij haar iPhone gebruikt. Ze vindt wat ze wil en maakt er een bladwijzer van voor later.

Die avond opent ze de bladwijzer op haar desktopcomputer en de site ziet er verschrikkelijk uit omdat ze de mobiele versie heeft gemarkeerd. Dit scenario is niet zo slecht alsof de site helemaal geen mobiele versie had en ze gedwongen was om te gaan met de ongewijzigde desktopversie op haar telefoon - niemand houdt van knijpen en pannen om te vinden wat ze willen - maar een dit ontwerp zou toestaan ​​dat dezelfde website en dezelfde links op beide apparaten werken zoals bedoeld.

Met één site die reageert op het apparaat van de gebruiker, kunnen bedrijven ook samenhangende branding bieden op alle contactpunten.

De site zal er hetzelfde uitzien, zij het aangepast, en zal dezelfde navigatie, dezelfde look en feel en dezelfde ervaring bieden. Kleine bedrijven met beperkte budgetten hebben vaak niet de middelen om een ​​consistente kwaliteit te behouden voor meerdere siteversies en apps.

Responsiviteit betekent dat ze dat niet hoeven te doen.

Net zoals gebruikers geen gefragmenteerde ervaring moeten worden aangeboden, is het voor het zoekverkeer beter als er één canonieke online locatie voor een bedrijf is. Volgens Google, de voordelen van responsief ontwerp omvatten::

  • Uw desktop- en mobiele inhoud op één URL houden, waardoor uw gebruikers gemakkelijker kunnen communiceren met, delen en linken naar en voor de algoritmen van Google om de indexeringseigenschappen aan uw inhoud toe te wijzen.

  • Google kan uw inhoud efficiënter ontdekken, omdat we geen pagina hoeven te crawlen met de verschillende Googlebot-gebruikersagenten om alle inhoud op te halen en te indexeren.

Google kan zien of gebruikers een goede ervaring op uw site hebben. Als u geen mobielvriendelijke site aanbiedt, zullen de bouncepercentages voor mobiele gebruikers omhoogschieten. De meeste van hen zullen terugkaatsen naar de zoekmachine. Google weet wanneer een gebruiker onmiddellijk terugkeert naar de SERP's nadat hij op een resultaat heeft geklikt en gebruikt bouncepercentages als rangschikkingssignaal.

Ten slotte is reactievermogen voor WordPress-gebruikers de gemakkelijkste en goedkoopste methode om mobiele gebruikers een goede ervaring te bieden. Veel van de beste premium-thema's zijn ontworpen om responsief te zijn en de kosten van het aanpassen van een bestaand thema voor responsiviteit kunnen aanzienlijk zijn less dan de kosten van het ontwikkelen van een native app.

Gezien deze voordelen is responsief ontwerp voor eigenaren van kleine en middelgrote bedrijven die WordPress-thema's gebruiken verreweg de beste manier om vooruit te komen in een wereld waar mobiel internetgebruik alleen maar zal groeien.


Over de auteur
David Attard
Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/
David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...