Responsive Webdesign

Mit Hilfe von TYPO3 CMS ist es auf einfachste Weise möglich, unter Einhaltung aller dynamischen Möglichkeiten, modernste Techniken wie das Twitter Bootstrap Framework inkl. voller Responsive Funktionalität, die Ausgabe aller Bilder in dem zur jeweiligen Bildschirmgröße passenden Format, uvm. optimal umzusetzen.
   
  

Responsive Webdesign

HTML, CSS & Javascript Framework

Mittels der tief in TYPO3 CMS verankerten Twitter Bootstrap Extension sind bereits zahlreiche, immer wiederkehrende HTML Elemente wie z.B. Überschriften, Button-Designs, Formulare, Thumbnails, Font-Grafiken uvm. im System integriert und können ganz leicht als fertige Inhaltselemente ausgewählt und zugeteilt werden.

Zusätzlich werden folgende beliebte Javascript / CSS Funktionen bereits vorkonfiguriert als Inhaltselemente zur Auswahl angeboten: Carousel, Accordion, Text & Icon, Panel und List Group.

Adaptive & Responsive Spaltenlayout

Ebenfalls kann man jeweils vier bereits fertig konfiguriert Display-Größen (Big, Normal, Tablet, Smartphone) ansprechen und so auf einfachste Weise eine im Funktionsumfang extrem vielfältige Lösung für Responsive Webdesign realisieren.

Durch das auf 12 Spalten basierende Grundlayout ist es ein Leichtes, für die jeweilig aktuelle Ansicht einzelne Spalten umzupositionieren oder gänzlich auszublenden.

Automatische Bildberechnung inkl. Retina Auflösung

Um Bilder auch auf hochauflösenden Bildschirmen wie zum Beispiel jenen von Apple iPhone und Co. "scharf" anzeigen zu können, müssen im Web diese Bilder immer in doppelter Größe abgespeichert werden, was natürlich zu erheblich größeren Dateien und somit zu längeren Ladezeiten führt. Um dem entgegenzuwirken, bietet Ihnen TYPO3 CMS eine automatische Bildskalierung, die ein richtig skaliertes Bild für die jeweilige Bildschirmgröße ausgibt.

Sie laden im TYPO3 CMS Backend das Bild in Originalgröße hoch und TYPO3 CMS errechnet daraus vollautomatisch verschiedenste Versionen für die definierten Bildschirmgrößen. Aus einem einzigen hochgeladenen Bild werden so automatisch 8 unterschiedliche Bilder generiert (Desktop Big Retina, Desktop Big, Desktop Normal Retina, Desktop Normal, Tablet Retina, Tablet, Smartphone Retina, Smartphone).

Standard Größe auf Retina Display
Standard Größe auf Retina Display
Doppelte Größe auf Retina Display
Doppelte Größe auf Retina Display

„Mobile First“ und „Desktop First“

Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an (Mobile First) – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor (Desktop First)?

Bevor man eine responsive Seite entwickelt, muss die Entscheidung getroffen werden, nach welcher Strategie man vorgehen möchte.