Was ist eine mobilfreundliche Webseite?

Wie der Name schon sagt, handelt es sich bei einer für Mobilgeräte optimierten Webseite um eine Webseite, die für Benutzer auf mobilen Geräten entworfen, entwickelt und optimiert wurde – und dies ist sowohl komplexer als auch wichtiger, als es scheint.
Benutzer möchten Inhalte, die leicht zu sehen sind. Wenn Ihr Text und Ihre Bilder zu klein sind, werden sie frustriert und verlassen die Seite – daher ist Inhalt in angemessener Größe entscheidend.
Leider ist das nicht so einfach zu erstellen – Smartphones und Tablets gibt es in vielen verschiedenen Größen und Auflösungen, so dass es kein Format gibt, das perfekt auf jedem Gerät angezeigt wird.
Um dies zu lösen, werden die heutigen Webseiten in ein Skalierungsformat umgewandelt, in dem sie schnell an das Gerät angepasst werden können, auf dem sie angezeigt werden.

Noch ein weiterer Design-Tipp: Der durchschnittliche Desktop ist ein horizontaler Bildschirm – sicher, wir können hoch und runter scrollen, aber er ist breit. Smartphones dagegen sind klein und schmal – daher ist die Breite Ihres Inhalts ein wichtiger Faktor. Unabhängig davon, ob Sie Dropdown-Menüs erstellen, Bilder hinzufügen oder ein Video wiedergeben, merken Sie sich die Richtung des Geräts und wie die Personen den Inhalt sehen.
Und wenn alles andere scheitert, ist es keine Schande, sich auf einige Profis zu verlassen, um Ihre Webseite so zu verbessern, dass sie für Mobilgeräte optimiert ist. Dies könnte Investitionen erfordern, aber mit der steigenden Anzahl an mobilen Nutzern und dem aktualisierten Algorithmus von Google könnte man sagen, dass dies eine kalkulierte und lohnende Investition ist.

Tipps zur Optimierung Ihrer Webseite für Handys

Verwenden Sie Medienabfragen
Ich weiß, das hört sich so an, als würden Sie mit einem Reporter oder so etwas sprechen – aber die “Medien” sind in diesem Fall die Inhalte, die Sie an einen Nutzer liefern.
Mit Medienabfragen können Sie ein Gerät nach seiner Größe fragen und den Browser dann so steuern, dass er die von Ihnen festgelegten CSS-Elemente anzeigt.
Medienabfragen sind ein wichtiger Bestandteil der meisten für Mobilgeräte optimierten Webseiten. Sie müssen jedoch sicherstellen, dass das System ordnungsgemäß für alle derzeit verwendeten Geräte konfiguriert ist – nicht nur für die zwei oder drei am häufigsten verwendeten Geräte. Stellen Sie sicher, dass Sie tatsächlich auf die Liste schauen oder eine Art fortlaufendes Abonnement haben, das die Informationen für Sie enthält.

Verwenden Sie Frameworks wie Bootstrap:
Es gibt viele Frameworks, die Sie kostenlos nutzen können, wie Foundation 3, Skeleton oder TukTuk. Eines der beliebtesten Frameworks ist Twitter Bootstrap.
Bootstrap ist ein Front-End-Framework für Ihre Webseite, mit dem Sie Ihre Webseite schnell und automatisch auf jedes Gerät skalieren können. Die Verwendung eines vorgefertigten Systems ist viel einfacher als der Versuch, jede mögliche Kombination selbst zu programmieren.
Sie müssen jedoch jedes Framework überprüfen, das Sie verwenden, um die vollständige Kompatibilität mit Ihrer vorhandenen Webseite und Ihren vorhandenen Zielen zu gewährleisten. Je mehr benutzerdefinierte Codierung und Funktionen Ihre Webseite hat, desto schwieriger kann es sein, sicherzustellen, dass alles auf einem mobilen Gerät ordnungsgemäß funktioniert. Haben Sie keine Angst, einen Experten hinzuzuziehen, wenn Sie wirklich Hilfe benötigen.

Deaktivieren Sie nicht die Übermittlungsschaltfläche:
Mobile Geräte sind populär, aber viele von ihnen sind immer noch nicht ganz zuverlässig – und dies kann für Benutzer, die auf einen “Senden” -Button klicken, Kopfschmerzen bereiten, wenn ihre Verbindung unterbrochen wird und der Button sich selbst deaktiviert wird, so dass sie es nicht nochmal versuchen können. Der Versuch, Wiederholungseingaben zu verhindern, ist ein bewundernswertes Ziel, aber die Realitäten der mobilen Verbindungen bedeuten, dass es nicht gut ist, sie auf diese Weise zu verhindern.

Verwenden Sie ein Responsive Thema auf CMS:
Responsive Themen – wie von Somothes – machen es einfacher, ein hochwertiges Display für Ihre Nutzer zu gewährleisten. Das ist etwas, was viele Unternehmen übersehen, wenn sie versuchen, mobilfreundlich zu werden, und das sollten sie auch nicht.
Natürlich können Sie im Idealfall das Beste aus beiden Welten herausholen – und reaktionsschnelle Designs eignen sich hervorragend für Gelegenheits-Webseiten, die nicht viel Anpassung benötigen, um erfolgreich zu sein.

Verwenden Sie Prozentsätze:
In der Vergangenheit dachten die meisten Leute über Bilder nur in Bezug auf Pixel – aber die sehr unterschiedlichen Auflösungen auf mobilen Geräten bedeuten, dass eine einzige Größe für Bilder eine grundsätzlich schlechte Idee ist. Es funktioniert einfach nicht – also machen Sie das nicht.
Konfigurieren Sie stattdessen Dinge wie Bilder so, dass sie eine bestimmte Breite auf der Seite haben – normalerweise 100%. Dies hilft, ein konsistentes Seherlebnis auf vielen verschiedenen Geräten zu gewährleisten und sicherzustellen, dass jedes Bild so viel Eindruck wie möglich macht.

Konzentrieren Sie sich auf einfache Designs:
Ein wichtiger Punkt, den mobile Benutzer von Desktop-Benutzern unterscheiden, ist ihre Präferenz für einfache Webseiten-Designs. Dies ist eine praktische Angelegenheit, genauso wie alles andere – Dinge, die groß und kompliziert sind, werden auf einem mobilen Gerät zwangsläufig langsam sein, und eine der Hauptanforderungen des Benutzers ist, die sofortige Lieferung der gewünschten Inhalte.
Simple Designs machen es außerdem einfach, die Aufmerksamkeit auf die Inhalte zu lenken, die sie sehen sollen – mobile Benutzer haben oft notorisch kurze Aufmerksamkeitsspannen, deshalb ist es wichtig, Dinge einfach zu halten, als in ein komplexes Thema zu investieren.

Stellen Sie sicher, dass Sie Javascript, CSS oder Bilddateien nicht blockiert haben:
Java ist kein makelloses System, und es ist weit verbreitet – und zusammen mit CSS- und Image-Dateien ist es eines der Hauptmerkmale einer respondieren, für Mobilgeräte optimierten Webseite.
Eines Ihrer Hauptziele ist es, Ihre Website universell kompatibel zu machen – sie sollte auf praktisch jedem Gerät angezeigt werden, auf dem die Leute sie gerne sehen würden, und das bedeutet in den meisten Fällen, dass sie Software und Kodierung verwenden, die allgemein akzeptiert werden. Je spezieller etwas ist, desto unwahrscheinlicher ist es, dass Ihre Webseite überall kompatibel ist.

Bildgröße optimieren:
Wenn Sie mit mobilen Geräten zu tun haben, ist das Ziel, Bilder zu erstellen, die die kleinstmögliche Dateigröße haben und trotzdem auf jedem Bildschirm, auf dem sie angezeigt werden, klar und deutlich zu sehen sind. Dies liegt daran, dass die Bandbreite mobiler Geräte im Vergleich zu Desktops viel kleiner ist und eine längere Ladezeit verursacht.

Verwenden Sie kein Flash:
Im Allgemeinen unterstützen mobile Geräte Flash nicht. Die Gründe dafür sind weniger wichtig als die Realität – wenn Ihre Webseite immer noch auf Flash basiert, wird sie auf keinem mobilen Gerät richtig angezeigt.
Flash ist eine veraltete Technologie und niemand liebt Flash, auch nicht auf dem Desktop. Selbst wenn Sie glauben, dass Sie Flash verwenden müssen, können Sie andere Technologien finden, die Flash ersetzen können.

Verwenden Sie Standardschriftarten:
Benutzerdefinierte, kreative Schriftarten können dazu beitragen, dass eine Webseite schön aussieht, aber mobile Benutzer möchten nicht ständig dazu aufgefordert werden, neue Schriftarten auf ihr Telefon herunterzuladen. Tatsächlich ist es wahrscheinlicher, dass sie solche Anfragen sofort ablehnen und stattdessen zu einer anderen Webseite navigieren.