Neue Verstärkung

10.02.2020

...durch Praktikaten und Werkstudenten bei Mediendesign

25 Jahre Mediendesign

20.12.2019

Unser Rückblick auf das Jubiläumsjahr

Nürnberg Digital Festival 2019

24.07.2019

Ein Rückblick (nicht nur) in Zahlen und Emotionen

Usability-Tests

26.03.2019

sicherer als der Blick in die Kristallkugel

Frischer Wind...

14.11.2018

... und neue Gesichter bei mediendesign

Telefon

+49 911 39 36 00

Anfahrt

mediendesign AG 
Äußere Sulzbacher Straße 116 
90491 Nürnberg

Route

Rückruf beantragen

Aside-Rückruf

Aside-Rückruffunktion

Anfrage senden

Aside-Kontakt

Aside-Kontakt

Eine professionelle und einzigartige Website ebnet Ihnen den Weg in die digitale Zukunft - mit uns kann Ihr Projekt durchstarten! Wir erstellen für Sie Webanwendungen, Portale, Online-Shops oder komplexe Websites.

Hochwertige und zielgruppenorientierte Websites, die mit professionellen Content Management Systemen realisiert werden, garantieren eine solide Basis für den Erfolg. Und dank Responsive Design ist Ihre Website auf allen Gerätetypen problemlos nutzbar. Suchmaschinenoptimierung und Online Werbung sorgen daneben für Traffic.

Pflege bestehender Websites

Sie besitzen bereits einen Internetauftritt? Kein Problem! Neben der Entwicklung neuer Websites, bieten wir Ihnen auch die kontinuierliche Verbesserung und Erweiterung Ihrer bereits bestehenden Website an. Wir pflegen und optimieren Ihre Website für Sie.

OE-icon

Sprechen Sie mich an für ein individuelles Website-Angebot

Markus Stopfer

Online Marketer
UXQB Certified Professional for User Experience
(CPUX-F, UT)

Strategie, Google AdWords, SEO

Kontaktieren Sie mich

Content Management System (CMS)

Content-Management-Systeme kommen in der Regel beim Entwickeln von Websites zum Einsatz und dienen dabei der

  • Erstellung
  • Bearbeitung und
  • Organisation

von Website-Inhalten, dem sogenannten "Content". Je nachdem wie flexibel und leistungsfähig das jeweilige CMS ist, sind dessen Einsatzmöglichkeiten sehr vielfältig oder eher eingeschränkt.

Die Funktionsweise ist bei allen CMS vom Prinzip her gleich: die Trennung der Website-Inhalte, dem Content, vom Layout und damit von der dahinter liegenden Entwicklung. Diese erfolgt üblicherweise auf Grundlage von HTML-Templates und CSS-Stylings. Bei modernen Content-Management-Systemen wie Typo3 oder WordPress ist die Pflege über eine grafische Benutzeroberfläche möglich und in der Regel so unkompliziert, wie das Arbeiten mit einem Textverarbeitungsprogramm.

CMS: Backend und Frontend

Die grafische Benutzeroberfläche zur Verwaltung der Inhalte bezeichnet man im Allgemeinen als Backend. Das Backend kann mithilfe von Zugriffsrechten so konfiguriert werden, dass unterschiedliche Ansichten und somit verschiedene Funktionen für Entwickler, Administratoren und Redakture entstehen. Das Backend ist für Besucher der Website nicht sichtbar.

Die nach außen sichtbare Website wird als Frontend bezeichnet. Sie unterscheidet sich kaum von statisch entwickelten Internetseiten, die ohne CMS erstellt wurden.

CMS

ENTWICKLUNG

EXTENSIONS

ONLINE PORTAL

PFLEGE

RESPONSIVE

Die Vorteile eines CMS

Content Management Systeme haben viele Vorteile:

  • bestehende Inhalte können sehr einfach, schnell und flexibel verwaltet werden
  • keine Programmierkenntnisse notwendig
  • der Benutzer muss sich nicht um Design, Layout und Technik kümmern
  • durch Einsatz von Extensions und Plugins ist die Website funktional nahezu beliebig erweiterbar

Anwendungsfelder für CMS-Systeme

Bei den verschiedenen CMS-Systemen, stehen unterschiedliche Ziele im Mittelpunkt. Deshalb ist es wichtig, die Ziele und Einsatzbereiche Ihres gewünschten Internetauftritts zu ergründen und anhand dessen zu entscheiden, welches CMS-System für Ihr Projekt am geeignetsten ist. Dabei können auf folgende Anwendungsfelder geachtet werden:

  • Web Content Management - Systeme: (Typo3)
    sind besonders geeignet für Websites mit einer Vielzahl von unterschiedlichen und/oder komplexen Inhalten - die erste Wahl für Unternehmenswebsites
  • Blog Publishing / News - Systeme: (WordPress)
    sollten verwendet werden, wenn Blogging oder das Publizieren von News das Kernthema der Website ist, da der Aufbau dieser Systeme die dafür entsprechenden Anforderungen erfüllt
  • Social Publishing / Communities - Systeme: (Drupal)
    legen klaren Fokus auf den Bereich Online Communities und die dafür notwendigen Funktionen

Beispiel WordPress: Elektrobit

Schon seit mehreren Jahren betreuen wir die Website des Automobilzulieferer Elektrobit. Der Webauftritt basiert auf dem Content-Management-System WordPress und wird kontinuierlich durch individualisierte Extensions ergänzt und weiterentwickelt. So kann der Inhalt beispielsweise in verschiedenen Sprachen an den jeweiligen Markt angepasst werden.

Zur Website von Elektrobit

Unendliche Möglichkeiten - Websites mit TYPO3

Zur Entwicklung von Websites nutzen wir hauptsächlich das Content Management System Typo3. Es ist ein professionelles und freies CMS, also "Open Source", und zeichnet sich durch seine hohe Flexibilität und Erweiterbarkeit aus. Typo3 wird auf einem Webserver installiert und mit einem Webbrowser genutzt.

Darüber hinaus gliedert sich die Nutzung von Typo3 in folgende Bereiche:

  • Website-Designs mittels Templates erstellen
  • Konfigurationen mittels TypoScript vornehmen
  • Website-Inhalte einpflegen

Vorteilhaft dabei ist, dass Sie sich auch daran beteiligen können und mit einem entsprechenden Zugang Ihre eigenen Inhalte einpflegen können. Zudem bieten wir Workshops für die richtige Benutzung von Typo3 an, sodass nichts mehr zwischen Ihnen und Ihrer Wunsch-Website steht.

Typo3 - Basisfunktionen

Das Backend dient zur Pflege und Administration der Website. Hier stehen je nach Berechtigung bestimmte Funktionen zur Verfügung, mit denen die Website erstellt und eingerichtet werden kann. Die Seitenstruktur der Website wird über einen entsprechenden Seitenbaum angelegt und kann dann mit Inhalt gefüllt werden.

Inhaltselemente füllen die Website mit Leben. Auf einer Seite können beliebig viele Inhaltselemente eingefügt werden. Hierbei gibt es verschiedene Typen von Elementen, die dazu beitragen, die Website zu strukturieren. Über die bereits vorhandenen Inhaltselemente hinaus können auch eigene Elemente programmiert und genutzt werden. Damit ist Ihnen eine riesige Vielfalt an Gestaltungsmöglichkeiten gegeben. Mit der Vorschau-Funktion können Sie jederzeit überprüfen, wie die Seite momentan aussieht.

Seiteneigenschaften unterstützen die Suchmaschinenoptimierung der Website. Hier können Metadaten und Seitenbeschreibungen angegeben werden. Außerdem können Sprachen und Sichtbarkeiten für Suchmaschinen eingestellt werden. Aber auch für Ihre Seitenstrukturierung ist diese Funktion von Vorteil. Sie können manuell bestimmte Seiten ein- und ausblenden, entweder komplett oder nur das Menü Ihrer Website betreffend.

Der Rich Text Editor bietet die leichte Pflege und visuelle Anpassung von Texten, sowie die Erstellung von Verlinkungen. Sie können den Editor mit seinen handlichen Funktionsbuttons nutzen oder direkt Ihren HTML-Quellcode bearbeiten. Auch hier ist es möglich, eigene Formate und Funktionen zu programmieren, die dann problemlos im Editor genutzt werden können.

Der Formulargenerator Typo3 bietet die Möglichkeit ganz einfach eigene Formulare zu erstellen. Dabei werden beliebig viele Elemente mit verschiedenen Feldtypen, wie etwa Texte, Checkboxen, Buttons usw, angelegt und editiert. Zusätzlich kann festgelegt werden, ob ein Feld ein Pflichtfeld ist oder nicht.

Mit der Dateiliste hat man direkten Zugriff auf den eigenen Webspace. Dort können beliebige Dateien hochgeladen und in einer hierarischen Ordnerstruktur verwaltet werden. Für die Dateiliste benötigen Sie keinen ftp-Zugang. Zudem können bestimmte Rechte vergeben werden, die dem jeweiligen Redakteur vorgeben, welche Ordner er bearbeiten darf. Damit ein unnötiges Übelquirlen des Dateisystems verhindert wird, ist eine maximale Dateigröße vorgegeben. So ist garantiert, dass die gewünschten Dateien vor dem Hochladen auf Ihre Webtauglichkeit überprüft werden.

Beispiel: Nürnberg Digital Festival

Das Typo3 System der Festival Website wurde durch individualisierte und erweiterte Extensions ergänzt, z. B. für den Blog, die Nutzerverwaltung oder die Eventverwaltung. So ist sowohl die Pflege der Events durch Veranstalter, als auch deren Verwaltung durch das Nürnberg Digital Team im Typo3 Backend möglich.

Mehr über das Projekt

Erweiterungen in Typo3

Typo3 bietet eine Vielzahl an Erweiterungen, sogenannten Extensions, mit denen man verschiedenste Funktionen in eine Website integrieren kann. Im Folgenden sind einige Beispiele genannt, die Sie für Ihre Website einbauen können:

  • Nachrichtensystem
  • Mailformulare
  • Bildergalerien
  • Suchfunktion
  • Shop-Systeme

Extensions - nahezu unendliche Möglichkeiten

Extensions sind einer der Hauptvorteile von Typo3. Mit ihnen lässt sich Typo3 nahezu beliebig erweitern. Sie sorgen für eine höhere Usability und bessere Funktionalität der Website. Es gibt eine unglaubliche Anzahl an frei verfügbaren Extensions für verschiedenste Anwendungsbereiche. Auf Seiten wie GitHub oder Packagist können diese frei verfügbaren Erweiterungen problemlos heruntergeladen werden. Der gängigste Weg hierfür ist jedoch der Typo3-eigene Extension Manager. Mit ihm können Extensions ganz einfach installiert, aktiviert oder auch deaktiviert werden.

Selbst mit dem breiten Angebot an freien Extensions kann es vorkommen, dass es Anwendungsfälle gibt, für die noch keine passende Extension existiert. Doch auch das ist kein Problem: Sie benötigen eine Extension maßgeschneidert nach Wunsch? Bei uns ist alles möglich!

Beispiel: Akademie Faber-Castell

Für die Verwaltung der Studiengänge und Einzelseminare wurde eine eigene "Akademie"-Extension entwickelt, über die u.a. auch die Bereiche Dozenten, Kurse und Galerien verwaltet werden und die auch die automatische Generierung der zahlreichen Anmeldeformulare übernimmt.

Mehr über das Projekt

Responsive Design

Für Professionalität und Kundenzufriedenheit ist es zwingend notwendig, dass sich eine Website dem Endgerät anpasst, auf dem sie aufgerufen wird. Responsive Design ist ein gestalterisches und technisches Vorgehen, bei dem sichergestellt wird, dass Ihre Website genau darauf reagieren kann. Dabei wird der gleiche Inhalt Ihrer Website in leicht abgewandeltem Design für die jeweiligen Gerätegrößen zur Verfügung gestellt. Egal ob PC, Tablet oder Smartphone, wir sorgen dafür, dass Ihre Website-Inhalte stets optimal präsentiert werden.

Responsive Design - Media Query

Die Umsetzung eines responsiven Designs geschieht über HTML5 und CSS3. Dabei werden sogenannte Media Queries genutzt. Diese Queries können Eigenschaften, sogenannte Medienmerkmale, des Endgeräts abfragen und dementsprechend die benötigten, vorher festgelegten Anpassungen für die Website aufrufen. Solche Eigenschaften können zum Beispiel die Displaygröße, die Auflösung oder das Format sein. Damit sich das Responsive Design problemlos auf der Website verhält, muss eine strikte Trennung von Inhalt und Layout vorgenommen werden. Nur so kann das Layout optimal an die verschiedenen Gerätegrößen angepasst werden.

Das gängigste Medienmerkmal ist die Breite (width) des jeweiligen Anzeigebereichs. Hiermit wird festgelegt, ab welcher Pixel-Breite des darstellbaren Bereichs bestimmte CSS-Stylings zum Einsatz kommen. Bei besonders kleinen Auflösungen ist es ratsam, auch bestimmte Funktionen der Website zu vereinfachen oder herauszunehmen, um die Nutzerfreundlichkeit der Seite beibehalten zu können.

Responsive Design - Flexbox

Ein effektives Hilfsmittel zur Gestaltung von flexiblen, responsiven Layouts ist die Flexbox. Hierbei nutzt man einen Container mit der Flexbox-Eigenschaft, um dessen darin enthaltene Kindelemente flexibel anordnen zu können. In ihrer Grundeinstellung sorgt die Flexbox dafür, dass ihre Elemente von links nach rechts angeordnet werden und sich umbrechen, sobald auf der Breite des Anzeigebereichs kein weiterer Platz mehr vorhanden ist. Auch hat jedes Element standardmäßig die Höhe der umschließenden Flexbox.

Mit einer Fülle an vorhandenen Eigenschaften, ist es nicht nur möglich...

  • die Ausrichtung der Hauptachse, auf der die Elemente angeordnet werden, zu ändern,
  • sondern auch die Elemente untereinander neu anzuordnen,
  • individuell unterschiedlich zu platzieren,
  • deren Größe unabhängig voneinander zu variieren
  • und den Ursprung der Achse zu ändern.

Get in Touch

Ihr Ansprechpartner