Responsives Layout auf praegnanz.de
Ich habe mich heute abend zwei Stündchen hingesetzt und endlich das gemacht, was ich schon seit ca. einem Jahr vorhatte, nämlich das Layout von praegnanz.de für kleinere Bildschirme zu optimieren.
Dabei gehe ich in insgesamt vier Extra-Stufen vor, wobei es im Grunde nur zwei Hauptstufen sind, die mit drei Mini-Zwischenstufen ergänzt werden:
- Normal-Layout (ab 1070px Breite)
- praegnanz.de-Schriftzug wird eingerückt (780–1070px)
- praegnanz.de-Schriftzug verschwindet, Abstände zwischen den Spalten schrumpfen (717–780px)
- komplett linearisiertes Layout, linke Spalte entfällt (481–780px)
- Mobile-Safari-Schriftgrößenanpassung wird deaktiviert (unter 481px)
Noch sind nicht alle Bereiche gut zugänglich und hübsch gemacht, aber in Kürze werde ich mich um die entsprechenden Anpassungen kümmern. Irgendwann muss man mal anfangen!
jonathan am 20. Juli 2011 #
das mit den Elementen ausblenden usw hast du dann mit dem
@media screen and (max-width: 481px)
gemacht, oder?
wie jede Änderung auf praegnanz.de, inspiriert mich auch diese wieder. Danke dafür!
Stanislav am 20. Juli 2011 #
cool :D
asaaki am 20. Juli 2011 #
Ah, wie ich sehe, benutzt du die media queries; was mich daran erinnert, dass ich das bei meinen Designs auch einmal ausprobieren wollte.
Scheint jedenfalls Mode zu sein. ;o)
Paul am 21. Juli 2011 #
Gut umgesetzt.
korbinian am 21. Juli 2011 #
der flattr button schaut noch komisch aus.
Martin am 21. Juli 2011 #
Aufm Androiden (Dolphin Browser und Built-In Browser), Safari @ Mac und IE @ Win7 funktionierts, in Chrome leider weder unter Mac OS X noch unter Win7
Gerrit am 21. Juli 2011 #
@Martin: Drück ein paarmal Apfel+R im Chrome, dann geht’s.
Martin am 21. Juli 2011 #
Tatsächlich, nach einigen Malen refresh klappts, das ist ja seltsam. Weist du woran es liegt, dass man mehrmals refreshen muss, bis es klappt?
Frank am 21. Juli 2011 #
Du solltest die deinen Flattr-Button nochmal bei kleinem Layout ansehen, der wächst recht unproportional.
siehe http://awesomescreenshot.com/0f5h0arf6
Gerrit am 21. Juli 2011 #
@Martin: Das Caching der CSS-Datei ist per HTTP-Header recht permanent eingestellt ;-)
@Frank: Sollte gefixt sein. Guck mal!
Benjamin am 21. Juli 2011 #
Sehr schön, da macht es Spaß, mit der Größe des Fensters zu spielen. Eine Kleinigkeit ist mir aufgefallen beim resizen mit Firefox: zwischen 3. und 4. verschwinden die Bereiche »Diesen Artikel gut finden« und »Aktuelle Artikel«.
Frank am 21. Juli 2011 #
Sieht super aus!
Johannes am 21. Juli 2011 #
Sehr schick! Auchhabenwill. :)
Chris am 21. Juli 2011 #
Wirklich gut umgesetztes responsive Layout. Sehr kreativ, dass der preagnanz-Schriftzug links neben dem Menü rechts andockt und den Menüpunkt dann einrückt!
Liebe Grüße,
Chris
Frank am 21. Juli 2011 #
Yup; bestens
http://awesomescreenshot.com/0a7h0db3c
Der Caspers am 21. Juli 2011 #
Nett. Hatte mit der Idee auch mal vor einiger Zeit bei meiner Heimseite rumgespielt und zusätzlich noch transitions zwischen den Zuständen als Eye Candy eingebaut: tomascaspers.de
herr fischer am 21. Juli 2011 #
teilweise kommt noch ein horizontaler scrollbalken. UND ich bin mir nicht sicher ob man fürs phone inhalte einfach ausblenden sollte, ich versuche immer alles irgendwie unterzubringen, bin mir nicht ganz sicher was der richtige weg ist, kommt vielleicht auf die seite an. ansonsten eine runde sache! hier meine letzte responsive layout seite, es geht auch mit photoshop-intensiveren layouts, allerdings sitzt man dann auch mal länger als 2 stunden: http://www.undercroft-official.com/
Robert am 21. Juli 2011 #
Sehr fein. Sieht toll aus.