Mobile und responsives Design

Responsive mobile Website-Vorlagen

Responsive Templates sind in der Webdesign-Branche weit verbreitet, da nicht jedes Content-Management-System (CMS) eine separate mobile Template-Option bietet. Responsives Design bedeutet, dass das Template speziell so gestaltet ist, dass es sich an unterschiedliche Browserbreiten anpasst. Die Bearbeitung responsiver Templates kann für Nutzer jedoch schwierig sein, da jedes Element individuell angepasst werden muss.

Menüs können beispielsweise komprimiert oder außerhalb der Seite platziert und bei Bedarf eingeblendet werden. Responsive Websites laden auf Mobilgeräten tendenziell langsamer, da diese alle in der Desktop-Version verwendeten Stile und Designs herunterladen müssen, selbst wenn sie in der mobilen Version nicht benötigt werden. Manche Webdesigner konzentrieren sich zwar auf die Erstellung ansprechender Vorlagen, vernachlässigen dabei aber die Ladezeit.

Wenn Ihre Website auf Touristen ausgerichtet ist, befinden sich Ihre Kunden möglicherweise in Gebieten mit eingeschränkter Mobilfunkabdeckung und haben unter Umständen Schwierigkeiten, alle zusätzlichen JavaScript- und CSS-Bibliotheken herunterzuladen, die für die mobile Nutzung nicht erforderlich sind. Responsive Templates laden oft langsam, aber wir haben intensiv daran gearbeitet, unsere neuen responsiven Templates so schnell wie möglich zu gestalten. Sie werden etwa dreimal schneller gerendert als durchschnittliche WordPress-Themes. Unsere responsiven Websites lassen sich mit verschiedenen Farben, Schriftarten und Bildern individuell anpassen.

Spezielle mobile Website-Vorlagen

Eine spezielle mobile Website-Vorlage ist die bewährte Methode, mit der wir die Abwärtskompatibilität all unserer Desktop-Websites gewährleisten und Ihren Kunden ein optimales mobiles Nutzererlebnis bieten. Die mobile Vorlage verwendet dieselbe Navigationsstruktur und dieselben Inhalte wie Ihre Desktop-Website. Wir haben jedoch alle unnötigen Elemente entfernt, damit Ihre Kunden schnell die gewünschten Informationen finden. So können sie beispielsweise auf ihre Kontaktdaten zugreifen, eine Karte aufrufen oder Ihre Produkte ansehen und direkt auf dem kleinen Bildschirm einkaufen. Im Laufe der Zeit haben wir Banner und Logos hinzugefügt und die Farben automatisch an Ihre Desktop-Vorlage angepasst. Durch die Feinabstimmung des Designs Ihrer speziellen mobilen Vorlage profitieren Ihre Kunden von einem herausragenden Nutzererlebnis. schnellste Option für Kunden mit langsamen Mobilfunkverbindungen im ländlichen Raum.

Völlig separate mobile Websites

Eine komplett für Mobilgeräte optimierte Website mag zwar anfangs ein gutes mobiles Nutzererlebnis bieten, doch häufig vernachlässigt der Webmaster die Wartung (oder kann sie nicht durchführen), sodass die Informationen auf den verschiedenen Websites nicht mehr synchron sind. Wenn Sie einen Online-Shop betreiben, ist es unerlässlich, dass sowohl die mobile als auch die Desktop-Version auf demselben Warenkorbsystem basieren. Wir raten unseren Kunden von diesem Ansatz ab.

So konvertieren Sie Ihre bestehende Website in eine responsive Vorlage

Wir bieten Ihnen eine große Auswahl an responsiven Vorlagen. Unser Angebot wird ständig erweitert. Wenn Sie zu einer responsiven Vorlage wechseln, werden sowohl Ihre Desktop- als auch Ihre Mobilansicht automatisch aktualisiert.

1. Gehen Sie im CMS zum Reiter DESIGN.
2. Wählen Sie THEMA ÄNDERN
3. Sehen Sie sich alle Designs an und achten Sie auf die Schaltfläche „RESPONSIVE“ oder „MOBILE“. Mit dieser Schaltfläche können Sie das Design in der jeweiligen Ansicht in der Vorschau anzeigen. Nur Designs mit der Schaltfläche „RESPONSIVE“ sind responsive Vorlagen.
4. Wählen Sie ein Design aus, um fortzufahren.
5. Deaktivieren Sie die Kontrollkästchen für die Änderung von Banner, Logo, Hintergrund und Farben, wenn Sie Ihre bestehenden Markenelemente beibehalten möchten.
6. Aktivieren Sie das Kontrollkästchen, um Ihre alten Designeinstellungen zu sichern, falls etwas schiefgeht.
7. Designänderung speichern.
8. Manchmal wird Ihre Website nach einem Designwechsel in der Vorschau aufgrund von Browser-Cache-Einstellungen nicht korrekt angezeigt. In diesem Fall müssen Sie Ihre Website möglicherweise veröffentlichen und den Browser-Cache leeren, damit sie richtig dargestellt wird.
9. Manchmal müssen Sie Ihre Farbeinstellungen für Menüs usw. erneut anwenden, da einige Vorlagen die Standardfarben bereitstellen und andere nicht, oder Ihre Farbkombinationen sind möglicherweise nicht sofort mit der Vorlage kompatibel und müssen feinjustiert werden.

So wählen Sie eine neue, dedizierte mobile Vorlage aus

Wir haben 8 verschiedene, speziell für Mobilgeräte entwickelte Vorlagen, die jedoch alle die Farben und Schriftarten Ihres Desktop-Designs verwenden.

1. Gehen Sie im CMS zum Reiter DESIGN.
2. MOBILE VORLAGEN auswählen
3. Klicken Sie auf „Neues mobiles Design auswählen“.
4. Sehen Sie sich alle Designs an und achten Sie auf die Schaltfläche „RESPONSIVE“ oder „MOBILE“. Mit dieser Schaltfläche können Sie das Design in der jeweiligen Ansicht in der Vorschau anzeigen. Nur Designs mit der Schaltfläche „RESPONSIVE“ sind responsive Vorlagen.
5. Wählen Sie ein Design aus, um fortzufahren.
6. Deaktivieren Sie die Kontrollkästchen für die Änderung von Banner, Logo, Hintergrund und Farben, wenn Sie Ihre bestehenden Markenelemente beibehalten möchten.
7. Aktivieren Sie das Kontrollkästchen, um Ihre alten Designeinstellungen zu sichern, falls etwas schiefgeht.
8. Designänderung speichern.
9. Manchmal wird Ihre Website nach einem Designwechsel in der Vorschau aufgrund von Browser-Cache-Einstellungen nicht korrekt angezeigt. In diesem Fall müssen Sie Ihre Website möglicherweise veröffentlichen und den Browser-Cache leeren, damit sie richtig dargestellt wird.
10. Manchmal müssen Sie Ihre Farbeinstellungen für Menüs usw. erneut anwenden, da einige Vorlagen die Standardfarben bereitstellen und andere nicht, oder Ihre Farbkombinationen sind möglicherweise nicht sofort mit der Vorlage kompatibel und müssen feinjustiert werden.

CSS für mobile Responsive Design anpassen

Wenn Sie technisch versiert sind, könnten Sie Ihre bestehende Vorlage einfach in den CSS-Responsive-Modus umwandeln.

Suchen Sie in Ihrem Stylesheet nach Zeilen mit den größten Abmessungen von entweder 600px, 750px oder 900px:

#container { width: 750px; margin: 0 auto; }

Und ändern Sie sie so, dass sie so aussehen, dass sie 90 % der Bildschirmbreite bis maximal 960 ausfüllen.

#container { width: 90%; max-width: 960px; margin: 0 auto; }

Suchen Sie anschließend nach Spalten und ändern Sie deren Breite oder Ränder von festen Werten auf Prozentwerte. Wenden Sie diese Änderungen jedoch nur an, wenn die Bildschirmbreite dies zulässt. Bei einer Bildschirmbreite von weniger als 600 Pixeln werden die Spalten über die gesamte Browserbreite gestapelt.

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }