Best Practice: Aufbau "responsiver" Header mit Text und Bild

[FredBow]

Hallo Miteinander!

Ich möchte einen Header für eine Webseite bauen. Der Header soll sich dynamisch an die verschiedenen Displaygrößen anpassen. Der Header besteht aus einem Bild (Portrait) und Texten. Die Texte sollen dabei nicht das Portrait überdecken. Aber in das technische Bild (vier-eckiger Kasten) sollen sie reinragen.

In etwa so könnte das ganze für die verschiedenen Displays aussehen:

Mit welchem Ansatz baut man sowas am Besten auf?

Positioniert man die einzelnen Elemente absolut im Header? Löst man das mit flippenden Boxen? Macht man quasi doppelte Container, die je einen unterschiedlichen Aufbau enthalten und je nach Displaygröße versteckt / angezeigt werden? Es sind ja im Grunde zwei verschieden Arten von Aufbau: a) Text oben - Bild unten b) Text links - Bild rechts.

Wenn ich das ganze einfach nur mit einem der Grids (z.B. Bootstrap) löse, dann geht das zwar technisch (allerdings ohne die Überlappung), sieht aber optisch teilweise sch... aus. Ich bin dann nur am MediaQueries werfen, um hier und da was zurechtzurücken.

Irgendwie hab ich optisch vorallem mit den Mittel-Größen noch Schwierigkeiten. Das sieht immer etwas komisch aus. Ist irgendwie nicht Fisch und nicht Fleisch.

Sind solche Überschneidungen von Text und Bild per se mit Schwierigkeiten verbunden, so dass man das besser läßt?

Was macht man am besten mit der Schriftgröße? Passt man die an oder läßt man die auf einer Größe? Hab irgendwo mal gelesen, dass das uncool sei, die Größe ständig anzupassen. Was ich allerdings (noch) nicht so recht nachvollziehen kann ...

Hoffe, ich konnte mich halbwegs verständlich ausdrücken. Ist etwas schwierig in Worte zu kleiden ohne Romane zu füllen

Falls da jemand einen Tipp hat, wäre ich happy!
Fred

 

[Myhar]

Was spricht dagegen, das Bild als Hintergrundbild einzubinden? dann hast du das Problem mit dem "überlagern" nicht und so weit ich es erkennen kann ist das Bild ja eigentlich auch ein Hintergrundbild?

Was die Schriftgröße angeht: Niemand (die allerwenigsten) ändert die Größe des Browsers beim surfen. Für den User ändert sich die Größe bei einem Surf-Vorgang also nicht. Ruft er die Seite also einmal mit PC und einmal mit Smartphone auf, dann ist für ihn nur wichtig, dass alles lesbar ist. Und Schriften werden am Smartphone zB auch kleiner dargestellt als am PC, also das Browserfenster kleiner schieben und dann die Schriftgröße anpassen ist eher nicht zu empfehlen. Da wirklich mit einem richtigen device testen.

 

[cythux]

Da empfehle ich Dir die Graphik als SVG.

Das Browserfenster zu skalieren bringt nichts, du jedoch die Entwicklertools von Chrome selber nutzen, dort kannst du auch verschiedene Mobile Devices simulieren.

Alternativ kannst du auch http://www.browsersync.io/ nutzen, oder das Tool Prepros

 

[FredBow]

Hey, Danke für Euer Feedback

Was spricht dagegen, das Bild als Hintergrundbild einzubinden?

Meine Grafik oben ist "nur" eine schematische Darstellung des ganzen. Das "Königskind" ist nachher ein Foto - ein Portrait. Das Element ist nicht nur schmuckes Beiwerk, sondern Akteur. Wenn sich dem der Text über die Nase schiebt, dann wird das blöd
Wenn man die Grafik als Hintergrund einbindet, dann kann sich je nach Größe des Displays die Schrift ungehindert plazieren. Auch da, wo sie nicht hin soll.

Was die Schriftgröße angeht: [...] also das Browserfenster kleiner schieben und dann die Schriftgröße anpassen ist eher nicht zu empfehlen. Da wirklich mit einem richtigen device testen.

Mein Fuhrpark an unterschiedlichen Devices ist noch recht übersichtlich Daher hoffe ich mittels der kleinen Tools zur Simulation der diversen Display-Größe ungefähr in die Nähe dessen zu kommen.

Da empfehle ich Dir die Graphik als SVG.

Ah, ne spannende Geschichte! Hatte da bisher immer einen Bogen drum gemacht. Muss ich mir mal in Ruhe anschauen.

Das Browserfenster zu skalieren bringt nichts, du jedoch die Entwicklertools von Chrome selber nutzen, dort kannst du auch verschiedene Mobile Devices simulieren.

Genau dieses Tool und das Pendant vom Firefox nehme ich Ist es denn sinnvoller "nur" die ganz konkreten Displaygrößen der jeweiligen Devices (iphone 4,5,6, nexus 4,5, kindel fire, usw.) zu testen oder besser stufenlos? Theoretisch kann doch "morgen" ein Gerät mit einer Zwischengröße am Start sein ...

Alternativ kannst du auch http://www.browsersync.io/ nutzen, oder das Tool Prepros

Verstehe ich es richtig, dass ich mit diesen Tools einen kleinen lokalen Server habe, der mir bei Änderungen sofort und ohne Neuladen eine aktualisierte Seite anzeigt? D.h. ich stell um mich herum meine "20" Geräte auf, ruf die verschiedene Browser mit dem lokalen Server auf und sehe um mich rum sofort die Änderungen in Echtzeit ohne auf jedem Gerät erst klicken zu müssen? Klingt nicht schlecht

Fred

 

[cythux]

hier kannst du es live sehen

 

[HannoGurke]

Was die Schriftgröße angeht: Niemand (die allerwenigsten) ändert die Größe des Browsers beim surfen.

Oha, erzähle das mal einen Menschen mit Sehbehinderung, der auf eine Möglichkeit der Schriftvergrößerung angewiesen ist!

 

[Myhar]

Ich denke auch der wird sich die Größe einmal einstellen und dann nicht mehr ändern? Das war es was ich meinte ;-)