Erinnerst du dich an die guten alten Zeiten? Du weißt, an welchen Tagen ich rede; die Tage vor nicht allzu langer Zeit, als wir Webseiten mit festen Breiten gestalteten. Wenn man jetzt zurückblickt, scheinen sie so einfach zu sein; eine glücklichere Zeit; eine Zeit, in der ich jede verfügbare Schriftart online rezitieren konnte, ohne darüber nachzudenken. Die Wahrheit ist, dass Responsive Web Design alles verändert hat. Die Welt war flach und jetzt ist es rund, ich war blind und jetzt sehe ich, das Netz war Pixel und jetzt sind es Prozentsätze.
Mit der Einführung von RWD ist es wichtig, dass wir als Designer unseren Workflow weiterentwickeln, um den Anforderungen des neuen Webs besser gerecht zu werden. Viele von uns haben unsere Frustration darüber geäußert, dass der Fixed-Pixel-Ansatz von Photoshop nicht geeignet ist, um die für eine reaktionsfähige Webseite benötigten flüssigen Layouts zu entwerfen, aber es wurden keine sinnvollen Alternativen angeboten. Die Webdesign-Welt ist verzweifelt nach einer maßgeschneiderten Software, die von Grund auf mit RWD entwickelt wurde. Produkte wie Adobe Reflow sind ein großartiger Start, denn es zeigt, dass Adobe zumindest an einer Lösung arbeitet, aber nachdem ich am Wochenende ein paar Stunden damit verbracht habe, sehe ich, dass es noch ein langer Weg ist, bevor es zu einem nützliche Ergänzung zu meinem Workflow. Da wir uns zwischen einer prähistorischen Software und dem Versprechen von morgen befinden, müssen wir alternative Workflows schaffen, um die Mängel unserer aktuellen Design-Software durch die Einführung anderer Tools und Verfahren auszugleichen, die diese Lücke schließen helfen zwischen festem Pixel und Flüssigkeitsempfindlichkeit.
Das Folgende ist keineswegs eine Liste, wie RWD-Projekte angegangen werden sollten, sondern wie ich meinen Workflow an die neue Landschaft angepasst habe.
Ich stehe an der Grenze zwischen Photoshop / Fireworks / Illustrator, als jeder um die Vorherrschaft kämpfte und Zeuge war, wie unschuldige Leute in einem Kreuzfeuer von Pixeln gefangen wurden. Designer neigen dazu, ihren Favoriten zu haben und würden lieber einen langsamen, schmerzhaften Tod sterben, als zuzugeben, dass eine andere Software eine Eigenschaft hat, die sie tatsächlich wollen. Ich bin der Ansicht, dass Sie in jeder Software entwerfen sollten, die Ihnen erlaubt, am effizientesten zu arbeiten und Ihre Ideen schnell zu erkunden, sei es Photoshop, Powerpoint oder Paint.
Es ist fast irrelevant, was Sie wählen, da es nur ein Ausgangspunkt sein sollte, um schnell mit verschiedenen Layouts zu experimentieren. Persönlich bevorzuge ich Fireworks, da es mehr von den Kästchen anpasst, die ich in einer Software haben möchte. Ich versuche, in dieser Phase nicht zu sehr ins Detail zu gehen und versuche wirklich, einige vorläufige Entscheidungen bezüglich Layout und Struktur zu treffen, ähnlich wie bei einigen noblen Drahtmodellen.
Alles, was über die Verwendung von Lorem Ipsum in Site-Mock-ups gesagt werden muss, wurde gesagt, also bitte vertraue mir einfach auf diesen und wo möglich, benutze echte Inhalte, um daraus zu entwerfen. Wo es nicht möglich ist, benutze den Inhalt des letzten Jahres, schreibe deinen eigenen Inhalt oder benutze den Text zu "Kerze im Wind", aber benutz Lorem ipsum nicht. Wenn Sie keinen echten Inhalt verwenden, ist es schwierig zu erkennen, an welchen Punkten bestimmte Elemente angepasst werden müssen.
Dies ist nur die Breite, mit der ich am liebsten anfange, da es in der Nähe eines kleinen Desktop-Erlebnisses liegt, das dann einfach für größere Bildschirme und für Tablets / Mobilgeräte nach oben skaliert werden kann. Manche Leute ziehen es vor, breiter zu beginnen, während andere es vorziehen, zuerst Mobilgeräte zu entwickeln, es kommt nur darauf an, was für Sie funktioniert.
Bei RWD dreht sich alles um Fluidcontainer, die wachsen und schrumpfen, um den verfügbaren Bereich des Browsers zu füllen. Daher stellt das prozentuale Design statt der Pixel sicher, dass Ihre Designs proportional zum Browser fließen und weniger Breakpoints benötigen als das entsprechende pixelbasierte Design.
Ich tendiere dazu, In-Design im Hintergrund offen zu haben, damit ich einfach und schnell eine prozentuale Größe eines pixelbasierten Elements herausfinden kann. InDesign eignet sich hervorragend für diese Art von Berechnungen und Sie können leicht herausfinden, welche Größe ein 428px x 333px-Element bei 46% seiner ursprünglichen Breite hat, während es seine Proportionen behält oder 27% einer 889px Browser-Breite in Sekunden findet. Die Ergebnisse werden Ihnen weiterhin in Pixeln mitgeteilt. Sie können dann wieder in die zu erstellende Software zurückkehren und diesen Container in Pixel erstellen, wobei Sie wissen, dass er relativ zum Prozentsatz des von Ihnen definierten Arbeitsbereichs ist.
Wenn du denkst, dass ich in deinen Entwürfen über echte Inhalte spreche, solltest du mich darüber reden hören Entwerfen von Typografiestilen in Photoshop (oder gleichwertig). Typografie sieht im Browser sehr anders aus als in den üblichen Adobe-Paketen, was mehr Arbeit für Sie bedeutet, wenn Sie das Design nach der Erstellung optimieren.
Sparen Sie sich die Kopfschmerzen und nutzen Sie Apps wie typecast.com Experimentieren und erstellen Sie Ihre Schriftstile mit. Sobald Sie mit dem Layout und Stil Ihrer Typografie zufrieden sind, können Sie Ihren gesamten Arbeitsbereich als transparentes PNG exportieren, um ihn in Ihren Design-Modellen zu platzieren. Sie müssen keine der ausgewählten Schriftarten auf Ihrem System installiert haben, da es sich um ein Bild handelt. Sie können es jedoch auch nicht bearbeiten, ohne in die Typumwandlung zurückzukehren.
Ihr Design sollte jetzt fast 1000px breit sein (oder die Breite, die Sie am Anfang gewählt haben), ergänzt durch die Breite der Container, die Ihre verschiedenen Inhalte in Prozentsätzen enthalten. Ich würde jetzt beginnen, ein maßgeschneidertes Gitter zu erstellen, das die Containerbreiten nachahmt, die ich in meinem Design verwende. Also, wenn ich eine Seitenleiste habe, die 30% breit ist und einen Inhaltsbereich, der 55% meines Browsers mit 5% Polsterung auf beiden Seiten ist, kann mein Raster etwa 5%, 30%, 5%, 55%, 5% aussehen.
Sie können Apps wie Rasterset Um Ihr maßgeschneidertes Raster zu erstellen, verwende ich lieber InDesign, da Sie Elemente gruppieren und proportional zueinander skalieren können.
Ich nehme nun mein Raster, das ich mit InDesign erstellt habe, und füge es in eine Breite von 1600 Pixel (oder die maximale Breite, die deine Website sein soll) ein. Ich fange dann an, meine Grid breiter und schmaler in Schritten von 100px bis zu 300px Breite zu verkleinern. Bei jedem Inkrement überprüfe ich die Breite jedes Inhaltscontainers und stelle sicher, dass es immer noch groß genug ist, um seinen Inhalt aufzunehmen. Wenn ich eine Breite erreiche, die einen Container zu klein macht, bearbeite ich das Raster einfach passend. Wenn also die Breite der Seitenleiste, die ich bei 30% der Browserbreite erstellt habe, zu 800px zu eng wird, könnte ich 10% hinzufügen, so dass sie nun 40% meiner Browserbreite und breit genug ist, um den beabsichtigten Inhalt aufzunehmen .
Das Wichtigste, an das Sie sich erinnern sollten, ist, dass Sie, wenn Sie einen Behälter breiter machen, einen anderen Behälter um den gleichen Betrag schmälern müssen, um die gesamte Breite von 100% beizubehalten. Dies ist der beste Weg, um Breakpoints (den Punkt, an dem sich Ihr Layout ändert) zu finden, da Sie nur einen Breakpoint hinzufügen, wenn der Inhalt bricht und nicht die Breite eines neuen Geräts. Dieser Vorgang kann zeitraubend sein, da Sie 14 verschiedene Voransichten Ihres Rasters haben werden, wenn er von 300px auf 1600px breit wird, aber es ist der beste Weg, um zu überprüfen, wie Ihr Design auf verschiedene Bildschirmbreiten aussehen wird, bevor es eingefügt wird Entwicklung.
Eine andere Möglichkeit ist ein Werkzeug wie Adobe Reflow Damit können Sie auch Inhalt zu Containern hinzufügen und dann Ihren Arbeitsbereich ziehen und die Skalierung der Elemente sehen. Sie können Ihre Unterbrechungspunkte auch bestimmen, indem Sie die Größe Ihres Arbeitsbereichs ändern, bis der Inhalt unterbrochen wird, und einfach eine Medienabfrage hinzufügen. Reflow befindet sich noch in der öffentlichen Betaversion und kann von heruntergeladen werden Hier .
Nachdem Sie Ihre Designs in Schritten von 100 Pixeln skaliert haben, würden Sie einige Breiten identifizieren, bei denen der Inhalt unterbrochen wird, und sie durch Hinzufügen eines Breakpoints berichtigen. Sie können nun in die Software zurückkehren, in der Sie die ursprünglichen Entwürfe erstellt haben, und das Layout Ihres Entwurfs in den Breiten ändern, die Sie als Unterbrechungspunkte identifiziert haben. Dies bedeutet, dass Sie am Ende nur 2, 3 oder 4 verschiedene Layouts entwerfen (abhängig von der Komplexität Ihres Rasters und wie viele Haltepunkte Sie benötigen), die den gesamten Weg von 300px bis 1600px abdecken.
Wenn Sie diesen Prozess befolgt haben, sollten Sie nun über eine Reihe von Layouts verfügen, die Ihren Breakpoints entsprechen. Dieses Dokument zeigt, wie Ihr Raster aus Prozentsätzen der Browserbreite besteht und wie er für kleinere Bildschirme sowie für alle anderen minimiert wird Typografiestile, die bereits im Browser erstellt und getestet wurden. Dies sollte ein sehr starker Punkt für einen Entwickler sein, der dann damit beginnt, Ihre Designs genau zu erstellen und ohne dass der Inhalt später mit bestimmten Breiten bricht.
Dieser Prozess mag sehr langwierig erscheinen, aber ohne ein spezielles Tool, das vollständig für RWD entwickelt wurde, ist es der beste Weg, um mein Responsive-Layout mit nicht reagierender Software zu testen und meine Ideen einem Entwickler klar zu kommunizieren. Dies ist keineswegs die einzige Möglichkeit, sich einem RWD-Projekt zu nähern, aber es ist das Beste, was ich gefunden habe.
Was hat das Responsive Design an Ihrem Workflow verändert? Welche Tipps würdest du teilen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Flussbild über Shutterstock.