Geschrieben von Christian Schnettelker

Schlagwörter: , , ,

Geschickt eingefädelt

Im Juni diesen Jahres erreichte mich die Anfrage der FRANKE Chemiefasern GmbH & Co. KG, Großhandel für synthetische Fasern und technische Filamente aus Polyester, Polyamid 6 und Polyamid 6.6 zur Neugestaltung ihrer Webseiten.

Gleich zu Beginn machte die Anfrage einen positiven Eindruck, endlich wieder jemand, der ziemlich genaue Vorstellungen vom Aussehen und der geplanten Funktion der Webseite hatte und dies auch gut formulieren und nachvollziehbar darstellen konnte – leider heute keine Selbstverständlichkeit mehr.

Betreff Layout der neuen Seite hatte die Firma Franke konkrete Vorstellungen in Form eines grafischen Design-Entwurfes, welchen ich, in einigen Details verbessert, in HTML5 und CSS umgesetzt habe. Der Grundton Blau aus dem Firmenlogo gibt dann auch sämtliche verwendeten Farben vor.

FRANKE Chemiefasern - Screenshot der Startseite
Nachdem das HTML-Grundgerüst erstellt und Joomla auf der Domain installiert war erfolgte wie gehabt die Erstellung des Templates.

Bei dieser Gelegenheit muss ich die Schöpfer von Joomla nochmals ausdrücklich loben, die Vorgehensweise ist, wenn man es einmal kapiert hat, schlüssig und kommt meiner Arbeitsweise sehr entgegen. Ich hätte hier und da vielleicht ein paar Dinge, die ich an Joomla gerne verbessert sehen würde, aber aus einer funktionierenden HTML5-Seite ein Template zu machen ist genial gelöst. Danke!

Schwierigkeiten

Hinsichtlich der Webseiten für die Firma Franke traf ich nachfolgend jedoch auf insgesamt vier Schwierigkeiten, die dann nicht ganz so einfach zu lösen waren.

Zuerst stand ich vor dem Problem, das spezielle Hover-Untermenü zur Schaltfläche „Produkte“ im CMS umzusetzten. Was direkt im HTML5-Code noch relativ problemlos zu realisieren war ist in Joomla nur durch eine recht aufwendige Umprogrammierung („Module override“) des Moduls „mod_menu“ zu erreichen.

Dazu musste ich mich allerdings erst einmal in die Funktionsweise des PHP-Codes einarbeiten und einlesen, hinzu kam der Umstand, dass die Seiten auch nochmals in Englisch vorliegen – insgesamt hat mich das Problem einen ganzen Tag lang beschäftigt.

Problem Nummer zwei: die Suchfunktion. Erst einmal benötigte ich mehrere Stunden, bis ich den CSS-Code soweit hatte, dass das Suchfeld oben rechts in allen Browsern exakt gleich aussieht. Klingt trivial und im Jahre 2014 lächerlich, war aber ein echtes Problem, irgend ein Browser stellte sich bei den vielen Versuchen doch wieder quer.

Letztlich funktionierte es u.a. mithilfe der im Artikel „Bulletproof CSS input button heights“ beschriebenen Lösung eines pfiffigen Engländers, welche ich nach langem Suchen fand.

Damit nicht genug, auch nutzte ich die Joomla-internen Funktionen zur index-gesteuerten Suche zum ersten Mal, musste mich also dort einarbeiten. Auch die Ausgabe der Suchergebnisse war nicht unbedingt trivial, dazu erstellte ich innerhalb von Joomla eine eigene Ausgabeseite und passte das „Syntax-Highlighting“ passend zum Thema an. Man lernt ja bekanntlich nie aus, jedenfalls weiß ich das nächste Mal, wie alles funktioniert da ich mir angewöhnt habe, solche Dinge zu protokollieren.

Tabellen

Drittes und nicht weniger schwieriges Problem waren die Tabellen, die auf den Produkt-Unterseiten gezeigt werden sollen:

Tabelle PC-Ansicht
Schon in der normalen Ansicht nicht mal so eben zu erstellen musste ich für die kleineren Ansichten meine „grauen Matratzen“ ganz schön rotieren lassen, damit auch auf dem Tablet oder Smartphone die Tabellen noch sinnvoll zu nutzen sind.

Tabelle Smartphone

Dabei erwies sich die Möglichkeit, einem Element innerhalb von CSS auch mehrere Klassen gleichzeitig zuweisen zu können, als extrem hilfreich; so konnte ich Zeilen und Spalten global definieren und den durchnummerierten Spalten dann einzeln, je nach Breite der Anzeige, Eigenschaften vergeben:

.tabelle3 { width:438px; }
.tabelle3 h3.headline { width:418px; font-size:15px; }
.tabelle3 .spalte { width:217px; }
.tabelle3 .no1, .tabelle3 .no2 { border-bottom:3px solid #FFF; }
.tabelle3 .no2, .tabelle3 .no4 { border-right:none; }

Schwierigkeit Nummer vier war das Kontaktformular. Erstmals setzte ich kein externe „Extension“ ein sondern Bordmittel, die Joomla von Hause aus mitbringt. Sämtliche Eingabefelder müssen dann wie gehabt in CSS formatiert werden, anders geht es leider nicht da ich ja auf kein bestehendes Template zurückgreifen kann.

Captcha

Als besonders boshaft erwies sich der Code von Googles „ReCaptcha“; auch wenn die Startseite des Dienstes noch so modern ist, der Code ist es definitiv nicht. Aus unerfindlichen Gründen beharrt Google auf einer Breite von 300 Pixeln für das Eingabefeld, was auf dem Handy-Bildschirm schlicht zu breit ist. Eine Funktionalität für ein modernes, responsives Webdesign fehlt leider völlig, jeder Webdesigner muss das Layout also per CSS einzeln anpassen.

Apropos, das Layout des „Captcha“ empfinde ich als relativ antiquiert und die Grafiken sind leider oft auch für Menschen nicht lesbar, hier könnte Google mE mal ein paar Leute zur Verbesserung abstellen oder – vielleicht noch besser – den ganzen Code neu schreiben.

SEO

Auf den in 2003 erstellten bisherigen Seiten waren leider viele Dinge anzutreffen, die einem im Jahre 2014 eine gute Position innerhalb der Suchmaschinen verwehren:

Wie Sie sich denken können ist das alles nun abgestellt, der SEO-Score stieg von 39% (rot) auf ordentliche 72% (gelb), in einem zweiten Schritt sollen einige Texte noch ergänzt werden um im Laufe der Zeit die 80% (grün) zu erreichen.

Die Seiten der Firma Franke liegen, da die Firma auch in Europa und sogar weltweit tätig ist, wie bereits erwähnt nochmal komplett übersetzt in Englisch vor. Joomla bringt hier mächtige Werkzeuge mit, die es ermöglichen, dass man von jeder Seite aus die Sprache wechseln kann, ohne sich erst wieder durch das Menü zum Thema durchhangeln zu müssen, perfekt!

Eine Anmerkung am Rande dazu: Herr Philip Franke wies mich auf etwas hin, was mir bis dato völlig unbekannt war, das Thema „Impressum / Imprint“. Dazu mehr in einem späteren Artikel, wir haben uns im englischsprachigen Teil der Seite auf die Übersetzung „Legal notice“ geeinigt.

Fazit

Nach mehreren Monaten Arbeit stellt sich die Firma Franke im Internet komplett neu auf – das ist nicht alleine mein Verdienst sondern auch dem Bemühen der Firma Franke, insbesondere Herrn Philip Franke zu verdanken. Texte wurden praktisch fehlerfrei und zeitnah geliefert, sehr gute Bilder gemacht – besser geht es fast gar nicht.

Herr Franke hat nun, nach einer kurzen Einweisung in die Bedienung des Joomla-CMS, vollen Zugriff auf die gespeicherten Texte und dort kann Änderungen bzw. Ergänzungen vornehmen.

Ich denke mal, dass sich die Firma durch die neuen Seiten im Laufe der Zeit über neue Kunden, die durch eine Internet-Recherche aufmerksam werden, freuen darf. Bestehenden Kunden wird nun ein wesentlich moderneres und aussagekräftigeres Bild der Firma und den Produkten vermittelt – also, wie es der Titel des Artikels schon sagt: „geschickt eingefädelt“!

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

  1. Philip Franke schrieb:

    Hallo Herr Schnettelker,

    vielen Dank für Ihr großes Lob, welches ich uneingeschränkt zurückgeben kann und muss.

    Die Zusammenarbeit mit Ihnen hat hervorragend geklappt und Sie haben unsere Ideen und Wüsche toll umgesetzt!

    Viele Grüße,

    Philip Franke

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.