Frage zum Wiki-Artikel Responsive Bilder / resolution switching

[curtis]

Hallo zusammen,

da seit den letzten beiden Updates von Firefox meine Website auf Mobilgeräten nur noch ganz winzig dargestellt wird, bin ich seitdem auf der Fehlersuche.

Inzwischen habe ich festgestellt, dass der Browser das Logo des Seiten-Headers, das 1050 px breit ist, auf dem Smartphone ebenfalls in voller Breite darstellt; dadurch wird der Rest natürlich kleiner, und ich nehme an, dass genau das die Ursache ist. Also hoffte ich, durch Resolution Switching (mit srcset) den Fehler beheben zu können, indem ich einfach mehrere Größen des Logos anbiete.

<img src="logoneu1-1050.png"
     alt="Header-Logo"
     srcset="logoneu1-1050.png 1050w, 
	           logoneu1-850.png 850w, 
              logoneu1-600.png 600w, 
              logoneu1-500.png 500w, >
 	           logoneu1-400.png 400w" >

...Das Ganze funzt jedoch nicht, d. h. auf dem Desktop wurde daraufhin die größte Größe (1050 px) übergroß, sprich viel zu groß und dadurch verzerrt, dargestellt (über die volle Bildschirmbreite von 1920 px, während die Seite selbst nicht die volle Bildschirmbreite, sondern nur zentrierte 1100 px einnimmt).

Ohne srcset wird das Logo wieder ganz normal dargestellt...

Erst dachte ich, dass das mit der style.css kollidiert, doch dort ist als maximle Breite tatsächlich 1100 px für die Seite angegeben, insofern dürfte das Logo bei Anwendung von scrset nicht so stark verzerrt werden.

Hat jemand vielleicht eine Idee, woran das liegen könnte, bzw. wo ich den Fehler suchen könnte?

Vielen Dank schon mal!

[Matthias Scharwies]

Servus!

Hat jemand vielleicht eine Idee, woran das liegen könnte, bzw. wo ich den Fehler suchen könnte?

Gib mal deinem img eine max-width von 100%; height: auto;

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Liebe(r) curtis,

verwendest Du schon eine passende Meta-Angabe?

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

Liebe(r) curtis,

verwendest Du schon eine passende Meta-Angabe?

Ja, die Seite ist im Linksymbol verlinkt.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=4.0">

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo curtis,

Ich habe das Thema selbst noch nicht gehabt, aber eventuell hilft dir unser Artikel zu responsiven Bildern weiter.

Rolf

[Matthias Scharwies]

Servus!

Hallo curtis,

Ich habe das Thema selbst noch nicht gehabt, aber eventuell hilft dir unser Artikel zu responsiven Bildern weiter.

Da hat er ja das Bsp. mit den verschiedenen Versionen her.

Ich glaube, dass man so ein Banner aber eher als SVG und dann als Hintergrundbild realisieren sollte. Mehrere srcset sind für so eine Grafik Overkill.

Herzliche Grüße

Matthias Scharwies

[curtis]

Hallo zusammen,

erst mal vielen Dank!

Das Festlegen der maximalen Breite mit „100%“ hat leider (erst mal) nix gebracht.

Als Alternative habe ich mal eine Maximalbreite von 1100 px angegeben und die Auswahl der Logos auf 2 reduziert (1050 px und 400 px), was zumindest bewirkt hat, dass die Darstellung auf Mobilgeräten daraufhin beinahe korrekt war, sprich: So, dass man damit leben könnte. Allerdings wählt der Android-Firefox dann trotzdem das große Logo und scheint die 400-px-Version tapfer zu ignorieren. Und gleichzeitig torpediert diese Einstellung wiederum die Darstellung auf dem Desktop - jetzt wird das Logo (1050 px) wieder übergroß und verzerrt dargestellt. Funzt also nicht.

(Ich benutze übrigens eine Test-Seite dafür, die ich jetzt jedoch wieder gelöscht habe.)

Wie man so etwas als Hintergrund-Bild realisieren kann - hmpf. Keine Ahnung... so gut ist mein css auch wieder nicht.

Stichwort "css": Da der Firefox ja beharrlich die kleinere angebotene Bildgröße ignoriert, hatte ich jetzt gerade mal die Eingebung, statt des resolution switchings die style.css im Bereich der Angaben für Mobilgeräte mit einer maximalen Breite für dort gezeigte Bilder zu versehen, also

header {
        img {
    width: 100%;
  }	  
}

und tatsächlich funktioniert das auch, dass das große Logo entsprechend verkleinert angezeigt wird (aber auch nur dann, wenn in den einzelnen Seiten der entsprechende Vermerk

max-width="100%"

für das Logo angegeben ist).

Einziger Nachteil: Beim Kippen des Bildschirms auf Querformat wird dieselbe Größe wie die im Hochformat beibehalten. Nein, nicht einziger Nachteil - diese Version des verkleinerten 1050er-Logos überdeckt dann auch den Vermerk "mobile Version" im Header. Also noch ein Problem.

Aber dass zumindest im Hochformat schon mal eine vernünftige Anzeige des Header-Logos erfolgt, ist schon mal ein riesiger Fortschritt! D. h. ich muss im Prinzip jetzt nach und nach die einzelnen Seiten entsprechend anpassen, um den Lesern zumindest schon mal diese Verbesserung anbieten zu können - aber da es ja sowieso draußen regnet, kann ich das die Tage ja mal machen...

Vielen Dank an Euch!

Herzliche Grüße, Curtis

[Matthias Scharwies]

Guten Morgen Curtis,

Wie man so etwas als Hintergrund-Bild realisieren kann - hmpf. Keine Ahnung... so gut ist mein css auch wieder nicht.

Dafür hast Du in deinem Stylesheet aber ganz schön viel drin! 😀

Ich habe mal eine Testseite nur mit dem Header gebaut: Responsiver Header

Dein HTML ist ok:

<header>
    <img src="https://www.futuremania.de/img/logoneu1.png" width="1100" height="110" alt="FUTUREMANIA" itemprop="image">
    <p><a href="index1.htm" title="zurück zur Startseite">FUTUREMANIA - The Captain Future Site</a></p>
</header>

Ich habe Dein CSS aufgeräumt:

So ist font-weight:normalbereits in deiner font: normal 1em/125% …- Angabe drin, kann also weg.

Die Schriftgröße ist gut - ich würde sie später nicht kleiner machen, sondern anderes (H1) noch größer.

Im Header brauchst du keine schwarze Schriftfarbe und schwarzen Schatten, das ist ja alles schon für den body deklariert.

(So etwas siehst du, wenn du in den Seiteninspektor schaust.)

Jetzt zu Deinem Bild:

<img src="logoneu1.png" width="1100" height="110" alt="FUTUREMANIA">

Die width-Angabe ist gut, um den Platz freizuhalten, das Bild muss auf schmalen Bildschirmen aber eben kleiner dargestellt werden. Das gilt für alle Bilder:

img {
	max-width: 100%;
	height: auto;
}

Unten siehst du eine Variante mit Hintergrundbild - da passen die Abstände (noch) nicht.

Das dazugehörige CSS sieht nicht viel anders aus als dein Verlauf für den oberen Header:

#background-image {
	background: 
		url("https://www.futuremania.de/img/logoneu1.png") no-repeat 90% center, 
		linear-gradient(to bottom, #132842 30%, #3c4f66 100%);
		padding: 0;
	background-size: 100%;	
}

Banner oder Logo?

Das Bild doppelt ja deinen Titel - ich würde versuchen einen freien Font für "Futuremania" zu bekommen und das als Text darzustellen, dann müsstest du nur das rechte F im Sechseck positionieren.

resolution switching

So etwas brauchst du, wenn du qualitativ hochwertige Fotos darstellen willst, die je nach Viewport auch andere Bildaussschnitte zeigen (Art Direction). Nicht um ein Banner an den Viewport anzupassen

Das Template ist von Engin Yildiz - der war früher auch mal hier aktiv. Hast Du Kontakt mit ihm?

Herzliche Grüße

Matthias Scharwies

[curtis]

Hallo Matthias,

erst einmal möchte ich mich ganz herzlich bedanken für Deine Hilfe! Du hast Dir ja enorm Mühe gemacht... und das hat mir das Website-Leben inzwischen ziemlich erleichtert.

Die letzten Tage habe ich damit verbracht, verschiedenes auszuprobieren - unter anderem, vielleicht doch einen Font von Typekit oder Google einzubinden (da passt aber keiner) bzw. verschiedene andere Versionen des Logos zu erstellen u. v. m., darum hat das jetzt gedauert mit der Antwort.

Inzwischen habe ich jetzt Deine Lösung mit der Implementierung als Hintergrundbild umgesetzt, denn dadurch ist die Seite auf Smartphones endlich wieder gescheit benutzbar. Jetzt fehlen nur noch Aufräumarbeiten. An dieser Stelle noch mal vielen lieben Dank!

Und ja, vielleicht werde ich irgendwann doch mal bei Engin anfragen... Bislang hatte ich zwar immer den Ehrgeiz, die Dinge doch noch alleine hinzukriegen (man lernt ja dazu und wird dadurch nicht dümmer ;-) ), aber irgendwann übersteigt das dann doch meine Kenntnisse bei weitem...

Herzliche Grüße, Curtis

[Rolf B]

Hallo curtis,

ich war eine ganze Zeit anderweit beschäftigt und konnte mir deine Seite gerade erst von innen anschauen.

Ob sich dein Bildproblem nicht anders lösen lässt, kann ich jetzt nicht mehr nachstellen. Wenn es als Hintergrundbild funktioniert - ok.

Ich hätte aber ein paar Hinweise.

Seitennavigation

Deine Navigation gehört nicht in ein aside. „The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content“. Richtig wäre, die ganze Navigation als ein <nav> auszuzeichnen und dieses nav an den linken Rand zu setzen. Vor allem ist es falsch, den nav Elementen die gleiche ID zu geben, IDs müssen auf der Seite eindeutig sein.

<nav id="hauptnavigation">
<h2>CF Info Base</h2>
<ul>...</ul>
<h2>Analysen</h2>
<ul>...</ul>
<h2>News</h2>
<ul>...</ul>
<h2>Soziale Netzwerke</h2>   <!-- h2, nicht h3! -->
<a href...>...</a>
<a href...>...</a>
<a href...>...</a>
</nav>

Deine h3-Überschrift für Soziale Netzwerke sollte eine h2 sein, weil sie logisch gleichrangig zu den anderen Navigationsüberschriften ist. Als h3 wäre sie den News untergeordnet. Wenn Du sie anders formatieren willst, gib ihr eine Klasse - aber das tust Du ja nicht. Ob die Social Links ebenfalls eine Liste sein sollten (die LI kann man per Flexbox nebeneinander setzen), weiß ich jetzt nicht recht, es würde aber zum Rest der Navigation passen. Würde ich dann so machen:

<nav id="hauptnavigation">
...
<h2>Soziale Netzwerke</h2>
<ul class="social-links">
<li><a href="..."><img ...></a></li>
<li><a href="..."><img ...></a></li>
<li><a href="..."><img ...></a></li>
</ul>
</nav>

#hauptnavigation .social-links {
   display: flex;
}

Microdata

Dein Gebrauch von Microdata ist fehlerhaft. Die Attribute itemscope und itemtype definieren ein Element als Item. Die Propertys des Items müssen sich aber auf Elementen befinden, im im DOM unterhalb des itemscope-Elements liegen. Bei Dir liegen sie teilweise nebeneinander (z.B. Book/author oder CreativeWork/character) und teils liegen itemprop Elemente außerhalb eines itemscope.

footer

Die footer-Navigation sollte ebenfalls nur ein nav sein.

<footer>
  <nav id="footerMenu">
    <section>
      <h2>Sonstiges</h2>
      <ul>...</ul>
    </section>
    <section>
      <h2>Seite &amp; Navigation</h2>
      <ul>...</ul>
    </section>
    <section>...</section>
    <section>...</section>
  </nav>
</footer>

Eine ID ist eigentlich nicht nötig, höchstens um vergleichbare Spezifitäten für die CSS Regeln zu erzeugen. Die nav Elemente im Footer kannst Du jedenfalls im CSS auch mit dem Selektor footer nav ansprechen (du hast ja nur einen Footer auf der Seite). Falls Du in Untersektionen noch Zusatzfooter hast, sprich den Hauptfooter mit body > footer nav an. Überreichlich Infos zu CSS Selektoren findest Du im Wiki. Jedenfalls gilt auch hier: 4 gleiche IDs sind nicht zulässig.

Breadcrumb

Eine Breadcrumbnavigation brauchst Du dann, wenn du eine Website mit mehrstufigen Menüs hast. Die hast Du, beispielsweise findet man die Hauptcharaktere der Pulps nur, wenn man den Link auf der Seite Original-Erzählungen klickt. Der Sinn der Breadcrumb ist es, auf solchen Unter-Unterseiten den Pfad darzustellen, auf dem man dorthin gelangt ist (was kompliziert sein kann, wenn eine solche Unter-Unterseite von mehr als einer Unterseite verlinkt ist). Zumindest sollte dort stehen, zu welcher Unterseite die Unter-Unterseite laut Sitemap gehört.

Auf der "Hauptcharaktere der Pulps"-Seite sollte die Breadcrumb also zweistufig sein – analog zu unserem Wiki: einfacher Selektor ist auf der 4. logischen Ebene, darum stehen in der Breadcrumb die 3 übergeordneten Seiten. Die Seite selbst (dein "Sie sind hier") ist kein Link. Du kannst das so darstellen:

Sie sind hier: Die Original-Erzählungen / Die Charaktere aus den Pulps

Ohne diese Mehrstufigkeit kannst Du auf die Breadcrumb verzichten. Es ist auch ok, den Linktext in der Breadcrumb kürzer zu fassen als die Überschrift der Seiten, auf die er verweist.

Seitenlayout

Eventuell solltest Du auch überlegen, das gesamte Seitenlayout per grid zu steuern. Durch das Links-Floaten der Seitennavigation und das Rechts-Floaten von Breadcrumb und Main-Artikel passt die Darstellung zwar, aber float ist für diesen Zweck früher lediglich zweckentfremdet worden. Heute erzeugt man sowas per Grid - guck mal in unser Wiki: Einführung ins Grid-Layout.

Du kannst mit Mediaabfragen das Grid-Template einfach umschalten und die ganze Seite passt sich an. Vorteil des Grid-Template ist auch, dass Du die komplette Festlegung, welches Element sich wo befindet, an einer Stelle hast.

Die Hauptnavigation solltest Du dann aus dem main Element herausziehen.

Rolf