Bachelorarbeit. Stanislav Seifert. Responsive Webdesign Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick

Größe: px
Ab Seite anzeigen:

Download "Bachelorarbeit. Stanislav Seifert. Responsive Webdesign Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick"

Transkript

1 Bachelorarbeit Stanislav Seifert Responsive Webdesign Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick Fakultät Design, Medien, Information Department Medientechnik Faculty of of Design, Media and Information Department of Media Technology

2 Stanislav Seifert Matrnr Responsive Webdesign Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick Bachelorarbeit eingereicht im Rahmen der Bachelorprüfung im Studiengang Bachelor of Science Media Systems am Department Medientechnik der Fakultät Design, Medien, Information der Hochschule für Angewandte Wissenschaften Hamburg Erstprüfer: Herr Prof. Dr. Andreas Plaß Zweitprüfer: Dipl.- Wirtsch.- Inf. (DH) Herr Daniel Heid Abgegeben am 01. April 2014

3 Stanislav Seifert Thema der Arbeit Responsive Webdesign Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick Stichworte Responsive Webdesign, Grid- System, HTML5, CSS3, Typo3, SASS, Compass, Grunt.js, Bootstrap 3 Framework, Responsive Image Rendering Kurzzusammenfassung Diese Bachelorarbeit befasst sich mit dem Relaunch der Website Aufbauend auf einer bereits reaktionsfähigen Umsetzung dieses Internetauftrittes wird in dieser Arbeit ein von Grund auf neuer, flexiblerer und zuverlässigerer Ansatz verfolgt. Neben einer deutlicheren Verbesserung der Website- Performance wird vor allem auch der Workflow für Entwickler optimiert, was den technischen Supportaufwand und die damit verbundenen Supportkosten senken soll. Stanislav Seifert Title of the paper Responsive Webdesign Problems and solutions exemplary explained on the web- site Netzdurchblick Keywords Responsive Webdesign, Grid- System, HTML5, CSS3, Typo3, SASS, Compass, Grunt.js, Bootstrap 3 Framework, Responsive Image Rendering Abstract This bachelor thesis describes the re- launch of the Website Based on an already existing responsive implementation of this website a funda- mentally new, more flexible and reliable approach will be pursued by this bachelor thesis. In addition to the significant improvement of the website- performance es- pecially the workflow for developers will be optimized as well in order to reduce technical support effort and the associated costs. Die Optik diese Bachelorarbeit basiert auf einer Word- Vorlage der HAW- Hamburg. Quelle: hamburg.de/fakultaeten- und- departments/ti/fakultaetsservicebuero/abschlussarbeiten.html

4 Inhaltsverzeichnis 1 Einleitung Was ist Responsive Webdesign Wozu Responsive Webdesign? Desktop first vs. Mobile first Responsive Webdesign Hauptbestandteile Zielsetzung Fachliche Schwerpunkte Anforderungsanalyse IST-Zustand SOLL-Zustand Konzept der Website Seitentypen und Bereiche: netzdurchblick.de Startseite Desktop Unterseiten Desktop Startseite Smartphone Unterseiten Smartphone Start- und Unterseite Bildschirme zwischen Smartphone und Desktop Spezielle Seiten Technische Umsetzung Template Vorlagen Frameworks YAML I

5 4.2.2 Foundation Bootstrap Grid-System Media Queries Media Queries angewendet auf das Bootstrap 3-Grid-System Media Queries angewendet auf die Schriftskalierung Flexible Bilder und Responsive Image Rendering Skalierung von Bildern Hintergrundbilder Background-Images Normale Bilder IMG-Tag Responsive Images Responsive Image Rendering Responsive Enhance Picture Polyfill Adaptive Images Hilfreiche Tools für eine bessere Codeübersicht CSS Präprozessoren SASS Syntactically Awesome Stylesheets Variablen Verschachtelung von CSS-Klassen (Nesting) Modularisierung des CSS-Codes (Partials/Import) Methoden (Mixins) Vererbung (Extend/Inheritance) Operatoren SASS VS. LESS SASS Fazit Grunt Mehrere Tasks parallel ausführen Datei-Organisation Konfiguration von Grunt Git Version Control System HTML-Gerüst ViewPort Spezifische Probleme von netzdurchblick.de Equal Height Columns Einklappen/Ausklappen spezifischer Columns II

6 5 Typo Testing Old Browser Support Performance Datenmenge: Vorher Nachher Fazit und Ausblick Fazit Ausblick Literaturverzeichnis Buchliteratur Internetliteratur Abbildungsverzeichnis III

7 1 Einleitung Der Webauftritt netzdurchblick.de 1 wurde von Studenten der Fachrichtung Kommunikationsdesign ins Leben gerufen und richtet sich an Kinder und Jugendliche um sie über die Grundlagen des Internets zu informieren. Das Projekt wurde mit dem Content Management System (CMS) Typo3 2 aufgesetzt, um Inhalte der Seite möglichst schnell, einfach und ohne Programmierkenntnisse editieren zu können. Im Rahmen dieses Studienprojektes ist eine Kooperation zwischen den Studiengängen Kommunikationsdesign und Media Systems entstanden, bei der die Kommunikationsdesigner ein Konzept sowie ein Layout für verschiedene Auflösungen entwickelten. Im Anschluss wurde dieses Layout von meinem Projektpartner (Benjamin Strilziw) und mir (Stanislav Seifert) im Rahmen eines Responsive Webdesign Projektes umgesetzt. An die Ergebnisse dieses Projektes soll diese Arbeit anknüpfen. Um einen guten Einstieg in das Thema zu finden sollen vorab einige Begrifflichkeiten geklärt werden. 1.1 Was ist Responsive Webdesign Der Begriff Responsive Webdesign kommt aus dem Englischen und bedeutet übersetzt reaktionsfähiges Webdesign. Gemeint ist damit ein Template für eine Website, welches i.d.r. aus HTML, CSS und Javascript besteht und auf äußere Einflüsse adäquat reagiert. Somit ist die Anforderung an ein reaktionsfähiges Template, unabhängig von der Bildschirmgröße des Ausgabegerätes, Inhalte der Website ordentlich, übersichtlich und strukturiert darzustellen. Die Erfahrung zeigt jedoch, dass ein reaktionsfähiges Template gegenüber einem ursprünglichen statischen Template deutlich komplexer ist und die Umsetzung viel mehr Zeit in Anspruch nehmen kann Wozu Responsive Webdesign? Aufgrund der Komplexität einer reaktionsfähigen Website lautet eine berechtigte Frage: Warum sollte der Zusatzaufwand betrieben werden, eine Website reaktionsfähig umzubauen oder gar neu zu bauen? Ein reaktionsfähiges Template passt sich nicht nur an die Bildschirmgröße, sondern auch an die Bildschirmverhältnisse eines beliebigen Ausgabegerätes an. Nicht zuletzt gehört auch die Anpassung der Performance oder der Usability-Führung zur Funktion des reaktionsfähigen Templates. 2 Typo3: Project Lifecycle Process:

8 Im Segment der Touchscreen Geräte wird der User beispielsweise mit einem anderen Bedienkonzept konfrontiert als am Laptop. Statt der Maus ist der Finger das Hauptinstrument der Bedienung. Auf diese und andere Veränderungen muss das Template reagieren können und gegebenenfalls alternative Navigationsmodelle bieten. Auch andere Anpassungen, wie beispielsweise die Verbesserung der Lesbarkeit durch Veränderung der Schriftgrößen, werten das Surf-Erlebnis des Website-Besuchers erheblich auf. Wird auf diese und andere Anforderungen an das Template Rücksicht genommen, so kann die Verwendung der Website auf einem Smartphone oder Tablet deutlich angenehmer beziehungsweise in bestimmten Fällen auch überhaupt erst möglich gemacht werden. Der Trend einer zunehmend mobilen Nutzung des Internets ist bereits heute schon gesetzt. 4 Immer mehr User gehen nicht nur unterwegs außerhalb der eigenen vier Wände über ihr Smartphone ins Internet, sondern nutzen es auch zu Hause, z.b. auf der Couch alternativ zum Computer. 5 In dem Fall, dass ein User online einkaufen möchte und einen Online-Shop findet, der nicht reaktionsfähig optimiert ist, tendiert er wahrscheinlich dazu, einen Wettbewerber aufzusuchen, anstatt aufzustehen, um den Kauf am Computer komfortabel abschließen zu können. 5 Dadurch verliert der Onlineshop- Betreiber potentielle Kunden und letztendlich Umsatz. Dieses Beispiel verdeutlicht die zunehmende Wichtigkeit des Responsive Webdesigns, so dass der zusätzliche Aufwand für ein reaktionsfähiges Template seine Berechtigung bekommt Desktop first vs. Mobile first Grundsätzlich lässt sich Responsive Webdesign in zwei Ansätze unterteilen. Diese heißen Mobile first und Desktop first. 6 Mobile first steht dabei für ein Template, das zuerst für mobile Geräte entwickelt wird und zu einem späteren Zeitpunkt für größere Formate wie Tablet und Desktop optimiert wird. Mobile first wird oftmals auch Content first genannt, da hier der Schwerpunkt auf den Inhalten und nicht auf dem Design liegt. 7 Im Gegensatz dazu steht der Desktop first Ansatz. Hierbei wird mit dem Template-Entwurf für große Bildschirme angefangen und anschließend Anpassungen für kleinere Geräte vorgenommen. Dieser Ansatz ist designorientiert und bietet sich beispielsweise an, wenn ein bereits bestehendes statisches Template reaktionsfähig umgebaut werden soll. 4 KANNENBERG, Axel: heise, Statista: ZILLGENS, Christoph: Reponsive Webdesign, Carl Hanser Verlag München, 2013: S ZILLGENS, Christoph: Reponsive Webdesign: S. 61, BEZ, Roberto: heise, html, ZILLGENS, Christoph: Reponsive Webdesign: S. 81 2

9 Wie an der Entwicklung beliebter CSS-Frameworks, welche in Kapitel 4.2 Frameworks behandelt werden, heute zu erkennen ist, geht der Trend zur Zeit jedoch eindeutig in die Richtung des Mobile first Ansatzes Responsive Webdesign Hauptbestandteile Ethan Marcotte unterteilt reaktionsfähiges Templating hauptsächlich in drei grundlegende Elemente 9 : Flexibles Gestaltungsraster Grid-System Flexible Bilder/Medien Responsive Images MediaQuerys CSS3 Modul Das Grid-System stellt die Basis für ein Template Design dar und besteht aus vielen Container-Boxen, welche anschließend mit Inhalt und Design gefüllt werden. Das Besondere an einem reaktionsfähigen Grid-System ist, dass es auf seine Umgebung, also die Bildschirmdimensionen, reagieren kann, um Inhalte besser darzustellen. Bilder und andere Medien müssen sich wiederum an das Grid-System anpassen, indem sie runterskaliert oder ausgeblendet werden. Über Skalierung oder Ausblendung eines Inhalts muss letztendlich während einer Inhalts-Analyse und der damit verbundenen Priorisierung von Inhalten eine Entscheidung getroffen werden. Alternativ können ausgewählte Inhalte auch eingeklappt und somit nur temporär versteckt werden, um den Platz auf dem Bildschirm effizienter zu nutzen. Media Queries sind ein CSS3 Modul, mit dessen Hilfe CSS-Stylesheets abhängig von einer Bildschirmauflösung gesetzt werden können. Diese Möglichkeit bietet dem Entwickler mehr Kontrolle über ein Template, da es auf diese Weise für bestimmte Display-Gruppen gezielt optimiert werden kann. 1.2 Zielsetzung Mit dem Relaunch von netzdurchblick.de sollen: ein effizienterer Workflow realisiert, Redundanzen im HTML-Template behoben, auf eine neue Typo3 Version gewechselt, eine höhere Zuverlässigkeit und Flexibilität des Templates erreicht und eine Performance-Verbesserung der Seite erzielt werden. 8 ZAGLOV, Ilja, t3n: MARCOTTE, Ethan: Responsive Webdesign, Published by Jeffrey Zeldman, 2011, S. 9 3

10 1.3 Fachliche Schwerpunkte Da der Schwerpunkt dieser Arbeit auf dem Thema Responsive Design liegt, werden neben projektspezifischen Problemstellungen des netzdurchblick.de Templates auch unterstützende Tools wie CSS Präprozessoren, Frameworks wie Bootstrap, Taskmanager, Grid-Systeme, Responsive Image Rendering, Media Queries, Performance-Optimierung und Abwärtskompatibilität in älteren Browsern behandelt. All diese Themen werden sowohl theoretisch in dieser Arbeit, als auch praktisch in der Umsetzung eines realen Projektes behandelt. 10 Frontend-Templating und die Einbindung in Typo3 liegen nah beieinander. Aufgrund dieser Tatsache wird am Ende dieser Arbeit eine laufende Typo3 Installation vorhanden sein, die die Vorteile des überarbeiteten Frontend-Templates aufzeigen soll. Aus Zeit- und Platzgründen werden jedoch nicht alle relevanten Systeme, Konzepte und Techniken so wie z.b. Typo3 intensiv beleuchtet werden können. 10 Netzdurchblick Development-Umgebung:

11 2 Anforderungsanalyse Da das Team von netzdurchblick.de als ein Kunde, der den reaktionsfähigen Umbau der Website netzdurchblick.de beauftragt hat, angesehen werden kann, wird in dieser Arbeit von einem realen Kunden ausgegangen. 2.1 IST-Zustand 11 Wie bereits in der Einleitung erwähnt, ist netzdurchblick.de ein Internetratgeber, der das Ziel verfolgt, Kinder und Jugendliche über Grundlagen im Internet zu informieren. Um technisch zeitgemäß zu bleiben, wurde vom Kunden seiner Zeit der Entschluss getroffen, die Seite reaktionsfähig anzupassen. Im Grunde genommen besteht der gesamte Webauftritt von netzdurchblick.de aus nur zwei Standard-Templates: dem Start- und Unterseiten-Template, welche anpassungsfähig optimiert wurden. Wie diese Templates im Detail aussehen und sich unterscheiden wird in Kapitel 3 Konzeption erläutert. Abbildung 1 - netzdurchblick.de Startseite Durch die Tatsache, dass der netzdurchblick.de IST-Zustand während eines Studienprojektes mit einer begrenzten Anzahl an Stunden entstanden ist, war aus Zeitmangel lediglich eine reaktionsfähige Anpassung der bis dahin statischen Templates möglich. Eine andere Vorgehensweise, wie z.b. ein kompletter Umbau oder Neubau der Webseite, war in diesem Zeitraum nicht möglich. Als Konsequenz dieser Tatsache konnten die Templates nicht ausreichend zuverlässig reaktionsfähig umgebaut werden. Der Grund dafür war, dass die technische Grundlage von netzdurchblick.de auf einer stark verschachtelten HTML-Struktur basiert und einige reaktionsfähige Anpassungen über direkte ID-Selektionen umgesetzt werden mussten. Da sich IDs abhängig zu neu angelegten Spalten oder Inhalten ändern können, ist dadurch an einigen Stellen eine fehlerhafte Darstellung der Seite nicht auszuschließen. Dieses Risiko war jedoch mit dem Hinweis für Redakteure, dass keine neuen Inhalte auf der Startseite erstellt sondern nur editiert werden dürfen, von Anfang an kommuniziert, um mögliche Darstellungsfehler zu vermeiden. Dennoch verliert die Seite durch diese Einschränkung für Redakteure an Flexibilität und kostet zusätzliche Zeit in der Pflege. Durch das ständige Risiko einer fehlerhaften Darstellung 11 Netzdurchblick:

12 werden sich evtl. einige Redakteure darüber hinaus bei der Pflege der Daten unsicher fühlen und langsamer arbeiten. Neben der Zuverlässigkeit muss bei reaktionsfähigen Websites wie netzdurchblick.de auch verstärkt auf die Performance der Seite geachtet werden. In Detail beschreibt die Performance die Datenanzahl und Datenmenge der gesamten Seite. Diese Größen sind letztendlich ausschlaggebend für die Ladezeit der Website sowie den Traffic und die damit verbundene Auslastung des Servers. Durch die reaktionsfähigen Anpassungen an netzdurchblick.de wurde die Seite jedoch anstatt schlanker zu werden sogar noch etwas größer. Mit beispielsweise 1,1 Megabyte auf der Startseite ist der Webauftritt für mobile Geräte wie Smartphones sehr groß. Hinzu kommt, dass durch die reaktionsfähige Erweiterung und den damit verbundenen Anspruch einer neuen Navigations-Struktur, Redundanzen durch doppelte Navigationsausgaben für die Mobile- und Desktopgröße im HTML entstanden sind. Durch die reaktionsfähige Erweiterung von netzdurchblick.de, hat auch die Menge am CSS und Javascript-Code zugenommen. Dies hatte wiederum zur Folge, dass beispielsweise CSS-Dateien, wie responsive.css mit 936 Zeilen oder anpassungen.css mit 1184 Zeilen, unübersichtlich geworden sind und den Support der Seite für den Kunden zeitaufwändiger und somit teurer werden lassen. Um die Nachteile der vorhandenen reaktionsfähigen Umsetzung von netzdurchblick.de aus Kundensicht zusammen zu fassen, soll folgende Auflistung helfen: Das Anlegen neuer Inhalte, Spalten oder allgemeiner Container kann in der Praxis zu einer fehlerhaften Darstellung der Seite führen. Das Gewicht der Seite ist deutlich zu groß und bringt lange Ladezeiten für Besucher mit sich. Der technische Supportaufwand der Seite und die damit verbunden Kosten sind zu hoch. Aus den bisher gesammelten Fakten lässt sich das Resümee ziehen, dass eine reaktionsfähige Anpassung einer statischen Seite zwar schneller als ein Relaunch der kompletten Seite umzusetzen wäre, dennoch, je nach Zustand bzw. der Ausgangssituation des zu optimierenden Projektes, Fehleranfälligkeit sowie höheres Supportaufkommen und andere Nachteile auftreten könnten. Besonders der Punkt des zeitaufwändigen Supportaufkommens bringt bei einem Relaunch sehr viel Verbesserungspotential mit sich. Doch bevor sich für einen Relaunch einer Website entschieden wird, müssen auch die Konsequenzen betrachtet werden. Anders als bei Anpassungen muss bei einem Projekt-Relaunch wie netzdurchblick.de alles von Grund auf neu erstellt werden. Damit sind Punkte wie eine neue Backend-Installation, Konfigurationen und Daten-Pflege bzw. Daten-Migration gemeint. Diese Arbeitsaufwendungen nehmen natürlich viel Zeit in Anspruch, geben dem Entwickler im Ge- 6

13 genzug aber auch die Möglichkeit, eine komplett neue und saubere, auf Responsive Webdesign ausgelegte Projekt-Struktur aufzubauen. Davon profitiert letztendlich auch der Kunde, indem laufende Supportkosten gesenkt werden können. 2.2 SOLL-Zustand 12 Alle im vorherigen Abschnitt genannten Problemstellungen des IST-Zustandes von netzdurchblick.de können mit einem Relaunch der Seite behoben oder verbessert werden. Natürlich muss der Kunde dafür zunächst einmal mehr Geld investieren, als es bei reinen Anpassungen der Templates der Fall wäre. Dennoch rechnet sich diese Investition auf lange Sicht, da der Pflege- und Supportaufwand der Website gesenkt wird. Auch das Besuchererlebnis profitiert von dieser Investition des Kunden, da die Seite durch eine Optimierung der Performance schneller geladen werden kann. Im Detail sind folgende Lösungen für den netzdurchblick.de IST-Zustand gefordert: Durch den Relaunch von netzdurchblick.de sollen ein zuverlässiges Erscheinungsbild unabhängig von der Datenpflege ermöglicht werden. Quell-Dateien wie CSS oder Javascript besser strukturiert und eine bessere Code-Übersicht gewährleistet werden. Allgemein soll der Workflow für Entwickler optimiert und das Supportaufkommen minimiert werden. die Performance der Website verbessert werden, um Besuchern ein schnelleres Surferlebnis bieten zu können. dem Redakteur mehr Flexibilität in der Beeinflussung des Erscheinungsbildes des Frontends gegeben werden. Im Detail soll der Redakteur damit die Möglichkeit bekommen die Anordnung der Inhalts-Container über das Backend zu steuern. der günstige Zeitpunkt auch gleichzeitig für ein Typo3-Update genutzt werden. 12 Netzdurchblick Development-Umgebung:

14 3 Konzept der Website 3.1 Seitentypen und Bereiche: netzdurchblick.de Der gesamte Webauftritt von netzdurchblick.de besteht aus zwei grundlegenden Templates: dem Startseiten- und Unterseiten-Template. Wie die meisten Template-Designs für CMS-Systeme ist auch dieses in klare Bereiche gegliedert (Abb. 2). Abbildung 2 - Template Bereiche 8

15 3.1.1 Startseite Desktop Header Der Header von netzdurchblick.de enthält das Logo und zwei Social-Media-Buttons zu Facebook und Twitter. Main-Navigation Die Main-Navigation ermöglicht es dem User zwischen den einzelnen Kategorien zu navigieren. Als Hover-Event oder Active-Zustand kommt ein kurzer Beschreibungstext zur jeweiligen Kategorie hinzu. Wenn keine Kategorie aktiv ist, zum Beispiel wenn sich der User auf der Startseite oder Suchseite befindet, wird folgender Text angezeigt: Fahre mit der Maus über die Buttons für mehr Informationen. Slider Der Slider basiert auf dem jquery 13 Plugin Nivoslider 14 und animiert Bilder, die über das Backend von Typo3 gepflegt werden können. Der Slider findet nur auf der Startseite Anwendung, jedoch nicht auf den Unterseiten. Im späteren Projektverlauf wird das Nivoslider-Plugin aus performancetechnischen Gründen gegen das Bootstrap 3 Carousel ausgetauscht. Main-Content-Container Der Main-Content-Container ist der komplexeste und größte Bereich von netzdurchblick.de. Dieser Bereich enthält weitere Unterbereiche, die in HTML-Container gegliedert sind. Diese stehen in Columns (Spalten) und Rows (Reihen), ähnlich wie bei einer Tabelle, zueinander. In Kapitel 4 Technische Umsetzung wird detailliert erklärt, wie sich Inhalts-Boxen in diesem Bereich abhängig von äußeren Einflüssen verhalten. Footer Abschließend befindet sich im unteren Bereich der Seite der Footer, der eine Meta-Navigation und verlinkte Logos zu den Partnern enthält. Die Partner-Logos sind der einzige Bereich im Layout, der aus dem Site-Container bricht und rechts unten anknüpft. 13 Javascript Framework 14 NivoSlider:

16 3.1.2 Unterseiten Desktop Das Start- und Unterseiten Template unterscheiden sich prinzipiell nur in den Bereichen Main- Content-Container und Slider. Abbildung 3 - Unterseiten Bereiche, Kategorie PC-CHECK Wie in Abbildung 3 zu sehen ist, ist der Slider auf der Unterseite nicht mehr vorhanden. Stattdessen knüpfen Sub-Navigation und der Main-Content-Container direkt an die Main-Navigation an. Zudem wird das Layout im Gegensatz zur Startseite in der ersten Ebene zweispaltig. In der linken Spalte wird die Sub-Navigation und in der rechten Spalte der Main-Content-Container platziert. Der Main- Content-Container geht somit nicht mehr über die volle Breite. Die in Abbildung 3 gezeigte Inhalts- Box breitet sich über die volle Breite des Main-Content-Containers aus. Abbildung 4 hingegen zeigt ein Konstrukt, in dem der Main-Content-Container mehrere Inhalts-Boxen enthalten kann. Abbildung 4 Main-Content-Container mit mehreren Inhalts-Boxen 10

17 Wie bereits an der Main-Navigation erkennbar ist, enthält jede Kategorie ihre eigene Farbgebung. Diese Farbgebung findet sich im Unterseiten-Template abhängig von der ausgewählten Kategorie wieder. So enthält beispielsweise die Kategorie PC-Check die Basisfarbe Grün (Abb. 3). Die Kategorie Web Gesetz hat hingegen die Basisfarbe Orange (Abb. 5). Diese individuelle Farbgebung erstreckt sich über alle Kategorien. Abbildung 5 - Kategorie WEB GESETZ 11

18 3.1.3 Startseite Smartphone Das Designkonzept für Smartphone Geräte lässt sowohl die Sub-Navigation als auch die Suche hinter einer Schaltfläche verschwinden, welche sich per Klick wieder öffnen lässt (Abb. 7 und 8). Der Social Media-Bereich im Header verschwindet vollständig. Auch die Farbgebung der gesamten Seite verändert sich von dunkelgrau zu blau. In Abbilung 6 ist die Startseite im Überblick zu sehen. Abbildung 7 - Smartphone Ansicht der Main-Navigation Abbildung 8 - Mobilegerät Ansicht der Suche Abbildung 6 - Mobilegerät Seitenübersicht Die Logos der Partner wandern in den Seiten-Container und verteilen sich gleichmäßig horizontal über die gesamte Breite. Die Inhalts-Boxen brechen untereinander um und erscheinen in der mobilen Version auf der Startseite eingeklappt. Beim Klick auf die Headline beziehungsweise auf den Pfeil einer Inhalts-Box klappt die jeweilige Inhalts-Box wieder auf (Abb. 6 und 9). Große Bilder wie die im Slider werden abhängig zur Bildschirmbreite kleiner skaliert. Inhaltliche Bilder, die klein genug für alle Auflösungen sind, behalten ihre ursprüngliche Größe. Auch die Textgröße wird, abhängig von der Bildschirmbreite, beeinflusst. Abbildung 9 Inhalts-Box aufgeklappt 12

19 3.1.4 Unterseiten Smartphone Der Aufbau der Unterseiten verhält sich, wie bereits in der Desktopvariante, ähnlich dem Startseiten- Aufbau. Den Platz des verschwundenen Sliders nimmt die Sub-Navigation ein. Direkt daran knüpft der Main-Content-Container an, wobei alle Inhalts-Boxen untereinander brechen und nicht, wie auf der Startseite, eingeklappt dargestellt werden. Abbildung 10 und 11 zeigen zwei Variationen einer Unterseite. Abbildung 10 - Unterseite mit einer Inhalts-Box In der Sub-Navigation (Abb. 12) lassen sich auch tiefere Navigationsebenen darstellen. Enthält eine Seite weitere Unterseiten, so klappen unter dem Navigationsmenü weitere Navigationsflächen auf. Das ist bis zu einer Tiefe von drei Ebenen möglich. Klickt der User auf eine Navigationsfläche zweiter oder dritter Ebene, so erscheint die Sub-Navigation auf der Zielseite für diesen Punkt bereits geöffnet. Abbildung 11 - Unterseite mit mehreren Inhalts-Boxen Abbildung 12 Smartphone Navigation 13

20 3.1.5 Start- und Unterseite Bildschirme zwischen Smartphone und Desktop Zwischen den Smartphone- und Desktopgrößen befindet sich die Tabletgröße. Für die Tabletgröße war die Vorgabe des Designs offen. Letztendlich orientierte sich die Umsetzung für den IST-Zustand an der technischen Ausführbarkeit der Anpassungen an netzdurchblick.de. Im SOLL-Zustand soll die Verteilung der Inhalts-Boxen und somit das Erscheinungsbild der Seite über das Backend steuerbar sein. Dadurch erübrigt sich ein spezielles Layout für die Tabletgröße Spezielle Seiten Basierend auf dem Unterseiten Template gibt es auf netzdurchblick.de eine Reihe an speziellen Seiten, wie beispielsweise ein HTML 5 Spiel, ein Quiz, eine Sitemap oder ein Glossar. Diese Seiten werden in dieser Arbeit allerdings nicht behandelt, da sie nicht in direkter Verbindung mit dem Templating stehen, sondern für sich alleinstehende Anwendungen sind. 14

21 4 Technische Umsetzung Zu Beginn eines Responsive Webdesign Projektes müssen in der Regel mehrere Instanzen durchlaufen werden, bevor die technische Abteilung mit der Umsetzung beginnen kann. Genau deshalb beginnt Responsive Webdesign bereits in der Konzeptions- und Design-Phase. Natürlich hat auch der Kunde ein Wort mitzureden. Somit muss sicher gestellt sein, dass alle Instanzen in den Prozess mit einbezogen werden. Bevor Templates reaktionsfähig gebaut wurden, waren Websites statisch. Dadurch war nur ein Design-Entwurf notwendig, den die Entwickler möglichst exakt in HTML und CSS zu kopieren versuchten. 15 Da der heutige Markt immer mehr Endgeräte zum Internetsurfen bereitstellt, ist eine Entwicklung von reaktionsfähigen Websites notwendig. Natürlich kann ein Designer nicht für unzählige Bildschirmgrößen verschiedenste Entwürfe machen. Daher werden meist nur grobe Designvorschläge für Mobile, Tablet und Desktop ausgearbeitet. Aus dieser Entwicklung ergibt sich folgende Konsequenz: Layouts können und sollen nicht mehr pixelgenau zu einer Photoshop-Vorlage umgesetzt werden. Trotzdem wird eine maximale Annäherung an eine grafische Vorlage angestrebt. Diese Information ist auch für die Projektleitung überaus wichtig und notwendig. Da ein Kunde diese Fakten nicht kennt, kann es schnell zu einem unzufriedenen Ergebnis aus Kundensicht kommen. Somit sollte, anders als bei statischen Templates, der Workflow geändert und die Kommunikation zwischen Kunde, Projektleitung, Designer und Programmierer ständig am Laufen gehalten werden. Beim Betrachten des IST-Zustandes von netzdurchblick.de kann festgestellt werden, dass das Template in der Desktopauflösung dennoch nahezu perfekt zur ursprünglichen statischen Umsetzung passt. Das liegt in diesem Fall daran, dass sich an dem Template im Prinzip zum Ursprungszustand für die Desktopauflösung nichts geändert hat und nur Anpassungen für kleinere Geräte mit geringerer Bildschirmgröße gemacht worden sind. Somit ist festzuhalten, dass das Template des IST-Zustandes von netzdurchblick.de genau genommen ein Mix aus einem statischen und anpassungsfähigen Template ist. 4.1 Template Vorlagen Frontend-Entwicklung ist in den letzten Jahren sehr komplex geworden. Der Grund dafür ist die zunehmende Anzahl an Browsern und Browserversionen. 16 Zusätzlich gibt es neue CSS3 Eigenschaften und HTML5-Tags, die ältere Browser nicht mehr unterstützen. Zeitgemäße Templates müssen reaktionsfähig und trotzdem möglichst Browser abwärtskompatibel sein. Auch Animationen, Frontend- Funktionen und Interaktionen sollen nach Möglichkeit ohne externe Browser-Plugins, wie z.b. Flash, möglich sein. Um allen diesen Anforderungen an ein Template gerecht zu werden, ist ein Grundgerüst 15 ZILLGENS, Christoph: Reponsive Webdesign: S StatCounter:

22 durch eine Template-Vorlage sinnvoll. HTML5Boilerplate 17 stellt genau zu diesem Zweck eine umfangreiche Universalvorlage zum Gestalten von Websites kostenlos zur Verfügung. Eine solche Template-Vorlage ist eine von Experten zusammengestellte Sammlung von Frameworks, Konfigurations- Dateien und weiteren hilfreichen Dateien, die beispielsweise Cross-Browser-Normalisierung, Performance-Optimierung und andere nützliche Features mitbringen. Natürlich ist HTML5Boilerplate längst nicht mehr der einzige Anbieter, der Frontend-Pakete dieser Art anbietet. Eine weitere Anlaufstelle für eine Template-Vorlage ist z.b. auch Initializr 18. Initializr ist jedoch ein Vorlagen-Generator, der eine Vorlage individuell nach den Anforderungen des Entwicklers zusammenstellt. Die Auswahl an Frameworks, Polyfills 19 und anderen Dateien ist bei Initializr zwar groß, aber durch die ständig wachsende Vielfallt an Technologien ebenfalls nicht vollständig. Darüber hinaus gibt es noch viele andere ähnliche Anbieter. Dennoch sollte sich ein Entwickler die Zeit nehmen, eine eigene Vorlage anzufertigen. Der entscheidende Vorteil dabei ist, dass durch eine eigene Vorlage alle möglichen Präferenzen, Konzepte und Technologien berücksichtigt werden können. Für den netzdurchblick.de SOLL-Zustand wurde daher eine eigene Template-Vorlage erstellt und darüber entschieden, ob der Einsatz von einem Framework grundsätzlich sinnvoll ist und wenn ja, welches. Wie schon am Anfang dieser Arbeit erwähnt, wird in der Frontend-Endwicklung mit HTML, CSS und Javascript gearbeitet. Da HTML erst mal nur eine Seitenbeschreibungssprache ist und den Content im Prinzip nur strukturiert, macht hier der Einsatz von einem Framework keinen Sinn. Im Gegensatz dazu ist CSS und besonders Javascript sehr viel umfangreicher. Hier kann der Einsatz von einem Framework sinnvoll und sehr praktisch sein. CSS Frameworks bieten eine Sammlung von Klassen, die in HTML-Tags als Attribute vergeben und somit nur noch benutzt werden müssen. In speziellen Bereichen wie einem Grid-System, das im nächsten Abschnitt behandelt wird, macht ein CSS- Framework Sinn, unter anderem, weil dahinter ein bereits gut durchdachtes und geprüftes Konzept von Experten steckt. Javascript ist im Gegensatz zu CSS, wie der Name schon sagt, eine Skriptsprache, die ursprünglich für dynamisches HTML entworfen wurde. Ein Framework für Javascript, wie z.b. jquery, kann als eine Art Programmiergerüst angesehen werden, dass z.b. das Selektieren von Objekten erleichtert und Methoden für Animationen sowie Manipulationen und vieles mehr anbietet. 17 MANIAN, Divya, HTML5 Boilerplate Web Development, Published by Packt Publishing Ltd., 2012, S. 20 HTML5Boilerplate: Initializr:

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Mit der zunehmenden Nutzung des Internets über mobile Endgeräte wie Smartphones und Tablet-PCs steigt die Notwendigkeit, den Internetauftritt

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Whitepaper Responsive Design

Whitepaper Responsive Design 76% Smartphone-Besitzer surfen täglich 69% Tablet-Besitzer surfen täglich 74% der Schweizer nutzen das Internet mobil Das mobile Internet ist mittlerweile fest in den Alltag der Schweizer integriert: 76

Mehr

Responsive Design & ecommerce

Responsive Design & ecommerce Responsive Design & ecommerce Kassel, 15.02.2014 web n sale GmbH Jan Philipp Peter Was bisher geschah Was bisher geschah oder: Die mobile Evolution früher : - Lokale Nutzung - Zuhause oder im Büro - Wenige

Mehr

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign?

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 4. Wie sieht die Zukunft im Responsiven Webdesign aus? Special: Responsives

Mehr

Interface-Optimierung bei mobilen Endgeräten

Interface-Optimierung bei mobilen Endgeräten Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.

Mehr

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0 sverzeichnis Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen ISBN (Buch): 978-3-446-43015-0 ISBN (E-Book): 978-3-446-43120-1 Weitere Informationen oder Bestellungen

Mehr

Responsive Web Design Graceful Degradation and Progressive Enhancement

Responsive Web Design Graceful Degradation and Progressive Enhancement Graceful Degradation and Progressive Enhancement Seminar Web Engineering für Master-Studenten (WS 2013/2014) Betreuer: Michael Krug Datum: 13.12.2013 1 Gliederung 1. Warum? 2. Konzepte zur Anpassung an

Mehr

VIDERICONCEPT REFERENZ BERICHT

VIDERICONCEPT REFERENZ BERICHT VIDERICONCEPT REFERENZ BERICHT BAUUNTERNEHMEN DIRK KAGE GMBH Redesign Webseite 2013-2014 Bauunternehmen Dirk Kage GmbH - Moin, moin! Das Unternehmen Im Überblick Kunde: Bauunternehmen Dirk Kage GmbH Branche:

Mehr

VIDERICONCEPT REFERENZ BERICHT

VIDERICONCEPT REFERENZ BERICHT VIDERICONCEPT REFERENZ BERICHT AVATHERM GMBH Redesign CI + Website 2013 AVATHERM - Der Spezialist für isolierte Transportbehälter im Familienbetrieb Das Unternehmen Im Überblick Kunde: AVATHERM GmbH Branche:

Mehr

ONLINE-STYLEGUIDE www.uni-wuppertal.de

ONLINE-STYLEGUIDE www.uni-wuppertal.de ONLINE-STYLEGUIDE www.uni-wuppertal.de nhaltsangabe 1.0 Grundlagen 1.1 Ziele 1.2 Geltungsbereiche 1.3 technische Voraussetzungen 2.0 Benutzerführung 2.1 Layout 3.0 Gestaltung 3.1 Farben 3.2 Typographie

Mehr

Referenzen Frontend Typo3

Referenzen Frontend Typo3 Referenzen Typo3 und Frontend Stand: Mai 2015 Diese Referenzliste beschreibt die eigene Webseite der Internetagentur Irma Berscheid-Kimeridze. Die Webseite ist seit Mai 2015 online. Sie ist mit Typo3 erstellt.

Mehr

Erweiterung für Premium Auszeichnung

Erweiterung für Premium Auszeichnung Anforderungen Beliebige Inhalte sollen im System als Premium Inhalt gekennzeichnet werden können Premium Inhalte sollen weiterhin für unberechtigte Benutzer sichtbar sein, allerdings nur ein bestimmter

Mehr

E-Mail Marketing Runde um Runde

E-Mail Marketing Runde um Runde Wir powern Ihr E-Mail Marketing Runde um Runde Newsletter-Optimierung für mobile Endgeräte Die Fachwelt ist sich einig, dass mit Apples iphone der Siegeszug des Smartphones begann. Mittlerweile geht der

Mehr

Für Fragen und Anregungen, Wünsche und Verbesserungsvorschlägen zu diesem Handbuch können Sie mich gerne kontaktieren.

Für Fragen und Anregungen, Wünsche und Verbesserungsvorschlägen zu diesem Handbuch können Sie mich gerne kontaktieren. Inhaltsverzeichnis 1. Inhaltselemente bearbeiten Bild einfügen 2. Inhaltselement anlegen 3. Seite anlegen 4. Dateien verwalten Ordner anlegen Datei hochladen 5. Buttons 6. TYPO3 Backend (Aufbau) Einleitung

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Google Kriterien für die Bewertung mobil optimierter Webseiten

Google Kriterien für die Bewertung mobil optimierter Webseiten Google Kriterien für die Bewertung mobil optimierter Webseiten Google Kriterien für die Bewertung mobil optimierter Webseiten Am 21. April hat Google damit begonnen ein neues Algorithmus Update auszurollen

Mehr

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1 Neue Oberfläche April 2013 am Montag, den 15. April 2013 Folie 1 Erklärung der Icons Die Icons, welche in jeder Update-Kommunikation verwendet werden, haben folgende Bedeutung: Neuerung (aktiv) Direkt

Mehr

Kurzanleitung Typo3 Pflege

Kurzanleitung Typo3 Pflege Kurzanleitung Typo3 Pflege 1. Vorwort Grundsätzlich kann für das CMS (Content-Management-System) Typo3 gesagt werden, dass Übung den Meister macht. Je öfter Sie mit dem System arbeiten, desto besser und

Mehr

Factsheet. Einbau TOSC4. Version: 4 Letzte Änderung: 19.12.2013 Geändert von: Armin Schanitz

Factsheet. Einbau TOSC4. Version: 4 Letzte Änderung: 19.12.2013 Geändert von: Armin Schanitz Factsheet Einbau TOSC4 Version: 4 Letzte Änderung: 19.12.2013 Geändert von: Armin Schanitz Letzte Änderungen: - Mobile Version - Reverse Proxy - Hinweise Lightbox 0. Inhaltsverzeichnis 0. 1. 2. INHALTSVERZEICHNIS...

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

modern - sharp - elegant

modern - sharp - elegant modern - sharp - elegant Das Konzept für Ihre Webseite Wir sind Ihnen gerne bei der Konzeption Ihrer neuen Webseite behilflich. Gemeinsam mit Ihnen analysieren wir Ihre Anforderungen, erarbeiten die Ziele

Mehr

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 1.6.0

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 1.6.0 TYPO3 Flip Book TYPO3 Modul für Online-PDFs auf Basis von HTML5 Online Blätterkataloge aus PDF Dokumenten mit wenigen Klicks selbst erstellen optimiertes Frontend für Desktop, Tablet und Mobil System-Voraussetzungen:

Mehr

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 4.5

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 4.5 TYPO3 Flip Book TYPO3 Modul für Online-PDFs auf Basis von HTML5 Online Blätterkataloge aus PDF Dokumenten mit wenigen Klicks selbst erstellen optimiertes Frontend für Desktop, Tablet und Mobil System-Voraussetzungen:

Mehr

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website)

Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Dokumentation für die Arbeit mit dem Redaktionssystem (Content Management System -CMS) zur Wartung Ihrer Homepage (Website) Redaktion Mit der Redaktion einer Webseite konzentrieren Sie sich auf die inhaltliche

Mehr

Schulung Open CMS Editor

Schulung Open CMS Editor Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie

Mehr

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006 Arbeiten mit Eine einführende Schulung für Redakteure VGT Michael Fritz, 21. Oktober 2006 1 Inhalte 1. TYPO3 - Ihr neues Content-Management-System S. 3 ff. 1.1 Was ist ein CMS 1.2 Wie komme ich rein 1.3

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

«Es gibt bereits alle guten Vorsätze,

«Es gibt bereits alle guten Vorsätze, Do s and dont s professioneller Webauftritte «Es gibt bereits alle guten Vorsätze, wir brauchen sie nur noch anzuwenden.» Pascal Blaise (1623 1662) 1 Inhalt Die Wichtigkeit von Webseiten Ihr Auftritt im

Mehr

Webdesign-Trends. Digital News KW 18 Stand: April 2013

Webdesign-Trends. Digital News KW 18 Stand: April 2013 Webdesign-Trends Digital News KW 18 Stand: April 2013 Webdesign-Trends 2013 Das Jahr 2013 ist in vollem Gange und es ist eine gute Zeit, den Blick auf Webdesign-Trends zu werfen die sich zwar nicht an

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

Inhalt. 1 Ein eigener Webauftritt in drei Minuten 17. 2 Wer braucht was die eigene Website planen 29. Für wen ist dieses Buch?...

Inhalt. 1 Ein eigener Webauftritt in drei Minuten 17. 2 Wer braucht was die eigene Website planen 29. Für wen ist dieses Buch?... Für wen ist dieses Buch?... 13 1 Ein eigener Webauftritt in drei Minuten 17 1.1 Die Visitenkarte des Zauberers... 17 1.1.1 Auswahl des Anbieters... 18 1.1.2 Anmeldung... 19 1.2 Welche Technik lässt das

Mehr

Die ersten Schritte zur eigenen Homepage - Möglichkeiten der technischen Umsetzung

Die ersten Schritte zur eigenen Homepage - Möglichkeiten der technischen Umsetzung Die ersten Schritte zur eigenen Homepage - Möglichkeiten der technischen Umsetzung Bremen, den 16. September 2014 Uwe Salm, ebusiness Lotse Osnabrück Agenda Vorüberlegungen Umsetzung Handlungsempfehlung

Mehr

Das TYPOlight CSS-Framework

Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

Mehr

Sichtbar im mobilen Web. Die Optimierung von Websites für mobile Endgeräte

Sichtbar im mobilen Web. Die Optimierung von Websites für mobile Endgeräte Die Optimierung von Websites für mobile Endgeräte 1 2 Die Optimierung von Websites für mobile Endgeräte Die Anzahl der Personen, die das mobile Internet nutzt, hat sich seit 2012 nahezu verdoppelt. Waren

Mehr

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Responsive WebDesign Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Moderne Web-Konzepte punkten mit einer ansprechenden Visualisierung, professionellen Fotos und informativen

Mehr

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Einführung in die Typo3 Website vut.de

Einführung in die Typo3 Website vut.de Struktur Website Öffentlicher Bereich: - Artikelseiten - andere Seiten - Kalender Mitgliederbereich: - Artikelseiten - Profilseiten Mitarbeiterbereich: - Dokumentenverwaltung 1. Dokumente Dokumente (Bilder,

Mehr

http://www.nvu-composer.de

http://www.nvu-composer.de Kapitel 16 Seite 1 Ein portabler Web-Editor Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webdesigner zu beschaffen. Diese Programme sind sehr leistungsfähig,

Mehr

Stefan Bauer. Trends im mobilen Business

Stefan Bauer. Trends im mobilen Business Stefan Bauer Trends im mobilen Business Stefan Bauer Jahrgang 1969, verheiratet, 2 Kinder Diplom-Informatiker TU München Seit 1996 in Online Branche Seit 1999 selbständig Inhaber und Vorstand Dozent und

Mehr

Statisch oder Dynamisch?

Statisch oder Dynamisch? Worin liegt der Unterschied zwischen statischen und dynamischen Webseiten? Statisch oder Dynamisch? lepton-cms.org Überblick CMS WebsiteBaker - LEPTON 1 lepton-cms.org Überblick CMS WebsiteBaker - LEPTON

Mehr

TYPO3 Redaktoren-Handbuch

TYPO3 Redaktoren-Handbuch TYPO3 Redaktoren-Handbuch Kontakt & Support: rdv interactive ag Arbonerstrasse 6 9300 Wittenbach Tel. 071 / 577 55 55 www.rdvi.ch Seite 1 von 38 Login http://213.196.148.40/typo3 Username: siehe Liste

Mehr

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe?

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? Inhalt: 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? 1.Installation Um das Electronics Theme zu installieren, gehen Sie in der Rubrik Design zum Template Store. Hier sehen Sie

Mehr

In 10 Schritten selber eine eigene Homepage erstellen

In 10 Schritten selber eine eigene Homepage erstellen In 10 Schritten selber eine eigene Homepage erstellen Anhand dieser Anleitung können Sie einfach eine eigene Homepage selber erstellen. Registrieren Sie sich bei wordpress.com und schon können Sie loslegen.

Mehr

Fallstudie: Praxiswebseite

Fallstudie: Praxiswebseite Fallstudie: Praxiswebseite Thema: Problemstellung: Leistungen: Projektdauer: Unternehmen Budget: Durchgeführt von: Online-Marketing: Erstellung einer Webseite inklusive Texte und SEO - alte Webseite erscheint

Mehr

Auffrischung jquery. jquery Mobile. Marco Francke I 24.02.2011

Auffrischung jquery. jquery Mobile. Marco Francke I 24.02.2011 Auffrischung jquery jquery Mobile Marco Francke I 24.02.2011 Mayflower GmbH 2010 write less do more Marco Francke 24. Februar 2011 24.02.11 Mayflower GmbH 2 Mayflower GmbH 2010 Was ist jquery und was kann

Mehr

Hochschule Heilbronn Technik Wirtschaft Informatik

Hochschule Heilbronn Technik Wirtschaft Informatik Hochschule Heilbronn Technik Wirtschaft Informatik Studiengang Electronic Business (EB) Diplomarbeit (280000) Evaluierung und Einführung eines Web Content Management Systems bei einem internationalen und

Mehr

Web-Performance-Optimierung - Websites auf Speed SEO Barbecue - DIWISH - Kiel - 01. August 2012. Timo Heinrich t.heinrich@online-werbung.

Web-Performance-Optimierung - Websites auf Speed SEO Barbecue - DIWISH - Kiel - 01. August 2012. Timo Heinrich t.heinrich@online-werbung. SEO Barbecue Web-Performance-Optimierung - DIWISH - Kiel - 01. August 2012 - Websites auf Speed 1 2 Kinder 1 Frau 41 Jahre jung Seit 1996 autodidaktischer Onliner Schwerpunkte: Suchmaschinenoptimierung

Mehr

Einführung in das TYPO3 Content Management System. Jochen Weiland - jweiland.net

Einführung in das TYPO3 Content Management System. Jochen Weiland - jweiland.net Einführung in das TYPO3 Content Management System Dipl. Ing. Jochen Weiland jweiland.net Statische Websites upload Entwicklungsrechner Webserver Besucher Dynamische Websites Layouts Webserver Datenbank

Mehr

Joomla! Source- CMS. Joomla! Open Source-CMS

Joomla! Source- CMS. Joomla! Open Source-CMS Joomla! Open Source- CMS Joomla! Open Source-CMS Mirco De Roni, 2010 Inhaltsverzeichnis 1 Begriffe und Konzepte... 3 1.1 Content Management System (CMS)... 3 1.2 Struktur eines Web Content Management Systems

Mehr

Typo3 eine Einführung für Redakteure

Typo3 eine Einführung für Redakteure Typo3 eine Einführung für Redakteure Autor: Patrick Moldenhauer (pm@smd gmbh.de) Stand: 28.11.2007 1) Einleitung 2) Das Backend a. Login b. Die Oberfläche c. Die wichtigsten Buttons 3) Grundlegendes a.

Mehr

ARBEITEN MIT TYPO3 - Eine Anleitung zur redaktionellen Arbeit mit TYPO3 - Hauptsache Kommunikation GmbH. Hauptstraße 61. 65719 Hofheim / Taunus

ARBEITEN MIT TYPO3 - Eine Anleitung zur redaktionellen Arbeit mit TYPO3 - Hauptsache Kommunikation GmbH. Hauptstraße 61. 65719 Hofheim / Taunus ARBEITEN MIT TYPO3 - Eine Anleitung zur redaktionellen Arbeit mit TYPO3 - Hauptsache Kommunikation GmbH. Hauptstraße 61. 65719 Hofheim / Taunus INHALT 1. Einstieg... 2 2. Anmeldung und erste Schritte...

Mehr

WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA!

WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA! WEBCONTENT MANAGEMENT SYSTEM (WCMS) JOOMLA! 1 Definition WCMS Ein Web-Content-Management- System (kurz: WCMS, übersetzt: Inhaltsverwaltungssystem) ist ein System, das die gemeinschaftliche Erstellung und

Mehr

Redaktions-Schulung. Redaktionssystem der Kunstuniversität Linz 12. Oktober 2007. Daniel Hoschek & Ralph Zimmermann

Redaktions-Schulung. Redaktionssystem der Kunstuniversität Linz 12. Oktober 2007. Daniel Hoschek & Ralph Zimmermann Redaktions-Schulung Redaktionssystem der Kunstuniversität Linz 12. Oktober 2007 Daniel Hoschek & Ralph Zimmermann 1 Ablauf Redaktionssystem Allgemein Login Aufbau von Typo3 Seitenelemente Seitenelemente

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Web-Lösungen nach Mass

Web-Lösungen nach Mass Web-Lösungen nach Mass Wir realisieren Web-Projekte für unterschiedliche Bedürfnisse auf individueller Basis. Sie profitieren von einer Vielzahl ausgewählter und vorkonfigurierter Module und selbst entwickelter

Mehr

FRONT CRAFT. www.frontcraft.com contact@frontcraft.com

FRONT CRAFT. www.frontcraft.com contact@frontcraft.com FRONT CRAFT Viele Menschen und viele Unternehmen haben eine Webseite. Jede neue, die dazu kommt, sollte nicht nur gut, sondern erstklassig sein. Das ist unsere Leidenschaft. FrontCraft. www.frontcraft.com

Mehr

Internetauftritt: Hochschulpartnerschaften - Datenbank

Internetauftritt: Hochschulpartnerschaften - Datenbank Hochschule für Technik, Wirtschaft und Kultur Leipzig (FH) University of Applied Sciences Internetauftritt: Hochschulpartnerschaften - Datenbank Modul: Anleitung für Typo3 bzgl. Partnerhochschulen einpflegen

Mehr

Drupal 7 (Teil 33): Themes (4)

Drupal 7 (Teil 33): Themes (4) Web >> Drupal Drupal 7 (Teil 33): Themes (4) Autor: daniel_koch Inhalt: Die ersten Schritte hin zum eigenen Drupal-Theme wurden bereits gemacht. Jetzt geht es weiter mit der Erstellung des Themes. Im Fokus

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

3.9 Grundelemente einer Benutzeroberfläche

3.9 Grundelemente einer Benutzeroberfläche 92 3 Grundlagen einer ios-anwendung 3.8.4 Target-Actions Einer der häufigsten Anwendungsfälle bei einer Oberfläche ist das Betätigen einer Schaltfläche durch einen Anwender, woraufhin eine bestimmte Aktion

Mehr

Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen

Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen Facebook iframe-tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen Anfang März 2011 hat Facebook das Erstellen von sogenannten iframe-tabs als individuelle Gestaltungsmöglichkeit von Fanseiten

Mehr

Mobile (R)evolution - Mobile Fusion? NIX Solution

Mobile (R)evolution - Mobile Fusion? NIX Solution Mobile (R)evolution - Mobile Fusion? NIX Solution Praxistipps zum Einsatz von Newsletter-Technologien Ein Fachbeitrag von Katrin Krenn, Team Lead Service bei Commerce Plus und Leiterin der Task Force Newsletter

Mehr

Inhalt. Installation. Funktionen

Inhalt. Installation. Funktionen Inhalt Installation Funktionen Einstellungen Hintergrund Balken, Button Rabatt Fußzeile Kopfteil, linke Spalte Hauptnavigation Module Preiskategorien, Produkte Text Kontakt 3 4 5 5 6 7 8 9 10 11 12 13

Mehr

Inhaltsverzeichnis. Inhaltsverzeichnis

Inhaltsverzeichnis. Inhaltsverzeichnis Vorwort Vorwort Im Rahmen der Studie mindex 2015. Welche SEO-Potenziale schlummern in Deutschlands Unternehmenswebsites? wurde der mindex entwickelt, ein Index, der den Optimierungsstand deutscher Unternehmen

Mehr

Erweiterungen Gantry Framework -

Erweiterungen Gantry Framework - Gantry Framework Gantry Framework ist eine Art Tabelle (Grid), in der man in den Zellen die jeweiligen Beiträge und sonstigen Bereiche positionieren kann. Gantry Framework downloaden Über Google nach Gantry

Mehr

Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm

Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm Stand: 21.11.2014 Systemvoraussetzungen TYPO3 in der Version 6.0 6.2.xx Installation Installieren Sie

Mehr

Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5

Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Inhaltsverzeichnis Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website 11 1.1 Grundüberlegungen 12

Mehr

Mobil im Web aber wie? Zwischen mobiler Website und App

Mobil im Web aber wie? Zwischen mobiler Website und App Mobil im Web aber wie? Zwischen mobiler Website und App durch Sascha Scholz Ihr Ansprechpartner: Sascha Scholz Telefon: 0221-569576-412 E-Mail: s.scholz@kernpunkt.de Mobil im Web aber wie? Zwischen mobiler

Mehr

Modul Bildergalerie Informationen zum Bearbeiten des CMS-Systems für den SV Oberteisendorf

Modul Bildergalerie Informationen zum Bearbeiten des CMS-Systems für den SV Oberteisendorf Inhaltsverzeichnis Allgemein...2 Bilder-Ordner für Bildergalerie einrichten und befüllen...3 Verzeichnis erstellen...3 Beschriftung der Fotos...4 Bildergalerie anlegen und einrichten...5 Vorbereitung im

Mehr

Responsive Webdesign mit HTML5 & CSS 3

Responsive Webdesign mit HTML5 & CSS 3 Responsive Webdesign mit HTML5 & CSS 3 3-tägiges Intensiv-Seminar: Responsive Webdesign Beschreibung Der überwältigende Erfolg von Smartphones und Tablets stellt Webdesigner/innen vor ganz neue Herausforderungen:

Mehr

Mobile: Die Königsfrage

Mobile: Die Königsfrage Mobile: Die Königsfrage - Native App,Mobile Website oder doch Responsive Design? - Native App oder Mobile Website? Wer am Boom der mobilen Anwendungen teilhaben möchte, hat im Prinzip zwei Möglichkeiten:

Mehr

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo Mit Jimdo ist das Erstellen einer eigenen Homepage ganz besonders einfach. Auch ohne Vorkenntnisse gelingt es in kurzer Zeit, mit einer grafisch sehr ansprechenden

Mehr

Liferay 6.2. Open Source IT-Dienstleister. Ein modernes Open Source Portal System. forwerts solutions GmbH, Gabriele Maas

Liferay 6.2. Open Source IT-Dienstleister. Ein modernes Open Source Portal System. forwerts solutions GmbH, Gabriele Maas Liferay 6.2 Ein modernes Open Source Portal System forwerts solutions GmbH, Gabriele Maas Open Source IT-Dienstleister Liferay 6.2 Was ist neu? Liferay 6.2 Startseite Folie: 3 forwerts solutions GmbH 9.

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

Checkliste SEO-freundliches Shopsystem. Inhaltsverzeichnis

Checkliste SEO-freundliches Shopsystem. Inhaltsverzeichnis Checkliste SEO-freundliches Shopsystem Für Betreiber eines Onlineshops gibt es viele Dinge zu beachten. Ein wichtiger Besucherkanal sind Suchmaschinen. Auf die folgenden Dinge sollten Sie achten, wenn

Mehr

Schnelle Erfolge mit cmsworks Redaktionsdesktop

Schnelle Erfolge mit cmsworks Redaktionsdesktop Case Study Stand Juni 2008 Seit über 50 Jahren ist die Zeitschrift Bravo ist ein Begriff. Ein Trend- und Musikmagazin, ein Ratgeber mit Kultcharakter. Bravo gehört zur Bauer-Verlagsgruppe, die mit 238

Mehr

Das Zen Theme. Drupal User Group Berlin Naori - 19.08.2010

Das Zen Theme. Drupal User Group Berlin Naori - 19.08.2010 Das Zen Theme Drupal User Group Berlin Naori - 19.08.2010 Vorwort Jede Website eines Designers ist theoretisch mit dem Zen Theme umsetzbar. Oft kommen Vorgaben von Agenturen oder Designern, die in Drupal

Mehr

WEBSITE DESIGN BY CANVAS

WEBSITE DESIGN BY CANVAS LOGO?? Lippenmotiv Die Zeiten, in der Internetpräsenzen der Onlineversion von Werbeprospekten glichen, sind längst vorbei. Viel mehr müssen moderne Websites als Plattform zur Kundenbindung und gewinnung

Mehr

5 Das Löschen, Verschieben oder Erstellen ganzer Seiten

5 Das Löschen, Verschieben oder Erstellen ganzer Seiten 5 Das Löschen, Verschieben oder Erstellen ganzer Seiten Inhaltsverzeichnis 5 Das Löschen, Verschieben oder Erstellen ganzer Seiten 1 Vorbemerkung.......................................... 1 5.1 Schritt

Mehr

Agentur für innovative Weblösungen

Agentur für innovative Weblösungen Agentur für innovative Weblösungen FLX Labs Zweierstrasse 129 CH 8003 Zürich Tel +41 44 461 00 77 Beratung Konzept Umsetzung Kreative Konzepte, innovative Methoden und smarte Technologien bei der Umsetzung

Mehr

Leistungsspektrum. von SEOSEMbra.de 08.10.2013

Leistungsspektrum. von SEOSEMbra.de 08.10.2013 Leistungsspektrum von 08.10.2013 Zum Bahnhof 51a Butzbach, Hessen 35510 Telefon: +49 (0) 6033 97 56 717 E- Mail: info@seosembra.de Web: http://www.seosembra.de 1 Schwerpunkte Damit eine Webseite mit den

Mehr

Ihre Firmenpräsentation im Web - auf was Sie achten sollten.

Ihre Firmenpräsentation im Web - auf was Sie achten sollten. Ihre Firmenpräsentation im Web - auf was Sie achten sollten. Informationsveranstaltung ebusiness-lotse Oberschwaben-Ulm Christian Baumgartner Ulmer Cross Channel Tag, 27.04.2015 Agenda Die ersten Schritte

Mehr

T3 SEO Tipps. On-Page Optimierung für Webtexte, Metatags, URLs und Bilder - direkt in TYPO3. Suchmaschinenoptimierung für TYPO3

T3 SEO Tipps. On-Page Optimierung für Webtexte, Metatags, URLs und Bilder - direkt in TYPO3. Suchmaschinenoptimierung für TYPO3 T3 SEO Tipps Suchmaschinenoptimierung für TYPO3 On-Page Optimierung für Webtexte, Metatags, URLs und Bilder - direkt in TYPO3. System-Voraussetzungen: Website mit TYPO3 BlueChip Software GmbH Business

Mehr

Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs

Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs Whitepaper Facebook Marketing - Facebook Integration in WordPress Blogs Um zusätzliche Reichweite für seine Blog-Artikel zu schaffen bietet Facebook Blogbetreibern die verschiedensten Optionen an. In diesem

Mehr

Mobile Umfragen Responsive Design (Smartphone & Tablet)

Mobile Umfragen Responsive Design (Smartphone & Tablet) Mobile Umfragen Responsive Design ( & Tablet) Umfragen und Umfragedesign für mobile Endgräte mit der Umfragesoftware von easyfeedback. Inhaltsübersicht Account anlegen... 3 Mobile Umfragen (Responsive

Mehr

KURZANLEITUNG HOMEPAGEBUILDER

KURZANLEITUNG HOMEPAGEBUILDER KURZANLEITUNG HOMEPAGEBUILDER Hochwertige Homepages selbst erstellen und ändern: 300 unterschiedliche adaptierbare Designs für alle Themen und Branchen! > Individuelle Menüführung, Logo Maker und freie

Mehr

Die Sache mit den Bildern

Die Sache mit den Bildern Die Sache mit den Bildern S Grafiken im mobilen Webdesign S S Contao NRW Day 2014 S 1 Janosch Oltmanns seit 2011 bei DMA Interaction Developer Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten

Mehr

gastrocms v2.x Übersicht

gastrocms v2.x Übersicht gastrocms v2.x Übersicht Basierend auf Version: v2.1 Zuletzt aktualisiert: 15. April 2015 Inhalt Symbolik... 3 1. Der Inhalt dieses Dokumentes... 4 1.1 Technische Änderungen... 4 1.2 Eigenschaften eines

Mehr

Vitamine für Ihr Business. Internet-Partner der Wirtschaft

Vitamine für Ihr Business. Internet-Partner der Wirtschaft Vitamine für Ihr Business Der Vorfilm... Es sollte schon passen... Ihr Business Unser Service Uwe Stache / BB-ONE.net Thema des Vortrages Spezialisiert auf Vielseitigkeit Medienkompetenz Verlässlichkeit

Mehr

Referenzen Typo3. Blog der Internetagentur Irma Berscheid-Kimeridze Stand: Juni 2015

Referenzen Typo3. Blog der Internetagentur Irma Berscheid-Kimeridze Stand: Juni 2015 der Internetagentur Irma Berscheid-Kimeridze Stand: Juni 2015 Aktuelle Entwicklungen der Internetagentur Irma Berscheid-Kimeridze sollten auf der Webseite der Agentur dargestellt werden. Werkzeug der Wahl

Mehr

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced DESIGN & DEVELOPMENT TYPO3 Advanced 1 Einleitung / Inhalt 2 / 13 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert

Mehr

Vitamine für Ihr Business. Internet-Partner der Wirtschaft

Vitamine für Ihr Business. Internet-Partner der Wirtschaft Vitamine für Ihr Business Der Vorfilm... Es sollte schon passen... Ihr Business Unser Service Uwe Stache / BB-ONE.net Thema des Vortrages Spezialisiert auf Vielseitigkeit Medienkompetenz Verlässlichkeit

Mehr

Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199

Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199 Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199 Überblick Grundlagen Warum Drupal? Was genau ist Drupal? Drupal Leistungsmerkmale Drupal Struktur Module

Mehr