Design nachbauen

[Gunnar Bittersmann]

@@Carmen

ich möchte gerne so ein Design für meine Webseite haben: http://murren.ru/templates/bobby/bobby-demo/index.html

Ist parallax scrolling nicht schon seit ein paar Jahren out?

allerdings ist dieses mit Bootstrap umgesetzt und ich habe mir sagen lassen, dass Bootstrap für ein „richtiges“ Design nicht geeignet ist, maximal für einen Prototype.

Wenn ein Framework genau das bietet, was du wünschst, dann scheint es geeignet zu sein. Nur sieht man es einer Seite dann oft an, dass sie mit diesem Framework umgesetzt wurde, weil sie eben so aussieht wie tausende anderer Seiten, die mit diesem Framework umgesetzt wurden.

Willst du Individuelles, musst du Anpassungen vornehmen. Da bist du schnell an dem Punkt, wo du nicht mit, sondern gegen das Framework arbeiten musst. Das ist der Punkt, wo man das Framework gar nicht erst einsetzen sollte. Gegen ein Framework zu arbeiten ist die Hölle.

(Egal, ob CSS-Framework oder JavaScript-Framework. Ich hab hier bewusst von „Framework“ gesprochen, nicht speziell von Bootcrap.)

Wenn man mit einem CSS-Framework arbeitet, heißt das in der Regel, das Markup mit präsentationsbezogenen Klassen vollzumüllen. Also die Darstellung im HTML anzugeben. Nichts mit separation of concerns.

Deshalb halte ich von CSS-Frameworks: Abstand.

Meine zweite Frage:
Ein Bild welches über die volle Breite gehen soll, wie groß sollte dieses sein? Ich möchte alle Bildschirme abdecken? Ich dachte so um die 3000px Breite?

Scheint mir zu groß. Allerdings: bei retina revolution … Bei der Übertragung kommt es nicht auf die Pixelgröße, sondern auf die Dateigröße an.

Ein Bild sollte nicht größer sein als nötig. Das heißt: für verschiedene Viewportgrößen verschiedene Bilder (Bilddateien) ausliefern. Bei Hintergrundbildern per media queries min-width/max-width und min-resolution/max-resolution. Bei Vordergrundbildern dienen die Attribute srcset und sizes und das picture-Element dazu, responsive  images umzusetzen.

Dabei kann der Bildinhalt bei verschiedenen Größen durchaus unterschiedlich sein: die kleine Variante bspw. nicht eine Verkleinerung der großen, sondern ein Bildausschnitt – „art direction“.

LLAP 🖖