Responsives Webdesign ist zu einem fast allgegenwärtigen Schlagwort im Web geworden. Versuche auf Twitter nach #rwd zu suchen, um gleiche Inhalte und Twitter-Spam zu finden. Dies ist eine gemeinsame Phase in der Reifung einer neuen Idee. Ich erinnere mich, als AJAX der letzte Schrei war; Der Begriff wurde in den Boden gerammt. Jetzt reden nur wenige über AJAX, aber Bibliotheken wie jQuery sind im Workflow eines Entwicklers voll und ganz enthalten.
Dies scheint zu widerspiegeln, was mit Responsive Webdesign passiert. Der Begriff ist überall. Eine Freundin von mir ist im Magazin-Verlag, sie ging kürzlich zu einer Konferenz und ein Redakteur für ein bekanntes neues Magazin sprach über bevorstehende Trends und erwähnte responsives Webdesign. Redakteure sind vielleicht keine Web-Profis, aber sie kennen die Schlagworte.
Als das responsive Webdesign an Dynamik gewann, änderte sich die Art und Weise, wie wir Websites erstellen. Da sich der Begriff von Buzzword zu einem gemeinsamen Teil eines jeden Webdesign-Projekts entwickelt, muss sich die Art, wie wir als Web-Profis arbeiten, ändern. In diesem Sinne müssen wir neue Grundregeln für unsere Arbeit festlegen.
Wenn dir jemand sagt, dass du diese reaktionsschnelle Seite besuchen sollst, was machst du als erstes? Wahrscheinlich skalieren Sie das Fenster, um zu sehen, wie sich das Layout ändert. Ich werde es wahrscheinlich nicht in meinem Handy und Tablet öffnen und die Ausrichtung ändern oder Tests mit der Seitengeschwindigkeit starten. Ich skaliere den Browser und fahre mit meinem Tag fort. Das ist unsere Erfahrung als Designer und Entwickler, aber nicht als Nutzer. Wenn ich eine Seite als Benutzer besuche, habe ich keine Geduld. Es ist mir egal, wenn die Seite schön schrumpft; Ich will nur das, was ich will.
"Squishy" ist eine lineare Skalierung einer Website. Geht die Seite von Skinny zu Fett? Anstelle von linearer Skalierung sollte sich Responsive Webdesign darauf konzentrieren, einen Site-Core einzurichten und von dort aus basierend auf den Funktionen schrittweise zu laden. Stellen Sie sich eine Website vor, die für ein kleines Mobiltelefon mit IE7 in einem EDGE-Netzwerk erstellt werden musste. Das sollte Ihre Kern-Site sein und dann basierend auf der Bildschirmgröße und den Fähigkeiten skalieren.
Responsive Webdesign ist kompliziert. Ist einfach so. Ich wünschte, es gäbe etwas, von dem ich dir sagen könnte, dass es leicht ist, aber da ist es nicht. Die meisten Leute haben auf responsives Webdesign reagiert, indem sie etwas zu ihren Workflows hinzugefügt haben, sei es ein neues Produkt oder einfach nur zu einem Entwickler gehen und fragen, ob ihr Design darauf reagiert.
Ich habe einen Freund, der an einer Responsive Site für einen Kunden arbeitet. Sie baut die Seite in Photoshop in Desktop-Größe. Nach ein paar Nachbildungen auf einigen Seiten wollte sie zeigen, wie die Seite in einem Tablet und einem Smartphone aussehen würde, also hat sie auch diese Modelle gemacht. Nachdem sie dem Kunden vorgestellt wurde, erhielt sie einige kreative Verbesserungen. Es gibt ungefähr 50 PSD-Dateien für diese Site an diesem Punkt. Sie braucht ein paar Tage, um die Layouts zu überarbeiten.
Der Versuch, neue Designs allein hinzuzufügen, führt zu einem zeitaufwendigen und inkonsistenten Prozess. Eine der besten Möglichkeiten, dies zu lösen, ist das Prototyping Ihrer Wireframes und deren Präsentation für Ihren Kunden. Dies gibt Ihnen die Möglichkeit, direkt mit dem Layout der Website zu sprechen, ohne gleichzeitig über das Design zu sprechen. Gründung durch ZURB ist ein großartiges Werkzeug, um schnell Prototypen zu bauen.
Das Hinzufügen von Prototypen in Ihren Workflow reicht jedoch nicht aus. Um Responsive-Sites zu erstellen, müssen Sie anpassen, was uns zur nächsten Regel führt.
Als ich anfing, Websites zu erstellen, verwendete ich zwei Werkzeuge, Photoshop und GoLive. Jetzt habe ich mindestens sechs Programme, die ich unbedingt brauche, um eine Site zu erstellen. Ich benutze immer noch Photoshop zum Erstellen von Grafikelementen, aber ich entwerfe meistens im Browser mit Sublime Text 2 und benutze Safari-Entwicklerwerkzeuge, um Elemente auf meinem iOS 6 zu inspizieren. Ich verwende auch Codekit, um mein vorverarbeitetes CSS und Terminal für Versionskontrolle zu kompilieren in Git.
Responsive Webdesign bedeutet auch, die Art, wie Sie gestalten, zu verändern. Anstatt eine ganze Seite in Photoshop auszulegen, verwende ich Samantha Warrens Stilfliesen das visuelle Design zu artikulieren. Indem Sie die visuellen Marken- und Oberflächenelemente einer Website außerhalb eines tatsächlichen Layouts entwerfen, können Sie das Design direkt kommunizieren und es mit dem Layout des Prototyps kombinieren, um Ihre Responsive-Site im Browser zu erstellen.
CSS-Präprozessoren sind auch eine große Hilfe in jedem reaktionsschnellen Workflow. Um es einfach auszudrücken, können Präprozessoren verwendet werden, um einige der Komplikationen beim Erstellen einer Site zu entwirren und einen Großteil der Repetition zu erben, die in der Arbeit in CSS vererbt wird. Ich persönlich bevorzuge SCSS, aber LESS ist für einige eine bessere Alternative, da es eine niedrigere Eintrittsbarriere hat und eine bessere Dokumentation hat.
[Das Web] sollte von jeder Art von Hardware zugänglich sein, die mit dem Internet verbunden sein kann: stationär oder mobil, kleiner Bildschirm oder groß. - Tim Berners-Lee
HTML und CSS reagieren von Natur aus. Seit der Einführung von HTML sollte das Web flexibel genug sein, um auf jeder Hardware mit einer Internetverbindung zu arbeiten. Erst als wir uns als Designer und Entwickler auf feste Layouts zubewegten, änderte sich dies. Bei dem Versuch, Websites feste Dimensionen aufzuerlegen, haben wir das Internet auf Desktop-Computer beschränkt.
Das Responsive Web abstrahiert, was Sie sagen müssen, wie Sie es sagen. Nehmen Sie zum Beispiel den kürzlichen Wechsel von NPR zu einem API-getriebenen Inhaltsmodell. Durch die Umstellung auf eine API zur Bereitstellung von Inhalten konnte NPR seine Sammlung von Apps und Websites einheitlich verwalten. Die einzige Sache, die sich ändert, ist die Darstellungsschicht.
Darum sollte das Responsive Web sein. Herauszufinden, was es ist, was du zu sagen hast, und zu lassen, wie du es sagst, wird dadurch angetrieben. Bei Design geht es darum, ein Bedürfnis auf eine Weise zu befriedigen, die visuell ansprechend ist, aber auch, um den Bedürfnissen des Benutzers gerecht zu werden.
Dies ist, worum es beim Responsive Web geht, dem Benutzer, der Websites erstellt, die für die Benutzer, die sie verwenden, jedoch auf den Inhalt zugreifen. Websites zu erstellen, die sich selbst für kleine Bildschirme umgestalten können, ist erst der Anfang.
Haben Sie schon Responsive Webdesign angenommen? Welche Regeln für Responsive Design möchten Sie hinzufügen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Größe Bild über Shutterstock.