Responsive Design (auch als "adaptives" Design bezeichnet), bei dem auf derselben Webseite je nach Browserbreite die beste Version von zwei oder mehr handgefertigten Layouts angezeigt wird, ist für die meisten Websites die stärkste Option. Um zu sehen, warum, ist es hilfreich, sich alle Optionen anzusehen, die Webdesignern zur Verfügung stehen:
Feste Layouts
Eine feste Seitenbreite, bei der die Inhaltsbreite unabhängig von der Browserbreite gleich ist, bietet ein einheitliches Erscheinungsbild für alle Geräte und erfordert möglicherweise weniger Codierung, Denken und Wartung als flexiblere Designs.
Einige glauben, dass Layouts mit fester Breite Relikte einer vergangenen Ära sind, in der Menschen nach Pixel-Perfektion und einheitlichem Aussehen in allen Browsern verlangen. Andy Clarke, Autor von Hardboiled Web Design, ist der Meinung, dass diese Denkweise tot ist:
"In der Vergangenheit war es gängige Praxis, hart zu kämpfen, um eine Website zu erstellen, die für alle Browser gleich aussieht und funktioniert - unabhängig von ihren Fähigkeiten. Um dies zu erreichen, mussten Kompromisse eingegangen und Technologien vermieden werden, die nicht von allen Browsern unterstützt werden.
Ist das hartgesotten?
Mach dir nichts vor, süße Wangen. Dies ist nicht der Weg, unser Handwerk weiterzuentwickeln oder ein besseres Web aufzubauen. Diese Art von altmodischem Denken hält uns zurück. Es zwingt uns zu Ausreden, wenn wir nicht das tun, was wir wissen, ist das Richtige. Das Schlimmste, was wir als derzeitige Verwalter des Internets tun können, ist, alles daran zu hindern, das Mögliche einzuschränken. "
- Andy Clarke, Hardboiled Web Design, S. 6 [PDF-Ausgabe hier verfügbar ]
Während einige feste Layouts als die Höhe der Faulheit ansehen, werden Designs mit fester Breite immer noch von sehr intelligenten Designteams gegenüber fließenden oder adaptiven Layouts ausgewählt. Apple beispielsweise bietet derzeit für iMacs dasselbe Layout wie für iPads und iPhones. Warum optimiert das Unternehmen, das für das mobile Surfen im Internet verantwortlich ist, seine Website nicht für mobile Geräte?
Weil es nicht glaubt, dass es muss.
Anstatt die Website für kleine Bildschirme anzupassen, hat Apple Hardware und Software entwickelt, um große Websites auf diesen Bildschirmen komfortabel zu verwalten. Apple ist der Ansicht, dass eine "für Mobilgeräte optimierte" Erfahrung am besten in einer nativen Anwendung und nicht in einem Browserfenster erzielt werden kann. Aus diesem Grund wird die Apple Store App anstelle eines für Mobilgeräte optimierten Webshops angeboten. Aus diesem Grund ermutigen sie Verlage, Zeitschriften-Apps über maßgeschneiderte Websites anzubieten. Die aktuelle Philosophie von Apple im Bereich Webdesign ist klar: Ein einziges Layout, mit dem alle Regeln festgelegt werden, funktioniert problemlos. Für alles andere gibt es eine App dafür.
Alleine aus diesem Grund würden einige argumentieren, dass feste Layouts nach wie vor relevant sind. Sie würden sagen, dass flüssige und anpassungsfähige Layouts nur eine Lücke sind, während wir darauf warten, dass sich die mobile Browsersoftware verbessert und HTML und JavaScript die Entwickler von isolierten App-Stores abbringen.
Meiner Meinung nach macht es jedoch auch auf einem iPhone nicht viel Spaß, sich über einen längeren Zeitraum auf einem mobilen Gerät durch das Web zu bewegen. Wenn Sie der Meinung sind, dass das beste Web-Erlebnis das Lesen, Veröffentlichen und Interagieren mit Websites zum Vergnügen macht, und zwar unabhängig vom verwendeten Gerät, müssen Sie irgendwann zugeben, dass Inhalte bereitgestellt werden, die auf die jeweiligen Anforderungen zugeschnitten sind Besucher ist eine Überlegung wert.
Fließende Layouts
Fließende Layouts, bei denen die Seitenbreite den Bildschirm ausfüllt (häufig bis zu einer festgelegten maximalen Breite), versprechen eine bessere Darstellung auf verschiedenen Plattformen, indem sie Inhalte in einer Breite bereitstellen, die besser zum Ansichtsfenster passt.
In der Praxis verursachen flüssige Layouts mehr Probleme als sie lösen, wie Cameron Moll in diesem Artikel feststellt:
"... flüssige Designs lösen jedes Layout-Problem auf die gleiche Weise, wie Computer Büros papierlos machen, das heißt, sie tun es nicht."
- Cameron Moll, "Sollten alle Standorte flüssig sein?", September 2006
Wenn Sie ein fließendes Layout verwenden, geben Sie die Kontrolle über Ihr Design frei und akzeptieren, dass der Text neu umbrochen wird, Bilder neu fließen, die Zeilenlängen unvorhersehbar variieren, Text, Bilder und Navigationselemente bei kleinen Breiten zusammenbrechen und Spalten springen und schweben nur um dich zu ärgern.
Ein flüssiges Layout, könnte man sagen, ist auch eine faule Option. Es ist der Shotgun-Ansatz für adaptives Webdesign. Anstatt ein maßgeschneidertes Erlebnis mit drei oder vier sorgfältig durchdachten Designs mit fester Breite zu bieten, bieten Sie ein unvorhersehbares Erlebnis in der Hoffnung, dass es auf großen und kleinen Bildschirmen funktioniert, und hoffentlich alle Lücken schließen, die Sie nicht vollständig berücksichtigt haben zwischen.
Dies macht flüssige Layouts nicht unbrauchbar. Es gibt Möglichkeiten, sie zum Laufen zu bringen. Das Blog 456 Berea St zum Beispiel nimmt ein flüssiges Layout bis zu einer bestimmten Breite an und verwendet danach ein festes Layout für alles, was größer ist. Bei sehr kleinen Breiten wird die Seitenleiste ausgeblendet, um eine einzelne Spalte zu verwenden, die das Lesen auf kleinen Bildschirmen erleichtert. Dies ist jedoch kein fließendes Layout mehr. Es ist etwas besseres. Es ist ein ansprechendes Design.
Reaktionsschnelle Layouts
Ein "responsives" oder "adaptives" Layout, bei dem dieselbe Webseite eine Version von zwei oder mehr gestalteten Layouts enthält, abhängig von der Browser-Breite des Besuchers, ist ein wesentlicher Bestandteil der fortschreitenden Verbesserung, die darauf abzielt, dass eine Website optimal aussieht es kann für jeden besucher.
Die Entscheidung für ein adaptives Layout ist "exzellenter Kundenservice", wie Aaron Gustafson, der Autor von Adaptive Web Design, sagte. Wenn wir unsere Websites gut gestalten, sollten die Besucher eine perfekt gestaltete Erfahrung erleben, ohne zu bemerken, dass wir damit viel Aufhebens machen:
"Als Webdesigner und -entwickler sollten wir uns bemühen, in unserem Job genauso gut zu sein wie der aufmerksame, unauffällige Kellner, aber es ist keine einfache Aufgabe. So wie ein Kellner keine Ahnung hat, ob ein Kunde häufig durch die Tür kommt." Nachfüllungen oder wenige, wir haben keine Möglichkeit, die Bedürfnisse eines bestimmten Benutzers zu kennen, wenn sie auf unserer Website eintreffen. Stattdessen müssen wir uns erheben, um diese Bedürfnisse zu erfüllen. Wenn wir wirklich gut sind, können wir dies tun, ohne dass unsere Kunden überhaupt bemerken, dass wir es sind besondere Überlegungen anstellen. Dank des benutzer- und inhaltsorientierten Ansatzes von progressive enhancement (im Gegensatz zum neuesten Browser-Ansatz von graceful degradation) ist dies problemlos möglich. "
- Aaron Gustafson, Adaptive Web Design, S. 12 [PDF-Ausgabe hier verfügbar ]
Die Erkenntnis, dass unsere Aufgabe als Webdesigner darin besteht, sich an unsere Besucher anzupassen und sie nicht dazu zu zwingen, sich an uns anzupassen - wie Apple vielleicht glaubt -, ist eine relativ junge Entwicklung im Bereich Webdesign. Es ist meiner Meinung nach eine Art Renaissance: Wir haben es geschafft, die guten Gewohnheiten aus jahrelanger Druckgestaltung herauszusuchen. Jetzt müssen wir die Fesseln wegwerfen, die durch Arbeiten in einem vordefinierten Bereich auf der gedruckten Seite entstehen.
Wo wir den Browser einmal als festen Canvas behandelt haben, akzeptieren wir jetzt, dass es überhaupt keinen definierten Canvas gibt, und dies wird immer deutlicher durch die riesige Mischung von Bildschirmgrößen, die Sie zweifellos in Ihren Besucherstatistiken sehen . Anstatt jedes neue Gerät als eindeutige Seitengröße zu behandeln (und dann Truppen zu sammeln, wenn ein neues Gerät herauskommt), können wir zukunftssicherere Konventionen befolgen.
Wir können in Bands denken - "groß", "mittel" und "klein" - anstatt über bestimmte Telefone und Tablets nachzudenken und dann Websites zu entwerfen, die in diesen Bands am besten aussehen. Unabhängig davon, welche neuen Geräte herauskommen, passen sie in die eine oder andere Band, und selbst wenn sie direkt an der Grenze zwischen zwei Bands liegen, haben wir immer noch mehr Kontrolle über das Erlebnis, als wenn wir ein festes oder flüssiges Gerät verwendet hätten Layout.
In Responsive Web Design bietet Ethan Marcotte diesen Aufruf an:
"Wir müssen loslassen.
Anstatt getrennte Designs zu erstellen, die jeweils auf ein bestimmtes Gerät oder einen bestimmten Browser zugeschnitten sind, sollten wir sie stattdessen als Facetten derselben Erfahrung behandeln. Mit anderen Worten, wir können Websites erstellen, die nicht nur flexibler sind, sondern sich auch an die Medien anpassen, die sie rendern.
Kurz gesagt, wir müssen reaktionsschnelles Webdesign üben
. Wir können die Flexibilität des Webs nutzen, ohne die Kontrolle aufzugeben, die wir als Designer benötigen. All dies, indem wir standardbasierte Technologien in unsere Arbeit einbetten und unsere Philosophie in Bezug auf Online-Design geringfügig ändern. "
- Ethan Marcotte, Responsive Web Design, S. 8 [PDF-Ausgabe hier verfügbar ]
Aber welche Bands benutzt du? Ethan Marcotte empfiehlt die folgenden drei in Responsive Web Design. (Um zu lernen, was sie tun und die Vorbehalte zu verstehen, möchten Sie vielleicht das Buch greifen. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Es gibt auch eine Reihe von CSS-Frameworks, mit deren Hilfe adaptive Websites erstellt werden können, darunter das Less Framework von Joni Korpi .
Anstatt willkürliche Haltepunkte zu verwenden, ist es vielleicht besser, das Design Ihrer Site die Bänder bestimmen zu lassen. Reduzieren Sie die Bildschirmbreite Ihres Browsers, und wenn Ihr Design beschädigt ist, sollte diese Breite einer Ihrer „Haltepunkte“ sein. Reduzieren Sie die Breite und fügen Sie bei CSS-Medienabfragen Haltepunkte hinzu, bis Ihr Design in allen Breiten gut aussieht. Auf diese Weise sieht Ihr Design auf allen Geräten gut aus, anstatt nur auf der Handvoll Bildschirmgrößen, in die Sie es einordnen wollten. Wenn Sie Chrome verwenden, können Sie durch Aktivieren der Entwicklertools (Ansicht> Entwickler> Entwicklertools) und Verringern der Browser-Breite die aktuelle Breite in der oberen rechten Ecke hilfreich auslesen, um zu ermitteln, wo sich Ihre Haltepunkte befinden sollen.
Ein weiterer beliebter Ansatz ist das responsive Design von Mobile First , bei dem Ihr zentrales Stylesheet die Stile für die kleinsten Geräte verarbeitet und die Medienabfragen größere Bildschirmbreiten verarbeiten, anstatt umgekehrt. Dies kann zu einer schnelleren Leistung auf Mobilgeräten führen, insbesondere wenn Sie viele CSS-Hintergrundbilder verwenden. (Sie konstruieren die Haltepunkte auf die gleiche Weise. Beginnen Sie einfach mit der Mindestbreite Ihres Browsers und arbeiten Sie nach oben. Vergessen Sie nicht, so viele aktuelle Geräte zu testen, wie Sie in die Hände bekommen können. Besuchen Sie ein offenes Gerät Lab .)
Kurz gesagt, wenn es gut gemacht ist, ist adaptives Design eine Freude, sowohl als Webdesigner als auch als kommunaler Garten-Webbenutzer anzuschauen und zu erleben. Nehmen Sie die Website des japanischen Unternehmens Information Architects zum Beispiel:
Auf einem iPhone
Auf einem iPad
Auf einem iMac
So wie Aaron Gustafson es vorausgesagt hat, wissen Sie erst, wenn Sie die Entwürfe auf derselben Seite sehen, dass für Sie gesorgt wird.
Das Erlebnis könnte in jedem Fall kaum angenehmer sein; Sie müssen nicht über die Seite nachdenken oder mit ihr interagieren, um mit dem Lesen des Inhalts zu beginnen, Zeit damit verbringen, sich zu wundern, warum es auf Ihrem Bildschirm seltsam aussieht, oder die Navigationselemente vergrößern, bevor Sie darauf tippen können, da bereits jemand diese Probleme gelöst hat Sie. Und das ist , warum Responsive Design fast immer andere Optionen übertrumpft.
Ein flüssiges Layout ist am einfachsten zu erstellen und zu pflegen. Sie können dann auch ein mobiles Stylesheet verwenden, um Probleme zu beheben, die bei sehr kleinen Geräten auftreten können.
quelle
Ich würde zwei Stylesheets verwenden.
Eine, die für die meisten normalen Desktop-PC-Benutzer flexibel ist.
Ein weiterer für mobile.
quelle
Der derzeit empfohlene beste Ansatz ist die Verwendung des so genannten "responsiven Webdesigns", bei dem Sie verschiedene Geräte und Bildschirmgrößen / Auflösungen mit einem einzigen Ansatz erfüllen müssen.
Unter http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and- finden Sie einen großartigen Artikel, der das Wie, Was und Warum von responsivem Webdesign beschreibt Ressourcen/
quelle
Es kommt darauf an, wie viel Stil Ihr Design beeinflusst. Es gibt viele Faktoren, Kundenanforderungen und Inhalte von Drittanbietern, die Ihre Flexibilität in Bezug auf die Größe einschränken.
Wenn Sie eine Website erstellen können, die gut aussieht und für alle Ihre Benutzer in hohem Maße nutzbar ist, die sich auf jede Größe skalieren lassen, dann können Sie es fantastisch machen!
Die nächste Option besteht darin, einen Stil mit einer Mindestbreite zu erstellen, die von bestimmten Elementen wie dem vertikalen Menü, der Navigationshilfe oder dergleichen vorgegeben wird, und die Größe der Hauptinhaltsspalte so zu ändern, dass der verbleibende verfügbare Platz ausgefüllt wird. Trotzdem ist es abhängig von bestimmten Inhalten (Bannerwerbung, Widgets, Video usw.) nicht immer einfach.
Die meisten Websites haben ein Layout mit einem gemeinsamen Nenner und fester Breite. Hinweis: Ich habe NICHT den kleinsten gemeinsamen Nenner angegeben . Wenn Sie sich Ihre eigenen Statistiken oder die von w3schools ansehen , werden Sie feststellen, dass 85,1% der Nutzer Displays mit einer Breite von mehr als 1024 Pixel und 98,9% der Nutzer mit einer Breite von mindestens 1024 Pixel haben. Denken Sie an die einfache Implementierung eines 1024 Pixel breiten Layouts und den Aufwand, der erforderlich ist, damit 1,1% mehr Benutzer nicht horizontal scrollen müssen, und Sie werden sehen, warum dies eine äußerst häufige Wahl für gestaltete Websites ist.
Bedenken Sie natürlich, dass Ihr Publikum möglicherweise nicht mit den Besuchern von w3schools übereinstimmt. Sie können auch gezielt mehr Besucher entfremden, wenn diese nicht Ihren Bedürfnissen entsprechen. Stuck In Customs wurde extrem breit angelegt, da es sich bei dem Ziel um Personen handelt, die sich für Grafiken und Fotos interessieren, die meistens mit großen Displays arbeiten. Es macht die Erfahrung auch viel kühner für sie.
quelle