Responsives vs. Adaptives Webdesign - Was ist besser?

Inhaltsverzeichnis:

Video: Responsives vs. Adaptives Webdesign - Was ist besser?

Video: Responsives vs. Adaptives Webdesign - Was ist besser?
Video: Coole Websites, wenn euch langweilig ist!🌎 (Teil 5) MrLuchs #Shorts 2024, März
Responsives vs. Adaptives Webdesign - Was ist besser?
Responsives vs. Adaptives Webdesign - Was ist besser?
Anonim

Frühe Website-Entwickler mussten sich keine großen Sorgen um das Entwerfen von Websites machen, da die Benutzer sie auf Computern anzeigen würden und diese Computer eine feste Bildschirmauflösung hatten. Mit der mobilen Revolution suchen immer mehr Menschen auf ihren mobilen Geräten - Tablets oder Mobiltelefonen - nach Informationen. Daher ist es für Website-Entwickler notwendig geworden, eine Website zu erstellen, die alles vom Windows-PC bis zu mobilen Geräten abdeckt. Dieser Artikel beschreibt den Unterschied zwischen adaptives vs. responsives Webdesign Sie können entscheiden, welche für Sie und Ihre Organisation besser ist.

Es gibt zwei Methoden, um Websites für unterschiedliche Bildschirmauflösungen zu erstellen: vom PC bis zum Mobiltelefon. Die Methoden sind Adaptives Webdesign und Responsive Webdesign. In beiden Fällen besteht das Endziel darin, eine Website zu erstellen, die mit jeder Art von Bildschirmauflösung angezeigt werden kann. Das Ziel, die Informationen auf einer Reihe von Geräten zu präsentieren - von PCs über Tablets bis hin zu Mobiltelefonen.
Es gibt zwei Methoden, um Websites für unterschiedliche Bildschirmauflösungen zu erstellen: vom PC bis zum Mobiltelefon. Die Methoden sind Adaptives Webdesign und Responsive Webdesign. In beiden Fällen besteht das Endziel darin, eine Website zu erstellen, die mit jeder Art von Bildschirmauflösung angezeigt werden kann. Das Ziel, die Informationen auf einer Reihe von Geräten zu präsentieren - von PCs über Tablets bis hin zu Mobiltelefonen.

Sich anpassendes Webdesign

Responsive Web Design beinhaltet zusätzliche Codierung und verwendet so genannte "Fluid Grids". Die Zahlen werden in „Prozent“angegeben und nicht in einer genauen Anzahl von Pixeln. Dadurch wird der gleiche Website-Code ordnungsgemäß auf einem PC-Bildschirm und auf dem Bildschirm eines Mobiltelefons gerendert. Unabhängig davon, wie Sie Ihren Bildschirm vergrößern, wird dieselbe Website auf eine leicht lesbare Weise dargestellt. Bei kleineren Websites fließen Text und Bilder problemlos mit dem Bildschirmbereich zusammen und passen in diesen hinein, ohne die Website zu zerbrechen oder Teile der Website zuzuschneiden.

Ein Responsive Webdesign-Ansatz macht es erforderlich, CSS3 anstelle von CSS zu verwenden. Es verwendet auch skalierbare Bilder und Fluidraster, die etwas schwer zu codieren sind.

Adaptives Webdesign

Adaptives Webdesign konzentriert sich auch auf die Darstellung von sichtbaren Websites auf Tablets und Mobiltelefonen neben PC-Bildschirmen. Der Ansatz ist jedoch etwas anders. Beim responsive Webdesign war es die Flexibilität, die den freien Textfluss und die Größenanpassung von Bildern an die verschiedenen Bildschirme ermöglichte.

Beim adaptiven Webdesign verwenden die Entwickler zuvor festgelegte Bildschirmgrößen und entsprechenden Code. Das heißt, wenn ein Benutzer auf der Website landet, bestimmt die Website die Art des verwendeten Geräts und zeigt die Website an, die für diese bestimmte Bildschirmgröße des Geräts konzipiert wurde. Der Inhalt kann in einigen Fällen von Gerät zu Gerät unterschiedlich sein.

Beispielsweise würden die Entwickler 1280 × 800 Pixel für PCs, 8 Zoll für Tablets und 5 Zoll für Handys in Betracht ziehen. Der frühe Code des adaptiven Webdesigns enthält die Identifizierung von Bildschirmen. Wenn es sich um einen PC handelt, zeigen Sie die PC-Version der Website an. Wenn es sich um ein 8-Zoll-Tablet handelt, zeigen Sie die Tablet-Version der Website und, falls es sich bei dem Gerät um ein Mobiltelefon handelt, die mobile Version der Website. Dies wird durch die Verwendung der "IF" -Anweisung erreicht, gefolgt von unterschiedlichen Abmessungen, die genau in Pixel angegeben sind, anstatt sie in Prozent anzugeben.

Wenn neue Geräte mit unterschiedlichen Bildschirmauflösungen rüberkommen, müssen die Entwickler erneut auf das Codieren zurückgreifen, um die neueren Bildschirmauflösungen zu berücksichtigen. Daher hat das adaptive Webdesign einige Chancen, auf kleineren Geräten zu schneiden, wenn die Entwickler nicht aufpassen.

Im Vergleich zum responsiven Webdesign ist das adaptive Webdesign einfacher zu codieren, und die meisten Entwickler wählen letzteres gegenüber dem responsiven Webdesign.

Responsives vs adaptives Webdesign

Responsive Websites sind schwer zu codieren. Der Code ist komplex und verwendet Prozentwerte anstelle von festen Pixelwerten. Es ist viel Konzentration erforderlich, um eine Website zu erstellen, die sich an die Bildschirmgröße der Geräte anpasst. Im Gegenteil, es ist einfacher, verschiedene Websites für verschiedene Geräte zu erstellen, wie dies beim adaptiven Webdesign der Fall ist. Die Arbeit ist zwar mehr an das adaptive Webdesign gedacht, da die Entwickler unterschiedliche Websites für unterschiedliche Gerätegrößen erstellen würden, im Vergleich zum responsiven Webdesign ist dies jedoch noch einfacher.

Da es auf dem Markt zu viele mobile Geräte gibt, können die Entwickler nicht notwendigerweise alle Arten von Bildschirmauflösungen bereitstellen. Dies führt dazu, dass Websites in kleineren Bildschirmen beschnitten werden, wenn ein adaptives Webdesign verwendet wird.

Adaptive Websites werden etwas langsamer geladen, da die Website zunächst herausfinden muss, welches Gerät und welche Bildschirmauflösung verwendet wird. Basierend darauf wird die zugehörige Version der Website auf den Bildschirm des Geräts geladen. Bei responsive Webdesign wird ein einzelner Code verwendet und automatisch auf die mobilen Bildschirme verkleinert.

Vielleicht möchten Sie auch diesen Beitrag auf MSDN unter dem Titel Warum ich adaptives Webdesign dem responsiven Webdesign bevorzuge.

UPDATE: Die verlinkte Seite ist bei Microsoft nicht verfügbar. Sie können stattdessen SharePoint Responsive Web Design auschecken.

Empfohlen: