Skip to content

Endlich Redesign. Responsive Düsiblog

Nach 6 Jahren ist das Düsiblog lange aus dem letzten Design und dessen Vorgängern herausgewachsen.

Düsiblog Kopfbereich

alt versus neu

Düsiblog Kommentarbereich

Da ich das Bild im Kopfbereich übernahm und das neue Design auch von blau bestimmt ist, stellt das neue Design einen behutsamem aber deutlichen Unterschied dar.

2k11

Das aktuelle Design heißt 2k11 und stammt aus den Tasten des begnadeten Matthias Mees. Als ich letztes Jahr Matthias’ Ankündigung, ein "Responsive Design" Template für Serendipity zu entwickeln, las, wusste ich dass ich dieses Template nutzen möchte. Was für moderner Schnickschnack genau hinter 2k11 steckt, könnt Ihr auf der Projektseite lesen.

In 12 Dateien nahm ich Änderungen vor, um das Template anzupassen. Ich hoffe, das Konzept hinter 2k11 dadurch nicht zu sehr zu strapazieren. Notfalls haut mir Matthias bestimmt auf die Finger... ;-) Das Plugin "linkwithin" ist jedenfalls nicht responsive, aktuell allerdings lediglich ein Test.

Responsive Design

"Responsive Design" heißt so viel wie "reagierendes Webdesign". Das heißt, dass sich die Seite so anpasst, dass sie auf das entsprechende Gerät, auf dem sie gerade angezeigt wird, passt. Das könnt Ihr simulieren, in dem Ihr Euer Browserfenster in der Breite langsam verkleinert und euch währenddessen den Inhalt des Blogs und die kleiner werdenden Bilder anseht. Bei anderen Internetseiten wird einfach der Inhalt "abgeschnitten", wenn das Browserfenster verkleinert wird. Mehr könnt Ihr in den weiterführenden Links nachlesen.

Noch ein paar Screenshots von mobilen Endgeräten:

Samsung Galaxy SII: 480 x 800 Pixel

Düsiblog Galaxy SII Kopfbereich

Düsiblog Galaxy SII Foto quer

Düsiblog Galaxy SII Foto hoch

Düsiblog Galaxy SII Text hoch

Düsiblog Galaxy SII Text quer

Sony Tablet S: 1280 x 800

Die Ansicht im Querformat ist bei der Breite langweilig. ;-)

Sony Tablet S quer

Kindle 600 x 800 Pixel bei 167 dpi, 16 Graustufen

Düsiblog auf Kindle

Düsiblog auf Kindle

Weiterführende Links

Stay blogged. 8-)

Euer Matthias



Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Luigi am :

Feine Sache, ist übersichtlicher als der Vorgänger und macht einen sehr aufgeräumten Eindruck. Bist du schon immer mit s9y unterwegs? Ich meine du hattest mal WP am Start.

Matthias am :

Guten Morgen Luigi,

danke dir. Ja, ich bin seit Gebruar 2006 mit Serendipity unterwegs. :-)

Viele Grüße

Matthias

Violine am :

Aufgeräumter und leichter sieht es jetzt auf jeden Fall aus.

Oha, ich hatte ein heftigeres Redesign erwartet. Wie man das sonst so kennt. Da ist mit Kontinuität in der Regel nichts. Aber das hier ist ein vorsichtiges Facelifting.

Matthias am :

Hi Violine,

ja, optisch ist es ein schöner Schliff. Die Technik darunter ist das Neue und Wegweisende. Stichwort "Responsive Design". :-)

Matthias Mees am :

Warum sollte ich Dir auf die Finger hauen? Du hast ja die Arbeit damit, bei neuen Versionen Deine Änderungen zu backporten. :-D

Valentin am :

Sieht sehr schön aufgeräumt und übersichtlich aus.

Das steht bei meinem Blog noch aus. Ich bin noch auf der Suche nach einem passenden Responsive Theme für Wordpress.

Matthias am :

@ Matthias

Hehe, da davor graut mir auch. Ich habe aber alles dokumentiert. :-) Das LinkWithin Plugin ist nicht responsive, aber auch nicht so breit...

@Valentin

Vor allem habe ich recht viele Seitenleisten Plugins entfernt, das hat Überwindung gekostet. :-D

Matthias Mees am :

Schmeiß mal in Deine user.css (oder wo Du sonst eigene Styles ablegst):

CODE:
.linkwithin_inner {</p><p class="break">height: auto;</p><p class="break">max-width: 100%;</p><p class="break">}

Eventuell reicht das schon. Falls nicht, wird es etwas komplizierter, dann willst Du definitiv innerhalb eines Media-Queries arbeiten und vermutlich auf die einzelnen Boxen innerhalb des Plugins losgehen – padding und border wären die üblichen Verdächtigen, die das Plugin insgesamt zu breit machen.

(Nein, das ist eher nichts für den 2k11-Kern, dafür ist das Plugin einfach zu wenig verbreitet.)

Matthias am :

Danke Matthias!

Ich teste ein wenig weiter... :-)

duesiblog am :

@yellowled jetzt 2k11 auch auf dem Kindle: http://t.co/6RzjLAL7 :-)

Kommentar schreiben

:'(  :-)  :-|  :-O  :-(  8-)  :-D  :-P  ;-) 
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt. Weitere Hilfe zur Textformatierung.