Angesichts der zunehmenden Nutzung mobiler Geräte bestraft Google seit Ende April 2015 Websites, deren Seiten nicht für Mobilgeräte geeignet sind. Konsequenz für Sie SEO, müssen Sie sicherstellen, dass Ihre Website sowohl auf großen als auch auf kleinen Bildschirmen anständig angezeigt wird.
In diesem Artikel zeige ich Ihnen, wie Sie Ihre Website mithilfe der Regel auf die Seite stellen können @media von CSS3.
Es ist wichtig zu beachten, dass die Begriffe „reaktionsfähig“ und „mobilkompatibel“ trotz des Unterschieds in ihrer tatsächlichen Bedeutung häufig synonym verwendet werden. Es ist wichtig zu verstehen, was jede bedeutet, um sicherzustellen, dass Ihre Website die erforderlichen Kriterien erfüllt, um alle Bildschirmgrößen zu berücksichtigen.
Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren
Dann lassen Sie uns zurückgehen, warum wir hier sind.
Responsive and Mobile-kompatibel
Websites, die nicht sind weder ansprechbar noch-kompatibeles Mobilwerden auf allen Bildschirmen identisch angezeigt, d. h. die Version für große Bildschirme wird überall angezeigt. Auf kleineren Bildschirmen müssen Sie die Seite horizontal scrollen, um den gesamten Inhalt anzuzeigen. Sie sind auf diesen Bildschirmen schwer zu navigieren.
Entdecken Sie auch diese 8 WordPress Plugins zur Anpassung des Aussehens Ihrer Website
Eine Website ist Mobile kompatibel wenn es nur das strenge Minimum erfüllt, das auf Mobilgeräten zu sehen ist, was es nicht zu einer reaktionsfähigen Website macht. Beispielsweise kann eine Website als mobilkompatibel angesehen werden, wenn Sie nicht horizontal navigieren müssen. Dies führt dazu, dass seine Elemente klein und nicht mehr zu unterscheiden sind. Sie müssen dann zoomen, um den Inhalt zu lesen.
Auf ihrer Seite die Websites ansprechbar perfekt an unterschiedliche Bildschirmgrößen anpassen. Sie definieren ihre Elemente neu, damit sie auf den kleinsten Bildschirmen leicht gesehen und verwendet werden können. Dies ist die Art von Design, die Sie für Ihre Website wünschen.
Siehe auch unsere 10 WordPress Plugins zum Erstellen eines Buchungsformulars auf Ihrer Website
Sie kennen jetzt den Unterschied zwischen reaktionsschnellen und kompatiblen Mobilgeräten. Wir werden jetzt die Regel sehen @media von CSS3, mit dem Sie Ihre Website für Responsive aktualisieren oder ganz einfach erstellen können WordPress-Themes mit responsiven Inhalten.
Die Regel @media von CSS3
Um Ihr Thema ansprechbar zu machen, benötigen Sie die Regel @media von CSS3. Grundsätzlich können Sie die Stile definieren, die Sie für einen bestimmten Bildschirmtyp (Größe) verwenden möchten. Sie verwenden es wie eine andere CSS-Regel (mit geschweiften Klammern), mit dem einzigen Unterschied, dass es andere CSS-Regeln verschachtelt.
@media Medientyp (Ausdruck) {CSS-Test-Selektor {Eigenschaft1: Wert1; property2: value2; }}
In dieser Struktur die Elemente innerhalb der Regel @ media funktioniert nur, wenn die Art-of-Medien angegeben, um erfolgreich erkannt worden zu sein. Mit der Art des gewählten Mediums können Sie die Eigenschaften in Bezug auf Abmessungen festlegen.
Entdecken Sie Anwenden von Benutzeroberfläche und Benutzererfahrung auf WordPress
Die Regel @media erkennt für Sie den Bildschirmtyp, mit dem Ihre Website besucht wird, und wählt die Regeln aus, die für diesen Bildschirmtyp am besten geeignet sind. Alle gängigen Browser haben die Regel bereits integriert @media.
Hier ist die Liste zu Ihrer Information: Chrome , Safari, Firefox, IE, Opera et Edge.
Definieren Sie die Zielbilder
Wenn Sie a ändern möchten Wordpress-Theme bestehenden, erstellen Sie bitte eine Sicherungskopie des CSS des letzteren, um ggf. darauf zurückgreifen zu können.
Lesen Sie auch unseren Artikel über So laden Sie nach und nach Facebook- und Disqus-Kommentare
Wie wir in seiner Struktur gesehen haben, müssen Sie weiterleiten, um den Bildschirmtyp zu definieren @media die Art des Bildschirms, auf den abgezielt wird. Hier ist die Liste der verschiedenen Bildschirmtypen:
- alle : für alle Arten von Bildschirmen oder für die in angegebenen Abmessungen Ausdruck
- Bildschirm : für alle Bildschirme, ob Handy, Tablet, Laptop oder Desktop
- drucken : für Drucker, wenn Sie bestimmte Stile für die Seiten wünschen, die gedruckt werden können
- Rede : für Bildschirmleser, wenn Sie Stile für Sehbehinderte wünschen.
Es gibt auch Operatoren, die Sie vor den Bildschirmtyp stellen können. wie nicht um Stile für Bildschirme anzuzeigen, die von einem anderen Typ als dem angegebenen oder sind einzige Stile nur auf bestimmte Bildschirme anwenden. Sie können daher haben:
@media nur Bildschirm
Definieren Sie Stile für Bildschirmabmessungen
Sie können verwenden Ausdruck um weitere Details zu den Eigenschaften des Bildschirms bereitzustellen. Nach @media eingeben und gefolgt vom Ausdruck. Wenn Sie mehrere Ausdrücke verwenden, sollten alle durch getrennt werden und. Hier ist ein Beispiel für die Struktur:
@media only screen und (max-width: 640px) {selector-css-example {/ * Dein übliches CSS hier * /}}
In diesem Beispiel verwende ich max-width mit einem Wert von 640px. Hiermit legen Sie eine maximale Bildschirmbreite fest, die der Größe eines iPhones oder eines kleinen Android-Smartphones entspricht. Mit dieser Art von Struktur haben Sie die Kontrolle darüber, wie Ihre Website auf verschiedenen Geräten aussieht. Hier ist eine Liste von Eigenschaften, die sich auf Dimensionen beziehen, in denen Sie verwenden können Ausdruck :
Entdecken Sie auch unsere 8 SEO WordPress Plugins zur Optimierung der SEO Ihrer Website
- min Breiten et max-width : jeweils die minimale und maximale Breite, die für die Anzeige der in der Regel enthaltenen Stile erforderlich sind @media. Ein weiteres Pixel und weitere Stile werden nicht angezeigt.
- min Höhe et max-height : jeweils die minimale und maximale Höhe, die zum Anzeigen der in der Regel enthaltenen Stile erforderlich ist @media. Da die meisten Bildschirme so konzipiert sind, dass Seiten vertikal abgewickelt werden, gelten Eigenschaften min-height et max-height sind wenig benutzt.
Hier ist eine Liste der Bildschirmgrößen für einige Terminals:
- IPhone: 640px
- iPad: 1024px
- Tabletten: 1366px
- Android-Smartphone: 640px, 720px, 854px, 960px
- Android extra groß: 1024px, 1066px
- Windows Phone: 480
- Windows Phone groß: 768px
- jung und alt: 320px
- Ultrabook / Laptops: 1366px
- Desktops und Fernseher: 1920px
Es gibt viele andere Eigenschaften, in denen Sie verwenden können Ausdruck. Wenn Sie beispielsweise auf Desktops oder Fernsehbildschirme abzielen, auf denen Bilder mit einem Seitenverhältnis von 16: 9 angezeigt werden können, können Sie eine Struktur wie die folgende verwenden:
@media only screen und (min-width: 1920px) und (device-Seitenverhältnis: 16/9) {selector-css-example {/ * Ihr übliches CSS hier * /}}
Für umfassendere Listen und Beispiele konsultieren Sie w3schools et Mozilla Developpers.
Testen Sie die Reaktionsfähigkeit Ihrer Website
Während Sie Ihre ändern oder bauen Wordpress-Theme oder am Ende, wenn Sie Überraschungen mögen, müssen Sie das Ergebnis testen, um zu sehen, ob es endlich reagiert. Denken Sie daran, dass Google nach Websites sucht, die nicht reagieren.
Siehe auch diese 10 WordPress-Plugins zum Erstellen von Tabs in Ihrem Blog
Da nicht alle Mobilgeräte vorhanden sind, auf die Sie abzielen, gibt es (zum Glück für unsere Börsen) eine Reihe von Tools, mit denen Sie feststellen können, wie sich Ihre Website an verschiedene Bildschirme anpasst.
Direkt in den Browser Ihres Computers können Sie verwenden Fenster Resizer Chrome Browser-Erweiterung, ResponsiveResize, ResizeMe ou Firesizer. Unten sehen Sie ein Bild von BlogPasCher in der Responsive Design-Ansicht, die standardmäßig in Firefox enthalten ist.
Es gibt auch Websites, die sich dieser Aufgabe widmen:
Die Besonderheit dieser Website besteht darin, dass Sie die Bildschirmabmessungen selbst wählen können. Beachten Sie, dass diese Website Ihre Website in einem Frame lädt. Also, wenn Ihr Wordpress-Theme wurde so konzipiert, dass es nicht in einem Rahmen angezeigt wird, daher ist es durchaus möglich, dass es hier nicht angezeigt wird.
iPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Diese Website ist interessant, um Ihre Website auf den neuesten Apple-, iPad- und iPhone-Geräten zu testen. Geben Sie einfach Ihre URL ein. Beachten Sie, dass es das gleiche Frame-Problem wie responsivepx gibt.
Auf dieser Website können Sie Ihre auf kleinen Bildschirmen und auf älteren Telefonmodellen testen, die Sie auf der rechten Seite des Bildschirms auswählen. Sie können auch einige Bildschirmeigenschaften konfigurieren.
Google Mobile Test auf Optimierung
Dies ist einer der wichtigsten Tests, wenn nicht der wichtigste. Geben Sie einfach Ihre Adresse in die Leiste ein und klicken Sie auf Analysieren um den Test zu starten. Nach dem Test zeigt das Tool einen Bericht und eine Punktzahl an. Wenn der Test positiv ist, werden Sie von Google nicht bestraft.
Wenn Sie kein Entwickler sind, rate ich Ihnen eine Liste der ansprechenden WordPress-Themes zu starten.
Empfohlene Ressourcen
Entdecken Sie auch andere empfohlene Ressourcen, mit denen Sie Ihre Partner und Abonnenten besser verführen, aber auch die Sicherheit Ihrer Website verbessern können.
- Wie man benutzerdefinierte Links-Kurse auf Wordpress erstellen
- 5 WordPress-Plugins zum Hinzufügen von Kundenrezensionen zu Ihrem Blog
- So erstellen Sie ein Glücksrad für Gutscheine bei WooCommerce
- Entdecken Sie die besten Angebote und Gutscheine für Ihren Blog
Zusammenfassung
Hier ! Sie wissen alles, was Sie wissen müssen, um Ihre Website oder Ihr WordPress-Thema mithilfe der Regel ansprechbar zu machen @media von CSS3. Wenn wir ein WordPress-Thema verpasst haben, das Ihnen am Herzen liegt oder das Sie bevorzugen, hinterlassen Sie bitte einen Link im Abschnitt commentaires unten.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Wir laden Sie auch dazu ein Teilen Sie in Ihren verschiedenen sozialen Netzwerken.
...
