Springe zum Hauptinhalt

6-Tipps zur Optimierung des mobilen Designs Ihres Blogs

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Der Datenverbrauch im Mobilfunkverkehr stieg um 74% in 2015Mit über einer Milliarde verkauften Geräten im selben Zeitraum ändert sich der Trend immer noch. Dies allein sollte ausreichen, um die Bedeutung der Optimierung Ihrer Designs für den mobilen Verkehr hervorzuheben.

Einige WordPress-Themes sind besser für kleine Auflösungen optimiert, aber das bedeutet nicht, dass Sie absolut kompatibel sind. Tatsächlich müssen eine Reihe von Korrekturen implementiert werden, mit denen Sie Ihre Website besser für mobile Geräte optimieren können.

In diesem Tutorial werden die verschiedenen Tipps für mobile Geräte, Bildoptimierung, Layoutdesign und mehr erläutert.

Tipp 1: Fügen Sie iOS-Symbole und Begrüßungsbildschirme hinzu

ios-icons-Splash-Screen

Trotz der vielen Fortschritte von Android bleiben iOS-Geräte sehr beliebt und profitieren Sie von der Unterstützung einer aktiven Entwicklergemeinschaft. Der Punkt ist, dass viele Ihrer Besucher wahrscheinlich ein Apple-Gerät besitzen und wenn sie Ihre Website wahrscheinlich noch mehr genießen möchten, indem Sie Ihr Symbol auf ihrem Homescreen speichern.

Um sich auf diese Möglichkeit vorzubereiten, zeigen wir Ihnen, wie Sie iOS-Symbole für WordPress-Blogs hinzufügen können.

Zuerst müssen Sie die Datei finden header.php Ihres Themas (oder untergeordneten Themas), da wir dem Tag einen kleinen Code hinzufügen müssen .

Hier ist der Code, den Sie hinzufügen müssen:

 

Wie Sie sehen können, werden im Code bestimmte Symbole für iPhones, iPads und Retina-Geräte erwähnt, denen das Attribut rel mit dem Wert "call-touch-icon" vorangestellt werden muss.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Während Sie gerade dabei sind, können Sie auch einen brandneuen iOS-Begrüßungsbildschirm für Ihre Website mit dem folgenden Code entwerfen:


Hinweis: Der Begrüßungsbildschirm wird angezeigt, wenn Sie eine Anwendung starten. Es ist wie der Ladebildschirm einer Anwendung.

Tipp 2: Verwenden Sie mehrere Bildgrößen in Verbindung mit "Medienabfragen".

Mehrbildgrößen-media-Abfragen

Sie kennen natürlich schon den Begriff " Medien-Anfragen". Denken Sie an die spezifischen Entwurfsregeln, die in Ihrem CSS enthalten sind, wenn ein bestimmtes Szenario auftritt. Beim mobilen Design sind dies die verschiedenen Auflösungen, Geräteorientierungen und Browserabmessungen. Das Problem mit " Medien-Anfragen Ist das heute so, dass viele Designer und Entwickler Websites mit einem sekundären mobilen Ansatz erstellen, aber das Gegenteil sollte der Fall sein.

In diesem sekundären mobilen Ansatz kann gesichtet werden Medien-Anfragen Wenn Sie die Abmessungen gängiger Geräte (z. B. 320px, 480px, 768px) sehen, die als Richtlinien verwendet werden. Obwohl dies theoretisch als ein guter Ansatz erscheinen mag, kann man nicht behaupten, die Abmessungen aller Geräte zu verwenden, die so oft variieren, wie sie erstellt werden, um effizient zu sein.

Wenn Sie das nächste Mal an einem Design arbeiten, sollten Sie die Kompatibilität mit Mobilgeräten zu einer Priorität machen:

  • Gestalten Sie Ihre "Abfragen" arbeite also an kleinen auflösungen.
  • Vermeiden Sie die Verwendung von Pixeln, um Ihre Haltepunkte zu deklarieren. Versuchen Sie stattdessen, mit zu arbeiten "Ems" und Prozentsätze so oft wie möglich, damit Ihre Designs für den Zoom angepasst werden können.
  • Denken Sie daran, Ihre " Medien-Anfragen Damit sie sich an Retina-Geräte anpassen (Mindestauflösung: 192dpi).

Tipp # 3: Optimieren Sie Ihre Bilder

optimieren-your-Bild

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Selbst wenn Sie ein fantastisches und reaktionsschnelles Design haben, können potenzielle Besucher davonrutschen, wenn sie feststellen, dass das Laden Ihrer Website lange dauert und Bilder eine große Rolle in diesem Aspekt spielen. Benutzer möchten schöne Bilder sehen, die jedoch sehr schnell geladen werden. Daher müssen Sie Ihre Bilder optimieren.

Obwohl es wie ein Rätsel erscheint, gibt es viele Tools, mit denen Sie diese Ergebnisse erzielen können. Ganz oben auf der Liste steht EWWW Image Optimizer et WP Smush Nach der Installation werden automatisch verlustfreie Komprimierungstechniken für jedes auf Ihre WordPress-Site hochgeladene Bild angewendet. Ihre WordPress-Site kann sogar Ihre Medienbibliothek durchsuchen, um die zuvor hochgeladenen Bilder zu optimieren.

Wenn Sie Ihrer Website kein weiteres Plugin hinzufügen möchten, gibt es immer eigenständige Tools wie TinyJPG et TinyPNG, die im Wesentlichen den gleichen Job wie das EWWW-Bildoptimierungsprogramm ausführen, indem sie die Anzahl der Farben in Ihren Bildern selektiv reduzieren und Meta entfernen (unnötige Daten entfernen). Dies führt zu einer erheblich kleineren Dateigröße mit vielen fast nicht nachweisbaren Änderungen, was ein idealer Kompromiss ist.

Tipp # 4: Denken Sie über die Verwendung von SVG nach

animiertes-svg-Logo-mit-css-Thumbnail

Scalable Vector Graphics (SVG) sind ein nützliches Werkzeug, das Sie in Betracht ziehen sollten. Ungeachtet dessen, was der Name bedeuten würde, verwenden sie eine Form von XML-Markup-Sprache anstelle eines Bildformats und sind besonders nützlich für einfache Grafiken wie Logos, Symbole, Infografiken und andere Anwendungen.

« Warum SVG so nützlich?„Man kann sich vernünftigerweise wundern. Zunächst einmal sind sie erweiterbar, sodass Sie sich keine Gedanken über die Anpassung an verschiedene Fenster machen müssen. Darüber hinaus können sie auch einfach mit CSS animiert werden.

Sie sollten mit Tools wie Adobe Illustrator, Inkscape und Sketch vertraut sein, die Unterstützung für dieses Format enthalten. Probieren Sie sie also aus!

5 Tipp: Wählen Sie gute Schriftarten

Pick-rechts-tun

Beim mobilen Design geht es nicht nur um Bilder. Die Auswahl der zu verwendenden Schriftarten kann sich genauso (wenn nicht sogar mehr) auf Ihre Designs auswirken wie Grafiken, da die meisten Websites Text als primäre Methode zur Übermittlung von Informationen verwenden.

Aus Sicht eines Designers bedeutet dies, die richtigen Schriftarten auszuwählen. Dazu gehören:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Verwenden Sie keine zu dünnen oder komplizierten Schriftarten. Ihre Schriftart sollte auf Mobilgeräten gut sichtbar sein, wenn Sie nicht möchten, dass Benutzer den Zoom anpassen, um Sie besser zu lesen.
  • Vermeiden Sie Schriftarten mit zu wenig Abstand zwischen den Buchstaben, um die Lesbarkeit zu verbessern.
  • Wenn Sie das verwenden Medien-Abfrage Verwenden Sie für Ihren Text ems für Größen anstelle von Pixeln.
  • Erwägen Sie die Verwendung von serifenlosen Schriftarten, da diese bei den meisten Auflösungen besser passen.

Tipp 6: Behandeln Sie Text als Teil der Benutzeroberfläche

Text-Teil-Schnittstelle

Da es sich um Typografie handelt, sollten Sie wissen, dass nicht nur die Schriftart berücksichtigt werden muss, sondern auch die Lesbarkeit. Da wir mit einer Vielzahl von Fenstern arbeiten, möchten Sie, dass Ihr Design Text als integralen Bestandteil der Benutzererfahrung betrachtet, um die Lesbarkeit zu maximieren. Dies bedeutet:

  • Die Verwendung von " Medien-Anfragen "Um eine überschaubare Anzahl von Zeichen pro Zeile beizubehalten (Denken Sie daran, ems anstelle von Pixeln zu verwenden!). Der allgemein akzeptierte Betrag liegt irgendwo zwischen 45-75-Zeichen.
  • Denken Sie daran, vw, vh und vhmin zu verwenden (Diese Angaben beziehen sich alle auf den prozentualen Anteil der Ansichtsfenster) CSS3-Werte, um die Schriftgröße relativ zur Viewer-Größe oder in bestimmten Fenstern beizubehalten.

Zusammenfassung

Wir haben in diesem Artikel festgestellt, dass der mobile Datenverkehr immer weniger vernachlässigbar wird. Dies sollte für jeden Entwickler bei der Gestaltung von Websites Priorität haben. Sie haben also einige Tipps, die Sie in Ihrem Blog anwenden können, um sie an Ihre aktuelle Website anzupassen. " mobile-friendly".

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren