Wie man jede reaktionsschnelle WordPress-Site zuerst mobil macht
Veröffentlicht: 2021-09-21
Dieses Mal werden wir Sie durch die Schritte führen, wie Sie jede reaktionsschnelle WordPress-Site zuerst mobil machen und warum Sie das tun müssen.
Mit dem massiven Wachstum von mobilen und anderen Handheld-Geräten sowie Spielen, Apps, Social-Media-Plattformen usw. ist responsives Webdesign zu einer Notwendigkeit geworden und kein Luxus, damit sich Ihre Website von anderen abhebt.
Vorbei sind die Zeiten, in denen Responsive oder Mobile Friendly Design als Premiumqualität wahrgenommen wurde, die ausschließlich für gut ausgebaute und teure Websites relevant ist.
Heute ist das WordPress-Vorlagen-Repository reich an solchen Themen: sowohl kostenlos als auch Premium. Alle von uns bei SKT Themes erstellten Vorlagen teilen auch diese Eigenschaften, sodass jede darauf basierende Seite auf verschiedenen Handys und Plattformen genau angezeigt werden kann.
Wenn also das responsive oder mobilfreundliche Design weit verbreitet ist und reibungslos zu funktionieren scheint, was bringt es dann, zuerst zu versuchen, eine responsive WordPress-Site mobil zu machen, und was sind die Vorteile davon?
Um Ihnen alles klar zu machen, lassen Sie uns einige Punkte nacheinander besprechen, damit Sie die Unterschiede zwischen diesen beiden Designansätzen erkennen können.
Was ist responsives Webdesign?
Kurz gesagt, responsives Webdesign ist eine moderne Technik zur Erstellung einer Website, die auf jedem Gerät gleich gut funktioniert und jeder Bildschirmauflösung entspricht. Dies bedeutet, dass Sie nicht verpflichtet sind, eine separate mobile Version Ihrer Website zu erstellen, um die Anforderungen Ihrer mobilen Benutzer unterwegs oder unterwegs zu erfüllen. Das ansprechende Design Ihrer Website passt sich automatisch an jedes Mobilgerät oder Gerät an, um das perfekte Erscheinungsbild Ihrer Website zu erzielen.
Da Millionen von Menschen auf der ganzen Welt das mobile Internet nutzen und Stunden damit verbringen, ist eine reaktionsschnelle und mobilkompatible Website ein Muss.
Was ist Mobile-First-Design?
Im Grunde genommen ist Mobile First ein Ansatz des modernen Webdesigns und impliziert, zunächst für die mobilen Bildschirme zu entwerfen und dann an die Entwicklung anderer Bildschirme, Browser und Auflösungen überzugehen.
Damit Sie den Unterschied zwischen Responsive- und Mobile-First-Designansätzen verstehen, lassen Sie uns festhalten, dass Responsive Design mit allen Arten von Komplexitäten beginnt, die für eine einwandfreie Desktop-Leistung erforderlich sind, und diese später für Mobilgeräte und kleinere Geräte auflöst.
Was das Mobile-First-Design betrifft, schlägt es vor, dass das responsive Design für Mobiltelefone und kleinere Geräte zuerst erstellt werden sollte.
Warum müssen Sie jede responsive WordPress-Site zuerst mobil machen?
Sie fragen sich, warum Sie das Projekt mit mobilen Überlegungen beginnen oder zuerst eine responsive WordPress-Site mobil machen müssen? Werfen wir einen Blick auf die Statistiken zum mobilen Verbrauch.
Wenn Sie bei weitem nicht raten, suchen Sie einfach im Internet nach den genauen Prozentsätzen und Berichten, die die unschlagbare Prävalenz der mobilen Internetnutzer gegenüber den Desktop-Nutzern belegen.
Derzeit verbringen die Menschen immer mehr Zeit damit, im Internet nach den erforderlichen Informationen von Mobilgeräten und Endgeräten zu suchen. Und natürlich wird sich diese Verlagerung von der Desktop- zur mobilen Nutzung in naher Zukunft fortsetzen.
Sie möchten also nicht die Mehrheit Ihrer Website-Besucher enttäuschen und dafür sorgen, dass sich die Minderheit der Desktop-Benutzer auf Ihrer Website wohlfühlt, richtig?
Darüber hinaus werden Sie feststellen, dass Sie sich beim Codieren weniger die Hände schmutzig machen und in der Lage sein werden, genauere und kompaktere Webdesigns zu entwerfen, die sich einfacher zusammen erweitern lassen, sobald Sie die Praxis des Mobile-First-Ansatzes anwenden.
Wenn Sie zuerst sicherstellen, dass die Pixel perfekt mit kleineren Bildschirmen übereinstimmen, und sich dann um die Desktop-Bildschirme kümmern, kann dies ein ultimativer Weg sein, um die mobile Leistung Ihrer Website und eine bessere Benutzerumgebung für Ihre mobil bewaffneten Kunden zu steigern.
Wie mache ich eine responsive WordPress-Seite zuerst mobil?
Wenn Ihre Website bereits responsiv ist und Sie sie zuerst in eine mobile umwandeln möchten, müssen Sie zwei grundlegende Schritte ausführen. Zunächst müssen Sie Standardstile für kleine Bildschirme schreiben und erstellen.
Dann müssen Sie eine Medienabfrage hinzufügen, während Sie min-width verwenden, und das Standarddesign Ihrer responsiven Vorlage darauf kopieren.
Basierend auf dem Layout Ihrer Website kann das Layout-Styling in etwa so aussehen:
Header,
.hauptsächlich,
Fusszeile {
Breite: 96 %;
maximale Breite: 1000 Pixel;
Rand: 10px automatisch;
Lösche beide;
}
.Inhalt {
Breite: 60 %;
Rand rechts: 5 %;
Schwimmer: links;
}
.Seitenleiste {
Breite: 35 %;
schweben rechts;
}
Und da Ihre Website responsiv ist, sollte dieses Design auch Medienabfragen für kleinere Bildschirme enthalten:
@media screen und ( max-width: 500px ) {
Header,
.hauptsächlich,
Fusszeile,
.Inhalt,
.Seitenleiste {
Breite: 98 %;
}
.Inhalt,
.Seitenleiste {
Float: keine;
Rand: 0 automatisch;
}
}
Wie Sie sehen, gibt es zwei Blöcke: einen für Desktop und einen für Mobilgeräte.
Um es zuerst durch mobile zu ersetzen, löschen Sie beide und beginnen Sie mit einem definierenden Layout für kleine Bildschirme:
Header,
.hauptsächlich,
Fusszeile {
Rand: 10px 1%;
}
Jetzt ist es an der Zeit, die Medienabfrage mit min-width zu erstellen.
@media screen und ( Mindestbreite: 500px ) {
Header,
.hauptsächlich,
Fusszeile {
Breite: 96 %;
maximale Breite: 1000 Pixel;
Rand: 10px automatisch;
Lösche beide;
}
.Inhalt {
Breite: 60 %;
Rand rechts: 5 %;
Schwimmer: links;
}
.Seitenleiste {
Breite: 35 %;
schweben rechts;
}
}
Wie Sie sehen können, ist es im Grunde das gleiche Design, das Sie im responsiven Stylesheet Ihrer Website hatten. Dieses Umschreiben und die Neuanordnung des Stylings haben jedoch mit einer besseren mobilen Leistung zu tun, da die kleineren Geräte es jetzt vernachlässigen, anstatt es zu durchlaufen und es dann mit den Elementen zu überfahren, die der responsiven Medienabfrage hinzugefügt wurden.
Theoretisch sind wir mit der Umstellung auf Mobile-First-Design fertig. In bestimmten Fällen benötigen Sie möglicherweise zusätzliche Anpassungen und Konfigurationen, damit die Dinge reibungslos funktionieren.
Der gesamte Prozess, Ihre WordPress-Seite zuerst mobil zu machen, wird für Sie jedoch kein unwegsamer Weg sein, selbst wenn Sie kein erfahrener Webdesigner oder -entwickler sind.