Haben Sie sich gefragt: "Was ist Responsive Webdesign?" Responsives Webdesign ist ein Ansatz, bei dem ein Designer eine Webseite erstellt, die auf den Gerätetyp, auf dem sie gerade gesehen wird, "reagiert" oder sich in der Größe ändert. Das kann ein übergroßer Desktop-Computer-Monitor, ein Laptop oder Geräte mit kleinen Bildschirmen wie Smartphones und Tablets sein.
Responsive Webdesign ist zu einem unverzichtbaren Werkzeug für jeden mit einer digitalen Präsenz geworden. Mit dem Wachstum von Smartphones, Tablets und anderen mobilen Computergeräten nutzen immer mehr Menschen kleinere Bildschirme, um Webseiten zu betrachten.
Auf diesen Websites muss auch der von Google im April 2018 angekündigte Mobile-First-Index berücksichtigt werden. Da immer mehr kleine Unternehmen ihre mobile Präsenz erhöhen, müssen ihre Website, E-Commerce, Google Business-Seite, Social-Media-Seiten und andere Inhalte auf allen Geräten leicht zugänglich sein.
Was ist Responsive Webdesign?
Der Zweck des Responsive Designs besteht darin, eine Website zu verwenden, die jedoch unterschiedliche Elemente aufweist, die unterschiedlich reagieren, wenn sie auf Geräten unterschiedlicher Größe angezeigt werden.
Nehmen wir eine traditionelle "feste" Website. Wenn die Website beispielsweise auf einem Desktop-Computer angezeigt wird, werden drei Spalten angezeigt. Wenn Sie jedoch dasselbe Layout auf einem kleineren Tablet anzeigen, kann es sein, dass Sie gezwungen sind, horizontal zu scrollen, was Benutzern nicht gefällt. Oder Elemente sind möglicherweise nicht sichtbar oder sind verzerrt. Der Einfluss wird auch durch die Tatsache erschwert, dass viele Tablets entweder im Hochformat betrachtet oder seitwärts gedreht werden können.
Auf einem winzigen Smartphone-Bildschirm können Websites noch schwieriger zu sehen sein. Große Bilder können das Layout "brechen". Websites können sich auf Smartphones nur langsam laden, wenn sie grafikintensiv sind.
Wenn eine Website jedoch Responsive Design verwendet, wird die Tablet-Version möglicherweise automatisch so angepasst, dass nur zwei Spalten angezeigt werden. Auf diese Weise ist der Inhalt lesbar und leicht zu navigieren. Auf einem Smartphone wird der Inhalt möglicherweise als einzelne Spalte angezeigt, möglicherweise vertikal gestapelt. Oder möglicherweise hätte der Benutzer die Möglichkeit, über andere Spalten zu wischen. Bilder werden in der Größe verändert, anstatt das Layout zu verzerren oder abgeschnitten zu werden.
Der springende Punkt ist: Beim Responsive Design passt sich die Website automatisch an das Gerät an, auf dem der Betrachter sie sieht.
Wie funktioniert Responsive Web Design?
Responsive Websites verwenden Fluidgitter. Alle Seitenelemente werden nach Proportionen und nicht nach Pixeln sortiert. Wenn Sie also drei Spalten haben, würden Sie nicht genau sagen, wie breit jede sein sollte, sondern wie breit sie im Verhältnis zu den anderen Spalten sein sollten. Die Spalte 1 sollte die halbe Seite einnehmen, die Spalte 2 sollte 30% und die Spalte 3 beispielsweise 20% belegen.
Medien wie Bilder werden ebenfalls relativ verkleinert. Auf diese Weise kann ein Bild innerhalb seiner Spalte oder seines relativen Designelements bleiben.
Verwandte Themen
Maus v. Berühren: Beim Entwurf für mobile Geräte wird auch das Thema "Maus gegen Berührung" angesprochen. Auf Desktopcomputern verfügt der Benutzer normalerweise über eine Maus zum Navigieren und Auswählen von Elementen. Auf einem Smartphone oder Tablet benutzt der Benutzer meistens Finger und berührt den Bildschirm. Was mit der Maus leicht zu wählen scheint, kann mit einem Finger an einer winzigen Stelle auf einem Bildschirm schwierig auszuwählen sein. Der Webdesigner muss "touch" berücksichtigen.
Grafik und Downloadgeschwindigkeit: Außerdem gibt es das Problem von Grafiken, Anzeigen und Download-Geschwindigkeit. Auf mobilen Geräten kann es sinnvoller sein, weniger Grafiken als für Desktop-Ansichten anzuzeigen, damit das Laden einer Website auf einem Smartphone nicht ewig dauert. Größere Anzeigengrößen müssen möglicherweise für kleinere Anzeigen ausgetauscht werden.
Apps und "mobile Versionen": In der Vergangenheit haben Sie vielleicht daran gedacht, eine App für Ihre Website zu erstellen - beispielsweise eine iPad-App oder eine Android-App. Oder Sie haben eine mobile Version speziell für BlackBerry.
Aber mit so vielen verschiedenen Geräten wird es heute schwieriger, Apps und verschiedene Versionen für jedes Gerät und jede Betriebssystemplattform zu erstellen.
Warum Kleinunternehmen auf Responsive Webdesign umstellen müssen
Mehr Menschen nutzen mobile Geräte. Eine aktuelle Pew-Studie 77% der Amerikaner besitzen jetzt Smartphones in 2018, die von nur 35% in Pew Research Center erste Smartphone Besitz Umfrage in 2011 durchgeführt wurde.
Überprüfen Sie Ihren Datenverkehr und Sie werden vielleicht schockiert sein, wie viele Besucher Ihre Website über mobile Geräte erreichen. (Wählen Sie in Ihrem Google Analytics-Konto auf der linken Seite "Zielgruppe" und dann "Mobil" aus, um zu ermitteln, welcher Anteil des Traffics von Mobilgeräten stammt. Sie können sogar einen Drilldown durchführen, um zu sehen, welche Geräte den Traffic senden.)
Responsive Designvorlagen gibt es jetzt überall zum Kauf. Wenn Sie zum Beispiel eine WordPress-Website haben, können Sie eine seriöse Vorlagengalerie wie ThemeForest besuchen und nach "responsiven WordPress-Themes" suchen. Kaufen Sie eine unter $ 50. Ihr Webentwickler kann es dann für Ihr Logo und Ihre Marke anpassen.
Anmerkung der Redaktion: Hier bei Small Business Trends arbeiten wir an einem neuen responsiven Design. Solltest du nicht?
Foto über Shutterstock
