Qualitätsgesichert auch auf kleinen Devices ISO9001.info

iso9001.info responsive
iso9001.info responsive

Schon länger ging iso9001.info online und ich mag nicht nur dieses Projekt herzeigen, sondern auch das Briefing öffentlich machen und meine Lösungen herzeigen. Prinzipiell wurde ein responsive WordPress Theme gewünscht und zwar nur mit Seiten und keine Beiträge oder Kommentare.

Das Briefing zum Projekt iso9001

Ganz schlicht und einfach wünschte sich Herr Grosser das Layout für seine neue Domain iso9001.info.
Die Navigation soll so sein wie bei Amazon – also geteilt. Außerdem wünschte er sich ganz viele Kontaktmöglichkeiten im obersten sichtbaren Bereich, egal wie klein oder groß der Bildschirm ist.
Das vorhandene ExcelFormular zur Berechnung der Kosten einer ISO Zertifizierung sollte ebenfalls neu werden und schön. Dabei war das Drucklayout sehr wichtig. Diverse Buttons, um manche Texte „bunt“ machen zu können rundeten dann das Briefing ab.

Navigation wie bei Amazon

Navigation wie bei Amazon
Navigation wie bei Amazon

Der einfache Teil dabei war das benutzerdefinierte Menu von WordPress zu teilen. Ich schrieb dafür eine „walker class“. Aufwändiger war es dann dies so zu gestalten, dass der Inhalt nicht „springt“, wenn einmal keine Unterpunkte bei der Navigation da sind und die Gestaltung für die kleinen Devices. Derzeit fand ich keine sinnvolle technische Möglichkeit „doppelte Menüangaben“ im HTML zu verhindern.

viele Kontaktmöglichkeiten im sichtbaren Bereich

aufklappbare Kontaktbutton
aufklappbare Kontaktbutton

Dazu nutzte ich ein einfaches „Aufklapp Script“ mit einer Fallback Lösung, wenn jemand kein JavaScript aktiviert hat. Die Positionierung der einzelnen Bereiche für das responsive Layout waren eine lustvolle Spielerei bis sie überall dort erschienen wo sie sollten und nicht wo sie wollten….

Quicktags für die Textgestaltung

Herr Grosser nutzt gerne den Texteditor von WP zum Schreiben und daher erstellte ich ihm einige Quicktags damit er seine Texte so bunt machen kann wie er es gerne wollte.

Formulare zur Berechnung der Kosten

Detail des Formulars
Detail des Formulars

Das Formular zur Berechnung der Kosten einer Zertifizierung war vorher ein Excel Formular und wurde nun in php umgesetzt. Online zu sehen ist es hier. Soweit sinnvoll und möglich sind nun html5 Elemente darin, die vor allem mobilen Nutzern das Ausfüllen erleichtern. Außerdem kann man sich das ausgefüllte Formular drucken – entweder auf Papier oder eben als .pdf je nachdem was jemand zur Verfügung hat.

Detail des Drucklayouts
Detail des Drucklayouts
die mobile Ansicht des Formulars
die mobile Ansicht des Formulars

Tabellen und kleine Ausgabegeräte

Es gibt viele Lösungen für responsive Tabellen. Doch die meisten brauchen eine eigene ID oder andere Angaben damit sie auch funktionieren. Herr Grosser erstellt viele Tabellen und oftmals mit TablePress. Daher sind all die Scripte kaum bis gar nicht nutzbar. So verkleinerte ich die Tabellen so gut es ging und bei Bedarf erscheint ein horizontaler Scrollbalken damit die Inhalte zumindest gut lesbar noch sind.

Meine Zusammenfassung

Dieses WP Theme sieht sehr simple aus. Der Teufel steckt wie meist im Detail und ist unsichtbar für die meisten. Die Inhalte und deren Gestaltung waren nicht meine Aufgabe, dies kann Herr Grosser sehr gut alleine und er machte es auch gern, soweit ich erkennen konnte.

Es war mir eine Freude mit Herrn Grosser zu arbeiten. Unsere Skypegespräche waren zielführend und dennoch lag immer auch Humor in der Luft. 😉

mts

Ebenfalls informativ und lesenswert