Sind WordPress Responsive Themes für Unternehmen die richtige Wahl?

Responsive WordPress-Themen für Unternehmen

Seit Google vor einigen Jahren bekannt gab, dass Handyfreundlichkeit ein Ranking-Faktor ist, ist mobiles oder responsives Webdesign für kleine und mittlere Unternehmen kein nachträglicher Gedanke mehr.

Mobile Geräte machen heute einen erheblichen Anteil des Webverkehrs aus (53% im Jahr 2019).

Unternehmen, die mobilen Benutzern eine schlechte Erfahrung bieten, riskieren, Kunden und Einnahmen zu verlieren. Es gibt verschiedene Möglichkeiten, um ein gutes mobiles Erlebnis zu bieten sich anpassendes Design ist die beste Wahl für KMU, die WordPress verwenden.

Diese Art von Design ist less teuer, bietet ein einheitliches Erlebnis und ein einheitliches Branding auf allen Geräten und ist besser für SEO – Mobile-First-Design ist Googles bevorzugte Strategie zur mobilen Optimierung. (Sogar ihre Crawler sehen sich eine Website von einem mobilen Gerät aus an).

1. Was ist Responsive Design und wie wirkt es sich auf Business WordPress-Themes aus?

Wenn Sie mit dem Konzept noch nicht vertraut sind, finden Sie hier eine kurze Erklärung: Beim Design werden CSS-Medienabfragen und ein proportionales Rasterdesign verwendet, um die Darstellung der Seiten abhängig von der Größe des Geräts zu ändern.

Beispielsweise werden Elemente, die eine Seite in einem Desktop-Browser horizontal überspannen, in einem Smartphone-Browser vertikal gestapelt. Die Größe von Bildern und Typ wird an die Bildschirmgröße des Geräts angepasst.

Im Zentrum des Responsive Design stehen CSS-Medienabfragen.

Mithilfe von CSS-Stylesheets können Sie steuern, wie eine Webseite aussieht: die verwendeten Farben, das Layout der Seite, ihre Typografie usw. Mit Medienabfragen kann ein Designer CSS-Regeln nur dann selektiv anwenden, wenn eine bestimmte Bedingung erfüllt ist. (dh wenn eine Bildschirmgröße wie ein mobiler Bildschirm aussieht, wenden Sie Designs an, die für Mobiltelefone geeignet sind. Wenn sie jedoch größer sind, wenden Sie Designs für größere Bildschirme an ...).

Hoffentlich können Sie sehen, wie nützlich dies ist, um unterschiedliche Designs für unterschiedliche Bildschirmlayouts zu erstellen. Mit Medienabfragen kann ein Entwickler beispielsweise sagen, wenn das Webbrowser-Fenster eine bestimmte Breite hat, sollte ein bestimmter Satz von Regeln angewendet werden.

Eine typische Medienabfrage sieht folgendermaßen aus:

.mein Container {
Breite: 800px;
}
@media (maximale Breite: 600px) {
.mein_container {
Breite: 500px;
}
}

Im obigen Beispiel ist die Standardbreite der Klasse .my_container auf 800px festgelegt.

Natürlich möchten wir nicht, dass es auf einem schmaleren Gerät so breit ist, also verwenden wir eine Medienabfrage.

Die Medienabfrage hier gibt eine Bedingung an – wenn die horizontale Breite des Browsers 600px beträgt oder less, sollte die Breite von .my_container 500px betragen. Wenn es ausgelöst wird, indem die Bedingung wahr ist, haben die Regeln in der Medienabfrage Vorrang vor der Regel "Standard".

Responsive Design für Geschäftsthemen nutzt diese Funktionen von CSS, um die Darstellung von Webseiten abhängig von der Bildschirmgröße des Geräts, der Größe des Browserfensters, der Ausrichtung des Geräts und vielen anderen Faktoren zu ändern.

2. Responsive Design-Frameworks

Unless Sie sind bereits mit CSS vertraut – und selbst wenn Sie es sind – mögen Sie die Idee nicht, Medienabfragen für jeden Aspekt Ihres responsiven Geschäfts-WordPress-Themes zu schreiben, und hier kommen Design-Frameworks ins Spiel.

Ein responsives Design-Framework übernimmt einen Großteil der Komplexität bei der Erstellung einer Site, die für Bildschirme mit unterschiedlichen Größen geeignet ist.

Das beliebteste Design-Framework ist Bootstrap - mit Versionen ab Version 3.0, die zuerst vollständig mobil sind. Bootstrap enthält eine Vielzahl von Funktionen, die uns hier nicht betreffen, aber der Schlüssel zur Implementierung der Reaktionsfähigkeit von Bootstrap ist das Raster.

Empfohlene Lektüre: So konvertieren Sie eine PSD in ein WordPress-Design mit Bootstrap in 5 Schritten: ein Tutorial . Elementor vs Divi - das ist das Geld am meisten wert?

Anstatt Sie zu bitten, Ihre eigenen Medienabfragen zu schreiben, implementiert Bootstrap ein System, das eine HTML-Seite in ein Raster aus Zeilen und Spalten unterteilt. Anstatt Medienabfragen zu schreiben, hängen Benutzer Klassen an den HTML-Code ihres WordPress-Themas an, um die Seite nach dem Raster zu unterteilen.

Um ein triviales Beispiel zu nennen, stellen Sie sich eine zweispaltige Webseite vor.

Auf großen Bildschirmen sollen die Spalten nebeneinander angezeigt werden. Auf kleinen Bildschirmen sollen sie übereinander gestapelt werden.

zweispaltiges responsives Geschäftsdesign

 

Unser HTML würde so aussehen:

  Dies ist Spalte Eins


Dies ist Spalte zwei

Mit dem auf der Seite enthaltenen Bootstrap Grid-CSS würde dieser HTML-Code das gesuchte Layout erstellen.

Wenn die Seite in ein Fenster geladen wird, das kleiner ist als das für die integrierten Medienabfragen von Bootstrap für mittlere Spalten angegebene, werden sie übereinander gestapelt, anstatt sich über die Seite zu erstrecken.

Komplexere Beispiele dafür finden Sie in der Bootstrap-Dokumentation.

Bootstrap ist nicht das einzige Framework, das ein solches Raster bereitstellt. Tatsächlich gibt es Dutzende, angefangen von umfassenden Webdesign-Frameworks wie Bootstrap und Foundationzu leichtgewichtigen Grid-Frameworks wie Simple Grid, die nur das Grid enthalten.

In den letzten Jahren wurde ein alternativer Ansatz immer beliebter, der alle Markup-Änderungen an CSS (oder SASS)-Dateien, anstatt HTML-Seiten mit nicht-semantischem Markup zu überfrachten.

SASS Responsive Design Grid-Systeme wie Susy . Bourbon ordentlich nutze die Kraft von SASS um Frameworks zu erstellen, die den Seitenlayout-Code dort halten, wo er sein soll – in den CSS-Dateien, was saubereres HTML ermöglicht.

Welche Entwickler wählen, ist Geschmacks- und Erfahrungssache, aber wir persönlich bevorzugen SASS-basierte Grid-Systeme, mit denen ich semantische Webseiten schreiben kann, die nicht voller nicht-semantischer Klassennamen und übermäßiger Div-Verschachtelung sind.

3. Responsive Design-Themen-Frameworks

Frameworks wie Bootstrap und Foundation eignen sich hervorragend für Webdesigner, helfen WordPress-Entwicklern jedoch nicht viel, wenn sie beim Erstellen neuer Vorlagen nach einem Vorsprung suchen.

Glücklicherweise gibt es viele reaktionsschnelle WordPress-Theme-Frameworks, die eine vorgefertigte Grundlage bieten.

1. Genese

genesis framework für Business-Wordpress-Themen

Genesis ist ein äußerst beliebtes Theme-Framework von StudioPress (was wir hier ausführlich besprochen haben). Obwohl es sich eher an erfahrene WordPress-Entwickler als an Neulinge richtet, ist es nicht allzu schwierig, sich damit vertraut zu machen, wenn Sie ein wenig PHP- und CSS-Kenntnisse haben.

Genesis ist ein übergeordnetes Design, mit dem beliebig viele untergeordnete Themen erstellt werden können. Wenn Sie es vorziehen, untergeordnete Standardthemen zu kaufen und anzupassen, bietet StudioPress viele verschiedene untergeordnete Themen an, die für alle Arten von Websites geeignet sind.

Neben diesem Thema bieten wir häufig hoch bewertete WordPress-Themen an, damit Sie eine gute Kaufentscheidung treffen können.

2. Themify Builder

einfaches Geschäftsthema von themify

Wenn Sie kein PHP- und CSS-Experte sind, sollten Sie ein Template Builder-Plugin wie Themify in Betracht ziehen.

Anstatt Sie dazu zu bringen, die Ärmel hochzukrempeln und in den Code einzutauchen, bietet Themify Builder eine intuitive Drag-and-Drop-Oberfläche zum Erstellen vollständig ansprechender WordPress-Themen. Mit Themify können Sie aus einer Reihe vorgefertigter Themen auswählen oder Ihre eigenen von Grund auf neu entwerfen.

Themify abstrahiert alle Implementierungsdetails, die dem Webdesign für verschiedene Bildschirmgrößen zugrunde liegen, und erleichtert so die schnelle Inbetriebnahme Ihrer Website.

3. Komponenten

Komponenten Theme Generator

Components war eine großartige Lösung für die Erstellung anpassbarer reaktionsschneller WordPress-Themes von Automattic, dem Unternehmen hinter WordPress.com.

Um Components zu verwenden, wählen Sie einfach ein Layout aus der Liste aus – unter anderem klassischer Blog, Business-Site, Portfolio – und die Components-Site wird ausgespuckt SASS-basierte Vorlage mit Mobile-First-Layouts und Desktop- und Mobile-Menüs.

Leider wurde Components eingestellt.

4. Divi

Divi, das wir im Folgenden auch als eines der besten WordPress-Themen für Unternehmen erwähnen werden, begann als Thema.

Schließlich entwickelte es sich zu einem Thema, einem Drag & Drop-Seitenersteller und jetzt mit seinen letzten Versionen auch zu einem vollständigen Themenersteller. Zu diesem Zeitpunkt ist Divi ein vollständiges WordPress-Theme-Framework, mit dem Sie jede Art von Theme erstellen können, die Sie benötigen, mit einer Vielzahl von Tools.

4. WordPress Responsive Themes für Unternehmen

Wenn Sie lieber einfach etwas kaufen möchten, das für Ihr Unternehmen bereit ist, haben Sie Tausende zur Auswahl, einige besser als andere. Reaktionsfähigkeit wird auf dem WordPress-Theme-Marktplatz als ein "Muss" angesehen, und fast jeder Entwickler wird behaupten, dass sein Produkt reaktionsschnell ist. Diese Funktion kann jedoch schwierig sein und selbst erfahrene Entwickler können Probleme mit der ordnungsgemäßen Implementierung haben.

Bevor wir fortfahren, sollten Sie sich unsere vollständige Zusammenfassung ansehen WordPress-Themes für Business- und Corporate-Sites.

Wenn Sie sich jedoch für eines dieser beliebten Designs entscheiden, die alle an die Anforderungen Ihres Unternehmens angepasst werden können, werden Sie nicht viel falsch machen.

Divi

divi elegant themes

Divi ist ein äußerst beliebtes responsives WordPress-Theme für Unternehmen (oder alles andere wirklich), ein Page Builder (Divi Builder) und auch ein Theme-Builder.

Das Produkt kommt von Elegant Themes — ein etabliertes Unternehmen, das viele meiner Lieblings-WordPress-Produkte entwickelt hat. Divi ist ein "Batterien enthaltenes" Thema – es enthält alle Funktionen, die Sie sich wünschen können.

Zu den Highlights zählen die Divi builder, mit dem Benutzer Layouts ohne Codierung erstellen können, achtzehn vorgefertigte Layouts zur Auswahl und intelligent implementiert Reaktionsfähigkeit Das bedeutet, dass Ihre Website großartig aussieht, egal ob sie auf einem Desktop-PC mit einem großen Monitor oder einem Smartphone mit kleinem Bildschirm angezeigt wird.

Probieren Sie Divi jetzt aus und erhalten Sie 10% Rabatt bis Oktober 2021

Lesen empfehlen: wenn Sie dazu neigen, Divi zu verwenden überprüfen CollectiveRay's vollständige Divi Bewertung.

Avada

Avada WordPress Business-Theme

Avada ist ein weiterer sehr beliebter Artikel.

Avada ist als Divi reich an Funktionen und eignet sich perfekt für den Aufbau von Business-Sites, die sich an verschiedene Bildschirmgrößen anpassen lassen. Wie Divi ermöglicht Avada Benutzern ohne Codierungsprobleme das Erstellen eindeutiger Websites.

Der visuelle Avada Page Builder (Fusion) ist eine Freude in der Verwendung, und das Produkt enthält eine Reihe von durchdachten Details, die es zu einer ausgezeichneten Wahl für die less technisch versierter WordPress-Site-Besitzer.

Literatur-Empfehlungen: Noch einmal, für wichtige Themen haben wir eine erstellt ausgezeichnete Avada WordPress Theme Review So können Sie vollständig verstehen, wie es Ihnen helfen kann.

Schauen Sie sich Avada Now an

X

x wp Business Responsive Theme

X ist ein weiteres reaktionsschnelles WordPress-Theme für Unternehmen, das die Inbetriebnahme mit einem schönen und einzigartigen Design vereinfachen soll, das auf jedem Gerät großartig aussieht.

Eines der herausragenden Merkmale von X ist das Erweiterungssystem.

Anstatt Features im Kern der Vorlage zu implementieren, bietet X zahlreiche Feature-Erweiterungen, darunter ein Raster, eine TypeKit-Integration, einen Schieberegler und Galerie-Plugins. Durch die Aufteilung der Funktionen in Erweiterungen können Benutzer die Funktionen auswählen, die sie benötigen, und vermeiden, dass ihre Site mit überflüssigem Code geladen wird, der zu Leistungs- und Sicherheitsproblemen führen kann.

Schauen Sie sich jetzt die X-Demo an

Andere Vorlagen für Business On Themeforest

Wenn die Themen, die wir uns hier angesehen haben, Sie nicht begeistern, keine Sorge, es gibt Hunderte von Themen Ansprechende WordPress-Themen (für alle Arten von Unternehmen, Organisationen und in allen Arten von spezifischen Nischen) zur Auswahl auf Themeforest.

Achten Sie bei der Auswahl eines Produkts aus der auf Themeforest verfügbaren Auswahl unbedingt auf die Benutzerbewertungen. Sie helfen Ihnen dabei, die Spreu vom Weizen zu trennen. Sie sollten auch beachten, wie kürzlich das Element aktualisiert wurde.

Wenn es seit mehreren Monaten nicht mehr aktualisiert wurde, sollten Sie in Betracht ziehen, woanders zu suchen. Veraltete Themen können Kompatibilitäts- und Sicherheitsprobleme verursachen.

5. Warum ist Reaktionsfähigkeit die beste Wahl für Ihre Unternehmens-Website?

Reaktionsfähigkeit ist nicht die einzige Möglichkeit, mit mobilem Webverkehr umzugehen.

Zu den Alternativen gehören dedizierte mobile Websites sowie native Apps und PWAs (eine Mischung aus mobilen Websites und Apps). Das Problem bei jedem Ansatz ist, dass sie mehr Arbeit erfordern als eine reaktionsfähige Site.

Wenn sich Ihr Unternehmen für eine mobile App oder PWA entscheidet, muss es in deren Design, Entwicklung, Wartung und Förderung investieren. Geld und Zeit werden zwischen einer Website und einer App aufgeteilt - oder mehreren Apps, um beliebte mobile Plattformen zu unterstützen.

Dieses Design ermöglicht es KMU jedoch, eine Codebasis beizubehalten und Ressourcen für die Erstellung der bestmöglichen Website bereitzustellen. Unter bestimmten Umständen sind native Apps die beste Wahl, aber für die meisten KMU bedeutet Reaktionsfähigkeit eine bessere Nutzung der Ressourcen.

Stellen Sie sich vor, ein potenzieller Kunde sucht nach einem Service, den Ihr Unternehmen anbietet, während er sein iPhone verwendet. Sie findet, was sie will und setzt ein Lesezeichen für später.

An diesem Abend öffnet sie das Lesezeichen auf ihrem Desktop-Computer, und die Website sieht schrecklich aus, weil sie die mobile Version mit einem Lesezeichen versehen hat. Dieses Szenario ist nicht so schlimm, als hätte die Site überhaupt keine mobile Version, und sie war gezwungen, sich mit der unveränderten Desktop-Version ihres Telefons zu befassen - niemand mag es, zu kneifen und zu schwenken, um zu finden, was er will -, aber ein solches Design würde es tun Lassen Sie auf beiden Geräten dieselbe Website und dieselben Links wie vorgesehen funktionieren.

Mit einer Website, die auf das Gerät des Benutzers reagiert, können Unternehmen auch ein einheitliches Branding für alle Kontaktpunkte bereitstellen.

Die Site wird gleich aussehen, wenn auch angepasst, und sie wird die gleiche Navigation, das gleiche Erscheinungsbild und die gleiche Erfahrung bieten. Kleine Unternehmen mit begrenzten Budgets verfügen häufig nicht über die Ressourcen, um eine gleichbleibende Qualität über mehrere Websiteversionen und Apps hinweg aufrechtzuerhalten.

Reaktionsfähigkeit bedeutet, dass sie nicht müssen.

So wie Benutzern keine fragmentierte Erfahrung angeboten werden sollte, ist es für den Suchverkehr besser, wenn es einen kanonischen Online-Standort für ein Unternehmen gibt. Laut Google Zu den Vorteilen des reaktionsschnellen Designs gehören::

  • Halten Sie Ihren Desktop- und mobilen Inhalt auf einer einzigen URL, damit Ihre Nutzer leichter mit den Google-Algorithmen interagieren, diese freigeben und mit ihnen verknüpfen können, um Ihren Inhalten die Indizierungseigenschaften zuzuweisen.

  • Google kann Ihre Inhalte effizienter erkennen, da wir keine Seite mit den verschiedenen Googlebot-Nutzeragenten crawlen müssen, um den gesamten Inhalt abzurufen und zu indizieren.

Google kann feststellen, ob Nutzer gute Erfahrungen mit Ihrer Website gemacht haben. Wenn Sie keine mobilfreundliche Website anbieten, steigen die Absprungraten für mobile Benutzer sprunghaft an. Die meisten von ihnen werden zur Suchmaschine zurückkehren. Google weiß, wann ein Nutzer nach dem Klicken auf ein Ergebnis sofort zu den SERPs zurückkehrt, und verwendet Absprungraten als Ranking-Signal.

Schließlich ist die Reaktionsfähigkeit für WordPress-Benutzer die einfachste und kostengünstigste Methode, um mobilen Benutzern eine gute Erfahrung zu bieten. Viele der besten Premium-Themes sind reaktionsschnell gestaltet und die Kosten für die Anpassung eines vorhandenen Themes an die Reaktionsfähigkeit können erheblich sein less als die Kosten für die Entwicklung einer nativen App.

Angesichts dieser Vorteile ist Responsive Design für kleine und mittlere Unternehmen, die WordPress-Themes verwenden, bei weitem der beste Weg in einer Welt, in der die mobile Webnutzung nur noch zunehmen wird.


Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...