Wissen

Piratebox – Responsive Design

Die neue Optik der Piratebox

Die Front-Ends im Web werden immer weiter entwickelt und gehen verstärkt auf die mobilen Endgeräte ein. Zuerst war es Trend zwei unterschiedliche Themes für Web und Mobil Interface zu nutzen, jetzt geht der Trend langsam aber sicher zum Responsive Design. Was ist ein Responsive Front-End? Ein Responsive Webdesign passt sich ganz automatisch der Auflösung des Endgerätes an, in dem es Menüleisten und Inhalte je nach verfügbarer Breite der Auflösung neu zusammen stellt. Damit müssen Smartphone-Nutzer nicht umständlich nach links und rechts scrollen und Internetsufer über den PC bekommen eine Webseite in voller Bildschirmbreite ausgeliefert. Klingt gut, ist es meiner Meinung nach auch. Auch wenn einige noch lieber auf zwei alternative Themes setzen, welche unabhängig von einander laufen. Der Argumentationspunkt dafür lautet, dass die Ladezeit beim mobile Theme geringer ist als beim Responsive Theme. Dies mag sein, aber im Zeitalter von LTE und UMTS sollte man sich hier, meiner Meinung nach, keine Gedanken drüber machen.

Nachdem wir nun wissen was ein Responsive Design ist, möchte ich Euch nun eines für Piratebox vorstellen! Denn sind wir mal ehrlich – die Idee und Software dahinter sind ja recht gut, aber die grafische Umsetzung erinnert etwas an vergangene Zeiten! ;) Ist ist eben funktionell – wobei auch nicht so wirklich da es mit einigen mobilen Endgeräten schon Probleme geben kann.

Das Design von David Brooks ist recht gut gelungen, nur ein paar kleine Macken musste ich mit ein paar Browser feststellen. Diese habe ich dann mit ein paar CSS Tricks behoben – ganz nach meiner Art – Quick and Dirty eben! Aber wichtig ist ja, das es funktioniert! ;)

Aber selbst dann, wenn man nicht selbst Hand anlegen möchte, funktioniert das Design schon recht gut und die kleinen Fehler, welche mir aufgefallen sind, sind lediglich kosmetischer Natur. Ich werde den Front-End-Designer einmal anschreiben und ihn fragen, ob er vielleicht meine Änderungen übernehmen möchte oder er noch einen anderen Weg kennt, die kleinen Schönheitsfehler zu beheben.

Und so sieht das Design aus:

 

piratebox-responsive-design

 

Im Vergleich dazu die alte Version:

 

piratebox-oldstyle

 

Hier sieht man recht gut, das normale Design benötigt viel mehr Platz!

Im normalen Browser sieht es dann so aus:

 

Piratebox-normales-Design-vs-Responsive-Design

 

Schon sehr nett wie ich finde!

Für die Installation kopiert ihr einfach die richtigen Files an die richtige Stelle …und zwar nur die Files und damit läuft das Theme auch schon!

ACHTUNG!!!
Im „conf“ Ordner befindet sich die „piratebox.conf“ diese müsst ihr anpassen – entweder ihr übernehmt die Einstellungen in Euer System oder umgekehrt! Macht ihr das nicht, wird die Box nicht starten!

Information:
Da etwas ungenau in der Anleitung beschrieben – die HEADER.txt und README.txt aus dem „src“ Verzeichnung müssen in den Speicherort abgelegt werden, an dem später die Daten abgelegt werden. Diese werden durch die geänderte Config ausgeblendet!

Download: https://github.com/dsbrooks/PirateBox-Responsive

 

So, aber das war es dann auch schon wirklich! Wer auf Nummer sicher gehen möchte, kann sich ja die Files erstmals weg sichern oder mit „old“ Zusatz erweitern.

Viele Spaß damit!


Tags:

  • piratebox themes

Ähnliche Artikel

3 Kommentare

  1. Hi,
    vielen Dank für den netten Artikel über das responsive Design!

    Das Design von David wird defaultmäßig bei PirateBox 1.0 ausgeliefert, von daher wäre es mir sehr wichtig, wenn du die Rückmeldung geben könntest, was nicht funktioniert und wie du es repariert hast.

    liebe Grüße
    Matthias Strubel

  2. Sorry, irgendwie funktionierte die Benachrichtigung nicht.
    Eine Mail an David-Brooks (wenn du die E-Mail öffentlich ist) oder an mich wäre ok. Meine E-Mail lautet matthias.strubel@aod-rpg.de

    vielen Dank und
    liebe Grüße
    Matthias

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Schaltfläche "Zurück zum Anfang"