Kontakt
Bestehende Website Mobil machen durch Smartphones und Tablets

Bestehende Website Mobil Machen

Du möchtest deine bestehende Website mobil machen? Dann bist du hier richtig. Lese in dem Artikel, warum Responsive Webdesign ist und wie du durch eine moderne Website mehr Kunden gewinnst.

Ratgeber

Schritt für Schritt: Deine bestehende Website Mobil machen

Folge der Anleitung, um deine Website für alle Geräte zugänglich zu machen.

Was bedeutet es eine Website für mobile Geräte zu optimieren?

Mobile Geräte sind in 2019 die größte Quelle für Besucher im Internet. Bereits 2018 kamen über +50% aller Besucher von Smartphones. Deshalb ist es essenziell, dass deine Website für mobile Endgeräte optimiert ist.

Das heißt im Detail, dass deine Website sich an die Breite des Browsers anpasst. Ein Desktop Gerät hat einen deutlich größeren Bildschirm, als ein Handy. Du bist wahrscheinlich selber schon auf “non-responsive” Internetseiten gewesen. Funktionen sind defekt und man muss ständig in verschiedene Bereiche zoomen; die Nutzererfahrung ist eine Katastrophe.

Deshalb ist Responsive Webdesign die Lösung, um kleine Bildschirme im Internet zu bedienen.

Es gibt zwei Arten von Responsive Webdesign. 1. Das adaptive Layout. Hier gibt es wenige vordefinierte Größen der Website. Der Vorteil ist der geringere Entwicklungsaufwand. Nachteil ist fehlende Flexibilität und die Website wird selten wirklich passen. 2. Das flexible Layout. Hier passt sich die Website dynamisch ohne feste Zwischengrößen an die Breite des Browserfensters an. Der Entwicklungsaufwand ist geringfügig größer, ermöglicht aber eine perfekte Nutzererfahrung. Die so zufriedenen Kunden bieten eine gute Grundlage, um über deine Website in Kunden konvertiert zu werden.

Analyse: Deine bestehende Website Mobil machen

Wenn du bereits eine bestehende Website hast, ohne Responsive Webdesign, ist es kein Problem deine bestehende Website Mobil zu machen. Der erste und wichtigste Schritt ist, deine Besucherquellen und Website zu analysieren. Auf dieser Grundlage kann die Optimierung vorgenommen werden.

Fang am besten mit deinen Besuchern an. Rufe dazu dein Webtracking auf. In der Regel ist das Google Analytics. Wechsle dort in den Reiter “Zielgruppe” > “Mobil” > “Übersicht”. Dort findest du eine praktische Übersicht, wie viele deiner Besucher über welche Geräte kommen. Standardmäßig ist die Übersicht auf “desktop”, “mobile” und “tablet” gefiltert. Um dir einen tieferen Überblick zu verschaffen, wechsle in “Zielgruppe” > “Mobil” > “Geräte”. Hier siehst du die genauen Geräte deiner Nutzer und kannst so die relevanten Bildschirmgrößen deiner Website erfahren.

1. Schritt Besucheranalyse: done. Analysiere als nächstes deine Website.

Als gutes Arbeitswerkzeug empfiehlt sich hier der Browser Google Chrome. Die Entwicklungswerkzeuge erlauben eine sehr gute Analyse und helfen dir, verschiedene Bildschirmgrößen zu simulieren. Um in den Simulator zu gelangen, folge den Schritten: Mache einen Rechtsklick auf die Website. Wähle “Untersuchen”. Es öffnet sich die Entwicklungswerkzeuge. Klicke nun in der oberen, linken Ecke auf das kleine Smartphone/Tablet Icon. Et voila: Du bist im Simulator. Keine Sorge, hier kannst du deine Website nicht kaputt machen, und du gelangst in die Standardansicht wieder, indem du einfach die Entwicklungswerkzeuge schließt.

Browse nun durch deine verschiedenen Seiten und schaue, wie sich deine Website verhält. Passt sich deine Website gut an, oder musst du zoomen / verschwinden Dinge. Du bekommst so ein gutes Gefühl, wie sich deine Website auf den mobilen Geräten verhält. Wechsle in dem oberen Reiter durch verschiedene Geräte und schaue dir die Resultate an.

Nun hast du eine erste Übersicht, was an deiner Website optimiert werden muss und wie viele Nutzer davon betroffen sind.

In der Praxis die Website auf Responsive Webdesign optimieren

Es gibt verschiedene Wege, wie du deine Website nun Responsive machst. Jeder davon erfordert, dass du oder ein Programmierer deine Website im Backend anpassen.

Um deine Website flexibel zu gestalten, musst du das CSS ändern. Das CSS (Cascading-Style-Sheet) bestimmt das Auftreten deiner Website. Außerdem wirst du wahrscheinlich Änderungen im HTML/PHP deiner Website vornehmen müssen. Das HTML (Hyper-Markup-Language) bestimmt die Inhalte auf deiner Website.

Im CSS werden Responsive Websites durch mehrere Technologien ermöglicht. Ein wichtiger Faktor, um zu entscheiden, welche Technologie die richtige für dich ist, sind deine Besucher. Denn nicht jede Technologie wird von jedem Browser unterstützt. In der Regel ersetzt man aber “widths” von Elementen von “px” in “%”. Sprich Layouts sind nicht mehr fix definiert, sondern passen sich jeweils an.

Beim HTML werden je nach CSS-Lösung weitere Elemente hinzugefügt. Diese helfen, eine spezifische Sortierung und Layouts zu ermöglichen.

Das Resultat der Bemühungen ist eine moderne Website, um deine bestehende Website Mobil zu machen. Wie du merkst, gibt es viele Faktoren, welche für die Entscheidungen und technische Ausführung relevant sind. Eine gute Anlaufstelle für weitere Informationen ist Wikipedia, oder schicke mir einfach eine Nachricht. Ich berate dich gerne bei der Umsetzung.