Responsive und Adaptive Webdesign

16. März 2015

Beim erstellen von Webseiten gehört die Anpassung für mobile Geräte bereits zum Standard. Dabei gibt es grundlegend zwei verschiedene Ansätze, welche sich jedoch grundlegend voneinander unterscheiden, indem was sie Ihnen bzw. Ihren Kunden bieten.

Der Klassiker: Responsive-Webdesign (RWD)
Um es kurz zu machen: RWD zielt auf die optimale Darstellung auf beinahe allen Endgeräten ab. Entscheidend hierfür ist das Verhalten der Inhaltselemente bei der Veränderung des Viewports. Doch was ist dieser Viewport? Übersetzten lässt sich der Begriff mit Sichtbereich, dem Sichtbereich eines Browsers. Der Browser und dessen Steuerungselemente sind dabei nur eine Art Rahmen und zählen nicht zum Viewport. Und wie Verhalten sich nun die Elemente bei einer RWD-Umsetzung? Sie sind fluide. Grund hierfür ist, dass primär auf prozentuale Bemaßung gesetzt wird. Die Nutzung prozentualer Werte ermöglicht es dem Browser die Inhalte in den Viewport einzupassen. Zusätzlich wird häufig auf sogenannte Media Queries gesetzt. Diese ermöglichen es, dass sich eine Seite an definierten Breakpoints (= Viewportbruchpunkten, entspricht meist der Viewportbreite) umpositioniert. Gutes Beispiel stellt beispielsweise ein klassisches 3 Spaltenlayout (Navigation, Inhalt, Sidebar) dar: Der Inhalt verbleibt inmitten der Navigation und Sidebar, diese wiederum rutschen über bzw. unter das Inhaltselement.

Das ungeliebte Stiefkind: Adaptive Webdesign (AWD)
Dieser Ansatz unterscheidet sich in einer Sache grundlegend von RWD: Elemente sind fix in Bezug auf Ihre Breiten. Bruchpunkte, die auf bestimmte Auflösungen abzielen gibt es auch hier, nur entfällt der „saubere“ Übergang zwischen diesen. Das heißt: Sie haben ein Tablet mit einer Auflösung von 640 auf 480 Pixeln. Als Bruchpunkt ist jedoch eine Breite von 768 Pixeln gewählt worden. Folge: Sie müssen horizontal Scrollen (Anm.:  Die meisten Endgeräte skalieren an dieser Stelle oftmals die komplette Webseite herunter und passen diese in den verfügbaren Viewport ein). Bei Seiten, die diese Variante nutzen, ist eine „springen“ zu beobachten, wenn das Browserfenster vergrößert bzw. verkleinert wird. AWD ist so gesehen ein Überbleibsel aus Zeiten, in denen es nur eine begrenzte Anzahl an Bildschirmauflösungen gab.

Die große Preisefrage ist natürlich, für welche Variante sollen Sie sich entscheiden?
Wir sprechen uns natürlich immer für RWD-Umsetzungen aus. Ziel einer Webseite ist immer die optimale Präsentation von Informationen. Die oben genannten Varianten helfen dabei beide dieses Ziel zu erreichen – RWD hat dabei aber eindeutige die Nase vorne, wenn es darum geht dem Webseitennutzer das bestmögliche Surferlebnis zu bieten.

Joomla! Front-End Editor

22. Februar 2015

Wer mit Joomla! arbeitet oder schon mal ein Projekt damit realisiert hat, der kennt das Problem, die Seite ist schnell und einfach für den Kunden vorbereitet jedoch weiß dieser nicht ohne Schulung, wo man was Editiert. Ein großes Problem für viele ist das in Joomla! alles über das Back-End eingestellt und Editiert wird. Sollte man mal einen Kunden haben, der mit der Back-End Verwaltung von Joomla! gar nicht zurechtkommt oder einfach nur seine Beiträge bearbeiten möchte, ohne dafür sich im Back-End einzuloggen, gibt es dafür mehrere Lösungen. Ich stelle Ihnen Heute zwei davon vor.

 

K2 Front-End editing

in K2 hat man die Möglichkeit „User Groups“ anzulegen und diesen jeweils die Option für „Front-End Editing“ freizuschalten. Jetzt hat diese Gruppe und jeder enthaltene User die Möglichkeit, nachdem er sich im Front-End eingeloggt hat, Beiträge mit einem Klick auf „Edit Item“ zu Editieren. Je nach Einstellung können die User dann Beiträge erstellen oder ändern, sowie löschen. Dabei öffnet sich ein Modal und man hat bis auf die Beitrags Optionen die man in der Regel nicht braucht, alle Möglichkeiten des Back-End zu Verfügung.

 

Bilder Quick-Guide

K2Front-End1K2Front-End2K2Front-End3

Joomla! Postings

Da wir schon öfter den Kundenwunsch hatten Joomla! Anwendungsfreundlicher zu gestalten, haben wir ein eigenes Modul für das Front-End Editing Umgesetzt, Joomla! Postings.
Diese ermöglicht es durch einloggen im Front-End, Beiträge hinzuzufügen im Gegensatz zu K2, werden diese aber ausschließlich über das Front-End erstellt und gepflegt. Bei einem Klick auf den Button „Neues Inhaltselement“, hat man hier die Möglichkeit zwischen 7 verschiedenen Posting Typen:

-Editor 100%, Text Editor über die volle Breite

-Editor 50%-50%, Text Editor 2 Spaltig.

-Editor 33%-67%, Text Editor 2 Spaltig.

-Editor 67%-33%, Text Editor 2 Spaltig.

-Editor 33%-33%-33%, Text Editor 3 Spaltig.

-Bildergalerie

-Google Maps

zusätzlich kann ein Titel, sowie ein Veröffentlichungstermin festgelegt werden.

 

Bilder Quick-Guide


PostingFront-End1


PostingFront-End2


PostingFront-End3

 

Resümee

Beide Varianten führen zum Ziel, Joomla! Anwendung freundlicher zu gestalten. K2 Bietet mehr Möglichkeiten für Benutzergruppen und ist deshalb für Komplexere Seiten mit verschiedenen Autoren geeignet. Joomla! Postings ist einfach und unkompliziert. Es findet dann Anwendung wenn nur ein paar Personen die Webseite pflegen wollen und dies möglichst ohne viel Aufwand.

Fertiges Template oder doch lieber Speziell

20. Februar 2015

In diesem Artikel soll ein wenig gegenüber gestellt werden, wann ein Fertiges Template sinnvoll ist oder wann es sinnvoll ist ein Spezielles Template zu Programmieren.

Die Zeiten ändern sich kaum irgendwo so schnell wie Online. Waren gestern noch einfache HTML-Templates weit verbreitet, werden heute ganz andere Techniken eingesetzt. Als wenige Punkte sind hier nur HTML5, CSS3 und JavaScript zu nennen. Damit steigt natürlich die Komplexität der Template Entwicklung mit an. Auch bei den Fertigen Templates hat sich viel getan. Gerade auf Systemen wie Joomla oder WordPress haben viele Templates ein eigenes Template Framework eingebunden. So bietet es dem Benutzer viele Einstellungen zu Farben Schriften und Layout. Doch genau hier liegt auch die Tücke im Detail. Denn während einfache HTML-Templates relativ Simpel umgeschrieben werden können, benötigt es bei solchen Templates doch recht viel Aufwand.

Solche Template Frameworks werden vorrangig bei Joomla! Templates und WordPress Templates verwendet. Derzeit findet man auf dem Markt noch kaum fertige Typo3 Templates. Vor allem sind solche Typo3 Templates in der Regel nicht einfach einzusetzen denn Typo3 benötigt auch das dazu passende TypoScript. Denn Ohne TypoScript kann ein Typo3 Template keine Inhalte ausgeben.

Der Erfahrung nach ist es in vielen Situationen Schneller und einfacher ein spezielles Template für den Kunden zu erstellen. Spätestens dann wenn der Kunde an das Template spezielle Anforderungen hat, wird es oft relativ Aufwändig dies in Fertige Templates einzubringen. Hinzu kommt, dass dann oft das verwendete Template Framework probleme macht. Denn dieses muss dann natürlich oft auch angepasst werden, da es sonst beim speichern einer neuen Farbe, die Einstellungen des Webentwicklers überspeichert.

Wenn dazu auch noch Breiten (z. Bsp. von Sidebars) Angepasst werden müssen, ist diese Anpassung oft an Vielen stellen vorzunehmen. So Steigt der Aufwand bei einem Fertigen Template mit jedem Feature das der Kunde noch möchte.

Allerdings ist ein Fertiges Template auch genau das richtige, wenn man das Template mit dem Umfang nimmt was es hergibt. Dann kann es eine wirkliche Kostengünstige Alternative sein. Der Kunde sollte sich also entscheiden was er genau möchte und genau prüfen ob das Template genau das hergibt was der Kunde benötigt. Oft ist es für Kunden auch eine Alternative, ein Fertiges Template für einen Begrenzten Zeitraum zu verwenden. So hat der Kunde die Möglichkeit sich zu entscheiden und zu Beobachten wo die Reise mit der eigenen Webseite hin gehen soll.

Hat der Kunde Spezielle Anforderungen die das jeweilige CMS nicht von haus aus kann, kommt man oft um eine eigene Template Erstellung nicht herum. Eine Template Programmierung hat dazu noch den Vorteil dass der Kunde sein Template jederzeit relativ Kostengünstig erweitern oder Ändern lassen kann.

Unserer Erfahrung nach zahlt es sich immer aus ein eigenes Template zu entwickeln. Denn in der Regel hat der Webseiten Betreiber seine eigene Vorstellung von seiner Homepage. Insbesondere die daraus resultierende nacharbeit ist oft ein großer Faktor der dazu führt, dass man hinterher doch lieber ein eigenes Template entwickeln lassen sollte.

Was die Kosten betrifft ist es in vielen Fällen ziemlich gleich, mit der Erstellung eines speziellen Templates, manchmal sogar Günstiger. Es kommt jedoch immer auf das Template drauf an.

Framework VS CMS

20. Februar 2015

Auf dem Markt gibt es unzählige von Content Management – sowie Framework-Systemen. Hier verliert man schnell den Überblick, wann man was einsetzen sollte. Ich versuche Ihnen mit diesen Artikel näher zu bringen, welches Framework bzw. CMS wann am besten eingesetzt werden soll und erläutere es mit gängigen Beispielen wie das Yii2 Framework, Joomla! und TYPO3 und WordPress.

Der eigentliche Unterschied von Framework zu CMS Systemen besteht darin, dass Frameworks lediglich eine Basis für Ihre Webseite schafft, indem es bestimmte Bibliotheken intelligent zusammenfast. Ein Backend sowie Frontend werden hier händisch erstellt. Ein CMS System geht hier ein Schritt weiter und stellt eine Verwaltung in Form eines Backends zur Verfügung. Sowohl Frameworks wie auch CMS Systeme haben dadurch Ihre Vor- und Nachteile und haben je nach Anwendungsfall ihre Daseinsberechtigung. Ein Framework bietet eine flexibelere Entwicklungsumgebung, doch bei einer normalen Webseite spielt dies desöfteren keine Rolle. Nach etlichen Jahren in der Webentwicklung möchte ich Ihnen nun zeigen, wann ich persönlich zu welcher Variante greife und empfehlen kann.

Frameworks

Yii2 eignet sich vor allem für große bzw. komplexe Webapplikationen und überzeugt durch Geschwindigkeit, Sicherheit und einer hohen Anpassungsfähigkeit. Da man hier direkt am Kern entwickelt, ist es mit einem Framework sogar ohne Probleme möglich, ein eigenes CMS zu schreiben, um den Unterschied zum CMS noch einmal näher zu bringen. Yii2 kann somit in allen Anwendungsfällen verwendet werden, allerdings ist man bei einer normalen Content-Seite mit Joomla! bzw Typo3 und bei einen Blog mit WordPress hier sicherlich besser bedient, da die Dauer für das Grundgerüst bei einem Framework natürlich weitaus höher liegt.

Content Management Systeme 

CMS Systeme wie Joomla! oder TYPO3 eignen sich am ehesten für Webseiten.
TYPO3 für größere mit verschachtelten Seiten und Joomla für kleine bis mittlere Homepages.
Auch wenn WordPress des öfteren als CMS System für normale Webseiten genutzt wird, möchte ich persönlich hiermit davon abraten. Das System ist für Blogs entwickelt worden und sollte auch nur dafür verwendet werden. Natürlich ist es auch möglich hiermit Webseiten zu erstellen, dies gestaltet sich allerdings meist äußerst Aufwendig und man ist mit anderen System folglich besser bedient.

Fazit

Abhängig davon welches Ziel man verfolgt, eignet sich ein anderes System, einen Gewinner auf klarer Linie gibt es hier resultierend nicht. Sollten Sie trotz dieses Beitrages weitere Fragen haben, oder möchten Ihre Umsetzung in unsere Hände legen, freue ich mich selbstverständlich auf ein persönliches Gespräch.

 

Top5 Kostenloser Joomla! Plugins

13. Februar 2015

Joomla ist ein starkes und mächtiges CMS, das vor allem dank seiner großen Community einen riesigen Umfang an kostenlosen Plug-Ins zur Verfügung stellt. Die meist verwendeten von uns will ich Ihnen heute vorstellen.

Vinaora Nivo Slider

Schönes einfaches Module zum Anzeigen von Slider, unkompliziert zu handhaben und für einfach Lösungen Optimal. Das Modul wird Installiert danach kann alles im Modul selber eingestellt werden. Anzeige Position sowie Pager Einstellungen Breite oder Farben. Extrem einfach gehalten und für geringeren Umfang genial, außerdem ist die Darstellung auch immer responsive.

JFacebook Connect

Wer nur ein schnelles einbinden von Facebook benötigt ist mit diesem kleinen Modul Perfekt beraten. Es ist Schnell und einfach konfiguriert, Multi-Lingual und bietet neben Facebook auch Google+, Twitter, Instagram, Amazone, GitHub, WindowsLive usw.

Google Maps by Reumer

Einfache und Simple Einbindung von mehreren Google Maps Karten. Diese können einfach über den Beitrag eingebunden werden und bieten verschiedene Anpassungen. Perfekt für das Einbinden einer Anfahrt Karte.

Xmap

Eine Simple Komponente um Sitemap zu generieren und auszugeben. Viel mehr kann man dazu nicht sagen. Sollte man so etwas benötigen für seinen Werbeauftritt, ist dieses kleine Module Perfekt.

Simple Image Gallery

Für das ausgeben komplexerer Galerien das Perfekte Plugin, funktioniert in allen gängigen Browsern sowie Joomla 1.5 – 3.0. Außerdem gibt es hier auch noch eine Pro Version mit der noch mehr möglich ist, wobei die Free Version eigentlich schon fast alles bietet, wenn man sich ein wenig auskennt.

Tipps und Tricks bei der Modul Suche

Joomla! verfügt ab 3.2 über die Option, Erweiterungen im Backend selber aus dem sogenannten Webkatalog zu installieren. Hier findet man vor allem wenn man den Namen des Moduls weiß, recht schnell was man sucht. Das Plugin: das Plugin „Aus Webkatalog installieren“ muss hierfür aktiviert sein.

Sollte man sich noch nicht genau im Klaren darüber sein was man genau braucht oder man weiß hierfür kein direkten Namen eines Moduls, empfiehlt es sich die offizielle Seit von Joomla! mal anzuschauen: extensions.joomla.org. Hier kann man schnell und einfach durch Filter Funktionen, das Module oder Plugin suchen das man braucht. Wichtig ist hier der Filter „Compatibility“ das die gewünschte Erweiterung auch auf der entsprechenden Joomla Version läuft. Sowie der Filter „Free/paid“ recht selbsterklärend ist, je nachdem was man sucht. Ansonsten kann man dort auch durch die „categories“ stöbern um die gewünschte Funktion zu finden.

Resümee

Dies sind wichtige kleine Helfer wenn es darum geht die Webseite mit den wichtigsten Grundfunktionen auszustatten. Hierfür gibt es Natürlich jede menge an Alternativen. Die meisten der oben vorgestellten Module und Plugins haben aber damit überzeugt das sie einfach zu bedienen sind und teilweise seit Joomla! 1.5 immer weiter entwickelt werden und somit höchstwahrscheinlich auch in neueren Joomla! Versionen Unterstütz werden. Außerdem bieten sie für fast alle Projekte genug Umfang. In Joomla! lohnt es sich immer nach einem kostenlosem Modul für seine Bedürfnisse zu schauen, bevor man sich selbst dran setzt oder ein kostenpflichtiges einsetzt.