Volltextsuche
Responsive Webdesign
Webdesign Veröffentlichungsdatum: 23. Januar 2014 Änderungsdatum: 21. Juli 2014 weblication responsive webdesign responsive-webdesign breite anpassen Weblication CMS BASE Projekte sind standardmäßig für Responsive Webdesign optimiert.
Responsive Toggler-Navigation anpassen
Platz angepasst werden. 1) Allgemeines 2) Erforderliche Komponenten 3) Zusammenspiel der Komponenten 4) Nachrüsten der Responsive-Navigation in älteren Projekten 5) Toggler-Navigation bei allen Bildschirmbreiten nutzen 6) Weitere Hinweise / Zu
BASE (Mobile First): Responsive Bilder
Projektcache zu löschen. Bei Multiprojekten alle Caches der Inhaltsprojekte. 2. Bilder bedingte Container bzw. über responsive Container Gibt es Probleme bei Bildern mit responsive Containern ist es sinnvoll die Bildgrößentabelle anzuschauen
Jedem Client sein Bild
erstellt Weblication die notwendigen Größen, um diese je nach Endgerät und Browser des Besuchers auszuliefern. Responsive auf Elementebene Die Auslieferung geschieht auf Basis der tatsächlichen Breite eines Bildes. Hierzu sind keine
Sidebar-Navigation bei mobiler Darstellung
mobiler Darstellung Veröffentlichungsdatum: 20. Oktober 2014 Änderungsdatum: 06. März 2018 navigation sidebar mobile responsive Als Alternative zur klassischen mobilen Aufklappnavigation können Sie über CSS-Only auch eine Sidebar-Navigation
wPicture
um responsive Bilder über das PICTURE-Element zu generieren Funktionen createPicture Erstellt ein Bild über ein PICTURE-Element
wPicture::createPicture
Erstellt ein Bild über ein PICTURE-Element
Weblication® CMS Version 9 - Start Betaphase
der neuen Funktoinen sind unter anderem: Neuer Datei-Explorer Datei-Explorer bedienen mit Smartphones , Tablets und PCs Responsive -optimierte Darstellung Touch -Bedienung Drag & Drop Bildverzeichnisse mit Bildansicht Eingebettete Vorschau auf
Spaltenbreiten im mehrspaltigen Inhaltscontainer über CSS-Only umsetzen
{ margin-left: 6px; margin-right: 7px} .elementContainerStandardColumns_var255025 .col3 > div { margin-left: 14px} /* Responsive Umsetzung über mediaquery-Angaben bei Bedarf selber definieren */ Beispiel 2: Spaltenvariante 20 / 20 / 20 / 20 / 20,
BASE Neuinstallation mit Übernahme der Inhalte
BASE in Version 2.x. Die wichtigsten überarbeiteten Bereiche sind nachfolgend genannt: Durchgehende Unterstützung von Responsive Webdesign im Basisprojekt und Weblics® Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard)
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
Das BASE (Mobile First) Projekt ist zur Bildbreitenberechnung komplett anders umgesetzt und setzt konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern (zum Artikel " BASE (Mobile
Weblics® 2.x in BASE 1.x nutzen
BASE in Version 2.x. Die wichtigsten überarbeiteten Bereiche sind nachfolgend genannt: Durchgehende Unterstützung von Responsive Webdesign im Basisprojekt und Weblics® Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard)
CSS-Only Referenz
. Mit CSS-Only erstellen Sie rein über CSS individuelle Layouts , individuell gestaltete Anwendungen, Logik sowie responsive Designs. Ihre Vorteile : Sie können beliebig individuell gestaltete Webseiten rein über CSS bauen, ohne Templates zu
Umfangreiches Bestellformular
wPathName Stellt Funktionen für die Verarbeitung von Dateipfaden zur Verfügung wPicture Klasse, um responsive Bilder über das PICTURE-Element zu generieren wProject Verwaltet Informationen eines Projektes wProjectCur Verwaltet
Bedingte Umbrüche im WYSIWYG-Feld markieren
unterschiedlich und können je nach Projektumsetzung zu ungewünschten Zeilenumbrüchen führen. Im Hinblick auf Responsive Webdesign ( RWD ) macht es gerade bei langen Wörtern Sinn, diese an einer Stelle zu umbrechen, an der getrennt werden
Nutzung von SSL-Zertifikaten für HTTPS-Aufruf
auf https auch bei Skripten, die ggf. direkt über das globale Projekt (z.B. per Ajax) aufgerufen werden (Beispiel: Responsive Toggler-Navigation)! Sofern innerhalb einer per HTTPS aufgerufenen Seite ein iFrame eingebunden ist, so muß auch die
Fullpage - Scrollverhalten von Sections mit langem Content
'') : 992; jQuery('.elementSection').addClass('fp-auto-height-responsive'); jQuery('#blockContentInner').fullpage({ sectionSelector: '.elementSection', /*Angabe der section*/ verticalCentered:
Fullpage - scrolldirection-Events aktivieren
'') : 992; jQuery('.elementSection').addClass('fp-auto-height-responsive'); jQuery('#blockContentInner').fullpage({ .... /*Event, das nach dem Laden bzw. nach dem Scrollen der fullpage
Weblication® CMS, BASE und Weblics®
(Layoutwizard) Optimierte Bildbreitenberechnung (CSS-Picture-Rendering) durchgehende Unterstützung von Responsive Webdesign Einsatz von CSS-Variablen Anpassung der Weblics® zu o.g. Punkten Diese Architekturoptimierung erfolgte
Bereich mit wechselbarem Bild umsetzen
variieren. Hier ist zudem eine Vielzahl an weiteren Varianten denkbar. Die aufgeführten Beispiele sind nicht auf Responsive Webdesign ausgelegt. Soll dies entsprechend unterstützt werden, passen Sie dies individuell an (z.B. max-width:100%
BASE 2.x und aktuelle Weblics® der Version 2 nutzen
viele Vorteile. Die wichtigsten überarbeiteten Bereiche sind nachfolgend genannt: Durchgehende Unterstützung von Responsive Webdesign im Basisprojekt und Weblics® Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard)
Mobile Performance durch neue Lazy Loading Funktionen
/* Breite, bis zu der Lazy-Loading genutzt wird */ ... } Da in der Mobile First BASE standardmäßig Picture-basierte Responsive Images eingesetzt werden, lässt sich der Lazy Loading Modus auf Breakpoint-Ebene aktivieren. Eine weitere Optimierung
Framework
Template auf Basis einer XHTML-Seite Void createXSLFOFromXHTML(String xslFoPath, Strig XHTMLStr) wPicture Klasse, um responsive Bilder über das PICTURE-Element zu generieren createPicture (5) Erstellt ein Bild über ein PICTURE-Element String