Projekt:
Umstieg von einer iframe basierten
Website auf eine moderne HTML5 CSS3 open source platform
mit responsive-Fähigkeiten. Vorteile: bessere user
experience auf android-basierten Geräten, bessere
Suchergenisse aufgrund verbesserter SEO-Eigenschaften.
Die auf der Altseite verbreitet verwendeten .pdf-files
sind nicht responsive. Sie sollen in Zukunft nur als
download angeboten werden. Zusätzlich wird deren Kontent in
html-Seiten migriert. Für diesen Migrationsschritt existieren
keine brauchbaren tools.
Der Aufwand für den Umstieg wird
durch Auswahl eines geeigneten templates deutlich
verringert. Weit verbreitet sind die freien one-pager-templates
von bootstrap. Diese Seiten passen sich flüssig an die
Bildbreite des Geräts an, d.h. es wird keine
spezielle mobile-Version erzeugt. Für die Transition und die Bild-Animation
wird das betagte java script
jquery eingesetzt. Wer diese templates tiefgreifender
modifizieren will, weil sie nicht ganz wie gewünscht
funktionieren, wird nicht immer umhin können, diese java
script dateien zu überarbeiten. Die css- und
js-ressourcen von bootstrap werden über url zur Laufzeit
hinzugeladen, ebenso die awesome- bzw. glyphicon
iconfonts. Im Fall einer Modifikation ist es aber ebenso
möglich, diese Dateien lokal zu speichern, die
Modifikationen in neuere git-Versionen einzuarbeiten,
erst zu testen und dann hochzuladen.
Nach dem Download eines geeignet
erscheinenden templates kann das .zip-file
in einen workspace entpackt werden.
Sämtliche Ressourcen sind enthalten. Es kommt jeweils
eine les- und editierbare css bzw. js-Datei und eine
laufzeitoptimierte css-min bzw. js-min Datei mit.
Vorsicht beim Verwenden dieser Dateien aus anderen
templates: diese können unterschiedliche Versionen haben
und anderes Verhalten bewirken.
Die Reihenfolge von css- und
js-Dateien sollte nicht umgestellt werden, da
Abhängigkeiten bestehen. Aus Laufzeitgründen werden in
den templates die js-Dateien an das Ende des HTML bodies
gestellt.
Was sind die Anforderungen? Gewünscht ist
eine Seitenstruktur nach Art eines "Portfolio"-Auftritts. Die Auswahl fiel auf "initio" von
Themewagon. Das Template hat eine Hauptseite und bietet
über ein leicht erweiterbares Menu
mehrere Nebenseiten an.
Support / Bugs (siehe
https://github.com/pozh/Initio/issues )
1. Nach einem switch von Menuzeile
auf Menuebutton (passiert beim Einschränken der
Bildbreite auf mobile-Format) klappt der Menubutton on_click
nicht auf! Der Fehler ist bekannt und behoben, aber auf
der Downloadseite von Gettemplate nicht erwähnt. Die Lösung mit
Angabe der codelines findet sich in
github
2. Unschönheit: Die Menueinträge sind
nach Aufklappen des Menubuttons nicht vertikal bündig
ausgerichtet (wohl aber bei sub menues)
3. Unschönheit: Die Darstellung des
Hintergrundbildes bg_head ist nicht optimal. Mal wird
bei Änderung der Bildbreite abgeschnitten, mal beim
Scrolldown der Seite teilweise wiederholt. Das ist auch
beim template-background schon festzustellen (Die Bildwiederholung lässt sich leicht über einen parallax-Parameter abschalten).
4. Ist das template im small media mode, gehen den footer icons die links verloren (Kann leicht durch ein zusätzliches <br> behoben werden).
