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

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

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

Das Zusammenstellen eines WordPress-Themas ist im Kern eine recht einfache Aufgabe. WordPress bietet eine wirklich freundliche Umgebung und macht deutlich, welche PHP-Funktionen für welchen Zweck verwendet werden sollen.


Jedoch. Auch wenn es einfach ist, es ist alles andere als einfach, und vor allem, wenn Sie möchten, dass Ihr Thema für Mobilgeräte optimiert wird.

Es gibt eine Reihe einzigartiger Probleme, die Sie überwinden sollten, wenn Sie ein Qualitätsprodukt erhalten möchten, das schnell geladen wird, vorhersehbar funktioniert und (was das Wichtigste ist) benutzerfreundlich und für Benutzer verschiedener Geräte zugänglich ist und Bildschirmgrößen.

Diese zweiteilige Anleitung führt Sie in 10 Schritten durch den Prozess und listet die wichtigsten Dinge auf, die beim Erstellen eines leistungsorientierten WordPress-Themas für Mobilgeräte zu beachten sind.

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

1. Inhalt steht an erster Stelle

Auf Mobilgeräten ist wirklich nicht viel Platz, um viele Designdetails zu präsentieren oder gut aussehende Elemente zu verwenden.

Obwohl moderne Geräte Grafiken mit einer Größe von bis zu 1136 × 640 Pixel (iPhone 5s) anzeigen können, dürfen wir nicht vergessen, dass der Bildschirm nur einen Durchmesser von 4 Zoll hat. Dies ist nicht viel Immobilien, mit denen man arbeiten kann.

Dinge, die es wert sind, getan zu werden:

  • Entfernen Sie alle zusätzlichen Designelemente, die für die Präsentation von Inhalten nicht unbedingt erforderlich sind,
  • Stellen Sie sicher, dass sich der Hauptinhaltsblock so hoch wie möglich auf der Design-Leinwand befindet (aufgrund der unterschiedlichen Bildschirmgrößen mobiler Geräte können wir nicht vorhersagen, wo sich der "falten" wird genau kommen),
  • Konzentrieren Sie sich auf Typografie und machen Sie den Inhalt lesbar (erhöhen Sie die Schriftgröße, aber achten Sie darauf, dass eine einzelne Textzeile nicht zu kurz und damit unlesbar wird).,
  • guten Kontrast einführen – Text vs. Hintergrund (dies ist entscheidend für mobile Geräte, insbesondere wenn jemand versucht, die Seite zu lesen, während er an einem sonnigen Ort steht).

2. Optimieren Sie die Bilder

Die Bildoptimierung ist für Mobilgeräte noch wichtiger als für jedes andere Szenario. Die Sache ist, dass jemand, der versucht, über das Handy auf eine Site zuzugreifen, wahrscheinlich eine langsame 3G-Verbindung hat. Daher müssen Sie sicherstellen, dass das Thema es ermöglicht, dass die Bilder unabhängig von dieser Tatsache relativ schnell geladen werden.

Spezifische Dinge, die Sie tun können:

  • Erwägen Sie die Integration der Lazy-Load-Funktionalität. An sich ist das verzögerte Laden großartig (das Laden von Bildern nur, wenn der Besucher zu ihnen blättert). Das Problem ist jedoch, dass die Endbenutzer möglicherweise einige Plugins zum verzögerten Laden auf der endgültigen Site selbst installieren. Dies könnte sich auf alles auswirken, was Sie bereits in das Thema integriert haben. Wenn Sie jedoch das Risiko eingehen möchten, ist es am besten, die Funktionalität durch eine Lösung wie jQuery und seine zu ermöglichen Lazy Load Plugin. WordPress-Plugins verwenden in der Regel auch diese Bibliothek. Sie minimieren also die Wahrscheinlichkeit, dass Fehler auftreten, wenn zwei verschiedene Skripte versuchen, dasselbe Ergebnis zu erzielen. Ermöglichen Sie außerdem das Deaktivieren des verzögerten Ladens in den Einstellungen Ihres Themas.
  • Optimieren Sie die Bilder hinsichtlich Größe und Qualität. Bilder machen normalerweise den größten Teil des Bandbreitenverbrauchs für die durchschnittliche Site aus. Als Theme-Ersteller müssen Sie daher sicherstellen, dass Ihre Bilder so optimiert wie möglich sind. Sie können zwei Dinge tun, um dies zu erreichen: (1) Stellen Sie sicher, dass die Bilder nicht größer als nötig sind (siehe Nr. 3) – ein zusätzliches Pixel hier und da kann sich ziemlich schnell summieren, (2) optimieren Alle Bilder über ein Tool wie Optimole oder TinyPNG vor der Veröffentlichung des Themas für die Öffentlichkeit.
  • Verwenden Sie nach Möglichkeit Symbolschriftarten. Die alte Schule, Symbole in jedes Design aufzunehmen, bestand darin, sie einfach in Photoshop zu erstellen, alles in PNG oder GIF zu konvertieren und auszurollen. Heutzutage ist es jedoch nicht die am besten optimierte Lösung. Mit Werkzeugen wie Font Awesome, Wir können unsere Designs mit Hunderten von wunderschön gestalteten Schriftarten bereichern und gleichzeitig die Leistung sehr anständig halten.

3. Machen Sie das Design Retina-fähig (optimiert für hochauflösende Bildschirme)

Fast alle neuen Geräte sind heutzutage mit hochauflösenden Displays ausgestattet. Diese Bildschirme lassen alles sehr scharf aussehen, aber nur, wenn das betreffende Objekt für die Anzeige mit hohen DPI optimiert wurde. Andernfalls wird der Benutzer viel Pixel sehen und dies wird die Erfahrung insgesamt unattraktiv machen.

Es gibt zwei Hauptverknüpfungen, die Sie zur Optimierung mit hohen DPI-Werten verwenden können:

  • Verwenden Sie die oben genannten Bildschriften. Bildschriften werden automatisch skaliert und sehen auf jedem Gerät gut aus.
  • Erstellen Sie alternative Versionen aller anderen Bilder – doppelt so groß – und tauschen Sie sie mit CSS aus, wenn ein Gerät mit hoher DPI zum Anzeigen des Inhalts verwendet wird. Hier ist eine Anleitung wie Sie dies tun können.

Schließlich sollten Sie sich auch um die Favoriten in Ihrem Thema kümmern (und dem Benutzer wahrscheinlich erlauben, sie auch zu ändern, aber das ist eine andere Sache)..

Früher brauchten Sie nur ein 16 × 16-PNG-Bild, das Sie dann in ICO konvertieren würden, und schon waren Sie fertig. Im Moment ist es viel komplizierter. Beispielsweise versuchen die neuen Apple-Geräte, nach größeren Symbolen zu suchen und diese dann als Lesezeichen zu verwenden.

Einige der von iOS erwarteten Favicon-Größen sind: 76 × 76, 120 × 120, 152 × 152. Hier ist ein vollständige Liste auf Apple.com.

Sie können diese Symbole entweder von Hand erstellen oder ein Werkzeug wie verwenden Echter Favicon Generator. Es wird nur ein Starter-Image benötigt, das als Basis für die Generierung aller anderen Versionen verwendet wird. Darüber hinaus erhalten Sie den richtigen HTML-Code zum Einbetten der Symbole in das Thema.

4. Optimieren Sie das Tippen

Wir müssen uns daran erinnern, dass die meisten Mobilgeräte Touch-Interfaces unterstützen oder vollständig auf Touchscreens basieren. Dies bedeutet, dass wir jedes tippbare Element groß genug machen müssen, damit der Benutzer problemlos darauf zugreifen kann.

Zum Beispiel sind Textlinks nicht sehr berührungsoptimiert, da sie viel Konzentration seitens des Benutzers erfordern, um sie genau zu tippen. Es ist eine bessere Wahl für das Design, Schaltflächen für die Benutzeroberfläche des Themas zu verwenden. Tasten, die selbst relativ groß sind und auch einen großen Berührungsbereich haben.

Eine andere Sache, die Sie beachten sollten, ist, dass Benutzer den größten Teil ihres Tippens mit den Daumen ausführen. Daher ist es eine gute Idee, die Hauptleitung zu platzieren "Aufruf zum Handeln" Tasten an den leicht zugänglichen Daumenzonen. Zum Beispiel hier wie es sich auf dem iPhone abspielt.

5. Es ist nicht alles, was zählt, das Thema ansprechbar zu machen

Beenden wir den ersten Teil dieses Handbuchs mit dem häufigsten Fehler, den Menschen beim Entwerfen von Themen für Mobilgeräte machen. Der Fehler besteht darin, reaktionsschnelle Designs als das ultimative Endspiel zu betrachten.

Zugegeben, es ist ein großer Vorteil, Ihr Thema ansprechbar zu machen, insbesondere wenn es um nicht standardmäßige Geräte und Bildschirmgrößen geht, aber es ist alles andere als eine magische Lösung. Nur weil ein Design reagiert, bedeutet dies nicht, dass es auf Mobilgeräten eine gute Leistung erbringt. Beispielsweise werden dadurch keine Probleme bei der Bildoptimierung oder die Tatsache gelöst, dass es schwierig ist, Schaltflächen genau zu tippen, und so weiter.

Ja, tun Sie alles, um Ihr Thema ansprechend zu gestalten. Achten Sie jedoch gleichzeitig auf die anderen Elemente, die wir in diesem Handbuch behandeln, um ein möglichst mobiles Design zu erzielen.

Ich lade Sie ein, sich für den zweiten Teil einzuschalten, um den Rest der Liste zu erhalten (wir werden uns mit Dingen wie UX-Design, Navigation, der Verwendung von JS zur Optimierung der Ladezeiten und der Nutzung einiger weniger bekannter WordPress-Funktionen befassen. und mehr). Und in der Zwischenzeit, Was ist Ihre größte Herausforderung beim Entwerfen für Mobilgeräte??

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