Problem mit dem Seitenlayout, keinerlei Erfahrung

[Rolf B]

Hallo Matthias,

das Problem sind nicht die 300 Browser. Das Problem ist dein fixiertes Layout.

Du schreibst, keine Erfahrung zu haben. Das macht es nicht einfacher, denn für die heutigen Geräte brauchst Du so genanntes responsives Layout, was einige modernere CSS Techniken benötigt um zu wirklich gut aussehenden Seiten zu führen. Unser Wiki hat da Tutorials.

Du musst Dir überlegen, wie der Header auf einem Smartphone (oder generell auf einem schmalen Viewport) aussehen sollte. Du kannst da nicht alles haben: Sonnensymbol, Yoga-Bild, Adresse und Bild der Lehrerin. Man könnte das Yoga-Bild oder das Lehrerin-Bild in die Sonne hineinsetzen, man könnte die Adresse auf eine separate Kontaktseite auslagern.

Um die Darstellung für unterschiedliche Viewportgrößen umzuschalten, verwendet man Medienabfragen (mehr dazu in unserem Wiki). In einem Stylesheet schreibt man z.B.:

@media (min-width: 40em) {
   /* CSS Regeln für Viewports ab 40em Breite */
}

Wo für Dich der ideale Umschaltpunkt ist, musst Du für deine Seite ermitteln. Was ein em ist, hängt von den Anwendereinstellungen ab. Wer einen großen Font verwendet (oder starken Zoom), für den sind 40em viel mehr als für Freunde der Lupenschrift. Für deine Nutzer heißt das aber: Wenn jemand auf dem Desktop stark zoomed, oder den Browser schmal macht, bekommt automatisch die Mobilansicht.

Manche machen auch 3 Layouts, mit 2 Umschaltpunkten.

Gestalte deine Seite also erst einmal so, dass sie auf einem Smartphone gut aussieht. Das nennt man "mobile first" und ist - angesichts der Dominanz von Smartphone-Nutzern - der heute übliche Weg zum Seitenlayout. Und dann sorge mit Media-Abfragen dafür, dass Du auf Bildschirmen, die breit genug sind, eine dafür angemessenere Ansicht bekommst.

Ich habe Dir mit JSFiddle ein Beispiel gemacht, was mit Media-Abfragen und geschicktem CSS möglich sein kann. Darin verwende ich (was Du Dir dann ggf. in unserem Wiki durchlesen solltest)

• display:flex, um das h1-Element unten anzuordnen
• h1::after, um das Logo-Bild per CSS einzusteuern
• Ein JPG Bild der Wikipedia, um zu zeigen wie man auch ohne transparenten Hintergrund ein rundes Logo hinbekommt. Das ist für die folgende Bemerkung zu Bildern wichtig
• drei Media-Breaks für eine Variation der Darstellung bei verschiedenen Breiten. Das Bild der Lehrerin ist ganz bewusst als background-image eines ::after Elements erstellt, damit es bei schmalen Viewports überhaupt nicht erst vom Server geholt wird.

Noch ein Hinweis zu deinen Bildern: es bringt wenig, ein 600x600 Bild mit 283KB Datenmasse auf 180x180 darzustellen. Eine höhere Auflösung als die dargestellte Größe ist okay, darüber freuen sich die Leute mit Retina-Displays, aber die doppelte Auflösung reicht völlig. Und schon ist das Bild auf 134KB herunter. Speicherst Du es als JPG mit 30% Qualität, sind es plötzlich nur noch 25KB. Mobilnutzer freut das. Natürlich fehlt Dir dann der transparente Hintergrund, aber da dein Logo rund ist, kannst Du dich bei einer Größe von 180x180 mit einem border-radius von 90px retten. Bzw. wenn Du korrekterweise mit der Maßeinheit em arbeitest, kannst Du eine Größe von beispielsweise 10em mal 10em und einem border-radius von 5em verwenden.

Das ist keine Pfennigfuchserei für Leute die sich keinen Datentarif leisten wollen. Es gibt eine Menge Regionen in diesem unserem Lande, wo man kein G4 hat und sich mit EDGE quälen muss. Unnötig große Bilder führen dann zum vorzeitigen Verlassen der Seite.

Rolf