Viewport lässt Tabellenspalte verschwinden

[Auge]

Hallo

vielen Dank für deine Antwort. Bei meiner Seite (sieh sie dir am großen Bildschirm an) ist mir wichtig, dass sowohl die Auswahl der Lebewesengruppen als auch die geografische Auswahl auf einer Seite zu sehen sind.

Das kannst du nicht sicherstellen. Die Seite kann grundsätzlich mit den unterschiedlichsten Clients aufgerufen werden, über deren Eigenschaften du nichts mit Sicherheit sagen kannst. Mehr als Vermutungen sind von Anbieterseite aus nicht möglich, so dass es die Aufgabe des Seitenanbieters ist, möglichst wenig Barrieren zu errichten. Soweit zum generellen.

Durch Ändern von Abständen und Entfernen von Leerzeichen habe ich diesen Teil so hinbekommen, dass er auf dem Handy im Querformat schön (also ohne Zeilenumbrüche in den Tabellenelementen) anzusehen ist (getestet mit Firefox, Chrome und der Samsung-Internet-App).

Was ich schlecht fände, wäre eine responsive Darstellung, bei der die Tabelle der Gruppen und die Tabelle der Orte bei zu schmalem Bildschirm untereinander erscheinen würden.

Mit hochformatig gehaltenem Smartphone (meine Standardhalteweise) funktioniert das natürlich nicht mehr. Da kommst du um eine untereinanderstehende Anzeige nicht mehr herum, was allerdings, um dein Argument, dass man die Funktionen dann nicht mehr findet, zu entkräfen, kein Problem ist, wenn die Filterfunktion im Inhaltsverzeichnis aufgeführt wird.

Du hast mit deinem gegenwärtigen Inhaltsverzeichnis offensichtlich die Fotoauflistung an sich im Blick. Man kann es aber auch als Verzeichnis der Funktionen der Seite auffassen. Im Sinne der Besucher deiner Seite halte ich es für richtig, das Verzeichnis auf die Seite und nicht nur einen Teil der Seite zu beziehen.

Abschreckende Beispiele sind für mich Blogs, die oft zahlreiche Informationen in Seitenleisten enthalten, die bei responsiven Darstellungen ganz nach unten geraten, wo sie niemand mehr findet. Diese Informationen ganz oben zu positionieren, vermüllt andererseits den Blogbeitrag mit Dingen, die man nicht jedes Mal neu lesen möchte.

Ja, das ist imemr wieder ein Problem. Niemand hat behauptet, dass es dafür eine generell gültige Lösung gibt. Für jeden Einzelfall ist eine eigene, passende Lösung nötig.

Was mich noch interessieren würde, ist deine Aussage, dass man die lange Tabelle der Tier- und Pflanzenarten besser anders darstellen könnte. Hast du dafür einen konkreten Vorschlag?

Wenn wir uns gedanklich durch eine passende HTML-Struktur eines Inhaltsverzeichnisses inspirieren lassen, ergibt sich daraus eine analoge Struktur für die Inhalte.

Nehmen wir mal an, die HTML-Struktur des Inhaltsverzeichnisses sähe folgendermaßen aus (ich habe mal frech den Filter mit reingenommen).

<ul id="inhaltsverzeichnis">
 <li><a href="#filter">Auswahlfilter</a>
 <li><a href="#tiere">Tiere</a> (297/681)
  <ul>
   <li>…</li>
   <li><a href="#insekten">Insekten</a> (236/517)
    <ul>
     <li><a href="#bienen">Bienen</a> (3/11)
     <li>…</li>
    </ul>
   </li>
   <li>…</li>
  </ul>
 </li>
 <li><a href="#pflanzen">Pflanzen</a> (20/59)</li>
 <li><a href="#pilze">Pilze</a> (8/25)</li>
</ul>

Das Verzeichnis ist eine verschachtelte Liste, in der die Punkte, die selbst Teilmengen von anderen Punkten sind, in eine eigene Liste, die Teil des Hauptpunktes ist, einsortiert werden. Beispiel sind die Unterpunkte bei „Tiere“ und die Unterpunkte von Teilmengen der Tiere, hier konkret die Insekten und deren Teilgruppen und Arten.

Für die Struktur der Vorschauen der Bildergalerien ergibt sich eine gleichartige Struktur.

<section id="tiere">
 <h2>Tiere</h2>
 <section>
  …
 </section>
 <section id="insekten">
  <h3>Insekten</h3>
  <div id="bienen">
   <h4>Bienen</h4>
   <div id="colletes-hederae">
    <h5><a href=""colletes-hederae.html">Colletes hederae</a>, Efeu-Seidenbiene</h5>
    <ul class="bilderliste">
     <li><a href="colletes-hederae.html#1"><img src="colletes-hederae-18-5670k.jpg" alt="Colletes hederae, Bild 1"></a></li>
     <li><a href="colletes-hederae.html#2"><img src="colletes-hederae-18-5678k.jpg" alt="Colletes hederae, Bild 2"></a></li>
     <li><a href="colletes-hederae.html#3"><img src="colletes-hederae-18-5686k.jpg" alt="Colletes hederae, Bild 3"></a></li>
    </ul>
   </div>
   <div id="osmia-cornuta">
    <h5><a href="osmia-cornuta.html">Osmia cornuta</a>,
   Gehörnte Mauerbiene</h5>
    <ul class="bilderliste">
     <li><a href="osmia-cornuta.html#1"><img src="osmia-cornuta-16-6010k.jpg" alt="Osmia cornuta, Bild 1"></a></li>
     <li><a href="osmia-cornuta.html#2"><img src="osmia-cornuta-16-6018k.jpg" alt="Osmia cornuta, Bild 2"></a></li>
     <li><a href="osmia-cornuta.html#3"><img src="osmia-cornuta-16-6028k.jpg" alt="Osmia cornuta, Bild 3"></a></li>
     <li><a href="osmia-cornuta.html#4"><img src="osmia-cornuta-15-3404k.jpg" alt="Osmia cornuta, Bild 4"></a></li>
     <li><a href="osmia-cornuta.html#5"><img src="osmia-cornuta-15-3417k.jpg" alt="Osmia cornuta, Bild 5"></a></li>
     <li><a href="osmia-cornuta.html#6"><img src="osmia-cornuta-15-3435k.jpg" alt="Osmia cornuta, Bild 6"></a></li>
     <li><a href="osmia-cornuta.html#7"><img src="osmia-cornuta-15-3443k.jpg" alt="Osmia cornuta, Bild 7"></a></li>
    </ul>
   </div>
  </div>
 </section>
 …
</section>
<section id="pflanzen">
 <h2>Pflanzen</h2>
 …
</section>
<section id="pilze">
 <h2>Pilze</h2>
 …
</section>

Das ist mein Entwurf ohne jegliche Formatierungen und mit durchaus diskutabler Elementauswahl (section versus div in den tieferen Verschachtelungen).

relevante Änderungen:

• Textabsätze (<p>) erhalten ein schließenden Tag (</p>) (sollten sie haben, das gilt natürlich auch für alle anderen Vorkommnisse)
• Bilder sind Listenpunkte
• Bilder haben Alternativtexte (müssen sie haben, hier bietet sich ein der Artenname mit Bildernummer als Text an)
• die nur fragmentarisch notierten Sektionen bekommen eine analoge Struktur mit ID, Überschriften und Unterelementen
• Umlaute (und eventuell weitere maskierte Buchstaben) werden als Buchstabe notiert („ö“ statt „ö“ in „Gehörnte“), die Maskierung ist unnötig

Vermutlich wird bei weiteren Vorschlägen anderer keine sehr viel andere HTML-Struktur herauskommen. Wenn die Struktur mitsamt anderen notwendigen Änderungen außen herum fest steht – und wirklich erst dann –, kann es an die Formatierungen gehen.

Tschö, Auge