Inhalt
- Entwerfen für das Unbekannte
- Ein pragmatischer Designansatz
- Layout-Agnostiker werden
- Progressive Codierung
- Eintauchen in den Aufschlag
Es scheint, dass heutzutage alle über responsives Webdesign sprechen, und das aus gutem Grund. Da die Anzahl der webfähigen Geräte weiter zunimmt - jedes mit unterschiedlichen Funktionen und Merkmalen - ist es nicht mehr sinnvoll, Websites mit fester Breite zu erstellen.
Die Wahrheit ist, es war nie. Bisher galt es jedoch als bewährte Methode, Erfahrungen zu entwerfen, bei denen eine Reihe von Annahmen getroffen wurden, sei es in Bezug auf Bildschirmauflösung, Bandbreite oder Eingabemethode. Wenn Sie jemals eine 960 Pixel breite Website entworfen haben, um sie nur auf dem Netbook eines Freundes mit kleinem Bildschirm anzuzeigen (und ja, ich schreibe aus schmerzhafter Erfahrung hier), werden Sie verstehen, warum dies kein besonders kluger Ansatz war. Mit Smartphones und Tablets ist klar, dass unsere traditionellen Methoden nicht mehr für den Zweck geeignet sind.
Glücklicherweise bedeutet das Aufkommen von CSS-Medienabfragen und die wachsende Erkenntnis, dass das Web ein eigenständiges Medium ist, dass wir beginnen, die wahre Natur der Plattform zu akzeptieren und zu akzeptieren, dass ihre Universalität eine Stärke und keine Schwäche ist.
In den nächsten fünf Tagen werde ich Sie durch eine Technik führen, die diese Tatsache erkennt: sich anpassendes Webdesign. Entwickelt von Ethan Marcotte, kombiniert dies flüssige Layouts, flexible Bilder und Medienabfragen, um Websites zu erstellen, die sich an jede Umgebung anpassen, in der sie sich befinden.
Ich werde diesen Ansatz demonstrieren, indem ich Ihnen zeige, wie Sie eine einfache Mediengalerie erstellen. In meinen Beispielen erstelle ich eine kleine Website, um einen kürzlichen Roadtrip durch die USA zu dokumentieren. Sie können jedoch den Code und das Design an Ihre eigenen Bedürfnisse anpassen.
Entwerfen für das Unbekannte
Ein Großteil dieses Tutorials konzentriert sich auf den Entwicklungsaspekt des Responsive Design. Bevor wir uns jedoch mit Code befassen, nehmen wir uns einen Moment Zeit, um zu überlegen, wie wir eine Website mit möglicherweise unendlichen Layouts entwerfen können.
Jetzt habe ich das Glück, dass ich Schnittstellen entwerfen kann und Entwickeln Sie den Frontend-Code, der sie real macht. Dies ist natürlich keine einzigartige Fähigkeit - wenn Sie für sich selbst arbeiten, sind Sie wahrscheinlich die gleichen. Es ist jedoch sicherlich von Vorteil zu verstehen, wie sich Inhalte beim Erstellen flüssiger Designs anpassen und wieder fließen lassen können.
Ich arbeite auch als Teil eines größeren Teams, in dem meine Rolle spezialisierter ist. In einer solchen Umgebung kann sich der visuelle Designer ausschließlich darauf konzentrieren, Drahtgitter in attraktive, ansprechende (abgemeldete, pixelgenaue) Kompositionen zu übersetzen. Und es ist nicht ungewöhnlich, dass Entwickler separat angesiedelt sind und diese Layouts in schlanke und effiziente Markups und CSS umsetzen.
Solche linearen und getrennten Workflows brechen jedoch schnell zusammen, sobald wir bewerten, wie sich Designs an unterschiedliche Umgebungen anpassen. Wie bei jedem neuen Tool oder jeder neuen Technologie sollten wir auch kollaborativere und agilere Arbeitsweisen in Betracht ziehen. Viele der schwierigsten Probleme beim Entwerfen reaktionsfähiger Websites können einfach durch Konversation, Experimentieren und Iteration gelöst werden.
Ein pragmatischer Designansatz
Das heißt nicht, dass Designer nicht darüber nachdenken können, wie ein Design außerhalb der Grenzen eines bestimmten Geräts funktionieren kann.
Bei Clearleft initiieren wir visuelles Design aus der Sicht des Desktops. Wir beginnen mit der Definition einer übergreifenden Designsprache und visuellen Ästhetik und stützen uns häufig auf erste Erkundungen eines Kerninhalts. Wenn wir beispielsweise eine Food-Site entwerfen, beginnen wir mit einer Rezeptseite. für eine Nachrichtenseite, eine Story-Seite.
Dies ist nicht nur eine wichtige Seite auf der Website, sondern enthält wahrscheinlich auch genügend strukturierten Inhalt, um eine typografische Palette aufzubauen. Wir werden auch darüber nachdenken, wie sich das Layout anpassen kann - auch wenn wir dies zu diesem Zeitpunkt nur im Hinterkopf haben.
Ein nützlicher Weg, um ein Design einem Stresstest zu unterziehen, besteht darin, eine solche Seite für einen schmaleren Bildschirm (~ 320 Pixel breit) anzupassen. Sie werden wahrscheinlich feststellen, dass einige Aspekte des Designs überdacht werden müssen, damit sie in dieser Breite funktionieren. Hier sind einige Beispiele:
- Typografie: Große Überschriften eignen sich gut für breitere Layouts, aber für kleinere Bildschirme können sie viel vertikalen Platz beanspruchen und erfordern daher zusätzliches Scrollen. Wenn sich die Linienlängen ändern, sollten Sie auch die Linienhöhen und andere typografische Behandlungen berücksichtigen.
- Links: Wie funktioniert Ihr Design auf Touchscreen-Geräten? Wir haben zwar noch keine einfache Möglichkeit, diese zu erkennen (was bedeutet, dass wir bei allen Aspekten unseres Designs den Kontakt berücksichtigen sollten), aber das Entwerfen für einen schmaleren Bildschirm kann uns die Möglichkeit geben, über Zielbereiche für Links und andere interaktive Elemente nachzudenken . Die iOS-Richtlinien empfehlen, dass diese mindestens 44 Pixel / Punkte im Quadrat betragen, was eine gute Zahl ist, die angestrebt werden sollte.
- Navigation: Dies ist wahrscheinlich die umständlichste Komponente eines reaktionsschnellen Designs, insbesondere wenn Ihre Site viele Abschnitte und eine tiefe Hierarchie aufweist. Brad Frost hat eine Zusammenfassung einiger verschiedener Navigationsansätze verfasst, die derzeit in Betracht gezogen werden.
- Überflüssiger Inhalt: Sind einige Inhalte nicht erforderlich? Müssen andere Inhalte nur in bestimmten Szenarien angezeigt werden? Ich empfehle nicht, Inhalte basierend auf dem Gerät, das ein Benutzer gerade verwendet, auszublenden, aber Techniken wie das bedingte Laden (auf das wir später in dieser Woche noch eingehen werden) können uns dabei helfen, kleinere Seiten bereitzustellen, die nur bei Bedarf ergänzende Inhalte laden.
Das Entwerfen von zwei kontrastierenden Layouts bestärkt die Idee, dass sich ein Design anpassen wird, während potenzielle Fallstricke frühzeitig ausgebügelt werden. Dies klingt zwar nach einer Verdoppelung der Arbeit, aber denken Sie daran, dass wir nicht jede Seite mit pixelgenauer Präzision gestalten. Stattdessen konzentrieren wir uns darauf, eine skalierbare Designsprache zu erstellen - eine, die sich mit der Implementierung in Code weiterentwickelt und auf einzelnen Modulen und Komponenten basiert.
Layout-Agnostiker werden
Es ist nicht überraschend, dass für eine Branche, die das Web in der Vergangenheit wie Druck behandelt hat, Layouts mit fester Breite viele der von uns produzierten Ergebnisse durchdrungen haben. Während wir mit der Entwicklung eines anpassungsfähigen Mediums beginnen, werden neue Ansätze in Betracht gezogen, die es uns ermöglichen, Probleme zu lösen und Ideen zu kommunizieren, während wir die fließende Natur des Mediums anerkennen. Hier sind einige meiner Favoriten:
- Seitenbeschreibungsdiagramme: Während Drahtgitter häufig ein Layout implizieren können (und daher einen bestimmten Gerätetyp annehmen), entfernen Seitenbeschreibungsdiagramme diese Annahme und beschreiben stattdessen die einzelnen Komponenten, die im Dokument nach Priorität angeordnet sind.
- Stilfliesen: Bei der Kommunikation von Designideen mit Kunden können wir feststellen, dass wir „Gemälde von Websites“ präsentieren. Wenn wir nicht aufpassen, werden Kunden zu Recht nach Konzepten fragen, die zeigen, wie ein Design auch auf anderen Geräten aussehen wird. Dies kann uns in eine nicht nachhaltige Situation zwingen, mehrere Seiten für mehrere Geräte zu erstellen. Samantha Warren hat über dieses Problem nachgedacht und sich Stilkacheln ausgedacht. Diese befinden sich irgendwo zwischen einem Moodboard (aber weniger vage) und vollständig realisierten Comps (aber weniger präzise) und helfen uns, Typografie, Schaltflächenstile und Masthead-Behandlungen zu kommunizieren. Sie fördern auch eine ausgereiftere Diskussion mit unseren Kunden.
- Designspiel mobilisieren: Diese Übung kann in kollaborativen Design-Workshops sehr gut funktionieren. In dieser Übung schreibt jeder auf Post-it-Notizen die Elemente auf, die auf einer bestimmten Seite erscheinen können. Diese werden dann in der Reihenfolge ihrer Wichtigkeit an die Wand geklebt, als würden sie auf einem Mobiltelefon linearisiert erscheinen. Die daraus resultierende Diskussion kann einige überraschende Schlussfolgerungen ziehen. Beispielsweise stellen Sie möglicherweise fest, dass die Navigation nicht die wichtigste Komponente auf der Seite ist. Dies kann bis zum Design reichen, bei dem ein Sprunglink oben auf der Seite auf die Navigation in der Fußzeile verweist.
Es gibt natürlich noch Platz für die Tools, die wir bereits verwenden, aber wenn wir eine Website allgemein gestalten, müssen wir berücksichtigen, dass das Layout nicht mehr bekannt ist.
Progressive Codierung
Zum Glück müssen wir uns in dem Beispiel, an dem wir arbeiten, keine Gedanken über das visuelle Design machen, da die harte Arbeit für uns erledigt wurde! Stattdessen können wir uns darauf konzentrieren, unser Design in eine vollständig reaktionsfähige Website zu codieren.
Noch eine Sache, bevor wir anfangen. Es ist wichtig, sich an ein Grundprinzip des Mediums zu erinnern, mit dem wir arbeiten: Universalität. Das bedeutet nicht nur, für die webfähigen Geräte von heute zu bauen, sondern auch die Kompatibilität mit denen von gestern und morgen sicherzustellen. John Allsopp hat in seinem Beitrag The Next 6 Billion beschrieben, warum dieses Prinzip wichtig ist:
"Diese nächsten sechs Milliarden sind Kinder im ländlichen Indien, Afrika, China, wo der Zugang zu Strom und Netzwerken zeitweise sein kann. Es ist jemand in Sumatra in einer zehn Jahre alten Wintel-Box. Es sind Menschen, die Hunderte verschiedener Sprachen sprechen, mit Dutzenden von verschiedenen Es sind Menschen, die als erste in ihrer Familie lesen und schreiben können. Es sind die 20 Prozent der Menschen weltweit, die weder lesen noch schreiben können.’
Wir können unser Verständnis des Webs nachvollziehen, indem wir uns die verschiedenen Moden (aus Mangel an einem besseren Wort) ansehen, die sich in unserem Beruf durchgesetzt haben: Webstandards, Barrierefreiheit, unauffälliges JavaScript… alle sind Varianten desselben Themas: progressive Verbesserung. Gleiches gilt für Responsive Web Design. Um eine zu bauen wirklich Responsive Website besteht darin, eine Website zu erstellen, die nicht nur abwärtskompatibel, sondern auch zukunftsfreundlich ist.
Eintauchen in den Aufschlag
Okay, genug von der Präambel, es ist Zeit, einen Texteditor zu öffnen.Unser Designer hat uns ein Desktop-orientiertes Design zur Verfügung gestellt und war so freundlich, Beispiele dafür zu liefern, wie dies auch in einem engeren Ansichtsfenster erscheinen könnte.
Es mag verlockend sein, diese separat zu codieren, aber ich werde einen anderen Ansatz vorschlagen. Durch Platzieren der separaten Komponenten - oder Muster -, aus denen das Design besteht, auf einer einzelnen Seite können wir ein Musterportfolio erstellen. Auf diese Weise können wir Komponenten außerhalb der Grenzen eines Seitenlayouts entwickeln und können später auf Regressionstests zurückgreifen. Sehen wir uns das anfängliche Markup auf einigen verschiedenen Geräten an:
Sehen Sie sich unser markiertes Musterportfolio an
Nun, ich werde verdammt sein - wir haben bereits eine reaktionsfähige Website! Unser Inhalt passt sich den Grenzen jedes Geräts an, sei es ein schickes neues iPad oder ein Telefon mit weggeworfenen Funktionen. Es funktioniert sogar in einem Nur-Text-Browser wie Lynx.
Dank der zugrunde liegenden Prinzipien der Universalität ist das Web reagiert standardmäßig. Das ist großartig, aber es bedeutet auch, dass alles, was wir von nun an mit dem Code tun, diese native Anpassungsfähigkeit beeinträchtigen kann.
Morgen: Wir werden vorsichtig vorgehen und den ersten Aspekt des reaktionsschnellen Designs anwenden: Typografie und Fluidgitter.
