Design und technische Herausforderungen für mobile Website-Inhalte - Dummies

Die Frage der mobilen Zugänglichkeit taucht in jedem Bereich der Erstellung einer Website auf und beeinflusst Größe und Art der eingebetteten Bilder. das Farbschema, das Sie auf Ihre Website anwenden, und welche Art von Navigationsstruktur Sie auswählen.

Hier geht es nicht darum, all die verschiedenen Herausforderungen aufzuzeigen, die sich durch die Größe mobiler Geräte ergeben. Hier sind zwei mögliche Lösungen für die Bereitstellung von webfreundlichem Inhalt:

• Medienabfragen: Sie können den gleichen Inhalt in voller Größe und in mobilen Browsern präsentieren, diesen Inhalt jedoch mit verschiedenen CSS-Stylesheets unterschiedlich darstellen. Beispielsweise können Inhalte, die in drei Spalten in einem Vollbildmonitor dargestellt werden, in einer Spalte in einem (schmaleren) mobilen Ansichtsfenster (Bildschirm) dargestellt werden.

  Mehrere Medienabfragen können für eine Site konfiguriert werden. Sie werden durch die Größe des Ansichtsfensters eines Benutzers definiert. So könnten Sie beispielsweise ein Stylesheet erstellen, das Ihren Site-Inhalt in Tablets anzeigt, ein anderes, das die Site in einem Mobiltelefon im Querformat (horizontal) anzeigt, und ein weiteres für ein Mobiltelefon im Hochformat (vertikal).

  Es ist unwahrscheinlich, dass Sie zunächst mehr als zwei oder drei Versionen Ihrer Website erstellen. Die Anzahl der Stile, die Sie für eine einzelne Website definieren können, ist jedoch unbegrenzt.

• jQuery Mobile: Sie können eine komplett andere Website für mobile Benutzer erstellen. Bei der Option "jQuery Mobile" werden separate Inhalte für eine mobile Website erstellt, die nicht den Monitorbesuchern in voller Größe entsprechen.

Medienabfragen und jQuery Mobile sind in Reichweite. Keiner erfordert die Einstellung von Programmierern oder fortgeschrittene Kenntnisse des Webdesigns. Das heißt, wenn Sie sich dafür entscheiden, den Sprung zu wagen und eine mobile Version Ihrer Website zu erstellen (mithilfe von Medienabfragen oder jQuery Mobile), müssen Sie etwas Zeit und Energie in die Berechnung eines (oder beider) Ansätze investieren.

Hier geht es darum, das Bewusstsein dafür zu schärfen, wie sich der Größenunterschied zwischen einem Ansichtsfenster in voller Größe und einem Mobilgerät auf jeden Aspekt des Seitendesigns und der Technologie auswirkt, einschließlich dieser Probleme:

• Kleine Bildfenster: < Der unmittelbarste und offensichtlichste Unterschied zwischen Desktop- / Laptop-Browsing und mobilem Surfen besteht darin, dass mobile Ansichtsfenster (die Bildschirme) kleiner sind. Der Größenunterschied zwischen Full-Size-Medien und mobilen Geräten hat radikale Auswirkungen auf das Website-Design: Mobile Seiten vermeiden im Allgemeinen die Verwendung von Spalten.

  • Das Erstellen von Gebäudeabbildungen mit einer "Unterstruktur" in Spalten ist oft wesentlich, um Inhalte in Seiten voller Größe zugänglich und einladend zu gestalten. Links müssen auf Mobilgeräten oft größer sein, damit sie zugänglich sind.

  • Winzige Verknüpfungen sind für große Finger schwer zu klopfen, und daher werden häufig unterschiedliche Verknüpfungsmethoden (wie große, anklickbare Knöpfe anstelle von schmalen Linien des Typs) im mobilen Design verwendet. Bilder müssen in mobilen Geräten viel kleiner sein.

  • Beim Auswählen und Beschneiden von Versionen von Bildern, die auf einer mobilen Website erscheinen, gibt es eine qualitative Dimension. Designer sind oft gut bedient, um Fotos für ein mobiles Gerät zuzuschneiden. Zum Beispiel könnte ein Foto von einer Person von Kopf bis Fuß, das gut auf einem Vollbild-Monitor funktioniert, schöner sein, wenn es nur auf einen Kopfschuss für mobile Geräte beschnitten wird. Formulare sind auf Mobilgeräten unterschiedlich konfiguriert.

  • Einige Formulareingabefelder, die auf einem Laptop funktionieren (z. B. Optionsfelder und Kontrollkästchen), sind auf einem kleinen Touchscreen-Gerät schwer zu verwenden. Stattdessen lassen sich Schieberegler (Balken mit ziehbarem Schieberegler) und Drehschalter (mit Ja / Nein-Optionen) einfacher auf einem Mobilgerät ausfüllen. Beleuchtungs- und Farbprobleme:

    

• Mobile Geräte werden viel häufiger im Freien als Desktops oder sogar Laptops verwendet. Und die Beleuchtungsintensität auf Mobilgeräten ist geringer als bei größeren Bildschirmcomputern. Dies birgt besondere Herausforderungen bei der Erstellung von Websites, die für Mobilgeräte optimiert sind. Farbschemata, die gut funktionieren bei Vollbild-Monitoren - in relativ dunklen Innenräumen - können sich bei hellem Sonnenlicht als störend oder nutzlos auf einem Mobilgerät erweisen. Vermeiden Sie Farbschemata wie Graustufen (oder subtile Schattierungen einer beliebigen Farbe) auf Mobilgeräten.

  Download-Geschwindigkeiten:

• Sie haben die Werbung gehört: "Unsere 4G ist so schnell! "Blah, bla, bla. Hier ist das Skinny: Mobile Geräte, wenn sie nicht in einem Wi-Fi-Netzwerk laufen, laden Seiten viel langsamer als Desktops und Laptops, unabhängig davon, ob diese größeren Geräte an eine Internetverbindung angeschlossen oder über Wi-Fi verbunden sind. Und wie Sie bereits erraten haben, hat dies strategische Auswirkungen auf die Präsentation von Inhalten für mobile Besucher. Da mobile Seiten länger zum Laden benötigen, möchten Sie vermeiden, dass Benutzer von einer Seite zu einer anderen navigieren.

  Mobile Plug-ins (und deren Fehlen):

• Der wohl bekannteste Unterschied zwischen mobiler und Laptop- / Desktop-Anzeige ist, dass iPhones und iPads kein Flash-Video unterstützen. Ja, Flashvideodateien (FLV) werden weit verbreitet, um Videos online zu verbreiten, aber diese Dateien sind für mobile Mac-Geräte nicht geeignet. Diese Benutzer werden eine Nachricht wie die von Hulu hier sehen.