So stellen Sie zuerst ein mobiles, leistungsorientiertes WordPress-Theme zusammen [Teil 2]

So stellen Sie zuerst ein mobiles, leistungsorientiertes WordPress-Theme zusammen [Teil 2]

So stellen Sie zuerst ein mobiles, leistungsorientiertes WordPress-Theme zusammen [Teil 2]
СОДЕРЖАНИЕ
02 июня 2020

Wenn Sie nach unten gescrollt haben, um zu sehen, was hier auf Lager ist, fragen Sie sich möglicherweise, was mit den Punkten 1 bis 5 passiert ist.


Ah, richtig, um die Antwort zu finden, sollten Sie sich den ersten Teil dieser Miniserie ansehen.

Kurz gesagt, wir möchten Ihnen hier einen Leitfaden geben Wie erstelle ich ein leistungsstarkes mobiles Thema für WordPress?. Es mag zunächst nicht so scheinen, aber die Herausforderung ist tatsächlich größer als die meisten Leute denken.

Die allgemeine Überzeugung ist schließlich, dass Sie das Thema nur reaktionsschnell machen müssen, und voilà, es ist für Mobilgeräte optimiert, oder? Nicht ganz. Kommen wir also ohne weiteres gleich zum Thema zurück.

Teil 1 finden Sie hier: So stellen Sie zuerst ein leistungsorientiertes WordPress-Theme für Mobilgeräte zusammen [Teil 1]

6. Design für alle mobilen Browser

Es ist wirklich überraschend, wie unterschiedlich sich ein HTML-Code je nach Webbrowser verhalten kann. Dies gilt sowohl für mobile als auch für Desktop-Computer. Wahrscheinlich mehr für Mobilgeräte, da wir Hunderte verschiedener Geräte und Bildschirmspezifikationen haben, mit denen wir uns befassen müssen.

Denken Sie daher bei der Arbeit an Ihrem Thema an Folgendes:

  • Testen Sie Ihre Arbeit in allen wichtigen Browsern, während Sie fortfahren. Wenn Sie dies frühzeitig tun, wird die Fehlerbehebung erheblich vereinfacht, anstatt Ihre Browsertests zu starten, wenn Sie bereits das gesamte Thema fertig haben,
  • Nehmen Sie so viele Geräte wie möglich in die Hand und sehen Sie, wie sich das Thema auf ihnen verhält (probieren Sie nach Möglichkeit verschiedene Bildschirmgrößen, Auflösungen und Verhältnisse aus)..

7. UX ist wichtig

Auf Mobilgeräten interagieren Menschen ganz anders mit Websites als auf dem Desktop.

Das klingt einfach, aber ich möchte Ihnen nur ein einfaches Beispiel geben. Wenn jemand auf seinem Desktop nach einer Pizzeria sucht, interessiert er sich wahrscheinlich für eine Reihe von Details zu dem Restaurant, das er gerade besucht. Zum Beispiel Dinge wie das Menü, die Galerie, Kontaktdaten und so weiter.

Wenn sie jedoch dieselbe Website auf Mobilgeräten besuchen, interessiert sie wahrscheinlich nur eines – wie sie an den Ort gelangen und welche Nummer sie anrufen müssen, um eine Reservierung vorzunehmen.

Alles läuft darauf hinaus, dass das Design beim Erstellen eines Themas für Mobilgeräte es dem Websitebesitzer ermöglichen sollte, sich zusätzlich auf bestimmte Elemente zu konzentrieren, die für mobile Besucher von entscheidender Bedeutung sein können.

Der einfachste Weg, dies zu tun, sind gut gestaltete Widget-Bereiche, die auf der Startseite angezeigt werden und im oberen Teil des sichtbaren Bereichs des Bildschirms verbleiben (auch bekannt als über der Falte)..

Auf dem Handy haben die Benutzer nur sehr wenig Zeit, um nach den benötigten Informationen zu suchen. Aus diesem Grund sollte ein gutes mobiles Design diese Informationen effektiv zugänglich machen.

8. Weniger ist mehr

Je weniger ist mehr Konzept kann leicht auf die meisten Szenarien in der Themenentwicklung angewendet werden, und wenn es um mobile Themen geht, bedeutet dies den Unterschied zwischen einem großartigen Thema und einem mittelmäßigen Thema.

Folgendes können Sie tun, um mit weniger mehr zu erreichen:

  • Lassen Sie weniger Platz für Branding-Elemente. Es ist offensichtlich, dass Platz für das Logo der Website wichtig ist. Es ist jedoch immer noch nicht so wichtig wie der eigentliche Inhalt. Achten Sie daher darauf, dass das Logo nicht den größten Teil des Bereichs über der Falte einnimmt.
  • Führen Sie zugängliche Menüs ein. Menüs waren auf Mobilgeräten schon immer ein Problem. Einerseits benötigen Websites Menüs. Auf der anderen Seite kann sogar ein kurzes Menü (mit nur vier Elementen oder so) auf den meisten Mobilgeräten problemlos zwei Textzeilen verbrauchen, wodurch der Inhalt weiter nach unten verschoben wird. Folgendes können Sie tun, um dieses Problem zu lösen: (1) Zeigen Sie das Menü normal an, wenn es in eine einzelne Textzeile passt. (2) Machen Sie es zu einem Dropdown-Menü, wenn dies nicht der Fall ist.
  • Unwichtige Menüs loswerden. Ich würde das Risiko eingehen, dass das Fußzeilenmenü für den mobilen Besucher die meiste Zeit keinen Wert bringt. Auf dem Desktop dient es als eine Art Sammelmenü, in dem Besucher Links zu allen anderen Seiten finden können. Auf Mobilgeräten gibt es jedoch kaum einen Grund, warum jemand es verwenden würde. Ziehen Sie in Betracht, es vollständig zu entfernen, wenn Ihr Thema auf Mobilgeräten angezeigt wird.
  • Seien Sie vorsichtig mit zusätzlichen Website-Funktionen. Es gibt unzählige Möglichkeiten, benutzerdefinierte Funktionen in ein neues WordPress-Theme einzuführen. Sie können Dinge wie Bildschieberegler, Social Media-Integration, benutzerdefinierte Galerien und viele andere implementieren. Aber solltest du? Obwohl diese Funktionsideen alle großartig sind, können sie für mobile Benutzer einige Probleme verursachen. Wenn Sie sicherstellen möchten, dass Ihr Thema auf den meisten Plattformen ordnungsgemäß funktioniert, verwenden Sie das native Design wp_is_mobile () Funktion. Auf diese Weise können Sie zwischen mobilen und Desktop-Besuchern unterscheiden, sodass Sie die Benutzeroberfläche für erstere vereinfachen können, um Probleme zu vermeiden.

9. Laden Sie nur die erforderlichen Dateien

Heutzutage können Benutzer von einer Vielzahl mobiler Geräte aus auf das Internet zugreifen. Daher sind einige dieser Geräte unweigerlich sehr veraltet und können moderne Webfunktionen nicht unterstützen. Aus diesem Grund sollten Sie immer überprüfen, welche Bibliothek oder welches Modul zum Ausführen einer bestimmten Funktionalität benötigt wird.

Eine der besten Möglichkeiten, dies zu tun, ist eine Lösung wie Modernizr. Kurz gesagt, es handelt sich um eine JavaScript-Bibliothek, die HTML5- und CSS3-Funktionen im Browser des Benutzers erkennt. Sie können bedingten Code schreiben, der darauf basiert, ob eine bestimmte Funktion standardmäßig im Browser enthalten ist oder nicht. Bei Bedarf können die erforderlichen Bibliotheken importiert werden.

modernizr

Aber Modernizr wird nicht für alles die Lösung sein. Hier sind einige andere Richtlinien, die Sie beachten sollten:

  • Denken Sie in der Regel daran, keine Bibliotheken zu importieren, wenn diese für die Funktionalität des Themas nicht unbedingt erforderlich sind. Je mehr Bibliotheken und externe Skripte vorhanden sind, desto länger dauert das Laden der endgültigen Site (insbesondere auf Mobilgeräten)..
  • Versuchen Sie immer, JavaScript-Dateien am Ende der HTML-Struktur und nicht am Anfang zu laden.
  • Versuchen zu Minimieren Sie die Anzahl der DOM-Elemente Ihre HTML-Struktur verwendet.
  • Laden Sie CSS-Dateien und JavaScript für jede Seite einzeln. Wenn Sie beispielsweise eine CSS-Datei haben, die nur auf einer bestimmten Seite erforderlich ist, verwenden Sie die Funktion is_page () in einer bedingten Anweisung und stellen Sie den Stil nur auf dieser Seite in die Warteschlange.

10. Führen Sie Geschwindigkeitstests auf einem Testserver durch

Ein lokaler Testserver ist zu Beginn der Entwicklung ausreichend, aber Sie müssen schnell ein erweitertes Test-Setup einführen.

Tatsache ist, dass Sie nie genau wissen werden, wie optimiert Ihr Thema ist, bis Sie es in einer Handvoll Testumgebungen installieren und sehen, wie es im wirklichen Leben funktioniert.

Während Sie die Kosten weiterhin niedrig halten, können Sie dies tun, indem Sie Ihr Thema auf einigen billigen Shared Hosting-Konten installieren (da die meisten Endbenutzer diese wahrscheinlich sowieso verwenden werden). Anschließend können Sie verschiedene Tests mit den folgenden Tools ausführen:

  • PageSpeed ​​Insights. Ein von Google entwickeltes Tool. Sie erhalten gute Daten zur Leistung Ihres Mobilgeräts und Ihres Desktops sowie einige Tipps, wie Sie die Dinge verbessern können.
  • Geschwindigkeitstest der Pingdom-Website. Mit diesem Tool erhalten Sie eine vollständige Übersicht darüber, wie lange es dauert, jedes einzelne Skript / jede einzelne Datei zu laden, die Ihre Site benötigt.
  • Ghostlab. Sehr praktisches Tool zum synchronisierten Testen von Browsern für Web und Mobile gleichzeitig.
  • Mobile Leistungstests von Mobitest. Ermöglicht das Testen Ihrer Website auf tatsächlichen Mobilgeräten und nicht nur in einer allgemeinen, emulierten mobilen Umgebung.
  • BrowserStack. Ermöglicht den sofortigen Zugriff auf jede Version aller gängigen mobilen und Desktop-Browser. Mit diesem Tool müssen Sie sich nicht fragen, wie Ihr Thema in einem veralteten Browser aussehen wird. Sie können mit nur wenigen Klicks einen Screenshot erstellen.

Seitengeschwindigkeit

Dies fasst unsere 10-Schritte-Anleitung zum Erstellen eines leistungsorientierten WordPress-Themas für Mobilgeräte zusammen. Ich hoffe, Sie bekommen ein paar coole Ideen und können Ihr nächstes Thema in ein echtes Performance-Monster verwandeln!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector