Immer häufiger werden wir gefragt wie man Joomla Webseiten responsive macht und wie man am besten dabei vorgeht. Vor kurzem haben wir bereits ein Tutorial zu Joomla mit Bootstrap erstellt und wollen hier noch einmal darauf aufmerksam machen wie einfach es ist mit diesem Framework flexible Webseiten zu erstellen.
Das wichtigste bei der Erstellung von responsive Joomla Templates ist die gründliche Planung. Welches responsive Framework verwentet man? Welche Technologieen benötigt man? Wenn man sich das Bootstrap Grid ansieht, kann man eine grobe Planung der Webseite vornehmen und die benötigten Bereiche einteilen. Oft sind auch Bootstrap Generatoren sehr hilfreich um das Framework an seine Bedürfnisse anzupassen oder einfach nur einige Elemente aus dem Core zu ändern.
Das Templating mit Bootstrap unterscheidet sich kaum von den üblichen Handgrifen. Einziger Unterschied dabei ist die Einbindung von Bootstrap am </body> Tag und im <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Wird vor den </head> eingefügt und
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script>
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
Vor den </body> Tag. Der Rest geht wie von allein. Nur muss man nun die div-Klassen laut dem Bootstrap Vorschriften bezeichnen. Als Hilfestellung dafür wurden einige Beispiel-HTML-Seiten veröffentlicht an denen man sich die Struktur ansehen kann.
Empfehlenswert ist auch die Sektion „Getting Started“ auf der Bootstrap Webseite. Dort erfährt man alles über das Framework und bekommt Beispiele für die wichtigsten Funktioenen.
Bei Fragen oder Problemen mit Bootstrap Templates und dem Templating für Joomla helfen wir auch gern weiter.
