Share
Zu Beginn des Jahres 2015 ist es der perfekte Zeitpunkt, um sich mit "The State of Responsive Web Design" zu befassen..
Wir werden das, was wir über RWD wissen, nochmals überdenken, was in letzter Zeit auf der Strecke geblieben ist, welche neuen Tricks wir heute in unser Spiel integrieren können und was sich am Horizont abzeichnet.
Bevor wir uns damit beschäftigen, definieren wir zunächst, was wir eigentlich meinen, wenn wir "Responsive Web Design" sagen..
Als Ethan Marcotte den Begriff ursprünglich vor fünf Jahren in seinem Artikel über A List Apart prägte, zitierte er Fließgitter, flexible Bilder und Medienanfragen als drei "technische Bestandteile" von RWD.
Die unsterbliche Begleitillustration von Kevin CornellEr hat diese Spezifikationen jedoch sofort qualifiziert, indem er sagte:
„… Aber es erfordert auch ein anderes Denken.“
Seit diesem Artikel aus dem Jahr 2010 haben wir eine ständige Weiterentwicklung der Technologie erlebt, mit der die Menschen auf das Internet zugreifen, sowie das Aufkommen mehrerer neuer technischer Ingredienzien, die unserem Entwicklungs-Toolkit hinzugefügt werden können.
Wir verwenden immer noch flüssige Raster, flexible Bilder und Medienabfragen, aber diese drei Dinge allein bilden nicht mehr ein vollständiges Bild von Responsive Web Design.
Technologie- und Webdesign-Techniken sind ständig in Bewegung, daher sollte uns die Definition von RWD idealerweise geben eine andere Art zu denken das wird nach weiteren fünf Jahren des Wandels genauso gelten wie heute.
Meines Erachtens lässt sich diese Denkweise wie folgt zusammenfassen.
„Responsive Web Design ist ein Ansatz zur Erstellung von Websites, die dies ermöglichen auf alle bekannten Web-Browsing-Geräte reagieren, mit Inhaltsbereitstellung und Interaktion der Benutzeroberfläche optimiert soweit wie möglich für alle Besucher. “
Indem wir uns auf die Denkweise konzentrieren, die dem Responsive Web Design und nicht nur bestimmten technischen Ingredienzien zugrunde liegt, können wir nach den besten neuen Wegen suchen, um responsive Sites in der sich ständig verändernden Landschaft unserer Branche zu schaffen.
Zwar gibt es viele Dinge, die sich in RWD geändert haben, aber es gibt auch einige Dinge, die im Wesentlichen gleich geblieben sind und die viele Entwickler als bewährte Verfahren einverstanden erklären werden.
Hier sind einige der am meisten akzeptierten Aspekte der aktuellen RWD, wie wir sie kennen.
Wir alle wissen, dass wir für eine Liste möglicher Bildschirmauflösungen sorgen müssen, solange Ihr Arm, mehrere Pixeldichten und verschiedene Ansichtsfenstergrößen.
Wir müssen mehrere Eingabemethoden berücksichtigen, z. Abschied von der Maus-Schwebeflugabhängigkeit und Berührungsfreundlichkeit der UI-Elemente.
Wir müssen Medienabfragen verwenden, um bei Bedarf Anpassungen an unseren Layouts bereitzustellen.
Wir wissen, dass Haltepunkte nicht in vorbestimmten Breiten platziert werden sollten, sondern eher an dem Punkt, an dem das Design „bricht“ und eine Anpassung rechtfertigt.
Unsere Bilder müssen fließend groß sein, damit sie bei verschiedenen Displaygrößen weder zu groß noch zu klein sind.
Andere Medien wie Video- und Audioplayer müssen sich ebenfalls auf die gleiche Art und Weise verhalten.
Wir müssen ein Viewport-Meta-Tag (und, in Zukunft, das CSS-Äquivalent) hinzufügen, damit sich unsere Layouts so verhalten, wie wir es erwarten:
Es gibt einige Philosophien und Technologien, die in der Vergangenheit entweder in das responsive Webdesign integriert wurden oder zumindest nicht völlig ausgeschlossen wurden, aber jetzt durch allmählich verbesserte Alternativen aus dem Bild geschoben werden.
Betrachten Sie die folgende Sammlung von Web-Browsing-Geräten:
Beachten Sie, dass diese Liste ausschließlich aus aktuellen Anwendungsfällen der heutigen Zeit besteht.
Angenommen, meine Website verfügt über eine Reihe kleinerer, berührungsfreundlicher, mobilspezifischer Funktionen und größere, mausabhängige, desktopspezifische Designfunktionen. In welcher Breite sollte ich Medienabfragen einrichten, um meine mobilen und Desktop-Funktionen bereitzustellen, damit alle Benutzer dieser Geräte eine erstklassige Erfahrung haben?
Unsere Liste enthält einige Beispiele, aber es gibt Hunderte, wenn nicht Tausende von zusätzlichen Anwendungsfällen, die zusätzliche Schlüssel in die Werke werfen.
In der Realität gibt es heute keine klare Unterscheidung mehr zwischen mobilen Geräten und Desktop-Geräten. Daher ist es am besten, wenn Sie gleichzeitig alle bekannten Methoden des Web-Browsing nutzen.
Wenn Ihre Websites von Grund auf so aufgebaut sind, dass sie auf jeden bekannten Anwendungsfall und nicht nur auf die traditionell als mobile und Desktop-Anwendungen definierten Umgebungen reagieren, haben Sie die umfassendste Form der Reaktionsfähigkeit geschaffen.
Erstens haben wir es aufgegeben, festsitzende Pixel-basierte Layouts vollständig in Photoshop zu erstellen, da diese weder flüssig noch flexibel genug waren, um den neuen Anforderungen des Viewport gerecht zu werden.
Jetzt beginnen wir auch damit, feste Pixel-Layouts in unserem Code zu erstellen, und zwar aus dem gleichen Grund. Bauen Sie unsere Layouts stattdessen mit einer Kombination aus rem, em und % Werte bleiben unsere Sites immer voll skalierbar und flexibel.
Mit dem flexiblen Einheitenansatz können Designs durch Ändern eines einzelnen Basiswerts gleichmäßig vergrößert und verkleinert werden. Benutzerbrowser-Schriftart- und Zoomeinstellungen können vollständig berücksichtigt und unterstützt werden. Mehrere Probleme mit der Darstellungsgröße können sofort gelöst werden. Am wichtigsten ist, dass die Lesbarkeit und Zugänglichkeit von Inhalten immer erhalten bleibt.
Die „Big 2“ -Frontend-Frameworks verlassen bereits The Good Ship PX und steigen in ihre Flüge nach Flexible Unit Land ein.
Bootstrap 4 ist in Arbeit und wird vollständig sein rem / em / % basiert, hinterlassen die px basierten Layouts von Bootstrap 3. Und Foundation 5 hat den Übergang zur Arbeit mit flexiblen Einheiten bereits abgeschlossen.
Die Tage der guten alten px-Einheit, die wir alle über die Jahre so gut kennen gelernt haben, neigen sich dem Ende zu.
Es wird sich bald im Altenheim neben seinen alten Freunden aus den glorreichen Tagen in einem bequemen Sessel niederlassen, IE6-Unterstützung und animierte Flash-Header.
Apropos Flash…
Sicher, wir haben vielleicht schon vor einiger Zeit gesehen, dass animierte Flash-Header verschwunden sind, aber immer noch sind Flash-abhängige Videos, Diashows und Spiele regelmäßig zu sehen. Ich spreche auch nicht nur von kleinen Hobbyseiten - ich sehe große und stark frequentierte Websites, auf denen immer noch diese Meldung angezeigt wird, wenn Sie Flash nicht verwenden und versuchen, ihr Videomaterial anzusehen:
Es ist üblich, dass mobile Geräte Flash nicht unterstützen. Daher ist es nicht die sicherste Methode, sich darauf zu verlassen, dass Inhalte bereitgestellt werden.
Aus Gründen der Sicherheit und Stabilität gehen Webbrowser in der Tat davon aus, unterstützende Plug-Ins wie Flash, Silverlight und Java zu unterstützen, und zwar zugunsten alternativer Technologien, die ausschließlich über native Browser-Einschlüsse funktionieren.
Es ist an der Zeit, Plugin-basierte Medien abrutschen zu lassen und in eine neue Ära der Medienanzeigetechniken zu wechseln.
Einige dieser Technologien sind fast brandneu und einige sind schon seit einiger Zeit im Umlauf, verbessern sich jedoch ständig, aber alle haben eines gemeinsam: Sie sind Einsteiger in die Welt der RWDs und gehen über den ursprünglichen Fokus auf flexible Netze und fließende Bilder hinaus und Medienanfragen.
Nur weil Flash und seine Kollegen auf dem Weg nach unten sind, heißt das nicht, dass wir keine schönen Dinge mehr haben können. Video, Audio, Animationen und sogar 3D- und Full-Games sind dank HTML5 und CSS3- und JavaScript-basierten Goodies immer noch im Mix.
Wo wir früher Browser-Plugins hatten, verfügen wir jetzt über native HTML5-Video- und Audio-Player, CSS3-Animationen, Tools wie Google Web Designer, Canvas, WebGL und eine ständig wachsende Liste interessanter neuer Goodies.
Das neue HTML5-Element und Elemente.
Damit können wir die Größe des Darstellungsbereichs und die Pixeldichte des Geräts überprüfen und dann abhängig vom Ergebnis die am besten geeignete Version eines Bildes laden.
In Browsern wird es nativ noch nicht vollständig unterstützt. Es gibt jedoch eine sehr feste Polyfill mit dem Namen Picturefill (von Scott Jehl, dem Mann hinter Responsible Responsive Design), der dies ermöglicht
Weitere Informationen zur Funktionsweise finden Sie im Schnelltipp: Verwendung von HTML5-Bildern für Responsive Images.
Warum haben Sie Symbole mit fester Größe, wenn Sie die Möglichkeit zur vollständigen Größenänderung haben, wenn Sie die Einstellung für eine einzelne Schriftgröße in CSS ändern?
Durch erstaunliche Web-Font-Bibliotheken wie Font Awesome, Entypo, Typicons und mehr können Sie alle Arten von Bildern in Ihren Websites enthalten, von Raketen über Büroklammern bis hin zu Social-Media-Logos. Da sie jedoch als Schriftarten und nicht als Bilder geliefert werden, können Sie sie alle über CSS neu einfärben und ihre Größe ändern.
Dies bedeutet, dass Sie sicherstellen können, dass Ihre Symbole gut auf die Größe des Ansichtsfensters reagieren, in dem sie sich befinden. Sie sind immer schön und einfach zu sehen und können bei Bedarf mit ihnen interagieren.
Flexbox löst viele der größten Kopfschmerzen, die Webdesigner seit Jahren zu überwinden versuchen.
Es gibt nur ein Problem: Die Nutzungsraten von Browsern, die dies nicht unterstützen, sind in vielen Anwendungsfällen immer noch zu hoch, als dass Flexbox vollständig funktionieren könnte. Wenn Sie an einem Projekt arbeiten, das die Unterstützung von IE8, IE9 und Opera Mini ausschließt, haben Sie es.
CanIUse.com legt jedoch fest, dass der Prozentsatz der globalen Nutzung dieser drei Browser bei 3,18%, 2,13% bzw. 2,82% liegt. Es gibt auch keinen verlässlichen Fallback für Flexbox. Das bedeutet, dass Sie auf einer Website mit mittlerem bis starkem Traffic Hunderte bis Tausende von Benutzern sehen, die monatlich eine kaputte Website besuchen.
Wir alle möchten, dass Flexbox zum Standard für das Layout-Management wird, sodass wir uns keine Träume mehr machen müssen, um relativ einfache Layout-Aufgaben auszuführen. Sobald die drei verbleibenden roten Markierungen in diesem CanIUse-Diagramm verschwinden, ist es soweit.
Wir haben vor einiger Zeit über Webkomponenten gesprochen, und sie sind immer noch auf uns als Weg der Zukunft zugerastet und kommen Tag für Tag näher an den Mainstream heran.
Früher haben wir das erwähnt Video, Audio- und Bild Elemente und wie nützlich sie für responsives Webdesign sind. Wenn Webkomponenten in Kraft treten, wird jeder von uns in der Lage sein, benutzerdefinierte Elemente wie diese zu erstellen, und zwar für jeden Zweck, den wir füllen müssen. Darüber hinaus können Webkomponenten gemeinsam genutzt werden, was bedeutet, dass es nahezu unbegrenzt viele neue responsive Elemente gibt, die in unseren Designs verwendet werden können.
Dies ist im Wesentlichen das Demokratisieren von HTML, was ziemlich groß ist.
Wenn es ein neues Element gibt, von dem die Welt wirklich gut Gebrauch machen könnte, müssen wir nicht auf die Browserimplementierung warten. Wir müssen nur sehen, wie ein Open-Source-Entwickler etwas zusammenfügt und die großzügige Entscheidung trifft, seine Arbeit zu teilen.
Zum Beispiel haben wir bereits erwähnt, dass RWD eine flexible Medienplatzierung erfordert und dazu gehört, dass eingebettete Medien wie YouTube-Videos skaliert und deren Seitenverhältnis beibehalten werden können.
Der Entwickler Joselito Junior hat eine Webkomponente erstellt und als Open Source bereitgestellt, die genau dies tut, indem sie dieses einfache HTML verwendet:
Weitere Informationen zu dieser faszinierenden neuen Technologie finden Sie unter So erstellen Sie eigene HTML-Elemente mit Webkomponenten.
Da sich die Technologie von Minute zu Minute ändert, ist es für uns äußerst wichtig, sich auf die zugrunde liegenden Ziele des responsiven Webdesigns zu konzentrieren und uns nicht zu sehr auf eine bestimmte Vorgehensweise zu konzentrieren. Auf diese Weise stellen wir sicher, dass wir immer offen sind, um neue Wege zu finden, um den Nutzern unserer Websites bessere Erlebnisse zu bieten.
Um dies zu erreichen, müssen wir immer die Ohren zu Boden halten und nach den neuesten Entwicklungen bei Webbrowsern und Webdesign-Techniken Ausschau halten.
Wenn Sie Ihre eigenen Responsive Webdesign-Techniken auf den neuesten Stand bringen möchten, sollten Sie sich vielleicht meinen Kurs Responsive Web Design Revisited anschauen. In etwas mehr als zwei Stunden stelle ich Sie durch alles, was Sie wissen müssen, um eine komplette responsive Website mit den neuesten Techniken zu erstellen. Die ersten beiden Videos sind kostenlos. Sehen Sie sich also eine Vorschau der Website an, die Sie erstellen, und alles, was Sie lernen werden.
Ich wünsche Ihnen ein großartiges Jahr 2015 und hier ist das sich ständig weiterentwickelnde responsive Webdesign!
Accentsconagua