Mobile und responsives Design

Responsive Mobile Website Templates

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.

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

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.

Dedicated Mobile Website Templates

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 for customers using slow rural mobile connections. 

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

How to Select A New Dedicated Mobile Template

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

1. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

CSS für mobile Responsive Design anpassen

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

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