In eigener Sache: Das Design unserer Website in den letzten 10 Jahren
Seit der Gründung des Vereins vor 10 Jahren hat sich unsere Website stetig weiterentwickelt. Mittlerweile haben wir die 5. Version erreicht. Verfolgen Sie mit uns den Wandel der Seiten im Laufe der Zeit.
MANNdat 2004 – Jeder fängt mal klein an!
MANNdat 2006 – Ein professioneller Auftritt durch Typo3
MANNdat 2010 – Neuer Wein in alten Schläuchen. Jetzt arbeitet WordPress unter der Haube.
MANNdat 2012 – Die Monitore werden größer, das Layout wird großzügiger.
MANNdat 2014 – Die Monitore werden wieder kleiner, Smartphones erfordern ein responsives Design
MANNdat auf einem Smartphone, optimale Lesbarkeit und Navigation auf mobilen Geräten.
Hat Ihnen der Artikel gefallen? Bitte unterstützen Sie unsere Arbeit mit einer Spende.
Lesermeinungen
Schreiben Sie einen Kommentar
Bitte beachten Sie, dass Kommentare mindestens 5 und höchstens 1500 Zeichen haben dürfen.
Zitate können mit <blockquote> ... </blockquote> gekennzeichnet werden.
Achtung: Wenn Sie einen Kommentar von einem Smartphone verschicken, wird der Text manchmal von der Autofill-Funktion des Smartphones durch die Adresse ersetzt. Wenn Sie den Kommentar absenden, können wir den originalen Text nicht wiederherstellen.
„Dann erklären Sie uns “Webseiten-Bauern” doch einmal, wie Sie die responsive Navigation nur mit HTML gelöst hätten. Ein Stückchen Code wäre nicht schlecht. Wir lernen gerne dazu. Ein gedrucktes Prospekt verändert das Layout auch dann nicht, wenn es auf die Größe einer Briefmarke gefaltet wird. Kein Mensch würde es aber in diesem Format lesen. Das ist halt bei Webseiten anders.“
Das ist ja durchaus lösbar.
Das geht mit einer stinknormalen ungeordneten Liste
Die definieren sie als diplay: inline-block; (Fallback für IE7 nicht vergessen) . ul bekommt 100% oder wie sie es eben optisch wollen. und den können sie sogar fixe größen geben. und schon sind die sehr „responsive“. bei fixen breiten brechen die -Elemente dann je nach viewport-Breite um. geht natürlich auch prozentual und passen sich immer an die jeweilige Breite des Gerätes an.
Und differenzierte Anpassungen an die verschiedenen Viewport-Breiten lassen sich sehr gut über die MediaQueries bewerkstelligen.
Ab „Smartphone-Breite“ ca 480px lassen sich die Toggle-Navigationen auch viel schöner über eine normale ungeordnete Liste und per :target ein- und ausblenden. Ganz ohne Java-Script, reines CSS. Für die Browser, die das CSS3-Attribut nicht beherrschen, hilft das selectivizr-Skript weiter, das ältere Browser mit css3 -Attributen nachrüstet. Und ist nutzerfreundlicher und eleganter, als das jetzige DropDown-Menü, das hier auch nicht gerade optisch ein leckerbissen ist.
Da haben Sie gut beschrieben, wie wir es gemacht haben. Die Navigation ist eine ungeordnete Liste, und Javascript brauchen wir nicht für die Umschaltung auf mobilen Geräten. Das Dropdown ginge sicher schöner. Aber ein gemeinnütziger Verein wie MANNdat hat leider keine grenzenlosen Ressourcen. Da sind Kompromisse halt nötig.
„Das Dropdown ginge sicher schöner.. Aber ein gemeinnütziger Verein wie MANNdat hat leider keine grenzenlosen Ressourcen. Da sind Kompromisse halt nötig.“
ok ich habs im firebug gesehen :-)
Im prinzip wäre das toggle menü für die mobile version nur eine kurze anpassung der css für die ungeordnete navigationsliste :-) inline-block raus, stattdessen display: block und die li-elemente auf 100% breite. das wäre alles :-) ok die : target funktion des menü-buttons noch.
> Die Monitore werden wieder kleiner, Smartphones erfordern ein responsives Design
Das es das Konzept von „Fenstern“ gibt, die sich der Benutzer einstellen kann, scheint den meisten Webseiten-Bauern nicht in den Kopf zu gehen. Stattdessen werden Webseiten wie Prospekte gemacht, starr in ihrer Größe, obwohl HTML schon immer flexibel war. Oder, um es themengemäß zu sagen: Wer das Fenster nicht auf volle Größe macht, wird diskriminiert.
Dann erklären Sie uns „Webseiten-Bauern“ doch einmal, wie Sie die responsive Navigation nur mit HTML gelöst hätten. Ein Stückchen Code wäre nicht schlecht. Wir lernen gerne dazu. Ein gedrucktes Prospekt verändert das Layout auch dann nicht, wenn es auf die Größe einer Briefmarke gefaltet wird. Kein Mensch würde es aber in diesem Format lesen. Das ist halt bei Webseiten anders.
Fühlt sich da wer angegriffen? Dabei ist das alles doch nur Zeitgeist.
Ich nehme an, das hat was mit den eingesetzten Programmen zu tun. Damals, als noch einfache Seiten vorherrschten, waren sie in nahezu jeder Größe lesbar. Dann kamen die Generatoren und Publishing-Programme und damit das Prospekt-Ins-Web-Phänomen, Vollbild war (und ist meist noch) Pflicht. Erst mit dem Aufkommen von Weblogs ändert sich das wieder, die Seiten werden wieder leichter. Nun werden sogar Kleinbildschirme berücksichtigt. Allerdings auch wieder mit der, hier nicht zutreffend, Tendenz, von unnötig größen Fenstern auszugehen, bei der etwa das Menü an die Seite kommt.
Was ich den Webseiten-Bauern, gemeint: Webseiten-Erbauern, aber vorwerfe, ist, HTML, CSS und Co. zwar zu benutzen, sich aber nicht damit zu befassen. So war schon immer ausdrücklich davon auszugehen, das ganz unterschiedliche Ausgabemedien, insbesondere Fenstergrößen, zum Einsatz kommen, das bei Fenstertechnik eben nicht immer das Fenster den Bildschirm füllt, es Textbildschirme gibt, große Schriften, gar Braille.
manndat.de ist dabei noch die Seite, die mir mit der „neuen“ Technik am besten gefällt, obwohl für die Spalten maximalbreiten gesetzt sind.
> Das ist halt bei Webseiten anders.
Genau das wurde kaum irgendwann irgendwo mal reflektiert.
> wie Sie die responsive Navigation nur mit HTML gelöst hätten
Das ist die falsche Frage zur falschen Begründung
> Die Monitore werden wieder kleiner, Smartphones erfordern ein responsives Design
denn die Größe der Monitore sollte allenfalls eine kleine Rolle spielen. „responsives Design“, was immer das auch sein soll, ist dazu nicht nötig, HTML und CSS reichen, wie manndat.de ja nun selbst zeigt. Und das gibt es eben nicht erst seit neulig.
> Wir lernen gerne dazu.
Das scheint doch passiert zu sein. Das wollte ich damit gesagt haben. Wenn „Smartphones“ bessere Handhabung und Lesbarkeit bewirken, soll mir deren Verbreitung nur recht sein.
„Damals, als noch einfache Seiten vorherrschten, waren sie in nahezu jeder Größe lesbar.“
… sorry, aber sie schreiben etwas unsinn. das hat nichts mit zeitgeist zu tun. damals war die css-unterstützung einfach noch nicht soweit. erst durch die mediaqueries in html5 wurde eine anpassung an verschiedene viewports. und seiten auf großen monitoren „damals“ hatten dann ungefähr einen textbreite von 350 wörtern, das war super lesbar :-.)
Es wird Zeit, die andere Seite der Wippe wieder selbstbewusst zu besetzen. Mann, Mann Mann !