Bei Gestaltung einzelner CSS-Elemente Überblick verlieren

Ich bin derzeit dabei, eine neue Homepage für meinen Heimverein zu machen. Bisher habe ich für die Gestaltung der Elemente Bootstrap verwendet, weil ich am Anfang eher Lust hatte, mich mit dem Code im Backend, also mit PHP und Wordpress zu beschäftigen. Heute habe ich mich nun mit der Oberfläche beschäftigt, also mit CSS die Website begonnen zu gestalten. Dabei arbeite ich weiterhin mit Bootstrap, weil es viele Vorteile wie ein responsives Design beinhaltet. Bei den Elementen, die anders aussehen sollen, überschreibe ich die Werte dann einfach.

Das funktioniert soweit auch einwandfrei, jedoch habe ich heute bemerkt, dass ich schnell ein Gefühl für den Zusammenhang der Elemente verliere, wenn ich mich längere Zeit nur auf eines konzentriere. Wenn ich an einem bestimmten Element bearbeite, dann habe ich nämlich immer mehrere Fenster geöffnet: links habe ich meine Homepage im Browser geöffnet und rechts habe ich dann meinen Texteditor mit dem Code geöffnet. Das führt dazu, dass ich nur einen Teil der Homepage sehe und nicht das große Ganze, was der Besucher der Seite letztendlich sieht. Das war dann insoweit problematisch, dass ich die Proportionen der Elemente nicht richtig angepasst habe und erst als ich das Browserfenster wieder größer gezogen habe und die restlichen Elemente gesehen habe, habe ich bemerkt, dass ich das Element, das ich gerade bearbeitet habe, viel zu groß im Gegensatz zum Rest der Homepage zu gestalten. Also musste ich noch mal ran und alles nachbearbeiten, was ziemlich viel Zeit gefressen hat.

Ich habe zwar auch ein Retina-Display und könnte die Auflösung meines Laptops problemlos vergrößern, aber das habe ich bei der letzten Homepage, die ich in InDesign gestaltet habe, so gemacht und das war auch nicht zielführend. Da habe ich nämlich die gesamte Website viel zu groß gemacht und als ich mir das Design mal dann in den gängigeren, kleineren Auflösungen angeschaut habe, bin ich richtig erschrocken, weil die Schrift und alles darum herum einfach viel zu groß war. Mit den Einstellungen des Retina-Displays hat das einfach anders gewirkt. Daher arbeite ich schon ganz gerne mit einer Auflösung von 1140 Pixel Breite.

Habt ihr auch manchmal das Problem, das ihr den Überblick über die gesamte Homepage verliert, wenn ihr lange an einem einzelnen Element arbeitet und dann auch nur dieses im Blick habt? Wie löst ihr das Problem? Oder habt ihr einen Bildschirm, der groß genug ist, um alle Fenster, also Browser und Texteditor nebeneinander zu platzieren?

Bist du schon mal auf die Idee gekommen die einzelnen CSS-Elemente mit unterschiedlichen Hintergrundfarben zu belegen? So habe ich das mal gelernt, wenn man die optische Gestaltung einer Webseite damit beginnt. Zum einen sieht man gleich, wo es eventuell zu Überlappungen kommt. Aber man sieht eben auch gleich, ob alles so angeordnet ist, wie man es sich vorstellt.

Wenn das alles passt, dann entferne ich am Ende die Hintergrundfarbe, so dass alles eine Einheit ergibt. Aber zur besseren Orientierung am Anfang ist diese Vorgehensweise nicht unbedingt schlecht.