Integrieren Sie das Seitenleistenmenü in das 960-Grid-Layout?

Ich habe einen Kunden, der ein Design für eine Web-App haben möchte. Er sagte mir, dass er gerne „ein großes Sidebar-Menü auf der linken Seite“ hätte und nannte das neue Design von MailChimp als Beispiel. Wir waren uns beide einig, dass der Kunde ein ansprechendes Design und ein ähnliches Erscheinungsbild wie MailChimp wollte. Die aktuelle Website des Kunden verwendet Bootstrap und befindet sich unter dem 960-Pixel-Raster. Ich habe bereits Designs erstellt, die für ein 960-Pixel-Raster geeignet sind, aber dies ist das erste Mal, dass ich ein vertikales Menü hinzufüge.

Wie würde ich vorgehen? Ich bin mir nicht sicher, ob ich die Menübreite in die Breite von 960 Pixel integrieren soll. Wenn das Menü beispielsweise 200 Pixel breit ist, sollte ich dann die 760 Pixel als Hauptinhalts-Div verwenden? Oder sollte ich das Hauptinhalts-Div als 960px entwerfen und das Menü außerhalb der Breite von 960px erstellen?

Und wenn Sie in Lehrstimmung sind, würde ich mich über eine kurze Analyse freuen, wie MailChimp ihr Layout gemacht hat. Wie, strukturell, wie es aufgebaut ist.

Dashboard-Screenshot

Ich glaube du sprichst die falsche Zielgruppe an. graphicdesign.stackexchange.com ist in erster Linie für Grafikdesign gedacht, nicht für Bootstrap-Entwicklung.
Beruht meine Frage eher auf Boostrap als auf Layout? Hrm.. Ich dachte, es wäre noch in den Grenzen des Designs. Sollte ich dies stattdessen auf Stackoverflow fragen? Danke für deinen Beitrag.
Nun, die Frage könnte zum Thema gehören, es schien nicht wie eine Brainstorming-Frage zu sein. Hochwertiges Webdesign berücksichtigt den gesamten Platzbedarf, was Ihr Hauptziel ist, was in der Seitenleiste enthalten sein soll, welche Farben verwendet werden sollen, wie der Besucher der Website die Seitenleiste verwenden soll, tut dies Seitenleiste enthält die gesamte Navigation usw. usw. usw. Ich könnte weitermachen, aber wie ich bereits sagte, scheint dies eher eine Brainstorming-Frage zu sein, die wir nicht zulassen. Wenn Sie eine Frage zum X-Design haben, können Sie diese gerne stellen.
Wie ich verstanden habe, bezieht sich Ihre Frage auf die alternativen Möglichkeiten, Ihr Design mit HTML & CSS im Bootstrap-Framework zu codieren. Photoshop-Gurus werden wahrscheinlich keine Ahnung haben, wie sie Ihnen helfen können. Basierend auf Ihrem Screenshot würde ich zwei Divs auf derselben Ebene (Menü und Inhalt) wählen. Sie erhalten weniger und sauberere CSS-Regeln. Dies jedoch ohne Berücksichtigung von Bootstrap! Ich denke, Stackoverflow ist ein besserer Ort, um dies zu fragen. Vergessen Sie nicht, es zu taggen [bootstrap].
Traditionell bedeutet 960px, dass alle Inhalte innerhalb der 960 liegen. Nicht 960px + Seitenleistenbreite.

Antworten (2)

Ich verstehe nicht ganz was du meinst. Ihr Kunde möchte ein responsives Design, aber Sie sprechen von festen Breiten in Pixeln.

Sind Sie mit der Codierung von CSS vertraut? Ich gehe davon aus, dass Sie ein gutes CSS-Verständnis haben.

Bootstrap hat Lösungen für reaktionsschnelles Web. Ich bin mir nicht sicher, was Sie meinen, wenn Sie sagen, dass sie den 960 unter Bootstrap verwenden. Legen sie feste Breiten in Pixeln fest? Wenn ja warum? Dann sind viele der Gründe für die Verwendung von Bootstrap strittig.

Sie können einfach Quelldateien für Mailchimp herunterladen und selbst im Code herumstöbern, oder Sie können dies über verschiedene Webentwickler-Tools tun. Aber ich würde sagen, das ist den Aufwand nicht wirklich wert, denn:

Das Ganze erscheint mir aber recht simpel. Ich würde vorschlagen, dass Sie – vorerst – die 960 ignorieren, zu Bootstrap gehen und das Intro über responsives Design und die Verwendung ihrer Spaltenauswahl lesen.

Wenn Sie Breiten im Code festgelegt haben, lässt sich dies leicht entfernen, und Bootstrap würde sich im Wesentlichen um die reaktionsschnelle Aktion kümmern.

Sie werden dann mit Bootstrap eine einfache Spaltenauswahl treffen und alle gewünschten Menüelemente, Schaltflächen usw. hinzufügen. Es ist hier ziemlich gut beschrieben http://getbootstrap.com/css/#grid

Hier ist die grundlegende, zugrunde liegende Struktur für Mailchimp:Geben Sie hier die Bildbeschreibung ein

So wird es in Bootstrap gemacht: Die Spalten müssen sich zu 12 addieren. Basierend auf dem Mailchimp-Beispiel hätten Sie Ihre Sidbar also beispielsweise bei col-md-3, diejenige, die die Wörter "Dashboard" enthält, vielleicht a col-md-6, diejenige, die „Entwürfe, Kampagne erstellen“ in col-md-3 enthält.

Der darunter; mit dem Text "neueste Kampagnen ..." wäre dann eine col-md-9 (12 minus 3) So skizzieren sie es:Geben Sie hier die Bildbeschreibung ein

Was auch immer Sie tun. Befreien Sie sich von festen Breiten.

Im speziellen Fall von MailChimp haben sie ihr Framework hier zur öffentlichen Nutzung verfügbar gemacht – http://ux.mailchimp.com/patterns/ . Sie finden auch Nuggets ihres Designprozesses in ihren Blog-Artikeln und wenn Sie ihren Newsletter abonnieren. Sie warnen auch davor, dass es nicht wie Twitter Bootstrap ist und vieles davon auf ihre Bedürfnisse zugeschnitten wurde.

Die wichtige Frage, die auch alle anderen hier stellen, lautet: Was ist Ihre Inhaltsstrategie? Denn Ihr Design sollte eine Antwort darauf sein. Und die Welt hat sich schon vor langer Zeit aus dem 960er-Gitter herausbewegt. Mit adaptiven Layouts versuchen Sie, das Beste aus dem Ihnen zur Verfügung stehenden Platz zu machen und gleichzeitig sicherzustellen, dass der Benutzer in jeder Bildschirmgröße die maximale Benutzerfreundlichkeit erhält. Es ist eine mehrstufige Übung. Ein Grid-System beantwortet möglicherweise nicht unbedingt alle Fragen. Ihr Verständnis des Inhalts und der Bedürfnisse des Benutzers wird das Ergebnis weitgehend bestimmen.

Integrieren Sie das Seitenleistenmenü in das 960-Grid-Layout?
AntwortenHierDatenschutz-Bestimmungen1y, 0v