Responsive Header & Logos - Tipps und Fallstricke

Das Konzept des responsiven Webdesigns hat das Web durchdrungen und ist für Frontend-Entwickler eine feste Größe geworden. Es ist nicht zu leugnen, wie wichtig das responsive Design in der modernen Welt ist, aber es ist schwierig zu verstehen, wie responsive Layouts richtig gestaltet werden.

Das Thema könnte ausführlich sein, weil es so viele eindeutige Bereiche einer Website gibt. Wenn Sie sich jedoch auf einzelne Elemente konzentrieren, können Sie die Ziele eines Benutzers besser verstehen und wissen, wie diese Ziele mit Responsive Design erreicht werden können.

Ich würde gerne abdecken Designtipps für Header, Logos, und Navigationsmenüs, wie sie sich auf responsive Design beziehen. Nehmen Sie diese Vorschläge in Bezug auf Ihre eigene Arbeit an und stellen Sie sicher, dass Sie Ihre Schnittstellen im Hinblick auf das Benutzerverhalten gestalten.

Dünnere Navigationsleisten

Auf großen Bildschirmen ist es normal, große Kopfzeilen zu haben, vielleicht sogar übergroße Kopfzeilen mit mehrstufigen Verbindungsstufen. Kleinere Bildschirme haben jedoch nicht den gleichen Platz und sollten bei Bedarf eingeschränkt werden.

Da native mobile Apps in der Regel haben feste Überschriften, Dies ist auch im Responsive Design üblich. Ein fester Header sollte auch schrumpfen Bei kleineren Geräten: Dadurch bleibt mehr Platz für Inhalte, der Leser hat jedoch direkten Zugriff auf die Kopfzeile und die Navigation.

Nehmen Sie zum Beispiel das Cartoon Brew-Layout auf einem Monitor in voller Größe und auf einem mobilen Gerät.

Am 600px-Haltepunkt schrumpft die Navigation auf der Seite auf fast die Hälfte der Höhe. Dadurch werden sowohl das Logo als auch das anklickbare Nav-Menü kleiner. Dies ist jedoch der Fall viel proportionaler zum relativen Bildschirmbereich.

Denken Sie auch daran, dass Cartoon Brew eine Dropdown-Box als Reaktionsmenü auf dem mobilen Bildschirm hat. Das heißt es Overlays-Inhalt Beim Öffnen auf der Seite ist es wichtig, genügend Platz dafür zu lassen.

Ein ähnliches Beispiel ist auf der Jacksonville Art Walk-Website zu finden. Die obere Navigationsleiste bleibt beim Scrollen fest schrumpft bei kleineren Geräten. Dies ist besser für responsives Design, da die Navbar dünner ist lässt mehr Raum für Inhalte auf einem kleineren mobilen Bildschirm.

Jeder Link in der Navigationsleiste hat ein entsprechendes Symbol, das an den Textlink angehängt ist. Das sieht auf einem Breitbildmonitor gut aus, ist jedoch für kleinere Bildschirme zu detailliert.

Die Art Walk-Navigation wechselt zu einem Dropdown-Menü mit festen Verknüpfungen um den 770px-Haltepunkt. Die Symbole werden im Dropdown-Menü ausgeblendet, da sie auf kleineren Geräten zu klein und zu eng sind.

Beim Entwerfen eines responsiven Headers immer berücksichtigen Gesamtfläche des Bildschirms beim Styling der Navbar. Wenn Sie nicht möchten, dass der Header fest bleibt, ist das völlig in Ordnung, aber Sie möchten vielleicht trotzdem etwas schrumpfen um Platz oben auf der Seite zu sparen.

Symbolisieren Sie das Logo

Die meisten Logos enthalten Text und ein Symbol oder eine Grafik, um die Marke darzustellen. Das heißt, du kannst es immer ikonifizieren (Ja, es ist ein echtes Wort) diese Art von Logos bis zu einem Symbol seiner Vollversion.

Dies ist eine leistungsstarke Technik für responsive Header, da nicht immer genügend Platz für ein vollständiges Logo vorhanden ist. Sie verlieren zwar etwas Glitz und Glamour eines Full-Size-Logos, aber das ist der Preis, den Sie für ein sauberes responsives Layout zahlen müssen.

Überprüfen Sie das Logo für Web Designer News und sehen Sie, wie es sich ändert, wenn Sie die Größe des Browsers ändern.

Vielleicht erkennt nicht jeder dieses Symbol beim ersten Besuch der Website, aber danke Mustererkennung Das ist kein großes Problem.

Die Menschen waren lange genug im Internet, um zu wissen, dass die linke obere Ecke der Seite normalerweise für ein Logo reserviert ist. Dieses kleine rosafarbene Symbol wird auch im Favicon verwendet. Es ist daher einfach, einige Schlussfolgerungen zu ziehen, ohne zu weit in die Site zu graben.

Sie müssen sich nicht immer auf Grafiken für diese Technik mit komprimiertem Logo verlassen. Die Kopfzeile von Young And Hungry verwendet hellgrünen Text für das Logo, der schließlich zu dem Text "Y & H" verdichtet wird..

Zugegeben, dies funktioniert möglicherweise nicht für alle Websites, wenn das Branding nicht leicht als einzelne Buchstaben zu erkennen ist. Aber es zeigt, dass Logos kann einfacher gemacht werden sowohl in Grafik & Text als auch in beide Varianten nehmen Sie weniger Platz ein auf kleineren Bildschirmen.

Umgang mit Fullscreen-Hintergründen

Viele Landing-Pages verwenden Vollbildhintergründe, um mehr Aufmerksamkeit auf sich zu ziehen. Dies ist eine leistungsstarke Technik, die jedoch auf großen Monitoren oft am besten funktioniert.

Wie gehen Sie damit auf einem kleineren Bildschirm um? Im Allgemeinen Designer Entferne das Hintergrundbild hinter einem bestimmten Haltepunkt oder das Bild selbst wird neu ausgerichtet ins Fenster passen.

Cap Radio Raffle verwendet diese Technik auf ihrer Homepage. Das Hintergrundbild behält den Fokus im Blick zu jeder Zeit, unabhängig davon, um wie viel die Bildschirmgröße geändert wird.

Diese Art von Lösung normalerweise erfordert einige CSS-Positionierung Aber es ist wirklich einfach, wenn Sie den Dreh raus haben. Gerade Behalten Sie den Fokus im Blick zu allen Zeiten und verkleinern Sie den Bildcontainer proportional zum Gerät passen.

Neben großen Hintergründen können Sie aus ästhetischen Gründen auch große Bilder für den Seiteninhalt verwenden. Die Homepage von Mashable verwendet einen hervorgehobenen Bildhintergrund für die oberste Story, der das gesamte Layout umfasst.

Ihr responsives Layout komprimiert das Bild während einen zentralen Schwerpunkt halten. Es ist schwierig, dies zu tun, da sich dieses Bild ändert, wenn sich die Geschichte ändert. Daher müssen Fotos sorgfältig kuratiert werden. Die Lösung von Mashable ist immer noch eine großartige Methode, um Vollbild-Fotos für Blogs und Layouts von Zeitschriften zu verwalten, wenn sie richtig entworfen wurden.

Vereinfachen Sie die Navigation

Beim Umbau für kleinere Bildschirme, Behalten Sie so viele Links wie möglich in der Navigation und machen es leicht zugänglich. Das bedeutet, dass Sie möglicherweise ein paar Links aufheben müssen, wenn Sie Dropdown-Menüs mit mehreren Ebenen haben.

Wenn Sie die richtige Strategie haben, ist es trotzdem möglich, alle Dropdowns auf dem neuesten Stand zu halten. Zum Beispiel verwendet Kidscreen eine Flyout-Menü mit kleinen Pfeilsymbolen Unterlinks im Responsive-Menü anzeigen.

Viele Leute streiten sich gegen das Hamburger Menü, aber ich akzeptiere es als notwendiges Element für lange Navi-Menüs. Es funktioniert einfach und wird von den meisten Smartphone-Benutzern als "Menütaste" verstanden..

In der Tat ist es schwierig, eine responsive Site zu finden, die sich nicht auf das Drei-Bar-Hamburger-Menü stützt. CyberChimps ist ein gutes Beispiel dafür verwendet ein vertikales Dropdown anstatt ein Slide-In.

Die Navigationsstruktur für CyberChimps wird neu angeordnet, um auf der Seite nach unten zu gleiten. Das Menü fällt von oben mit ab große Blockelemente für Links.

Mit mehr Bereich zum Klicken und größerer Linktext, Die Navigation durch die Seiten wird wesentlich einfacher. Versuchen Sie, diese Philosophie mit Ihrem gesamten responsive Header zu befolgen, und Ihre Designs werden sich drastisch verbessern.

Bau dein eigenes

Mit diesen Tipps zu Ihrer Verfügung sollte es kein Problem sein, brauchbare responsive Header zu erstellen. Es gibt zwar viele Hilfsmittel, die Ihnen helfen können, aber die einzige Möglichkeit, wirklich zu verstehen, ist durch Übung.

Nehmen Sie diese Techniken mit und beginnen Sie mit dem Aufbau von Websites! Ich habe auch eine Handvoll weiterer Ressourcen für responsive Header aufgelistet, die Sie unten ansehen können.

• Erstellen Sie ein einfaches Responsive-Navigationsmenü für Mobile CSS (teamtreehouse.com)
• Best Practice für Responsive Website-Header (ux.stackexchange.com)
• Wie kann ich mein Header-Bild richtig ansprechen?? (stackoverflow.com)