Grid für "Full Width" Responsive Website

[snickers_90]

Liebe Community,

ich arbeite derzeit an einem Design für mein neues Portfolio (bin selbst Designer und möchte meine Arbeiten dort präsentieren). Dazu stelle ich mir ein Raster vor, das möglichst über die volle Breite läuft und alle gängigen Geräte berücksichtigt, etwa in diese Richtung:
http://bootstraplovers.com/assan-ki...te-templates/classic-template/html/index.html

Primär soll es für Desktop (Full HD, 4K) optimiert sein und möglichst die komplette Breite "ausnutzen", das heißt Bilder und Kacheln (im Beispiel unter "Our Latest Work") sollen wie im o.g. Beispiel teils vollflächig dargestellt werden. Ich tue mir total schwer, wie ich dabei mein Design beginnen soll, was ich in Adobe XD erstellen möchte. Gerne würde ich in diesem Fall nicht den "mobile first" Ansatz verfolgen, sondern eher vom größten Viewport her beginnen, meine Inhalte dort anordnen und mich dann an die jeweiligen Screengrößen (Tablet / Smartphone) nach unten hin herantasten und die verschiedenen Breakpoints designen. Da ich die Website nicht selbst programmieren werde, geht es mir primär um die Wahl des richtigen Grids für die entsprechenden Viewports. Gibt es hierzu Empfehlungen? Ich habe mich in Bootstrap & Co. etwas eingelesen, allerdings finde ich dort nur ein ein Grid, das maximal 1366 Pixel breit ist und werde einfach nicht schlau, was für eine Website dieser Art nun in Frage kommt.

Ich bin über jede Hilfe dankbar!

Danke und viele Grüße
snickers_90

 

[MrMurphy]

Du hast ein paar Vorstellungen, die mit der Erstellung von Webseiten nichts zu tun haben.

Der Ansatz "Mobile first" hat mit der Wichtigkeit / Bevorzugung von unterschiedlichen Bildschirmgrößen überhaupt nichts zu tun. Das ist einfach eine Vorgehensweise, die sich bewährt hat.

Wie du vorgehst musst du selbst entscheiden. Wenn dir "Desktop First" sympathischer ist kannst du das natürlich verwenden. Wobei mir nicht klar ist, ob du die Seite überhaupt selbst erstellst.

Frameworks wie "Bootstrap" sind Hilfen, die die Möglichkeiten aber einschränken. Eher etwas für Anfänger, die sich nur am Rande mit HTML und CSS beschäftigen wollen. Besser und besucherfreundlicher sind deshalb in der Regel selbst erstellte Seiten.

Breakpoints werden auch nicht designt, sondern einfach gesetzt wo sie sachlich erforderlich sind. Bei Frameworks wie Bootstrap sind die Breakpoints jedoch vom System vorgegeben und können nur sehr eingeschränkt angepasst werden. Der Inhalt muss sich also Bootstrap anpassen. Etwas, was du offensichtlich grade nicht willst.

Die Breite der Bootstrap-Ausgabe kannst du natürlich auch individuell anpassen. Dafür solltest du dich aber intensiv mit Bootstrap und aktuellem HTML/CSS auskennen. Wenn du in Bootstrap-Funktionen eingreifst kann das sonst Auswirkungen an unerwünschter Stelle haben.

 

[snickers_90]

Vielen Dank für diese ausführliche Antwort, die mir schon mal sehr weiterhilft. Wenn ich es also richtig verstehe, würdest Du mir empfehlen, von Bootstrap & Co abzusehen, da mir das nicht die zum gewünschten Freiraum im Layout verhilft, richtig?

Die Seiten und Unterseiten möchte ich alle selbst (wie o.g. in Adobe XD) gestalten. Mir geht es mehr darum, wie ich anfangen sollte. Dazu habe ich mir einige Tutorials angesehen, die mir zwar zum allgemeinen Verständnis zum Webdesign mit XD verhalfen, nicht aber, was meinen speziellen Fall des Grids angeht. Wie meine Seite später aussehen soll (Visual) habe ich klar im Kopf. Ich tue mir nur schwer, ein vollflächiges Grid zu erstellen und die Elemente darin anzuordnen. Ich bin hauptberuflich Visual Designer und Konzepter und kenne mich hervorragend mit Grids im Embedded Bereich aus. Auch weiß ich, was ich beachten muss, wenn ich meine Designs an einen Programmierer übergebe (Assets, Images, Fonts,...). Allerdings fehlt mir leider die Erfahrung im Web, die ich mit diesem Projekt gerne sammeln möchte. Dennoch würde ich meine Design professionell programmieren lassen, daher ist eine gute Vorbereitung der Daten für mich das A & O.

Wie oben beschrieben, würde beim Design so vorgehen, dass ich erst die Desktopseiten layoute und mich dann "nach unten hin" durcharbeite und alle notwendigen Breakpoints nach meinen Vorstellungen gestalte. Sicherlich macht es dabei dann Sinn, sich zumindest grob an Bootstrap zu orientieren. Für XD gibt es hierzu auch einige Vorlagen (s. Anhang), an denen ich mich nach Möglichkeit orientieren möchte. Allerdings ist es auch hier so, dass in der Full HD Ansicht, rechts und links zwei riesige weiße Bereiche sind, die ich so nicht haben möchte. Im Beispiel in meiner ersten Nachricht ist dies ja auch nicht der Fall, hier wird immer der komplette Space genutzt, alle Bilder laufen bis zum Rand des Browsers. Macht es vielleicht also Sinn, dass ich das angefügte XD Template verwende und nur die Full HD Ansicht nach meinen Wünschen abändere? Oder bedeutet des für einen Webentwickler einen erheblichen Mehraufwand?

Danke nochmal!

 

[Tronjer]

Man kann in Bootstrap Spaltenbreite und -abstände doch selbst definieren und auch full-width ist möglich.

 

[snickers_90]

@Tronjer kannst Du mir hier ein Tool empfehlen? Idealerweise eines, mit dem ich alle Größen errechnen kann?

 

[Tronjer]

Du solltest das Grid verstehen, bevor du anfängst.

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

getbootstrap.com

Entwickler verwenden in der Regel Frontend-Frameworks mit fertigen Komponenten. Niemand baut so was alles von Hand. Weil es zu viel Zeit kosten würde, die dann für die eigentliche Programmierung fehlt.

Nebenbei bemerkt. Ich bekomme auch XD Dateien als Vorlage. Verwende die allerdings nur als Screens und um gelegentlich ein paar Grafiken von dort zu exportieren.