Erstellen Sie ein responsives HTML-Drahtmodell

Inhalt

• Schöne neue Welt
• Geben Sie das reaktionsschnelle HTML-Drahtmodell ein
• Betreten Sie das Framework
• Erste Schritte mit Foundation
• Das Foundation Grid System
• Navigation einrichten
• Erstellen unseres Blockgitters

Seit den Anfängen der 3D-Computermodellierung verwenden Modellbauer eine Drahtgitteransicht eines Objekts, um ein Objekt in drei Dimensionen mit minimalen Computerprozessorkosten darzustellen. Frühe Videospiele wie Battlezone und Tempest zeigten 3D-Objekte als Drahtgitter, da frühe Heimcomputer nicht leistungsfähig genug waren, um 3D-Objekte vollständig zu rendern (und frühe einfarbige Displays konnten sie nicht anzeigen, selbst wenn sie konnten).

Jahre später begannen Software-Designer und -Entwickler, sich auf ihre Skizzen zu beziehen, die sie als Drahtgitter bauen wollten. Sie versuchten, dasselbe zu erreichen, was die 3D-Modellierer waren: Ideen auf kostengünstige Weise zu zeigen. Sie wollten Nicht-Designern und Entwicklern ein mehrdimensionales Verständnis dessen vermitteln, was sie entwarfen. Als das Web von Rich-Text-Dokumenten zu Schnittstellen wurde, die wie Software gestaltet waren, begannen auch Webdesigner mit dem Wireframing (obwohl einige in der Branche sich fragen, ob es jetzt an der Zeit ist, Wireframes loszuwerden).

Seit Jahren beschreibe ich meine Grundphilosophie für das Wireframing mit zwei Adjektiven: billig und hässlich. Wireframes sollten etwas sein, das Sie schnell produzieren können, und Sie sollten in der Lage sein, Inhalte, Komponenten, Prioritäten und Layouts mit geringen Kosten radikal zu ändern. Drahtgitter sollten auch so stillos wie möglich sein. Das Letzte, worauf sich Kunden bei der Überprüfung von Drahtgittern konzentrieren sollen, sind die Farbpalette, Texturen, Typografie und Bilder. In diesem Fall sind Ihre Wireframes nicht hässlich genug oder zumindest nicht niedrig genug. Wireframes dienen nicht zum Testen des Stils. Sie dienen zum Testen Ihres Inhaltsmodells, Ihrer Architektur, Ihrer Hierarchie und Ihrer Abläufe. Ziehen Sie stattdessen Stilkacheln in Betracht, wenn Sie mit Ihrem Kunden eine visuelle oder Stilsprache testen oder einrichten möchten.

Da sie jahrelang als kostengünstiges Werkzeug zum Testen von Ideen gedacht waren, waren Drahtgitter einfach Bleistiftskizzen auf Papier mit schnell gerenderten Kästchen und verschnörkelten Linien. Schließlich stellten einige von uns fest, dass wir sie mit den Kopier- und Einfügefähigkeiten, die Computer bieten, noch schneller machen konnten, und begannen, Tools wie OmniGraffle oder Adobe Fireworks zu verwenden, um die Dinge noch schneller zu machen. Trotzdem blieben Drahtgitter graue Kästchen und kopierte und verpasste Textteile, die auf einer festen Leinwand platziert waren. Es waren Low-Fidelity-Skizzen einer Website.

Da die Interaktionen mit Websites mit dem Aufkommen von Web 2.0 und Technologien wie Ajax sowie den Fortschritten bei HTML und CSS immer komplexer wurden, gab es häufig einen Mangel an Klarheit oder sogar ein gewisses Maß an Verwirrung, das durch diese Skizzen von Websites verursacht wurde.

Anmerkungen zur Rettung! Das Erstellen kommentierter Skizzen unserer Websites war sehr sinnvoll, solange die Websites selbst auch in einer einzigen Größe auf einer festen Leinwand angezeigt wurden.

• Laden Sie die Support-Dateien für dieses Tutorial herunter

Schöne neue Welt

Wir sind jetzt in eine schöne neue Welt eingetreten, in der unsere Websites auf einer Vielzahl von Geräten mit verschiedenen Bildschirmgrößen, Auflösungen und Interaktionsmustern leben. Die feste Leinwand gehört der Vergangenheit an. Was war unsere Lösung? Zum größten Teil wählen wir zwei bis drei Bildschirmgrößen (die normalerweise den ursprünglichen zwei iOS-Geräten von Apple und einer zufälligen Desktopgröße entsprechen) und wiederholen den Vorgang für jede. Alles skizzieren, alles kommentieren, profitieren!

Angenommen, wir lernen ein wenig von der Größe, mit der wir beginnen, sollten wir dies manchmal in weniger als der dreifachen Zeit tun können, die unsere alten Drahtgitter nur für Desktop-Geräte haben, oder? Falsch. Nach meiner Erfahrung nehmen Anmerkungen und Verwirrung mit diesem Ansatz zu. Wir verbringen auch Zeit damit, Dokumente zu erstellen, die versuchen, alle Bildschirmgrößen zu verstehen, und diese Skizzen unserer Website in verschiedenen Größen so darzustellen, dass Kunden sie leicht verstehen und verarbeiten können.

Abgesehen von der Tatsache, dass wir unsere Zeitinvestition in Wireframing mindestens verdoppelt haben, haben wir wahrscheinlich auch eine Reihe wichtiger Entscheidungen ignoriert, die irgendwann getroffen werden müssen. Manchmal malen wir uns sogar in eine Ecke, aus der wir uns mit HTML und CSS nur schwer entwickeln können. Wenn unsere beiden Endpunkte 320 Pixel breit und 1400 Pixel breit sind, gibt es 1.080 verschiedene mögliche Breiten dazwischen, bei denen verschiedene Inhalte, Komponenten oder sogar Interaktionstypen unterbrochen werden können. Hierher kommt schließlich der Begriff "Haltepunkt". Wireframing auf diese Weise verursacht zusätzliche Kosten, selbst wenn wir der Meinung sind, dass wir unsere Wireframes mit drei Breiten schneller als andere Methoden erhalten können.

Geben Sie das reaktionsschnelle HTML-Drahtmodell ein

Viele Designer hatten aus verschiedenen Gründen Angst oder waren nicht bereit, den Sprung zur Erstellung reaktionsfähiger HTML-Drahtmodelle zu wagen. Was folgt, ist eine kurze Liste einiger der häufigsten Dinge, die Designer dazu gesagt haben, und einige Gedanken zu jedem. Dies sind jeweils sehr berechtigte Fragen und vernünftige Bedenken, daher werde ich auf jede Frage einzeln antworten. Ich kann Sie vielleicht nicht überzeugen, etwas Neues auszuprobieren, aber ich hoffe, ich kann ein paar Missverständnisse darüber zerstreuen, was ich meine, wenn ich sage, dass eines meiner neuen Ergebnisse in meinem Entwurfsprozess reaktionsschnelle HTML-Drahtmodelle sind.

1. "Ich mache seit Jahren statische Drahtgitter mit meinem Toolset und bin schnell verrückt geworden. Ich möchte diesen Geschwindigkeitsvorteil nicht aufgeben."Das Erstellen von HTML-Wireframes kann in der Tat Zeit für Ihren Prozess ab dem Zeitpunkt des Beginns des Wireframings bis zu dem Zeitpunkt verlängern, an dem Sie die Zustimmung des Kunden haben. Dies kann jedoch die zusätzliche Kommunikation und Arbeit nach der Genehmigung Ihrer Drahtgitter verringern, da statische Drahtgitter häufig viele Steine ​​unversehrt lassen. Wenn Sie mit dem Wireframing für eine immer größere Anzahl von Bildschirmgrößen und Interaktionstypen beginnen, werden Sie wahrscheinlich entweder mehr Wireframes oder zusätzliche Anmerkungen benötigen, die schnell außer Kontrolle geraten können. Die Maximierung der Geschwindigkeit ist nicht das einzige Ziel beim Wireframing.
2. "Ich denke nicht in HTML und CSS. Um Layout- und Designideen zu erstellen, benötige ich ein Canvas-basiertes Tool."Dies ist eines der häufigsten Missverständnisse darüber, was viele Leute als "Entwerfen im Browser" bezeichnen. Obwohl mein Client-Ergebnis zu reaktionsschnellen HTML-Drahtmodellen geworden ist, skizziere ich immer noch als Teil meines Prozesses, und ich denke, Sie sollten dies häufig tun.
3. "Ich kenne HTML und CSS, bin aber kein erfahrener Frontend-Entwickler. Ich habe keine Zeit, mich mit Medienabfragen zu befassen und reaktionsschnelle Bildschirme zu erstellen."Die gute Nachricht hier ist, dass Sie nicht Ethan Marcotte sein müssen, um reaktionsschnelle HTML-Drahtmodelle zu erstellen. Es gibt eine Reihe von Frameworks, die praktischen, wiederverwendbaren Code bereitstellen, damit Sie Komponenten und Layouts zusammensetzen können, die Ihren Ideen und Skizzen entsprechen.

Betreten Sie das Framework

Angenommen, ich habe Sie überzeugt, bei Ihrem nächsten Projekt Ihre Zehen im HTML-Wireframing-Wasser zu benetzen, lassen Sie uns nun über Frameworks sprechen. Frameworks bieten im Allgemeinen ein integriertes Rastersystem, Basisstile und vorgefertigte, wiederverwendbare Komponenten (Navigation, Diashows usw.). Sie bieten aufgrund ihrer weit verbreiteten Verwendung und Dokumentation auch eine Community hilfreicher Personen und wurden in verschiedenen Browsern vorab getestet. Es gibt verschiedene Frameworks mit jeweils Vor- und Nachteilen. Hier ist eine Liste von nur wenigen:

• Bootstrap
• Stiftung
• Wirefy
• Skelett

Ich habe Foundation ausgewählt, um Ihnen eine schnelle Anleitung zum Erstellen eines reaktionsschnellen HTML-Drahtmodells zu bieten, da es beliebt ist, zuerst mobil ist, optional semantisch ist (was bedeutet, dass Sie Ihre klassenbasierten Aufgaben mit Sass als semantisch betrachten können) und viele Funktionen bietet von vorgefertigten Vorlagen und Komponenten, und es ist in der aktiven Entwicklung. Grundsätzlich ist es eines der einfachsten Frameworks, um den Überblick zu behalten, das auch verwendet werden kann, um Ihre Wireframes in ein Endprodukt zu verwandeln.

Erste Schritte mit Foundation

Um Ihr erstes Drahtmodell mit Foundation zu erstellen, gehen Sie einfach zu http://foundation.zurb.com und klicken Sie auf den Download-Link. Sie gelangen zu einer Seite, die eine Reihe von Optionen zum benutzerdefinierten Anpassen Ihres Pakets bietet. In diesem Beispiel klicken wir jedoch einfach auf Laden Sie Foundation CSS herunter Link und los geht's. Die anderen nützlichen Links sind die Dokumentationsseite und die Vorlagenseite von Foundation für vorgefertigte Beispiele, die Sie in Ihren Drahtgittern wiederverwenden können.

Nachdem die ZIP-Datei heruntergeladen wurde, entpacken Sie sie in einen beliebigen Ordner auf Ihrem System, in dem Sie Ihre Wireframes speichern möchten, und geben Sie dem Ordner einen neuen Titel, z. acme-projekt. Wenn Sie den Ordner öffnen, sollte darin ein angezeigt werden help.html Datei, ein index.html Datei A menschen.txt Datei A robots.txt Datei und Ordner für CSS, Bilder und JavaScript. Öffne das index.html Datei und verwenden Sie es als Ausgangspunkt. Sie können einfach den gesamten Beispielinhalt innerhalb der Body-Tags löschen. Auf diese Weise erhalten Sie Ihre grundlegende Seitenstruktur, die Sie benötigen. Die wichtigen Dinge, die Sie beachten sollten, wenn Sie Ihre eigenen erstellen .html Datei sind unten aufgeführt:

• Ergänzen Sie die normalize.css zu deinem Kopf:

link rel = "stylesheet" href = "css / normalize.css" />

• Ergänzen Sie die Foundation.css zu deinem Kopf:

link rel = "stylesheet" href = "css / foundation.css" />

• Hinzufügen modernizr.js zu deinem Kopf:

script src = "js / vendor / custom.modernizr.js"> / script>

• Fügen Sie die jQuery und verschiedene Foundation-Skripte am Ende Ihres Dokumententexts hinzu (siehe Beispiel) index.html Datei für diese).

Das Foundation Grid System

Das erste und wahrscheinlich wichtigste, was Sie verstehen möchten, um mit der Verwendung von Foundation zu beginnen, ist das Rastersystem. Es handelt sich um ein 12-Spalten-Raster, das vollständig verschachtelt und flüssig ist. Sie können sehr schnell arbeiten, indem Sie Rasterbreiten zuweisen, indem Sie einem Element einfach eine Klasse hinzufügen (z. B.).

Wenn Sie das Raster verwenden, um einem Element eine Breite zuzuweisen, können Sie eine Breite sowohl für kleine als auch für große Bildschirme zuweisen (die beiden in Foundation integrierten Standard-Haltepunkte). x ist die Anzahl der zugewiesenen Rasterspalten. Zum Beispiel auf einem kleinen Bildschirm, Small-X-Spalten oder auf einem großen Bildschirm, große x-Spalten. Sie können eine neue Instanz des Rasters erstellen, indem Sie die Reihe Klasse für ein Wrapper-Element. Im folgenden Beispiel haben wir also ein Element, das sich auf kleinen Bildschirmen über die gesamte Breite und auf großen Bildschirmen nur über die Hälfte der Breite erstrecken sollte.

div> div> ... / div> / div>

In unserem oben skizzierten Beispiel-Drahtmodell haben wir einen legalen Textbereich, der sich auf kleinen Bildschirmen über die gesamte Breite erstreckt, auf großen Bildschirmen jedoch nur über die Hälfte. Dies würde wie folgt erreicht werden:

div> div>… / div> / div>

Es ist auch erwähnenswert, dass die kleine Rasterbreite die einzige ist, die Sie zuweisen müssen, da das Foundation-Raster zuerst mobil ist. Wenn Sie nur eine kleine Breite zuweisen, wird die kleine Zuordnung durch die große Bildschirmgröße einfach beibehalten oder übernommen. Im folgenden Beispiel hätte das Element eine Breite von acht Spalten sowohl auf kleinen als auch auf großen Bildschirmgrößen.

div> div> ... / div> / div>

Durch die Verwendung einfacher Klassen können Sie auch Dinge wie Versetzen, Zentrieren und Drücken oder Ziehen ausführen, um gegen die Quellreihenfolge zu entwerfen. Im folgenden Beispiel würde das Element auf kleinen Bildschirmen die gesamte Breite umfassen, auf großen Bildschirmen jedoch 10 Spalten, dies jedoch für die Spalten 2 bis 11.

div> div>… / div> / div>

Im folgenden Beispiel würde das Element die ersten neun von zwölf Spalten auf kleinen Bildschirmen umfassen. Auf großen Bildschirmen würde es die Breite von neun Spalten überspannen, aber zentriert sein.

div> div> ... / div> / div>

Im folgenden Beispiel würde das erste Element die letzten zwei von 12 Spalten umfassen, während das zweite Element die ersten 10 von 12 Spalten umfassen würde.

div> div> 2 / div> div> 10, last / div> / div>

Navigation einrichten

In Foundation sind bereits einige verschiedene Navigationsmuster vorgebacken, die Sie in Ihren Drahtgittern verwenden können. Unser Drahtmodell zeigt oben auf dem Bildschirm ein Navigationsmenü mit dem Site-Namen und auf kleinen Bildschirmen einen einfachen Menü-Link. Zum Glück gibt es eine vorgefertigte Navigationskomponente, die dieser Beschreibung in Foundation entspricht. Nachfolgend finden Sie ein Beispiel, wie dies erreicht werden kann. An der Spitze unseres Körpers werden wir Folgendes hinzufügen.

nav> ul> li> h1> a href = "#"> Site-Name / a> / h1> / li> li> a href = "#"> span> Menü / span> / a> / li> / ul> Abschnitt> ul> li> a href = "#"> Über / a> / li> li> a href = "#"> Portfolio / a> / li> li> a href = "#"> Kontakt / a> / li> / ul> / section> / nav>

Lassen Sie uns zusammenfassen, wie wir den gewünschten Navigationsstil erreicht haben.

1. Ein ... kreieren nav Element und fügen Sie die Klasse hinzu obere Leiste dazu.
2. Erstelle ein ul Element mit der Klasse Titelbereich um unseren Site-Namen und das kleine Bildschirmmenü zu enthalten, schalten Sie um.
3. Fügen Sie unseren Site-Namen als hinzu h1 innerhalb der ersten li Element in unserem Titelbereich ulund fügen Sie die Klasse hinzu Name dazu.
4. Neue hinzufügen li mit dem Klassennamen Toggle-Topbar um den Menüumschaltlink für kleine Bildschirme zu enthalten.
5. Fügen Sie die Klasse hinzu Menü-Symbol zum toggle-topbar li so dass der Menü-Link auf kleinen Bildschirmen das Menüsymbol anzeigt.
6. Ein ... kreieren Sektion Element mit der Klasse oberer Stangenabschnitt um das eigentliche Menü zu enthalten ul.
7. Innerhalb der oberer Stangenabschnitt ein ... kreieren ul mit einer Klasse von entweder Recht oder links (abhängig von unserer bevorzugten Menüausrichtung). Diese ul enthält unsere Listenelemente mit Menü-Links.

Erstellen unseres Blockgitters

Unsere Drahtgitter-Skizze zeigt dann eine Rasteransicht von Portfolioelementen, die auf kleinen Bildschirmen zwei Elemente breit und auf großen drei Elemente breit ist. Foundation macht Blockgitter wie dieses ganz einfach, indem es ein vorgebackenes bereitstellt kleines Blockgitter-x und Großblock-Gitter-x Klasse, die für jedes ul-Element verwendet werden kann. Um unsere Blockrasterliste mit Portfolioelementen zu erstellen, verwenden wir das folgende Markup.

div> div> ul> li> a href = "#"> img src = "http://placehold.it/290x410&text=item+1"> / a> / li> li> a href = "#"> img src = "http://placehold.it/290x410&text=item+2"> / a> / li> li> a href = "#"> img src = "http://placehold.it/290x410&text=item+3 "> / a> / li> li> a href =" # "> img src =" http://placehold.it/290x410&text=item+4 "> / a> / li> li> a href =" # " > img src = "http://placehold.it/290x410&text=item+5"> / a> / li> li> a href = "#"> img src = "http://placehold.it/290x410&text=item +6 "> / a> / li> / ul> / div> / div>

Sie werden feststellen, dass wir zuerst a definiert haben Reihe Wrapper und dann ein Container, der alle 12 Spalten umfasst. Wir tun dies, damit sich das Blockgitter nicht bis zum Rand des Bildschirms erstreckt, sondern die gleiche Polsterung beibehält maximale Breite wie der Rest unserer Artikel in unserem Raster definiert.

Ich hoffe, Sie fühlen sich befähigt, HTML-Wireframing auszuprobieren. Dies ist eine wunderbare Zeit, um Webdesigner zu werden. Wir haben viele Werkzeuge zur Verfügung, um die Dinge, die wir tun, eleganter, effektiver und verständlicher zu machen.

Wörter: Jared Ponchot

Dieser Artikel erschien ursprünglich in der Ausgabe 246 des Netzmagazins.