jede Menge an Hindernissen, doch nun ist das responsive Theme auch hier eingekehrt

Timeline auf dem iPhone laut Responsinator ;)
Timeline auf dem iPhone laut Responsinator ;)

Es lag mir schon länger im Magen, dass gerade hier auf der Texto.de immer noch wp-touch zwar hervorragende, aber dennoch Hilfsdienste für das responsive Layout leisten musste. Abgeschreckt hat mich vor einem Theme Wechsel die Tatsache, dass ich hier zig Templates mit sehr vielen Beispielen habe. Etliche LoopBeispiele und anderes. All dies mag ja geschlichtet und neu gestaltet werden.

Zwei Ordnungen waren mir dabei wichtig: Einerseits gut geschlichtete und leicht verwaltbare Template Dateien und die Überlgeung nach welcher Ordnung ich wann was wo und wie anzeige. Responsive Design soll ja nicht bloß flexibel an sich sein, sondern diese Flexibilität könnt ja auch ein Ziel verfolgen und das war mir wichtig.

Ordnung im Theme

Das erste was ich mir daher überlegte war eine neue Ordnerstruktur innerhalb des Themes. Da WP nun seit einiger Zeit auch Templates findet, wenn sie nicht im RootOrdner des Themes liegen, nutzte ich dies aus und nun sieht die Ordnerstruktur des neuen Themes folgendermaßen aus.

  • fonts => hier ist meine Schmuckschrift gelagert, die ich mit @font-face eingebunden habe.
  • images => beinhaltet alle Design Bilder, die wenige sind, aber dennoch vorhanden.
  • inc => beinhaltet alle Templates, die mir Sonderfunktionen liefern und somit die functions.php aufräumen. Ich nutze dafür immer noch kein Plugin, damit komm ich besser zurecht und aufgeräumt ist es für mich auch ;). Ich weiß, dass es Möglichkeiten gibt sich zu überlegen, brauche ich diese Funktion im Backend //Frontend etc. Doch vermutlich bin ich da zu wenig geordnet, für mich ist es bei dieser Domain absolut nicht nötig. [Ich weiß, dass Entwickler mich da ganz böse ansehen, aber damit kann ich gut leben ;)]
  • templates => da sind nun alle Dateien drin, die mir das Theme aufräumen. Die home.php, die die Startseite liefert hat somit jede Menge an Templates, die sie aufbauen, genauso wie die Boxen im unteren Bereich des Themes und in der Sidebar. Ebenso sind hier alle page-xyz.php Templates gelagert, die für spezielle Tutorials einmal entstanden sind.
  • js => javascripts für den IE, die Navigation auf mobilen Endgeräten.
  • tuts => meine CSS Dateien für Tutorials.

Bevor ich die guten Dinge erzähle..

Probleme, die ich zum Teil immer noch habe.

Die vielen Codebeispiele hier brechen zeitweilig auf sehr kleinen Devices das Layout. CodeBeispiele auf unter 240px zu bringen ist echt eine Herausforderung ;). Und wenn sie dann auch noch in Kommentaren drin sind, habe ich vermutlich eher mehr als genug graue Haare bis dies zu meiner Zufriedenheit aussieht, daher entschied ich mich heute Abend zum Online gehen. Ich lebe mit den Fehlern diesbezüglich. Wer auf dem Handy meine Codebeispiele lesen und verstehen mag ist gestraft damit genug ;);).

JS Dateien in den Footer
Es gibt Plugins, die zwar gut sind sich jedoch um diesen Standard Null, Nix, Nada scheren. Und auch nicht funktionieren, wenn ich den deren Script in den Footer gebe. zb Comments Quicktags ist so eines, dennoch mag ich nicht darauf verzichten, weil es einfach benutzerfreundlichst ist.
Ob die Lightbox auch wirklich so mobilfreundlich ist wie sie behauptet muss ich glauben. Unabhängig ich brauche sie hier nicht oft, aber doch manchmal. Vielleicht mache ich mir einmal die unendliche Arbeit eine Lightbox je Artikel aktivieren zu können.

Print.css die fehlt einfach noch
Dies ausfdruckfreundliche CSS zu der bin ich derzeit noch nicht gekommen, dazu steh ich, darauf muss noch ein bisschen gewartet werden und daher ersuch ich diesbezüglich um Geduld.

Dennoch es machte Spaß dieses Theme zu entwerfen und zu gestalten und für mich fühlt es sich gut an ;)

Ordnung für die Devices – PostIts helfen

die Timeline auf einem kleinen Devce
die Timeline auf einem kleinen Device

Responsive Design bedeutet ja nicht nur, dass sich alles verkleinert oder vergößert. Je nachdem wie wer anfängt zu denken und zu arbeiten, sondern vor allem: was mag ich wann wo wie zeigen.

PostIts halfen mir dabei. ;)
Ich schrieb alle wichtigen Teile auf PostIts und schlichtete diese ganz einfach auf meinem Tisch. Dann überlegte ich mir, was muss ich wie in „CSS//HTML Boxen“ packen, damit ich es verschieben kann.

Startseite: wichtig war mir, dass hier der neueste Artikel immer im Blickfeld ist.
Danach fand ich kann ich ruhig eine Werbeeinblendung starten ;) => die About Texto Box.
Erst vor kurzem hörte und las ich wieder, dass einige sehr gerne auf der Startseite nachsehen, was wurde zuletzt geschrieben. So entstand die „Artikeltimeline“, die ich als Dritten Teil auf der Startseite auf kleineren Devices bringe.
Danach erst die Artikel aus den Tag „WP Grundlagen“ und „WordPress User Verwaltung“. Diese Tags wählte ich aufgrund ihrer Beliebtheit in den letzten Jahren aus.

Footer Boxen sitewide
Die unteren Boxen sind so angelegt, dass meine Eigenwerbung ganz am Ende erscheint. Wenn schon jemand so neugierig ist, dann findet er mich ganz unten nochmals ;)

Sidebar
Sie wird immer unterhalb des Artikels und der Kommentare angezeigt, wenn der Bildschirm kleiner wird.
Die Suche lass ich auf den kleineren Devices zugunsten einer Suche im Header verschwinden. Die einzelnen Teile der Sidebar, zeige ich solang es geht nebeneinander an. Maximal zwei „Einheiten“ werden nebeneinander gezeigt, dies erhöht meiner Meinung nach die Lesbarkeit entschieden.

Navigation
Die Navigation wechselt relativ rasch zu einer mobil tauglichen und ich hoffe, das Feeling und die Nutzbarkeit sind gut. Hier freu ich mich um Rückmeldungen.

Kommentare
Ab jetzt sind Kommentare und Pings nicht mehr getrennt. Dies brachte eine Geschwindigkeitsverbesserung. Und da sich die Pings in Grenzen halten ist daher auch der Lesefluss bei den Kommentaren meiner Meinung nach nicht elends gestört dadurch.
Subscribe to comments habe ich deaktiviert. Zu 80% standen es sich Spambots drauf oder ich hatte ständig E-Mail Nachrichten zu löschen, weil sich Kommentierende zwar da eintrugen, aber eine ungültige E-MailAdresse angegeben hatten.

technische Details zum neuen Theme

34grid.com lieferte mit das Grid zum Theme. Border-box half mir dies dann auch wirklich gut nutzen zu können.
HTML5 ist hier ausnahmslos vertreten, vorallem in den diversen Formularen. Bei der Suche, dem Kommentarfeld und dem E-MailFormular und ich hoffe, dass dies die Benutzerfreundlichkeit eindeutig erhöht.
HyperCache musste mich verlassen und Cachify macht nun hier Dienst.

Ich hoff, dass ich mich diesem Artikel die Scheu vor einem Umbau nahm und auch einiges zur „Ordnung“ sowohl im Theme wie zur responsive Ordnung als Gedankenanregung liefern konnte.

Dass der IE8 die Timeline nicht versteht brauch ich wohl nicht eigens erwähnen, ich kann damit leben ;). Derzeit sind hier weniger IE8 als mobile NutzerInnen und daher entschied ich mich ganz demokratisch für die Mehrheit..

Und .. nicht böse sein, wenn ich nicht gleich anworte, ich bin beruflich nun unterwegs und erst wieder am Sonntag „da“.

7

7 Beiträge zu “jede Menge an Hindernissen, doch nun ist das responsive Theme auch hier eingekehrt

  1. Kommentar Autor
    Michael
    Kommentar

    Hallo Monika,

    ich bin positiv überrascht, denn ich schaue alle paar Wochen mal vorbei & das neue Design ist Spitze. Gefällt mir sehr :)
    Wenn ich mal nen bisschen Geld zu viel hab, lass ich mir mal mein Design überarbeiten. Ist dringend nötig bei mir.

    Gruss Michael

  2. Kommentar Autor
    Monika
    Kommentar

    das freut mich Michael, wenn es dir gefällt :-)
    danke dir für die Rückmeldung!

  3. Kommentar Autor
    Dominik Horn
    Kommentar

    Hi Monika,

    sieht wirklich toll aus, sowohl optisch als auch technisch. Du bleibst deinen Farben und deinem alten Design treu, hast es aber super weiter entwickelt und modernisiert. Hut ab, Glückwunsch und viel Erfolg :-)

  4. Ping neues Design: responsives Thema |my GettoWEB.DE

  5. Kommentar Autor
    Monika
    Kommentar

    Danke Dominik!
    ja die Farben die habe bewusst gehalten, wenngleich sie eine Nuance anders sind als vorher, aber ich dachte sie gehören einfach hierher :-)
    Für mich sind sie ein guter Kontrast zum staubtrockenen Code, der es nun mal schlussendlich ist.

  6. Kommentar Autor
    Holger
    Kommentar

    Staun und sieh an …
    Nun habe ich texto auf meiner neuen wp-Seite empfohlen und wusste nicht mal, wer die Seite macht. Dabei „folge“ ich Deinen Beiträgen bei xing regelmäßig.
    Auf meiner wp-Seite probiere ich gerade mal ein responsive template, das ich auch unter Joomla im Einsatz habe. Scheint aber alles noch sehr beta zu sein und hat haufenweise Macken. Nur gut, dass ich das Teil von Joomla her kenne. Was mir allerdings (unangenehm) unter wp auffällt: Jedes template hat so seine Eigenarten. Wenn man Sachen so und so einstellt, heisst es noch lange nicht, dass das nächste theme das auch mitmacht … z.B. die excerpts. Und bei der Zusammenarbeit einiger themes mit den plugins scheint es auch mehr als genug Probleme zu geben.

    Gruß aus dem Norden,
    Holger

  7. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Holger
    WordPress Theme Entwickler haben jede Freiheit, und ob ein PluginAuthor gut arbeitet liegt nicht an WordPress. ;)
    ich schätze die Vielfalt und wer sich ein WP kauft kann sich vorher informieren oder bei den meist vorhandenen Vorschauseiten alles ansehen.
    Wer es 100% so haben mag wie es für ihn sein sollte muss sich einen WebDesigner leisten oder selbst machen. So lebt OpenSource :-)