10 Schritte zu Code-freiem RWD mit Macaw

Responsive Design ist zeitaufwändig und schwierig, aber Ara kann helfen, einige dieser Probleme zu lindern. Es wurde speziell für das moderne Web entwickelt, mit Blick auf Geschwindigkeit und Benutzerfreundlichkeit. Designer, die mit Photoshop oder Fireworks vertraut sind, sollten sich in der Benutzeroberfläche wie zu Hause fühlen.

Mit Macaw können Sie Elemente auf einer Leinwand zeichnen und bearbeiten. Die üblichen Verdächtigen sind alle anwesend: Verwandeln, Ziehen und Ablegen, Anstupsen und ein neuer Freund namens Pudge. Elemente können gruppiert und Tiefen so verwaltet werden, als wären sie Ebenen.

Der Unterschied besteht darin, dass all diese bekannten Manipulationen im laufenden Betrieb in HTML und CSS übersetzt werden. Wenn Sie ein Element auf der Leinwand verschieben, berechnet Macaw automatisch die Ränder, Gleitkommazahlen, Löschvorgänge und andere Eigenschaften, die erforderlich sind, um dieses Element in einem statischen Dokumentfluss zu platzieren.



Macaw basiert auf demselben Framework wie der Chrome-Browser von Google und erbt daher seine Rendering-Funktionen. Dies eröffnet eine Fülle von Möglichkeiten, insbesondere wenn es um Responsive Design geht. Sie können einfach die Größe der Leinwand ändern, einen Haltepunkt einfügen und das Layout für verschiedene Bildschirmgrößen in einer einzigen Datei optimieren.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit Macaw eine reaktionsschnelle Seite erstellen, ohne Photoshop oder eine einzelne Codezeile zu berühren.

01. Betritt die Cavas

10 Schritte zum Code-freien Responsive Design mit Macaw

Die Größe der Leinwand in Macaw kann jederzeit geändert werden, um zu sehen, wie Ihr Design in verschiedenen Ansichtsfenstern abläuft. Es hat auch ein flüssiges, spaltenbasiertes Gitter, das nach Ihren Wünschen geändert werden kann. Das Raster bietet nützliche Hilfsmittel während des Entwurfsprozesses. Klicken Sie beispielsweise auf Cmd + rechts oder links, um ein Element perfekt in eine Rasterspalte zu verschieben.

Für dieses Projekt verwenden wir ein 12-Spalten-Setup mit einem Raster von 100% Breite und 3% Rinnen. Sie können diese Eigenschaften in der Rasterpalette festlegen, die sichtbar ist, wenn keine Elemente ausgewählt sind.

02. Zeichne einen Knopf

10 Schritte zum Code-freien Responsive Design mit Macaw

Das Hinzufügen von Elementen ist so einfach wie das Zeichnen von Formen in Photoshop. Wählen Sie das Eingabe-Werkzeug (N) und zeichnen Sie eine Form auf die Leinwand unter der orangefarbenen Überschrift. Sie werden einen blinkenden Cursor innerhalb der Form bemerken, der anzeigt, dass dies ein bearbeitbares Textelement ist.

Geben Sie die Wörter 'E-Mail-Adresse' ein und drücken Sie zum Festschreiben Cmd + Return. Dies wird bei der Veröffentlichung als Platzhaltertext verwendet. Ziehen Sie die Eingabe unter die blaue Überschrift. Wenn Ihr Raster sichtbar ist, sollten Sie in der Lage sein, die Eingabe zu fixieren. Beachten Sie die blauen Hilfslinien, die beim Verschieben eines Elements angezeigt werden. Hierbei handelt es sich um Positionierungshilfen, mit denen die Ränder und Koordinaten eines Elements visualisiert werden können.

Zeichnen Sie mit dem Schaltflächenwerkzeug (B) eine Schaltfläche neben der E-Mail-Eingabe. Auch hier können Sie den in der Schaltfläche verwendeten Text direkt bearbeiten. Geben Sie 'Anmelden' ein und drücken Sie zum Festschreiben Cmd + Return.

03. Lernen Sie das Styling-Tool kennen

10 Schritte zum Code-freien Responsive Design mit Macaw

Fügen wir mit unseren Elementen einige Styling- und erweiterte Optionen hinzu. Wählen Sie die Eingabe mit dem Auswahlwerkzeug (V). Der Inspektor wird mit den entsprechenden Optionen aktualisiert. Im Abschnitt mit der Bezeichnung Eingabeoptionen befindet sich ein Dropdown-Menü, in dem Sie den Typ der Eingabe festlegen können. Ändern Sie es in E-Mail.

Wählen Sie nun die Schaltfläche. Klicken Sie in der Hintergrundpalette auf das Farbsymbol und wählen Sie ein helles Blau aus. Klicken Sie auf OK und fügen Sie der Eingabe und der Schaltfläche weitere Stile hinzu. Es ist einfach, mit Verläufen, Schatten und Randeigenschaften zu experimentieren.

04. Behälter

10 Schritte zum Code-freien Responsive Design mit Macaw

Wählen Sie sowohl den Eingang als auch die Schaltfläche aus (halten Sie die Umschalttaste gedrückt, während Sie das Auswahlwerkzeug verwenden). Drücken Sie Cmd + G, um die Elemente in einem Container zu gruppieren.

beste Aquarell Tattoo Künstler in den USA

Container ähneln Photoshop-Gruppen, haben jedoch tatsächliche Abmessungen und können gestylt werden. Sie erhalten auch Fähigkeiten wie die automatische Körpergröße, die es ihm ermöglicht, basierend auf der gerenderten Körpergröße seiner Kinder zu schrumpfen oder zu wachsen.

Ändern Sie die Höhe des Containers in 'Auto', indem Sie in der Palette 'Dimensionen' im Feld 'Höhe' auf das Suffix 'px' klicken und 'Auto' auswählen.

05. Schöne Typografie

10 Schritte zum Code-freien Responsive Design mit Macaw

Fügen wir mit Typekit einige schöne Schriftarten hinzu. Zunächst müssen Sie ein Kit auf der Typekit-Website (typekit.com) erstellen. Stellen Sie sicher, dass Sie 'localhost' zu den zulässigen Domänen des Kits hinzufügen.

Tauchen Sie in Macaw in den Container ein, den Sie in Schritt 4 erstellt haben, indem Sie mit dem Auswahlwerkzeug darauf doppelklicken. Auf diese Weise können Sie innerhalb des Containers arbeiten, ohne Elemente außerhalb des Containers zu beeinflussen. Wählen Sie den Eingang und die Schaltfläche. Klicken Sie in der Typografie-Palette auf das Feld Schriftname, um die Schriftauswahl zu öffnen. Klicken Sie auf die Schaltfläche Schriftarten hinzufügen… und fügen Sie im Dialogfeld Ihre Typekit-ID hinzu. Jetzt enthält die Schriftartenauswahl die Schriftarten aus Ihrem Typekit-Konto.

Ändern Sie die Schriftarten in Ihrem Formular und die Textelemente in der Kopfzeile. Möglicherweise müssen Sie in Container ein- und aussteigen, um auf diese Elemente zugreifen zu können.

Doppelklicken Sie auf einen Container, um darin einzutauchen, und doppelklicken Sie außerhalb des Containers, um herauszutauchen. Sie können auch die Breadcrumb-Leiste unten verwenden, um zu bestimmten Stellen zu springen.

06. Bildelemente

10 Schritte zum Code-freien Responsive Design mit Macaw

Fügen wir diesem langweiligen Header einige Bilder hinzu. Klicken Sie auf die Registerkarte Bibliothek. Hier verwalten Sie die Assets eines Projekts. Sie werden sehen, dass sich bereits einige Bilder in der Bibliothek befinden. Macaw speichert Assets in der mcw-Datei, sodass Sie sie an andere weitergeben können, ohne Referenzen zu verlieren.

Wir werden das Telefon zur Seite hinzufügen. Doppelklicken Sie auf die Kopfzeile, klicken Sie auf und ziehen Sie phone.png aus der Bibliothek auf die Leinwand. Dies ist ein Retina-fähiges Bild. Wenn Sie ein hochauflösendes Display verwenden, konvertiert Macaw es automatisch. Sie können dies überprüfen, indem Sie im Inspektor zur Bildpalette navigieren. Mit dieser Palette können Sie die aktuelle Größe eines Bildes im Verhältnis zur Originalgröße untersuchen. Stellen Sie sicher, dass das Symbol @ 2x ausgewählt ist.

Wir möchten das Telefon so positionieren, dass es immer unter dem unteren Rand des orangefarbenen Bereichs liegt. Dazu verwenden wir die absolute Positionierung. Wählen Sie das Telefon aus und klicken Sie auf das Fadenkreuz in der Eigenschaftenleiste. Stellen Sie den x-Ursprung nach rechts und den y-Ursprung nach unten ein, indem Sie die x- und y-Symbole in der Eigenschaftsleiste verwenden. Bewegen Sie das Telefon nun so, dass es rechts vom Text positioniert ist und sich unterhalb der Orange erstreckt. Obwohl der Header eine automatische Höhe hat, wird das Telefon jetzt nach unten ausgefahren, wie wir es möchten.

07. Hintergrundbilder

10 Schritte zum Code-freien Responsive Design mit Macaw

Wir werden jetzt dem Header etwas Pizza hinzufügen, indem wir ein Hintergrundbild hinzufügen. Klicken Sie auf den Körper in der Brotkrumenleiste. Wählen Sie die Überschrift aus und klicken Sie in der Hintergrundpalette auf die Schaltfläche +. Wählen Sie Bild… aus der Dropdown-Liste. Dies öffnet den Hintergrundbilddialog.

Klicken Sie auf Aus Bibliothek auswählen ... und wählen Sie fed.png aus. Stellen Sie es mithilfe des Dropdown-Menüs Größe so ein, dass es immer den orangefarbenen Header ausfüllt. Es gibt viele andere Eigenschaften hier, also zögern Sie nicht zu experimentieren.

08. Gehen Sie reaktionsschnell

10 Schritte zum Code-freien Responsive Design mit Macaw

Um sicherzustellen, dass das Design in verschiedenen Ansichtsfenstern erhalten bleibt, scrollen Sie rechts neben der Leinwand und bewegen Sie den Ziehpunkt nach links, um die Größe der Leinwand zu ändern und zu beobachten, wie Ihre Elemente über die Seite fließen. Macaw hat den Dokumentfluss automatisch berechnet, sodass Sie genau sehen können, wie sich Ihr Design im Browser verhält.

Fügen wir einen Haltepunkt hinzu. Während Sie die Größe der Leinwand ändern, wird ein Tooltip angezeigt, der die Breite angibt. Ziehen Sie den Griff auf eine Breite von 900 Pixel und drücken Sie Cmd. Klicken Sie in der Warnung auf Ja, um einen Haltepunkt einzufügen. Sie können Ihr Design jetzt an diese spezifische Breite anpassen. Das Layout kann geändert und die Stile überarbeitet werden. Sie können einfach mithilfe der Haltepunktpalette oder durch Bewegen des Mauszeigers über Haltepunkte auf dem Lineal zwischen Haltepunkten wechseln.

Wenn Sie mit Haltepunkten arbeiten, ist es wichtig zu verstehen, dass die Eigenschaften rieseln. Wenn Sie eine Eigenschaft ändern, wird sie auf den aktuellen Haltepunkt angewendet. Dieser Wert rieselt zu den Haltepunkten darunter, bewegt sich jedoch nicht nach oben. Wenn Sie für eine Eigenschaft über Haltepunkte hinweg unterschiedliche Werte festgelegt haben, wird das Feld von Macaw blau umrandet.

Wenn Sie mit der Maus über eines dieser Felder fahren, wird eine Eigenschaftentabelle mit den Werten für jeden Haltepunkt angezeigt. Sie können schnell einen Wert abrufen und anwenden, indem Sie auf einen der Werte in der Tabelle klicken. Sie können einen Wert auch auf alle Haltepunkte verteilen, indem Sie Cmd + darauf klicken. Fügen Sie Haltepunkte hinzu, wo immer Sie glauben, dass das Design zusammenbricht. Ich habe sie bei 900px und 500px hinzugefügt.

09. Machen Sie den HTML

10 Schritte zum Code-freien Responsive Design mit Macaw

Macaw verwendet eine leistungsstarke Design-to-Code-Engine, um Ihr Dokument in sauberes, prägnantes HTML und CSS zu konvertieren. Ara erledigt das schwere Heben für Sie, aber es braucht zuerst etwas Hilfe.

Klicken Sie auf die Registerkarte Gliederung. Hier können Sie Elemente ähnlich wie in der Ebenenpalette von Photoshop umbenennen und organisieren. Das Umbenennen von Elementen spielt beim Veröffentlichen eine wichtige Rolle, da es die zu verwendenden Semantiken und Klassennamen definiert.

Macaw verwendet ein einfaches Benennungsschema mit Punktsyntax. Das erste im Namen verwendete Wort wird als Tag-Name analysiert. Wenn dieses Tag in der HTML-Spezifikation vorhanden ist, wird es grün hervorgehoben und beim Veröffentlichen verwendet. Macaw sucht dann nach einem Punkt, gefolgt von einem Klassennamen.

Dies ist eine einfache Möglichkeit, die Semantik in Ihrem Dokument zu definieren. Wählen Sie das zuvor erstellte Containerelement aus, doppelklicken Sie in der Gliederung auf den Namen und benennen Sie es in 'form.sign-up' um. Sie werden sehen, dass das Formular grün hervorgehoben ist, da es sich um ein gültiges HTML-Tag handelt.

10. Bewundern Sie Ihre Arbeit

10 Schritte zum Code-freien Responsive Design mit Macaw

Unser Design ist für alle Haltepunkte optimiert und alle Elemente werden semantisch benannt. Sie können Ihr Dokument jederzeit veröffentlichen, indem Sie Cmd-P drücken. Dadurch werden alle HTML- und CSS-Elemente für Ihr Projekt generiert und der Vorschau-Browser geöffnet. Im Vorschaufenster können Sie das ordnungsgemäße Rendern sicherstellen, andere Seiten anzeigen und den generierten Code überprüfen.

Macaw verfügt außerdem über eine integrierte Funktion namens Remote Preview, mit der Sie Ihr Design an andere Geräte im selben drahtlosen Netzwerk senden können. Navigieren Sie einfach zu der blau in der Adressleiste des Vorschaufensters angezeigten IP-Adresse, und Macaw lädt automatisch die am veröffentlichten Projekt vorgenommenen Aktualisierungen auf dieses Gerät neu.

Wörter: Tom Giannattasio

Tom Giannattasio ist ein Interaktionsdesigner und auch Macaws Gründer. Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 256.