Responsive Design, Responsive Webdesign

In der heutigen Zeit ist es als Betreiber einer Internetseite wichtig, diese für jedes Endgerät zugänglich machen zu können. Die Inhalte sollten auf jede Bildschirmgröße passen, ohne dass der Besucher der Seite mit dem Zoom herumspielen muss, bevor diese sich in irgendeiner Form präsentiert. Dabei entstehen für den Benutzer meist unangenehme Websites, die sich nur schleppend aufbauen und schlecht wirken. Seit mehr als 3 Jahren gibt es eine neue Form von Webdesign, die sich mit diesem Problem beschäftigt und dabei dabei auch noch für das anwendende Unternehmen Geld spart. Das Respondive Webdesign ist kein Trend, der nun in der nächsten Zeit Einzug halten wird, sondern die Rückbesinnung auf die Individualität von HTML-Dokumenten und deren Nutzung. Eine einfache Entwicklung von Websites, die sich von dem typischen Webdesign abhebt wird durch diese Methode fokussiert und am Ende können die Inhalte auf jedem mobilen Endgerät wie auf dem PC erscheinen. Diese allumfassende Lösung gehört zur Zukunft des Webdesigns und nennt sich eine Reaktionsfähige Webseite.

Was ist Responsive Webdesign?

Responsive Design beschäftigt sich mit der Formatierung von Internetpräsenzen, die auf jedem Endgerät, sei es das Smartphone, Tablet, TV oder dem PC, gleich angezeigt werden und somit benutzerfreundlich sind. Es bedarf dabei keiner doppelten Arbeit, denn die Präsenz wird vom Webdesigner schon als reaktionsfähige Webseite entwickelt, Somit entsteht eine Webseite, die sich individuell auf die jeweilige Bildschirmgröße einstellt und den User nicht mit festen Formatierungen plagt. Dabei wird nicht nur das Format der Seite angepasst, sondern auch Navigationsleisten, Texte und Bilder/Videos so in die Seite gebettet, dass diese in angenehmer Form erscheint und der Informationsgehalt trotzdem noch gegeben ist. Responsive Webdesign nutzt dafür die neuen Webstandards. HTML5, CSS3, JavaScript werden als technische Basis für das Design genutzt und können durch die Funktion eine responsive Internetseite erstellen. So werden Inhalte schnell geladen, perfekt angezeigt und der Kunde muss nicht ewig den Ladebalken verfolgen. Diese Art von Design hilft nämlich dem Seitenaufbau und muss dabei nicht noch mehr Befehle laden, die das Layout sprengen. Die Vorteile sind ersichtlich: Der Nutzer findet auf jedem Endgerät eine reaktionsfähige Webseite vor und kann somit jeden Inhalt schnell und einfach finden. Media Queries werden für diese Art von Darstellung genutzt, die nach bestimmten Kriterien das Design der Seite festlegen. So sollte eine responsive Seite zuerst von der kleinsten Auflösung an aufgebaut werden, was im heutigen Fall einer Display-Größe von 320 Pixeln entspricht. Smartphones gehen dann bis auf eine Pixelanzahl von 480 Pixeln hoch. Beim Tablet wären das zwischen 768 und 1024 Pixeln, wobei jeder Desktop-PC mit 1024 und mehr Pixeln darstellt. Der große Vorteil dieses Webdesigns ist die Flexibiltät und Kosteneinsparung, denn es wird nur eine einzige Seite entwickelt. Eine Webseite, die für ein mobiles Endgerät und den PC separat entwickelt wird, verursacht Kosten, die nicht notwendig wären. Ein einziger Webdesigner ist somit für das komplette Layout aller Endgeräte zuständig und spart dabei Geld. Ohne eine solche Dynamik muss die Seite immer wieder auf den neuesten Standard aktualisiert werden, das kostet Zeit und Geld und hätte durch ein Responsive Design schneller funktioniert. Selbst Bilder und Videos werden durch die Befehle im HTML-Dokument angepasst. Durch die sehr freie Gestaltung kann die Steuerung per Maus, Touch und Stimme so individualisiert werden, dass dabei jedes Endgerät den größten Komfort für den Nutzer bietet. Diese Art von Webdesign ist dazu auch sehr pflegeleicht, denn die Befehle lassen sich durch wenige Veränderungen ausweiten. In vielen Fällen reicht es, die Anzahl der Pixel umzustellen. Somit wird schon das neueste Ergebnis erzielt und die Seite auf die neuesten Generationen von Browsern und Displaygrößen gebracht. Die Vielseitigkeit ist das Konzept des Designs und somit für Unternehmen, Zeitungen, Blogs, eigentlich jede Seite geeignet, die heutzutage mit einem mobilen Endgerät erreicht werden kann.

Wie kam es zu dem Responsive Webdesign?

Statistiken zeigen, dass der Verkauf von Tablets und Smartphones steigt und somit muss mehr auf reaktionsfähige Webseiten gesetzt werden, sonst sind die User verstimmt. Diese führen zu einer schlecht besuchten Webseite und es wird nach einer Alternative gesucht, die ein besseres Layout und damit auch eine höhere Benutzerfreundlichkeit bietet. Die Grundsystematik des Webdesigns liegt in der Vergangenheit. Das typische HTML-Dokument passte sich zu frühester Zeit immer dem Bildschirm an und war nicht durch typische Programmierstandards festgelegt. HTML war flexibel, bis die Inhalte so massig wurden, sodass eine einheitliche Programmierung erfolgte. Vorteil des Responsive Webdesign ist, dass das Konzept gleich in den Designprozess übergeht und mit der Entwicklung Händchen hält. So können die Inhalte an das HTML-Dokument angepasst werden und dem Betreiber lacht keine statisch feste Seite ins Gesicht. Durch die Verbindung beider Arbeitsprozesse wird Zeit gespart und ein besseres Ergebnis erzielt. Grund dafür ist die Testphase, die sofort wieder in eine Designphase übergeht. Ein großer Vertreter und Träger der Responsive Webdesign-Idee ist der in Boston lebende Webdesigner Ethan Marcotte, der auch schon ein Buch über dieses Thema veröffentlicht hat. Marcotte ist begeistert von Design und Web Standards wie HTML und wie diese beiden miteinander wirken und sich unterstützen. So vertiefte MArcotte sich immer mehr in das Responsive Webdesign und die simple Umsetzung. Für jeden Webdesigner ist die Umstellung auf das Responsive Webdesign ein wenig umständlich, denn es sind keine Grenzen mehr vorgegeben und die Seite interagiert mit dem Designer. Diese simple Art des Webdesigns befürwortet Marcotte und er veröffentlicht Artikel über reaktionsfähige Webseiten, die Anwendern und Interessierten praktische Tipps geben um elegante Designs zu erzielen. Dabei können auch schon vorentwickelte Inhalte aus Photoshop und Co. genutzt werden. Diese sollten jedoch mithilfe von Styletiles genutzt werden, die wie Musterbücher für die Entwicklung dienen. So können die Inhalte ohne Probleme eingebunden werden und ein großer Aufwand wird damit gespart. Diese Einfachheit überzeugt immer mehr Nutzer, die ihre Präsenzen dynamisch verwalten und anbieten möchten.

Templates und Shopsysteme

Die Zukunft des Webdesigns wird immer mehr über das Responsive Design getragen. Als Hilfe für Anfänger im Responsive Design sind Templates und vorgerenderte Shopsysteme gegeben. Diese gibt es bei verschiedenen Anbietern und fallen auch recht umfangreich und mit vielen Funktionen aus. Die Kunden solcher Templates nutzen die Schablonen und setzen ihre Inhalte in um so die Seite zu gestalten. Bei einer Shop-Software werden auch Schablonen genutzt und ein fertiges Shopsystem, das einem jungen Unternehmen viel Raum für eigene Ideen gibt. Als Templateanbieter sind zum Beispiel Roxid, OXID eShop und weitere Anbieter gegeben. Das Angebot ist dabei sehr umfangreich und die Lösungen für individuelle Seiten sind für jede Person gedacht, so dass keine Seite der anderen gleicht.

OXID eShop

Der OXID eShop bietet Templates für fertige Shopsysteme an. Die e-Commerce Lösungen von OXID sind dabei hochqualitativ und für jeden Nutzer individuell nutzbar. Die Plattform bietet neben den Templates auch Informationen, Statistiken und Planung für den perfekten Onlineshop, der sich auf jedem Endgerät gut anzeigen lässt. Experten im Webdesign und e-Commerce stehen dem Nutzer jederzeit mit Antworten zur Verfügung und somit ist ein aufwendiges Informationsportal gegeben. Die Betreiber der Seite haben mit viel Aufwand das perfekte Netzwerk für den Handel mit dem Respondive Design aufgebaut und kann sich über eine große Zahl von Nutzern freuen, die auf die Templates von OXID setzen. Dabei steigen die Zahlen der Nutzer aufgrund der hohen Multimedia-Verkäufe und somit auch die die Plattform OXID.

Responsive Templates und Shop Software

Einen eigenen Shop oder eine eigene Webpräzens ist mithilfe von Responsive Tablets und bestimmter Shop Software gegeben. Dabei stehen mehrere Anbieter zur Verfügung, die bereits vorgefertigte Angebote bieten. Somit müssen nur noch die Inhalte eingegeben werden und die Seite wird dabei aufs Einfachste erstellt. Zur Erstellung steht CMS zur Verfügung. Das Bekannteste darunter ist Wordpress. Wordpress ist das einfachste System zur Erstellung von reaktionsfähigen Webseiten. Vielen dürfte Wordpress als Bloghoster bekannt sein, doch bietet Wordpress auch Lösungen zum Webdesign. Die Geschichte des Programms begann im Jahr 2002, als der Entwickler Michel Valdrighi ein neues Blogsystem auf PHP-basierend entwickelte. 2003 wurde es dann populär und 2004 konnte die erste stabile Version von Wordpress genutzt werden, die immer wieder verbessert wurd. Sie entwickelte sich daraufhin von einem einfachen System zur Erstellung von Weblogs zu einem Content-Management-System, dad frei erhältlich ist und dabei genügend Funktionen für ein funktionierende Webpräzent bietet. Das Interessante an Wordpress ist die Benutzerfreundlichkeit mit der bekannten "5-Minuten-Installation", Templates die Themen genannt werden und jeden individualisierten Bereich zur besseren Unterteilung abtrennt und die Community. Diese ist sehr lebendig und hilft neben dem Suport den Anwendern bei allen möglichen Fragen zur Gestaltung einer Website und Problemen beim Design. Die Vorlagen von Wordpress sind unabhängig von den Inhalten und so können die Themen frei bearbeitet werden. Diese sind in der Datenbank, während die Inhalte im Webspace abgelegt werden. Das ist nützlich um schnell Inhalte laden zu können. Wordpress besitzt über 10 Millionen Anwender und wird von vielen mobilen Browsern genutzt. Der Däne Kasper Skårhøj entwickelte schon im Jahr 1998 ein Content-Management-Framework für webbasierte Inhalte. Die Software konnte sich bis heute bewähren und basieert auf PHP. Als Datenbank stehen MySQL, MariaDB, Oracle oder PostgreSQL zur Verfügung. Das Besondere an TYPO3 ist die Nutzung von Erweiterungen, die entweder Foren, News oder Shop-Systeme sein können. Diese werden immer wieder erneuert und neue kommen hinzu und somit steht den Nutzern ein sehr individuelles Konzept zur Verfügung. Die Templates von TYPO3 sind sehr einfach zu nutzen, da selber kein Code geschrieben werden muss. Die Daten werden auf einem Webserver geladen und direkt im Webbrowser wird die Seite erstellt. Die freie Software besitzt drei grundlegende Konzepte: Die Webdesign-Erstellung, die Bearbeitung der Konfigurationen durch TypoScript und die endgültige Eingabe der Inhalte. Dabei stellt sich TYPO von selbst auf die Auflösung des Webbrowsers und Gerät ein und bietet somit eine sehr gute Endlösung für den Verbraucher. Die Templates selbst sind sehr einfach codiert und können ohne HTML-Kenntnisse bearbeitet werden um das Beste aus der Website rauszuholen. TYPO ist in drei Versionen erhältlich: TYPO CMS, TYPO Flow und die neueste Version TYPO Neos. Somit ist für jeden Nutzer die perfekte Ausführung dieses Systems und Templates gegeben. Die Shop Software OXID eShop bietet vorgefertigte Shopseiten, die nur noch mit dem Content gefüllt werden müssen. Ein weiterer Anbieter für Shop Software ist Shopware 4. Diese beiden Programme basieren auf der Entwicklersprache PHP. Shopware existiert hierbei schon seit 2004 und ist für Linux und Windows verfügbar. 2007 folgte ein Preis für die Software und der Umzug in ein größeres Entwicklerstudio. 2008 waren sie das erste Mal auf der CeBIT und seit da an wird der Erfolg von Shopware immer größer. Seit 2012 gehören über 8000 Kunden zu Shopware, die den Dienst nutzen und darüber ihre Produkte vertreiben. Dabei ist das Programm als Oben Source verfügbar, kann jedoch auch käuflich in anderen Editionen erworben werden. Die Funktionen von Shopware sind sehr groß und bieten für jeden Shopbesitzer das passende Tool. Durch Drag & Drop können Kategorien umgesetzt werden. Das Backend setzt sich aus einfachen Befehlen und Möglichkeiten zusammen, die einen Shop schnell und unkompliziert erstellen. Die Templates von Shopware bieten genügend Raum für jeden Shop und wirken dennoch individuell. Für Designer sind diese jedoch noch interessanter, denn Shopware bietet eine die Möglichkeit eigene Vorlagen zu erstellen und für reaktionsfähige Webseiten zu nutzen. Die Programmen 960.gs, Smarty und jQuery sind für das Layout der Seite zuständig und bieten zum Beispiel Raster, die jeder Browser unkompliziert darstellen kann. Eine eigene Programmierung wird durch Smarty gegeben, denn so lassen sich eigene Templates nicht nur erstellen, sondern auch entwickeln und sind somit noch dynamischer. Durch das Feature der eigenen Wiki werden Hilfestellungen zum Webdesign und Shopware gegeben, damit der Anfänger sich nicht verliert. Shopware ist auch bei Trusted Shops angemeldet und bietet somit die perfekte Grundlage für ein gutes e-Commerce. Die Community Edition ist kostenlos und für jeden nutzbar. Durch die Nutzung eines App-Stores können Anwendungen hinzugefügt werden. Einige davon sind nicht kostenlos, doch bietet der Shop genügend Auswahl. Ein Shop durch Shopware nutzt nicht nur das Feature der Templates, sondern auch der Schnittstellen. Diese sind als Export und Import der geschäftlichen Daten zu nutzen. PayPal ist zum Beispiel eine Schnittstelle.

OXID eShop Responsive Templates

Der OXID eShop gehört zu den innovativsten Systemen und Anbietern für Responsives Webdesign. Ein OXID Responsive Template besticht durch die einfache Bearbeitung, denn der komplette Shop ist durch diese Templates aufgebaut. Dabei können die Themen der Templates immer anders sein und Drittanbieter entwerfen individuelle Templates, die dann in OXID integriert werden können. Diese kosten in den meisten Fällen nur etwas, sobald der Webdesigner einen hohen Arbeitsaufwand beim Design hatte und diesen dann auch vergütet haben möchte. Der Marktplatz für OXID Templates ist sehr groß und immer wieder neue Templates mit den interessantesten Themen tauchen dabei auf. OXID selbst bietet immer wieder neue Templates an, die vom Standard abweichen und somit neue Konzepte im e-Commerce freischalten. Dabei werden die Templates immer besser und warten nicht nur mit einem verbesserten Design, sondern auch mit einem administratorfreundlichen System auf. Das Template JAXFrontEdit zum Beispiel hilft beim Ärger über Inhalte, die nach dem Erstellen irgendwie komisch aussehen. So kann der Inhalt dann direkt im Frontend bearbeitet werden und somit stellt sich der Ärger wieder ganz schnell ein. Entwickelt wurden die Templates um die höchste Benutzerfreundlichkeit zu gewähren. Einige interessante Themes sind zum Beispiel: OXID bietet Möglichkeiten jeden Shop so zu entwickeln, wie der Kunde es wünscht und simpel ist es dazu auch noch. Es gibt auch gratis Apps, die zum Beispiel den eShop von OXID mit TYPO und anderen CMS-Programmen verbinden können und somit noch mehr Nutzerfreundlichkeit bieten. Neben den Templates können weitere Produkte für einen eShop erworben werden. Das Hauptaugenmerk liegt jedoch auf den Templates, die durch ihre gestalterischen Möglichkeiten überzeugen. Im Tutorial gibt es unter der Option "Theme Management im OXID eShop ab 4.5.0" eine perfekte Anleitung zum Erstellen des eigenen Templates. Dieser erklärt ausführlich anhand des Templates "Azure" wie die Individualisierung des Templates funktioniert. Dieses ist in seinem Aufbau sehr einfach und kann so von jedem Designer, mit Unterstützung des Tutorials, bearbeitet werden und zeigt sich damit am Ende von der besten, personalisierten Seite. Falls Fragen zu den Templates aufkommen sollten, steht die Community mit Rat und Tat zur Seite, doch Templates erstellen ist ein Gebiet, das Webdesigner nicht lange studieren brauchen. Es können auch eigene Slider oder Inhalte von externen Bildbearbeitungsprogrammen genutzt werden. Diese zukunftsweisende und einfache Art des Webdesigns bietet somit jedem die Möglichkeit einen Shop ohne kostspielige Ausgaben zu eröffnen.

OXID Modul

Jeder, der sich etwas intensiver mit der Erstellung von Webseiten oder Webshops beschäftigt, wird anfangs auf Begriffe stoßen, die nicht ganz verständlich sind. Auch beim OXID eshop gerät der Laie an seine Grenzen, wenn er sich nicht intensiver mit dem Aufbau eines solchen Shops beschäftigt.

Ganz häufig fällt im Zusammenhang mit dem OXID eShop der Begriff Modul. Der Begriff Modul ist uns wohl allen unter den Synonymen Baustein, Bauelement oder Teil eines Systems geläufig, aber was genau ist im Rahmen des OXID eShops mit einem Modul gemeint?

Auch hier wird der Begriff Modul für die Bezeichnung eines Bausteins des OXID eShops verwendet. Einem jedem OXID Modul kommt im Rahmen des Shops eine wichtige Funktion zu. Alle OXID Module sind in der Verzeichnisstruktur unter /modules abgelegt und können hier auch auf den jeweiligen Shop angepasst oder erweitert werden.

Unter dem Punkt /modules finden sich beispielsweise Module für die automatische Generierung von PDF-Rechnung oder Module für die Zahlungsmethoden.

Da jeder Shop ganz unterschiedliche Anforderung an eine Software hat, kann der OXID eShop mit dem verfügbaren Open-Source-Shop-System individuell nahezu ohne Grenzen an die eigenen Ansprüche angepasst werden.

Die Module können entsprechend um weitere OXID Module erweitert werden. Hierzu können entweder am Markt verfügbare OXID Module erworben oder aber bei entsprechendem Know-How selbst geschrieben werden. Einige Shops bietet das gleiche Produkt beispielsweise in ganz verschiedenen Varianten, wie unterschiedlichen Größen oder Farben an. Hier ist es sinnvoll den OXID Absicherung der Zahlungen sowie des zügigen Geldeingangs Wert auf die Zahlungsmethode paypal legen, benötigen eine Erweiterung um das OXID Modul paypal. Ebenso gibt es auch OXID Module, welche einen besonders sicheren Zahlungstransfer ermöglichen. Die Zahl der OXID Module ist grenzenlos und ständig werden neue OXID Module entwickelt. Dabei dienen OXID Module nicht nur in erster Linie aufeinander abgestimmten Prozessen in der Abwicklung. Auch die Bedieneroberfläche bietet zahlreiche Optimierungsmöglichkeiten für den Kunden. Beispielsweise kann eine kundenfreundliche Bedieneroberfläche durch die Möglichkeit der Vergrößerung der Produktbilder oder Detailansichten der Produkte umgesetzt werden. Dies wird mitunter auch zu einer erhöhten Kaufbereitschaft beim Kunden führen.

Doch wie genau werden die ausgewählten OXID Module nun in den Shop integriert? Ein neues Modul wird einfach als PHP-Datei im Verzeichnis /modules abgelegt. Damit das abgelegte Modul dann auch vom OXID eShop berücksichtigt wird, ist hierfür noch eine Anmeldung des Moduls im Adminbereich erforderlich unter Stammdaten => Grundeinstellungen => System => Module. Die Box „Installierte Module in Ihrem Shop! bietet die Möglichkeit über das Einfügen einer neuen Zeile mit dem Modulnamen das neue Modul zu registrieren.

Wer sich etwas Zeit nimmt, sich in die Abläufe und Entwicklungsmöglichkeiten des OXID eShops einzulesen, wird schon bald seine Shop problemlos um neue OXID Module erweitern und seinen Shop somit an seine Produkte und Vorstellungen hinsichtlich Abwicklung aber auch Benutzerfreundlichkeit anpassen können. Je einfacher die Abwicklung für den Kunden ist und je mehr Eindrücke sowie Infos er im OXID e Shop über die jeweiligen Produkte erhält, desto wahrscheinlicher ist der Kauf. Ein Shop, der nicht selbsterklärend ist und den Kunden „an die Hand nimmt“, wird langfristig nicht erfolgreich sein können. Daher sollte jeder Shop-Betreiber über dem optimalen Einsatz von und idealen Ausbau mit OXID Modulen nachdenken. OXID bietet alle Möglichkeiten, um am Markt erfolgreich agieren zu können, man muss diese nur nutzen.