praegnanz.de büro für intervernetzte medien

Gerrit, 24.06.2010

Neue Referenz für flexible Layouts: Hicksdesign

Jon Hicks war schon immer einer der ganz großen Webdesigner, und ist unter anderem einer der wenigen ganz frühen Textpattern-User (genau wie ich). Nun hat er die Messlatte für flexible/fluide Weblayouts ganz weit rauf gesetzt.

Hicksdesign

Wir Webkrauts predigen ja seit langer Zeit, dass sich wahrhaft gute Webdesigns anpassen müssen an ihre Umgebung. Anders als gedruckte Zeitungen nehmen sie immer die Form an, die gerade am besten zur Nutzungssituation passt.

Bei Jon Hicks kommen nun verschiedene Techniken zum Einsatz, die seine Journalseiten auf extrem schmalen und auf extrem breiten Browserfenstern sehr hübsch zur Geltung kommen lassen:

  • Klassisch: Prozentangaben für Layoutboxen
  • Bilder und Grafikelemente skalieren ebenfalls nach Prozentwerten
  • Im CSS sorgen 4 media queries für 4 verschiedene Spaltenlayouts und Schriftgrade je nach Bildschirmbreite

Der letzte Punkt ist der eigentlich spektakuläre, denn das Umbrechen des Layouts in verschiedene Aufteilungen passiert ohne aufwendige JavaScript-Anfragen, sondern rein per CSS und pfeilschnell.

@media screen and (max-width: 500px) {
	nav ul{font-size: 0.75em;}}

@media screen and (max-width: 800px) {
	body { font-size: 95%; }}

@media screen and (min-width: 1024px) {
	body { font-size: 105%; }}

Dass Jon Hicks darüber hinaus Webfonts einsetzt und auch einiges an neuer HTML5-Semantik verwendet, macht die Sache noch beeindruckender. Schön, dass es auch im Jahr 2010 noch Webdesignhelden gibt, zu denen man aufschauen kann, und deren Websites man bewundern muss.

11 Kommentare

  1. Johannes am 24. Juni 2010 #

    Wow, das ist wirklich toll.
    V.A. auch die Gedanken »Wo packe ich welchen Bereich hin, wenn er am urspünglichen Bereich keinen Platz mehr hat?. So find ich den Umbau der Sidebar zu Header und »Footer« genial!

  2. Paul am 24. Juni 2010 #

    Wer ein wenig Spaß haben möchte, der möge sich das ganze mal im Internet Explorer (von mir in Version 8 getestet) ansehen und auch zügig die Fensterbreite verstellen. :-)

  3. f.zweig am 24. Juni 2010 #

    Eigentlich eine gute Idee, aber meines Erachtens ist das nur die Behebung eines Symptoms:

    Lässt man »Ich höre gerade dies«, »Lesezeichen dort setzen«, »Ich habe dies entdeckt«, »Ich habe jenes gezwitschert« und diesen ganzen Kram weg, braucht man selten mehr als zwei Spalten. Und die konnte man früher auch schon flexibel gestalten.

  4. Piep am 24. Juni 2010 #

    Kleine Offtopic-Anmerkung (ich bitte um Vergebung): Gerrit, ich kann mich mit deinen animierten GIF-Bildern nicht so recht anfreunden. Mir ist das gerade wieder aufgefallen, als ich den verlinkten Artikel bei Hicksdesign angeschaut habe, wo die Bilder einzeln eingebunden sind – das war richtig angenehm.

  5. Aileen am 25. Juni 2010 #

    Sowas hast du doch im letzten (oder vorletzten?) prägnanz-Design auch gehabt, oder? Dort haben sich die Boxen in der Seitenspalte ebenfalls an den vorhandenen Platz angepasst. Wo ist da jetzt der ganz große Unterschied zwischen dem, was du gemacht hast und dem, was da oben passiert, bezogen auf Punkt 3?

  6. Gerrit am 25. Juni 2010 #

    @Aileen: Bei mir waren das nur stumpfe Float-Boxen, die alle die gleiche Höhe hatten. Bei Hicks wird das Design jedoch in Abhängigkeit von der Bildschirmbreite nach deutlich intelligenteren Regeln neu zusammengesetzt. Ich habe damals die Bildschirmbreite überhaupt nicht ausgelesen, sondern einfach nur die Floatboxen floaten lassen. Großer Unterschied.

  7. Anselm Hannemann am 25. Juni 2010 #

    Ich finde das jetzt zwar gut, aber eben nichts unbedingt so besonderes. Mit der Dreamweaver CS5 Präsentation der Hype darum angefangen und Jon ist sicher nicht der erste, der das auf seiner Webseite anwendet.

    Die Technik ist aber genial, so kann man endlich auch nicht-fluid-Layouts als halb-fluid machen und zumindest an mehrere Geräte (Tablet, Handy, PC) optimieren.

    Ich finde allerdings auch, dass wirklich komplette fluid-Layouts ebenfalls mit dieser Technik augestattet werden, da die versch. Devices auch andere Layouts erfordern (Positionen etc.).

  8. Willi am 26. Juni 2010 #

    Und ich dachte immer, die media-Queries würden nach der Bildschirmgröße (und nicht dem Viewport) gehen und deshalb »starr« sein!? Also nur beim ersten Laden der Seite reagieren. Wenn sie auch dynamisch auf den Viewport reagieren können (selbst nach dem Laden der Website), wozu brauchen wir dann überhaupt die ganzen Javascript-Geschichten zum Umschalten? Oder ist das eine Neuerung aus CSS3? Denn die Media-Queries gibt es doch nun auch schon etwas längere Zeit, zumindest für moderne Browser.

  9. Anselm Hannemann am 28. Juni 2010 #

    @Willi: Media-Queries, wie hier gezeigt, sind aus dem W3C CSS3 Standard.
    Den Javascript-Kram habe ich nie gemocht und kaum verwendet. Dann lieber gleich eine komplett flüssige Seite…

  10. Bernd am 28. Juni 2010 #

    Also die Seite von Hicks ist durchaus wert sich mit den diversen »Tricks« die er verwendet mal genauer zu beschäftigen. Wie andere auch finde ich den Sprung von der Seite zu Header und Footer wirklich sehr gut.

    Ich hab gerade ein eher »furchtbares Erlebnis« hinter mir. ich arbeite an einem »alten« 4:3 Bildschirm (1600 * 1200) und wegen PC Problemen musste ich einige Tage am Laptop arbeiten. Also bei fast allen Seiten ärgere ich mich, weil ich da durch die Höhe von 786 Pixel eigentlich immer nur mehr am Scrollen war und verzweifelt versucht habe Bilder noch irgendwie als Ganzes auf den Bildschirm zu bringen..
    Irgendwie ist das »Breitbildformat« zwar enorm toll für Videos – aber eine Anpassung der Texte Bilder und sonstigen Inhalte an »Breitbild« hat eigentlich noch nirgends richtig stattgefunden. Ich glaube, dass da noch viel Arbeit auf alle zukommen sollte – irgendwann sollte man wirklich berücksichtigen, dass Bildschirme eben inzwischen viel mehr horizontalen Platz bieten und immer mehr Leute eben mobile Geräte mit weniger vertikalen Platz verwenden.

    Da sind solche »Tricks« wie unterschiedliche Positionierung von Menueleisten etc. sicher ganz schön – auch wenn ich mich natürlich frage ob es manche weniger versierte User nicht verwirrt wenn Menues plötzlich Ihre Position ändern.

    Alles irgendwie nicht so einfach

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.