Ab 2020 gibt es weltweit 3,5 Milliarden Smartphone-Nutzer. Das sind 45% der Weltbevölkerung. Ab 2019 haben Menschen mit über 9000 verschiedenen Geräten auf das Internet zugegriffen. Jeder Benutzer erwartet, dass jede Website, auf die er zugreift, perfekt auf seinem mobilen Gerät gerendert wird. Dies bedeutet, dass Website-Entwickler Websites entwerfen müssen, die auf einer Vielzahl von Bildschirmgrößen auf der ganzen Welt angezeigt werden.
Mit anderen Worten, sie brauchen ein responsives Design.,
Aber wie jeder Designer weiß, muss die Ausführung von responsivem Design damit beginnen zu wissen, für welche Bildschirmgrößen zu entwerfen ist. Dieser Artikel untersucht diese Frage und diskutiert die besten Scream-Größen für responsive Design.
Was ist Responsive Design?
Responsive web design bezieht sich auf ein design-Strategie, die websites erstellt, die sich gut für mobile, tablet und desktop-Geräte. Websites ohne responsive Design riskieren, eine beträchtliche Anzahl von Benutzern zu entfremden-80% der Benutzer haben behauptet, Websites abzulehnen, die auf ihrem Gerät nicht gut funktionieren.,
Zusätzlich betrachtet Google die „Mobilfreundlichkeit“ als Parameter für das Ranking. Um den Google Webmaster Central Blog zu zitieren,
“ Ab April 21 (2015) werden wir unsere Nutzung von Mobilfreundlichkeit als Ranking-Signal erweitern. Diese Änderung wirkt sich auf die mobile Suche in allen Sprachen weltweit aus und hat erhebliche Auswirkungen auf unsere Suchergebnisse. Infolgedessen fällt es den Benutzern leichter, relevante, qualitativ hochwertige Suchergebnisse zu erhalten, die für ihre Geräte optimiert sind.“
Wie findet man also die idealen ansprechenden Bildschirmgrößen?,
Anmerkung: um Zu verstehen, warum responsive design ist ein integraler Bestandteil der website-Erfolg, muss man verstehen, das große und ständig wachsende Art der Fragmentierung des Geräts. Laden Sie unser E-Book zur Gerätefragmentierung herunter, um die neuesten Informationen zu diesem Phänomen zu erhalten.,
Bildquelle
Laut den weltweiten Statistiken zur Bildschirmauflösung (Nov 2018 – Nov 2019) sind die am häufigsten verwendeten Auflösungen:
Kostenloser responsiver Test auf häufig verwendeten Auflösungen
Testen Sie die Reaktionsfähigkeit Ihrer Website auf realen Geräten.
Natürlich bedeutet die Betonung der Mobilfreundlichkeit nicht, dass man Desktop-Geräte aufgibt. Wie die folgende Tabelle zeigt, machen Desktop-Geräte immer noch einen beträchtlichen Teil der Internetnutzung aus.,
Image Source
- Mobil – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
Laut Microsofts Dokumentation,
Mit einer großen Anzahl von Gerätezielen und Bildschirmgrößen im gesamten Windows 10-Ökosystem, anstatt Ihre Benutzeroberfläche für jedes Gerät zu optimieren, haben wir empfohlen, für einige Schlüsselbreitenkategorien (auch „Haltepunkte“genannt) zu entwerfen:
- Small (kleiner als 640px)
- Medium (641px bis 1007px)
- Large (1008px und größer)
Denken Sie trotz dieser Informationen daran, dass es keine Standardbildschirmgröße für Webdesign gibt., Abhängig von der Art der Website können Benutzer bestimmte Geräte verwenden, die nicht die oben genannten Bildschirmgrößen und Auflösungen bieten. Um die richtigen Bildschirmgrößen für Webdesign zu ermitteln, investieren Sie in Analytics. Finden Sie heraus, was Ihre Zielgruppe am wahrscheinlichsten verwendet. Wenn diese Geräte die oben genannte Auflösung nicht einhalten, fügen Sie sie in den Mix ein.,
1-Click Access to Responsive Checker Tool
Best Practices for Implementing Responsive Design
Es wird viel einfacher, eine Website für mehrere Bildschirmgrößen mit den folgenden Richtlinien zu entwerfen:
- Kennen Sie Ihre Haltepunkte: Im Responsive Design ist ein Haltepunkt der „Punkt“, an dem sich der Inhalt und das Design einer Website auf eine bestimmte Weise anpassen, um die bestmögliche Benutzererfahrung zu bieten. Um eine Website ansprechbar zu machen, müssen Designer einen Haltepunkt hinzufügen, wenn der Inhalt falsch ausgerichtet aussieht., Abhängig von der Anzahl der Geräte, an denen die Site ausgerichtet wird, müssen mehrere Haltepunkte festgelegt werden, um die Reaktionsfähigkeit sicherzustellen. Lesen Sie diesen Artikel über responsive Breakpoints, um mehr über sie und ihre Wirksamkeit im Detail zu erfahren.
- Fluid-Designs erstellen: Fluid-Design bezieht sich auf ein Design-Layout, das sich verschieben (erweitern und zusammenziehen) kann, um es an das Ansichtsfenster des Geräts anzupassen, auf dem es ausgeführt wird. Ein festes Designlayout verzerrt auf unerwünschte Weise jedes Ansichtsfenster, auf das sie nicht ausgerichtet sind., Arbeiten Sie an Entwurfslayouts, indem Sie sowohl % -Einheiten als auch maximale Breiten verwenden, um sicherzustellen, dass das Layout zu Ansichtsfenstern für mobile Geräte passt, ohne dass es in Ansichtsfenstern für Desktop-Geräte zu breit wird.
- Verringern Sie die Reibung: Dies bedeutet im Grunde, dass das Design auf mehreren Geräten einfach zu bedienen sein muss. Responsive Design beinhaltet nicht nur, wie eine Website aussieht, sondern auch, wie sie in Bezug auf Zugänglichkeit und Benutzerfreundlichkeit funktioniert. Konzentrieren Sie sich insbesondere auf die Reibung kleiner Bildschirme, da Webelemente mit abnehmender Bildschirmgröße weniger Platz zum Rendern haben und mit größerer Wahrscheinlichkeit Gerangel und Verzerrung auftreten.,
- Design Mobile-First: Da Reibung eher auf kleineren Bildschirmen auftritt, entwerfen Sie mit einem Mobile-First-Ansatz. Es ist schwieriger, ein Desktop-Layout für ein mobiles Ansichtsfenster einzugrenzen, während das Umgekehrte einfacher ist. Beim Entwerfen von Mobile-First enthält der Designer das, was für die optimale Benutzererfahrung unbedingt erforderlich ist.,
Hier sind ein paar möglichkeiten, um zu gehen mit mobile-erste design:
- Priorisieren wichtige menü optionen
- Entfernen sie alle visuelle ablenkungen
- Optimieren design für tapability – machen alles einfach zu tippen
- Beseitigen unnötige formen und informationen felder
- Highlight die wichtigsten CTA
- Prominent bieten suche und filter funktionen
- Mehr funktionalität, weniger Tippen: Offensichtlich ist das Tippen auf mobilen Geräten schwieriger als auf Desktop-Geräten. Daher ist es sinnvoll, die Notwendigkeit der Eingabe auf mobilen Versionen von Websites zu minimieren., Ersetzen Sie das Tippen durch bewusst genutzte Gerätefunktionen wie GPS, QR-Code-Lesen, biometrische ID und dergleichen. Erleichtern Sie Benutzern das Teilen, E-Mailen oder Anrufen relevanter Nummern, indem Sie Links platzieren, die die erforderlichen Funktionen starten. Denken Sie daran, dass das beste responsive Design die Vereinfachung und Beseitigung unbequemer mobiler Interaktionen beinhaltet.
- Test, Test, Test: Sobald ein Entwickler oder Designer die besten Bildschirmgrößen für responsive Design kennt, erledigt er die Arbeit und erstellt eine responsive Website., Um jedoch sicherzustellen, dass die Website tatsächlich so gerendert wird, wie sie auf den Geräten vorgesehen ist, für die sie erstellt wurde, muss sie genau darauf getestet werden. Eine einfache Möglichkeit ist die Verwendung eines Responsive Design Checkers. Anstatt die Website über einzelne Geräte mit unterschiedlichen Ansichtsfenstern auszuführen, geben Sie die URL in den Checker ein und sehen Sie, wie sie auf einer Vielzahl der neuesten Geräte mit unterschiedlicher, häufig verwendeter Geräteauflösung angezeigt wird. Der oben verlinkte Checker bietet eine reaktionsschnelle Überprüfung der neuesten Mobilgeräte wie iPhone X, Galaxy Note 10, iPhone 8 Plus und mehr.,
Während responsive Design schwierig auszuführen scheint, sollen die Informationen in diesem Artikel diesen Prozess für Entwickler und Designer vereinfachen. Wenn Sie das oben Beschriebene tun, wird es viel einfacher, Websites zu erstellen, die dem Publikum gefallen, unabhängig davon, mit welchem Gerät sie auf diese Website zugreifen.
Probieren Sie Responsive Checker kostenlos aus