Disclosure: „Dieser Artikel ist persönliche Meinung der Forschung auf der Grundlage meiner Erfahrung von fast 20 Jahren. Es gibt keine Werbung Dritter auf dieser Seite oder monetarisierte Links jeglicher Art. Externe Links zu Websites Dritter werden von mir moderiert. Haftungsausschluss. „Shaun Anderson, Hobo

Es gibt keine beste Bildschirmgröße zum Entwerfen. Websites sollten bei allen Bildschirmauflösungen in verschiedenen Browsern und Plattformen reaktionsschnell und schnell transformiert werden., Zugänglich. Mobil-freundlich. Design für Ihr Publikum, zuerst. Design von 360×640 bis 1920×1080.

  • Design für Desktop-Displays von 1024×768 bis 1920×1080
  • Design für mobile Displays von 360×640 bis 414×896
  • Design für Tablet-Displays von 601×962 bis 1280×800
  • Überprüfen Sie Google Analytics und optimieren Sie für die gängigsten Auflösungsgrößen Ihrer Zielgruppe
  • Entwerfen Sie nicht für eine Monitorgröße oder Bildschirmauflösung. Bildschirmgrößen und Browserfensterstatus variieren zwischen den Besuchern.
  • Design sollte reaktionsschnell und schnell., Verwenden Sie ein flüssiges oder reaktionsschnelles Layout, das sich in die Fenstergröße des aktuellen Benutzers umwandelt.
  • Monitor Google Search Console mobile-friendly and usability alerts

Es sollte immer noch gut aussehen und bei allen Größen gut funktionieren, weshalb ich *es gewohnt bin* empfehle ein gut zugängliches flüssiges Layout mit prozentualen Breiten zur Steuerung des Layouts. Jetzt ist die Empfehlung eine responsive Website-Vorlage.,

Die drei Hauptkriterien für die Optimierung eines Seitenlayouts für eine bestimmte Bildschirmgröße sind:

  • Anfängliche Sichtbarkeit der Webseite: Sind alle wichtigen Informationen über der Falte sichtbar, damit Benutzer sie sehen können, ohne zu scrollen? Dies ist ein Kompromiss zwischen der Anzahl der angezeigten Elemente und der Detailgenauigkeit für jedes Element.
  • Lesbarkeit der Webseite: Wie einfach ist es, den Text in verschiedenen Spalten zu lesen, angesichts ihrer zugewiesenen Breite?
  • Webseitenästhetik: Wie gut sieht Ihre Seite aus, wenn die Elemente die richtige Größe und Position für diese Bildschirmgröße haben?, Sind alle Elemente richtig ausgerichtet-das heißt, sind Beschriftungen unmittelbar neben den Fotos usw.?

Usability guidelines auch empfohlen berücksichtigen Sie alle drei Kriterien bei der gesamten Palette von Größen,. Überprüfen Sie das Browserfenster von 360×640 bis 1920×1080 Bildschirmauflösungen.

Ihre Seite sollte bei allen Kriterien im gesamten Auflösungsbereich eine hohe Punktzahl erzielen.

Ihre Seite sollte auch bei noch kleineren und größeren Größen funktionieren, obwohl solche Extreme weniger wichtig sind.,

Obwohl solche Benutzer sicherlich in der Lage sein sollten, auf Ihre Website zuzugreifen, ist es manchmal ein akzeptabler Kompromiss, ihnen ein weniger als großartiges Design zu geben.,

Top Ten der häufigsten Bildschirmauflösungen

Besucheranalyse von fast einer halben Million Besuchern in den ersten 6 Monaten des Jahres 2020:

Eine responsive Website-Vorlage ist eine gute Wette

ZITAT: „Responsives Webdesign: Verwendet denselben HTML-Code auf derselben URL, unabhängig vom Gerät des Benutzers (z. B. Desktop, Tablet, mobiler, nicht visueller Browser), kann die Anzeige jedoch basierend auf der Bildschirmgröße unterschiedlich darstellen. Google empfiehlt Responsive Webdesign, da es das am einfachsten zu implementierende und zu wartende Entwurfsmuster ist.,“Google Developer Guides, 2020

In der heutigen Welt verwenden viele Menschen Handheld-Geräte (Tablets und Smartphones), um im Internet zu surfen, und Responsive Website Design (RWD) hat sich als sehr wahrscheinliche Lösung für Bildschirmgrößenherausforderungen herausgestellt (es wird immer noch von Aficionados diskutiert).

Diese Methode entfernt sich von der Verwendung von Websites mit fester Breite und verwendet stattdessen Medienabfragen in CSS-Stylesheets, um eine Website zu erstellen, die in der Größe auf die verschiedenen Ansichtsfenster von Handheld-Geräten und kleineren Bildschirmen reagiert, die von Benutzern verwendet werden.,

Egal, welches Gerät eine Person zum Anzeigen Ihrer Website verwendet, Sie können ihnen die bestmögliche Erfahrung bieten.

Inhaltsverzeichnis

Google bevorzugt mobile freundliche Websites

Google diktiert die Ebbe und Flut des Online-Handels und sie haben gerade diktiert, dass Sie für eine zufriedenstellende Benutzererfahrung auf mehreren Geräten entwerfen müssen, wenn Sie erwarten möchten, für wettbewerbsfähige Keywords in Google einen hohen Rang einzunehmen.

ZITAT: „Google verwendet zwei verschiedene Crawler zum Crawlen von Websites: einen mobilen Crawler und einen Desktop-Crawler., Jeder Crawler-Typ simuliert einen Benutzer, der Ihre Seite mit einem Gerät dieses Typs besucht. Google verwendet einen Crawler-Typ (mobil oder Desktop) als primären Crawler für Ihre Website. Alle Seiten auf Ihrer Website, die von Google gecrawlt werden, werden mit dem primären Crawler gecrawlt. Der primäre Crawler für alle neuen Websites ist der Mobile Crawler. Darüber hinaus zeichnet Google einige Seiten auf Ihrer Website mit dem anderen Crawler-Typ (mobil oder Desktop) neu. Dies wird als sekundäres Crawlen bezeichnet und erfolgt, um zu sehen, wie gut Ihre Site mit dem anderen Gerätetyp funktioniert.,“Google Webmaster Guidelines, 2020

Seit dem 21.

Wenn Sie Websites für kleine Unternehmen erstellen – Sie wissen, dass sie eine Website wünschen, die in organischen Google – Auflistungen eine gute Leistung erbringt -, wissen Sie, dass sie an Suchmaschinenoptimierung interessiert sind:

ZITAT: „Ich habe 20 Jahre Erfahrung im professionellen SEO. Dieses SEO-Tutorial ist meine Sammlung von Tipps und SEO-Best Practices, mit denen ich Websites in Google einstufen kann.,“Shaun Anderson, Hobo 2020

SEO basiert jetzt teilweise auf guter Website UX, wie Google es quantifiziert, zumindest für mobile Benutzer.

ZITAT: „Bei mobilen Suchanfragen, die jetzt die Desktop-Suche übersteigen, ist es wichtig, dass Ihre Website mobilfreundlich ist. Googlebot verwendet jetzt einen mobilen Crawler als Standard-Crawler für Websites.“Google Webmaster Guidelines, 2020

Im Moment bedeutet das im Wesentlichen responsives Website – Design und mobilfreundlich, insbesondere wenn Google“unseren Index mobil macht-zuerst“.,

Statistiken zur Desktop – Bildschirmauflösung weltweit Mai 2019 – Mai 2020

Als Referenz finden Sie hier eine Liste der aktuellen Top – Bildschirmauflösungen weltweit, die kürzlich (2020) aufgezeichnet wurden:

Weltweit die häufigsten Desktop – Bildschirmauflösung Größen

  • 1366×768 – 23.49%
  • 1920×1080 – 19.91%
  • 1536×864 – 8.65%
  • 1440×900 – 7.38%
  • 1280×720-4.89%
  • 1600×900-4.01%
  • 1280×800-3.,33%

Statistiken zur mobilen Bildschirmauflösung Weltweit Mai 2019 – Mai 2020

Weltweit die gängigsten Größen für mobile Bildschirmauflösung

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

Tablet – Bildschirmauflösung Statistiken weltweit Mai 2019 – Mai 2020

Weltweit die gängigsten Tablet – Bildschirmauflösung Größen

  • 768×1024 – 51.98%
  • 1280×800-7.11%
  • 800×1280-5.,34%
  • 601×962 – 4.47%
  • 600×1024 – 2.85%
  • 1024×1366 – 1.96%

Statistiken zur Desktop – Bildschirmauflösung in den USA Mai 2019 – Mai 2020

Top – Bildschirmauflösungen in den USA (2020)

Die häufigste Größe der Desktop – Bildschirmauflösung in den Vereinigten Staaten Staaten von Amerika

  • 1920×1080 – 19.15%
  • 1366×768 – 14.91%
  • 1440×900 – 9.59%
  • 1536×864 – 7.7%
  • 1280×720-4.89%
  • 1600×900-4.28%
  • 1280×800-3.,92%

Statistiken zur mobilen Bildschirmauflösung in den USA Mai 2019 – Mai 2020

Die häufigste Größe der mobilen Bildschirmauflösung in den Vereinigten Staaten von Amerika

  • 414×816 – 17.89%
  • 375×667 – 14.2%
  • 375×812 – 11.97%
  • 360×640 – 8.55%
  • 414×736 – 8.54%
  • 412×846 – 4.7%
  • 360×740 – 4.39%

Statistiken zur Bildschirmauflösung von Tablets in den USA Mai 2019 – Mai 2020

Die häufigste Bildschirmauflösung von Tablets in den Vereinigten Staaten von Amerika

  • 768×1024-54.,68%
  • 800×1280 – 5.75%
  • 1280×800 – 5.73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

Desktop – Bildschirmauflösung Statistiken in Großbritannien Mai 2019 – Mai 2020

Top – Bildschirmauflösungen in Großbritannien (2020)

Die gängigste Bildschirmauflösung für Desktops im Vereinigten Königreich

  • 1920×1080 – 20.62%
  • 1366×768 – 17.32%
  • 1440×900 – 11.65%
  • 1536×864 – 8.38%
  • 1280×720-5.2%
  • 1280×800-4.,73%

Statistiken zur mobilen Bildschirmauflösung in Großbritannien Mai 2019 – Mai 2020

Die häufigste Größe der mobilen Bildschirmauflösung im Vereinigten Königreich

  • 375×667 – 16.66%
  • 414×816 – 14.11%
  • 360×640 – 9.95%
  • 375×812 – 8.55%
  • 360×740 – 5.67%
  • 360×780 – 5.39%
  • 414×736 – 4.75%

Tablet – Bildschirmauflösung Statistiken in Großbritannien Mai 2019 – Mai 2020

Die häufigsten Tablet-Bildschirmauflösung Größen im Vereinigten Königreich

  • 768×1024-58.,31%
  • 1280×800 – 6.92%
  • 800×1280 – 6.02%
  • 601×962 – 3.68%
  • 600×1024 – 3.26%
  • 1024×1366 – 1.71%

Desktop vs. Mobile vs. Tablet-Marktanteil Weltweit

Desktop vs. Mobile vs. Tablet-Marktanteil Weltweit

  1. Mobile – 50.48%
  2. Desktop – 46.51%
  3. Tablet – 3.0%

*Note – Statistik oben sind, die von einem (wenn auch glaubwürdige Quelle, so könnte verzerrt werden, wie wir es uns vielleicht noch nicht wissen. Graphen geliefert von http://statcounter.com/.,

Wie Kann Ich Eine Site Entwerfen, Die In Jedem Browser Gleich Aussieht & Auflösung?

You can ‚ t.

Es ist unmöglich, eine Website so zu gestalten, dass sie in jedem Browser, jeder Plattform und jeder Bildschirmauflösung gleich aussieht.

Sie könnten sich für ein flüssiges Layout ohne Tabellen für Ihr Design entscheiden, mit % Breiten, die sich erweitern und zusammenziehen, um einer Besucher-Browser-Einstellung zu entsprechen, ODER Sie könnten in Betracht ziehen, responsive Design-Lösungen zu suchen, die das Gleiche erreichen.,

Google bevorzugt responsive Designs, was eine gute Nachricht für diejenigen ist, die es übernommen haben:

ZITAT: „Websites, die responsive Webdesign verwenden und dynamisches Serving korrekt implementieren (einschließlich aller Desktop-Inhalte und Markups), müssen im Allgemeinen nichts tun.“Google NOV 2017

MOBILE IST AUF dem VORMARSCH – also, wenn eine neue Website zu entwickeln – Sie müssen darüber nachdenken, wie mobil freundlich Ihre Website wirklich von Anfang an ist.

Ich möchte die Dinge einfach halten, wenn ich tatsächlich Dinge codiere.,

Sie werden nicht – kann-bitte alle-und die Frage, welche Website-Größe am besten ist, ist immer noch ein heißes Thema für die Debatte von Designern mit mehr Usability und UX-Know-how als ich.

Was ich aus Erfahrung weiß, ist, dass es für Sie von entscheidender Bedeutung ist, IHRE Zielgruppe und die Geräte, die sie verwenden, zu identifizieren und Ihre Website (insgesamt) für diese Zielgruppe zu erstellen.

Und diese Zielgruppe umfasst GOOGLEBOT.

Leitet Ihre mobile Site zu einer anderen URL um & Version Ihrer Site?

Nun, das ist nicht ideal. Es war noch nie, in der Tat.,

Weit zurück in den Tag – einige Leute verwendeten Textversionen einer Website, um Inhalte für Benutzer/Browser zu erstellen, die keine Elemente ihrer Websites unterstützten – in einem (normalerweise vergeblichen) Versuch, ihren Inhalt zugänglicher zu machen.

Das W3C hat es sogar empfohlen, denke ich, wenn alles andere fehlgeschlagen ist:

Eine Nur-Text-Seite mit gleichwertigen Informationen oder Funktionen muss bereitgestellt werden, damit eine Website den Bestimmungen dieses Teils entspricht, wenn die Einhaltung nicht auf andere Weise erreicht werden kann., Der Inhalt der Nur-Text-Seiten wird aktualisiert, wenn sich die primäre Seite ändert. ABSCHNITT 508

Es war IMMER ideal, einem Besucher eine URL für Zugänglichkeitszwecke bereitzustellen, und es gibt keinen Unterschied bei der Bereitstellung von mobilen oder Smartphone-Inhalten, wenn Sie darüber nachdenken, eine mobile Version Ihrer Website zu erstellen. Dies kann natürlich NOCH WICHTIGER sein, wenn Google zu einem MOBILEN ERSTEN INDEX wechselt.,

Google kann sehr gut bewerten Sie in erster Linie auf Ihrem mobilen Erlebnis in naher Zukunft-so müssen wir alle wirklich bewusst sein, die großen Veränderungen, die wir sehr bald in Googles SERPs sehen könnten.

Wenn Google der „Besucher“ ist, ist es aufgrund kanonischer URL – Herausforderungen für Suchmaschinen normalerweise noch wichtiger, nur eine URL bereitzustellen-und dies war vor einiger Zeit vor der Implementierung des kanonischen Link-Elements der Fall.

Die ideale Situation ist also, jederzeit eine URL zu liefern.,

Wenn Sie“ Smartphone “ -Inhalte haben (die wir als normale Webinhalte sehen, da es sich im Allgemeinen um eine normale HTML-Seite handelt, die nur im Layout für kleinere Displays optimiert wurde), können Sie mit rel=canonical auf Ihre Desktop-Version verweisen. Dies hilft uns, uns auf die Desktop-Version für die Websuche zu konzentrieren. Wenn Benutzer diese Desktop-Version mit einem Smartphone besuchen, können Sie sie auf die mobile Version umleiten. Dies funktioniert unabhängig von der URL-Struktur, sodass Sie keine Subdomains / Unterverzeichnisse für Smartphone-Mobile-Sites verwenden müssen., Noch besser ist es jedoch, die gleichen URLs zu verwenden und die entsprechende Version des Inhalts ohne Umleitung anzuzeigen John Mueller, Google

Das Ignorieren der Empfehlungen von Google ist oft kein kluger Schachzug

ZITAT: Um es noch einmal zusammenzufassen, betrachten derzeit unsere Crawling -, Indexierungs-und Ranking-Systeme normalerweise die Desktop-Version des Inhalts einer Seite, die Probleme für mobile Sucher verursachen können, wenn diese Version sich stark von der mobilen Version unterscheidet., Mobile-First-Indizierung bedeutet, dass wir die mobile Version des Inhalts für die Indizierung und das Ranking verwenden, um unseren – hauptsächlich mobilen – Benutzern besser dabei zu helfen, das zu finden, wonach sie suchen. Webmaster werden deutlich erhöhte Crawling durch Smartphone Googlebot sehen, und die Schnipsel in den Ergebnissen, sowie der Inhalt auf den Google Cache-Seiten, wird von der mobilen Version der Seiten sein., Google Nov 2017

Google bietet die folgenden Tipps, um zu überprüfen, ob Ihre Website für den mobile First Index vorbereitet ist, aber im Wesentlichen, wenn Sie eine responsive Webdesign-Vorlage für Ihre Website verwenden, sollten Sie minimale Probleme mit dieser Änderung haben:

  • Stellen Sie sicher, dass die mobile Version der Website auch den wichtigen, qualitativ hochwertigen Inhalt hat. Dazu gehören Text, Bilder (mit Alt-Attributen) und Videos – in den üblichen crawlbaren und indexierbaren Formaten.,

  • Strukturierte Daten sind wichtig für die Indizierung und Suche Funktionen, die Benutzer lieben: es sollte sowohl auf der mobilen und Desktop-Version der Website sein. Stellen Sie sicher, dass URLs innerhalb der strukturierten Daten auf den mobilen Seiten auf die mobile Version aktualisiert werden.

  • die Metadaten sollten auf beiden Versionen der Website. Es enthält Hinweise zum Inhalt einer Seite zum Indizieren und Bereitstellen., Stellen Sie beispielsweise sicher, dass Titel und Metabeschreibungen für beide Versionen aller Seiten auf der Site gleichwertig sind.

  • Keine änderungen sind erforderlich für die Verlinkungen mit separaten mobilen URLs (M.-dot Seiten). Behalten Sie für Websites, die separate mobile URLs verwenden, den vorhandenen Link rel=canonical und link rel=alternate Elemente zwischen diesen Versionen bei.

  • Überprüfen Sie hreflang-Links auf separaten mobilen URLs., Wenn Sie link rel=hreflang-Elemente für die Internationalisierung verwenden, verknüpfen Sie zwischen mobilen und Desktop-URLs separat. Der hreflang Ihrer mobilen URLs sollte auf die anderen Sprach – /Regionsversionen anderer mobiler URLs verweisen und den Desktop auf ähnliche Weise mit anderen Desktop-URLs verknüpfen, indem dort hreflang-Linkelemente verwendet werden.

  • Stellen Sie sicher, dass die Server, auf denen die Site gehostet wird, über genügend Kapazität verfügen, um potenziell erhöhte Crawleraten zu verarbeiten., Dies wirkt sich nicht auf Websites aus, die responsive Webdesign und Dynamic Serving verwenden, sondern nur auf Websites, auf denen sich die mobile Version auf einem separaten Host befindet, z m.example.com.

Benutzer erwarten, eine Seite nach unten zu scrollen

Wie das erste Kriterium impliziert, ist das Scrollen immer eine wichtige Überlegung. Benutzer scrollten im Allgemeinen nicht gerne, wenn sie es nicht brauchen-obwohl sich das im Laufe der Jahre geändert hat.

Wenn Sie also entwerfen, sollten Sie überlegen, wie viel Benutzer sehen können, wenn sie nur einen oder zwei volle Bildschirme scrollen., Mehr als fünf Bildschirme lang könnte ein Hinweis auf Sie sein, dass es zu viel Kopie auf der Seite sein könnte. Dies wird natürlich mit der Ansicht ausgeglichen, dass einige Artikel ausführliche Informationen sein sollen und Benutzer erwarten würden, etwas länger zu warten, um einige Seiteninhalte und Inhaltstypen anzuzeigen.

Sowohl das Scrollen als auch die anfängliche Sichtbarkeit hängen offensichtlich von der Bildschirmgröße ab: Größere Bildschirme zeigen mehr Inhalt über der Falte und erfordern weniger Scrollen.

Führt Eine Änderung An Einer Responsiven Mobilen Website Zu Viel Mehr Traffic Von Google?

Nicht unbedingt, aber vielleicht.,

So viele Dinge, die mit Google Optimierung zu tun haben – eine mobile-freundliche Website ist mehr oder weniger, um sicherzustellen, dass Sie den Verkehr halten Sie bereits bekommen, nicht unbedingt geben Sie mehr freien Verkehr von Google.

Wenn Sie nicht bereits viel Traffic von mobilen Besuchern erhalten – ich bin mir nicht sicher, ob dieses Update von Google (zumindest in Analytics) zu Beginn spürbare Auswirkungen auf Ihr Traffic-Level haben wird – aber im Laufe der Zeit – es wird wahrscheinlich eine äußerst wichtige Herausforderung sein, zu navigieren.,

Die Qualitätsgrenze wird – wieder – von Google und seinen Nutzern angehoben – und wenn Sie in immer wettbewerbsfähigeren Bio-SERPs konkurrieren möchten, ist dies eine weitere Hürde für kleine Unternehmen.

Auf lange Sicht-diese mobile Konvertierung kann nur eine gute Sache für Ihre Benutzer sein – aber auf kurze Sicht – wird es interessant sein zu sehen, welche Auswirkungen es auf kleine Unternehmen Conversion – Raten hat-als Conversion-Raten über Mobile sind oft weniger als auf dem Desktop.,

Google hat gesagt, dass dieser mobilfreundliche Algorithmus einen größeren Einfluss auf SERPs haben wird als sowohl Google Penguin-als auch Google Panda-Algorithmen – und wir werden im Laufe der Zeit mehr herausfinden.

So überprüfen Sie wichtige mobile Usability-Probleme auf Ihrer Website

Google Search Console

Sie sollten in der Lage sein, mobile Fehler in der Google Search Console (auch bekannt als Google Webmaster Tools) zu verfolgen und Fehler im Laufe der Zeit verschwinden zu sehen, wenn Ihre Website richtig konfiguriert ist.,“>

Teil 1 – Mobile Insights, Mobile-Friendly Test und Mobile-Usability

Teil 2 – Viewports, zoom und Plugins

Teil 3 – Tap targets, margins und font sizes

Teil 4 – Umleitungen

Webentwickler sollten meinen anderen letzten Beitrag jetzt nützlich finden, da die Site-Geschwindigkeit ein Ranking-Faktor in Google ist:

ZITAT: „Die mobile Version einer Website sollte idealerweise in weniger als 3 Sekunden geladen werden und je schneller desto besser., Eine SEHR LANGSAME WEBSITE kann ein NEGATIVER Ranking-Faktor sein (bestätigt von Google). Es gibt keinen festgelegten Schwellenwert oder Geschwindigkeitswert, nur um Ihre Seite so schnell wie möglich zu machen.“Shaun Anderson, Hobo 2020

Haftungsausschluss

Haftungsausschluss: „Obwohl ich alle Anstrengungen unternommen habe, um sicherzustellen, dass die von mir bereitgestellten Informationen korrekt sind, handelt es sich nicht um Ratschläge.; Ich kann keine Verantwortung oder Haftung für etwaige Fehler oder Auslassungen. Der Autor bürgt nicht für Websites Dritter oder Dienste Dritter. Besuchen Sie Websites Dritter auf eigenes Risiko., Ich arbeite nicht direkt mit Google oder anderen Dritten zusammen. Diese Website verwendet Cookies nur für Analysen und grundlegende Website-Funktionen. Dieser Artikel stellt keine Rechtsberatung dar. Der Autor übernimmt keine Haftung für den Zugriff auf die auf dieser Website präsentierten Daten. Links zu internen Seiten fördern meine eigenen Inhalte und Dienste.“Shaun Anderson, Hobo