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. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014 IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2 Vorstellung Zur Person 1991 1996: Studium Informatik an

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

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 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

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

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

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016 TYPO3 LTS7 1 Projekt TYPO3 LTS 7 responsiv Stand: Juni 2016 Die gibt es seit 2000. Im September 2014 haben wir sie auf TYPO3 LTS 6 eingerichtet. Juni 2016 erfolgte ein update auf die Version LTS 7 von

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

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

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

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks.

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Gliederung Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Präsentationsplattform Vorstellung der Präsentationsplattform Setzkasten. 1 / 14 Responsive

Mehr

Warum wir den High-Volume Onlineshop entwickelt haben

Warum wir den High-Volume Onlineshop entwickelt haben Warum wir den High-Volume Onlineshop entwickelt haben Wir haben unseren Ansatz, Fotos zu verkaufen, überdacht und stellen Ihnen nun einen komplett überarbeiten Onlineshop zur Verfügung. Dafür haben wir

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

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

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

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

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

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

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

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

DAS INTERNET IST WIE EINE WELLE: ENTWEDER, MAN LERNT AUF IHR ZU SCHWIMMEN, ODER MAN GEHT UNTER Bill Gates

DAS INTERNET IST WIE EINE WELLE: ENTWEDER, MAN LERNT AUF IHR ZU SCHWIMMEN, ODER MAN GEHT UNTER Bill Gates DAS INTERNET IST WIE EINE WELLE: ENTWEDER, MAN LERNT AUF IHR ZU SCHWIMMEN, ODER MAN GEHT UNTER Bill Gates 57 MILLIONEN USER IN DEUTSCHLAND KÖNNEN SICH NICHT IRREN... In nahezu allen Bereichen des täglichen

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

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

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

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

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag Agenda Entwicklung der Internet-fähigen Geräte Motivation für mobile Optimierung Lösungsansätze und Praxisbeispiele Im Jahr 2000 http://dag.wosc.edu/?gallery=wosc-computer-collection Im Jahr 2000 Webseite

Mehr

Responsive Webdesign. Schritt für Schritt zum Design für jedes Endgerät

Responsive Webdesign. Schritt für Schritt zum Design für jedes Endgerät Responsive Webdesign Schritt für Schritt zum Design für jedes Endgerät Was ist responsive Design? Ganz kurz: Responsive Webdesign beschreibt eine technische und gestalterische Methode, Inhalte Ihrer Webseite

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

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

3-W-Event. Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign. Sabrina Schoenfelder Projektleitung, Beratung

3-W-Event. Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign. Sabrina Schoenfelder Projektleitung, Beratung 3-W-Event Simplify! Ganzheitliche Gestaltungskonzepte neue Trends im Webdesign Sabrina Schoenfelder Projektleitung, Beratung internezzo ag Grundstrasse 4b CH-6343 Rotkreuz Tel. +41 41 748 02 48 www.internezzo.ch

Mehr

BERUFSBEGLEITENDE WEB-ABENDKURSE

BERUFSBEGLEITENDE WEB-ABENDKURSE BERUFSBEGLEITENDE WEB-ABENDKURSE ZIELGRUPPE Das Angebot richtet sich an Privatpersonen, Unternehmen sowie deren Mitarbeiter, die sich gezielt berufsbegleitend weiterbilden möchten. In kompakter und zielorientierter

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

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

Trend: Mobiles Internet. Eine aktuelle Übersicht

Trend: Mobiles Internet. Eine aktuelle Übersicht Trend: Mobiles Internet Eine aktuelle Übersicht Computer verändern sich Kommunikation verändert sich Fotografie verändert sich Drei Erfolgsfaktoren 1 Seien Sie auf allen Bildschirmen präsent 2 Seien Sie

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

---------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------- Webauftritt meiner Schule via CMS System Joomla! Dieser Arbeitskatalog hilft dir notwendige Arbeiten zu strukturieren. Grundsätzliches Das CMS System Joomla trennt strikt Content (Inhalte, Fotos, ) und

Mehr

Referenz Frontend: Responsive Webdesign

Referenz Frontend: Responsive Webdesign Stand: Dezember 2014 Diese Referenzliste bezieht sich auf eine Webseite, von der es zwei Versionen gibt. Diese Version ist mit Hilfe des Twitter Bootstrap Frameworks für mobile Endgeräte optimiert. - Startseite

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

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

Dokumenten-Modelle im CMS CoreMedia

Dokumenten-Modelle im CMS CoreMedia Dokumenten-Modelle im CMS CoreMedia Einleitung Das Content Management System CoreMedia ist ein innovatives Produkt der Hamburger Firma CoreMedia, das hauptsächlich im Unternehmensbereich und für komplexe

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

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

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

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

InfoPoint vom 9. November 2011

InfoPoint vom 9. November 2011 InfoPoint vom 9. November 2011 Was ist Joomla? Theorie Installation Extensions Administration Demo Joomla ist ein modulares content management system (CMS) Es ermöglicht eine Website zu erstellen und online

Mehr

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

Portfolio. In meinem Portfolio sehen Sie einige ausgewählte Projekte, die ein breitgefächertes Anforderungsprofil erfüllen.

Portfolio. In meinem Portfolio sehen Sie einige ausgewählte Projekte, die ein breitgefächertes Anforderungsprofil erfüllen. Portfolio Websites, die auf dem Content Management System TYPO3 basieren sind mein Spezialgebiet. Für kleinere oder mittlere Unternehmen, die eine neue Website aufbauen möchten, oder Unterstützung bei

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

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

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

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

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

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

«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

2.1 Grundlagen: Anmelden am TYPO3-Backend

2.1 Grundlagen: Anmelden am TYPO3-Backend 1 Grundlagen: Anmelden am TYPO3-Backend Zum Anmelden am TYPO3-Backend (dem Content Management System) tippen Sie in der Adresszeile Ihres Browsers (wir empfehlen Mozilla Firefox) hinter uni-bremen.de /typo3

Mehr

Templates für Joomla! 1.6

Templates für Joomla! 1.6 Know-how ist blau. Templates für Joomla! 1.6 Design und Implementierung > Grafische Freiheit für Joomla!-Websites: verschiedene Designs in einem Template > So entwerfen Sie ein Template-Design mit Photoshop

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

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

Inhaltsverzeichnis. 2 Abteilungsspezifische Banner 16 2.1 Austausch der Banner... 16 2.2 Hinweis für Entwickler... 17

Inhaltsverzeichnis. 2 Abteilungsspezifische Banner 16 2.1 Austausch der Banner... 16 2.2 Hinweis für Entwickler... 17 Inhaltsverzeichnis 1 Beiträge verwalten 2 1.1 Kategorie erstellen.............................. 2 1.2 Beitrag erstellen................................ 3 1.3 Beitragsberechtigungen verwalten......................

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

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

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

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

GITS Steckbriefe 1.9 - Tutorial

GITS Steckbriefe 1.9 - Tutorial Allgemeines Die Steckbriefkomponente basiert auf der CONTACTS XTD Komponente von Kurt Banfi, welche erheblich modifiziert bzw. angepasst wurde. Zuerst war nur eine kleine Änderung der Komponente für ein

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

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

Ich empfehle Ihnen als Testumgebung den lokalen Webserver XAMPP zu nutzen. Diese Software ist im Internet kostenlos erhältlich.

Ich empfehle Ihnen als Testumgebung den lokalen Webserver XAMPP zu nutzen. Diese Software ist im Internet kostenlos erhältlich. www.joomla-ebooks.de www.joomla-pdf-tutorial.de www.joomla-ebooks.de www.joomla-pdf-tutorial.de Was ist Joomla Joomla ist ein CMS (Content Management System), auch Redaktionssystem genannt. Redaktionssystem

Mehr

Joomla Schulung. Open Source CM-System. Projekt-Nr. 398. Thomas Haussener, MA. 20. Juni 2007

Joomla Schulung. Open Source CM-System. Projekt-Nr. 398. Thomas Haussener, MA. 20. Juni 2007 Joomla Schulung Projekt-Nr. 398 Open Source CM-System Projektteam: Christian Wüthrich, PL Thomas Haussener, MA 20. Juni 2007 BiCT AG Güterstrasse 5 3072 Ostermundigen Tel. 031 939 40 30 Fax 031 939 40

Mehr

Erzherzog Johann Jahr 2009

Erzherzog Johann Jahr 2009 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein

Mehr

Anleitung TYPO3. Inhalt 2 Login 4. Übersicht 5. Dateiliste 5 Dateien (Fotos, PDF) integrieren 5. Datei hochladen 6

Anleitung TYPO3. Inhalt 2 Login 4. Übersicht 5. Dateiliste 5 Dateien (Fotos, PDF) integrieren 5. Datei hochladen 6 Inhalt Inhalt 2 Login 4 Übersicht 5 Dateiliste 5 Dateien (Fotos, PDF) integrieren 5 Datei hochladen 6 Bild oder PDF auf den Server laden 6 Exkurs: Bilder herunter rechnen 7 Web 7 Module 7 Seite 7 Liste

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

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

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

Ein- und Umbau von Spielen, Videos, Ton. Seitenstark-Fachtag, 13.Juni 2016

Ein- und Umbau von Spielen, Videos, Ton. Seitenstark-Fachtag, 13.Juni 2016 Ein- und Umbau von Spielen, Videos, Ton Seitenstark-Fachtag, 13.Juni 2016 Herausforderung Spieleumbau Ausgangssituation Ein beliebtes, bewährtes Spiel einer Website soll neu aufgelegt werden, damit es

Mehr

Responsive Webdesign am Beispiel der Steuerberatung Pfeffer

Responsive Webdesign am Beispiel der Steuerberatung Pfeffer Responsive Webdesign am Beispiel der Steuerberatung Pfeffer Seit 2012 erstellen wir fast ausschließlich Webseiten im Responsive Design. Denn die Anpassungsfähigkeit von Internetseiten ist längst kein Nischenthema

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

Einfach machen. Websites

Einfach machen. Websites DieWebSeitenMontage Einfach machen Websites 1 Themen: Struktur Layout Funktionen seite gefunden werden - Suchbegriffe finden auf den Webseiten Inhalte finden Webseiten erstellen Erfolgskontrolle 2 Layout

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

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006 Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere

Mehr

Design-Tipps zur Gestaltung von Webseiten mit CM4all Business

Design-Tipps zur Gestaltung von Webseiten mit CM4all Business Design-Tipps zur Gestaltung von Webseiten mit CM4all Business Content Management AG 1 www.cm4allbusiness.de Inhalt 1. Typografie & Textformatierung...3 1.1 Schriftarten... 3 1.2 Schriftgrößen und -schnitte...

Mehr

G-U-T. Teil B Reflexion. Gender & Diversity, Usability und Testing als Qualitätssicherung von Apps und Websites

G-U-T. Teil B Reflexion. Gender & Diversity, Usability und Testing als Qualitätssicherung von Apps und Websites G-U-T Gender & Diversity, Usability und Testing als Qualitätssicherung von Apps und Websites Teil B Reflexion Dorothea Erharter, November 2013 Inhalt Die Idee... 3 Die Anwender/innen... 3 Zielgruppen...

Mehr

Website importieren oder erstellen?

Website importieren oder erstellen? 94 Eine Website aus Vorlagen Website importieren oder erstellen? Grundsätzlich gibt es zwei Möglichkeiten, MAGIX Web Designer zu benutzen: entweder Sie haben bereits eine Website und wollen sie mit MAGIX

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

BOSS 2 BSZ One Stop Search

BOSS 2 BSZ One Stop Search BOSS 2 BSZ One Stop Search 16. BSZ-Kolloquium in Stuttgart 22.09.2015 Cornelius Amzar 1 Responsive Design Smartphone, Tablet, Fernseher, PC, Laptop Benutzer erwarten einen gleichwertigen Dienst für alle

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

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org Layoutmodelle HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung

Mehr

Das Content-Management-System OpenCms im Vergleich mit TYPO3 und Joomla. Seminarvortrag von Wolfgang Neuß

Das Content-Management-System OpenCms im Vergleich mit TYPO3 und Joomla. Seminarvortrag von Wolfgang Neuß Das Content-Management-System OpenCms im Vergleich mit TYPO3 und Joomla Gliederung Was ist ein CMS? Kriterien OpenCms TYPO3 Joomla Gegenüberstellung der drei Systeme 2 Was ist ein CMS? Kriterien OpenCms

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 23. September 2013 Uwe Salm, ebusiness Lotse Osnabrück ebusiness Lotse Osnabrück Träger: Science to Business

Mehr

Inhaltsverzeichnis VII

Inhaltsverzeichnis VII Inhaltsverzeichnis 1 Die Grundlagen zu CMS auch eine lange Reise beginnt mit dem ersten Schritt............................................ 1 1.1 Was behandeln wir in dem einleitenden Kapitel?....................

Mehr

Gestaltungsraster # Der Desktop-Version liegt ein dreispaltiges Raster mit 1230 px maximal-breite zugrunde.

Gestaltungsraster # Der Desktop-Version liegt ein dreispaltiges Raster mit 1230 px maximal-breite zugrunde. Gestaltungsraster # Der Desktop-Version liegt ein dreispaltiges Raster mit 1230 px maximal-breite zugrunde. # Der Smartphone-Version liegt ein zweispaltiges Raster zugrunde. # Die Zwischengröße für Tablets

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

Das Open Source Content Management System

Das Open Source Content Management System Das Open Source Content Management System Erweiterbarkeit und Individualisierung visions-marketing Unternehmensberatung Alexander Winkler Postfach 950180 81517 München Tel.+Fax: 089 / 38 90 06 53 Mobil.:

Mehr

Süddeutsche Zeitung als digitale Ausgabe

Süddeutsche Zeitung als digitale Ausgabe Süddeutsche Zeitung als digitale Ausgabe Technische Spezifikationen für SZ-App- Anzeigen, Stand: 27.03.2015 Inhaltsübersicht 1. Einleitung und Anlieferungstermine S. 1 2. Anzeigen 2.1. Bildanzeigen statisch

Mehr