Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Websites für mobile Geräte

Eine Homepage für mobile Geräte mit NetObjects Fusion

(1/5) > >>

nettesekel:
Immer wieder tauchen Fragen, nach "handyfähigen" Websites auf und so habe ich mich mal für euch mit der Thematik auseinandergesetzt.
Wie ich finde, habe ich eine recht passable Lösung erstellt und bin nach Tests auf verschiedenen mobilen Geräten recht zufrieden mit dem Ergebnis, erhebe allerdings keinen Anspruch darauf, dass meine Lösung der Weisheit letzter Schluss ist. Dennoch erkläre ich euch gern, wie ich vorgegangen bin und worauf ich besonders geachtet habe.

Der eine oder andere von euch kennt sie vielleicht schon, unsere kleine Werbe- und Infopage für unser Forum. www.nof-forum.info
Zu dieser Website habe ich nun eine "handyfähige" Website-Version erstellt. Direkt aufrufen könnt ihr diese Version unter http://mobiledemo.nof-community.de/

Ich habe für die neue Website bei meinem Provider eine Subdomain angelegt und diese Domain auf das entsprechende Verzeichnis auf meinem Webserver umgeleitet, in welches ich später die Inhalte für meine Mobile-Page geladen habe.


Edit: Die Domain nof-forum.info ist von mir gekündigt und kann deshalb nicht mehr zur Demonstration der Weiterleitung genutzt werden. Die Mobile Version ist aber nach wie vor zum Anschauen online.

nettesekel:
Die Weiterentwicklung und Verbesserung mobiler Endgeräte, wie Handys und Smartphones läuft rasant schnell und so ist Stand heut eigentlich jedes gängige Gerät durchaus in der Lage, eine normale Website optisch und technisch ansehnlich darzustellen. Nicht zuletzt deshalb wird von einigen Usern die Notwendigkeit einer speziellen Website-Version für mobile Endgeräte in Frage gestellt.
Ich habe diese Zweifel bislang ein Stück weit geteilt, habe sie jedoch durch das intensive Befassen mit der Thematik  ein gutes Stück ausräumen können.

Meines Erachtens zeichnet sich die Tauglichkeit einer Website für mobile Endgeräte nicht ausschließlich dadurch aus, dass die Website vom Gerät dargestellt werden kann, sondern vielmehr dadurch, wie gut eine Website in ihrer Bedienbarkeit an die technischen Besonderheiten mobiler Endgeräte angepasst ist.

Als wichtige Gesichtspunkte sehe ich hier Dinge wie:

* genaue Planung dazu, welche Inhalte den Nutzern mobilder Endgeräte unbedingt verfügbar gemacht werden sollen
* reduzieren von Dateigrößen - beispielsweise bei Bildern - und die damit verbundene Reduktion von Ladezeiten und Datenvolumen
* Verzicht auf alle Inhalte, die Ladezeit und Datenvolumen unnötig erhöhen
* Verwendung großer einfacher Schriftarten für bessere Lesbar- und Bedienbarkeit
* Schaltflächen, Buttons, Logos so dimensionieren, dass sie auf dem Touchscreen mit dem Finger gut bedienbar sind
* ein einspaltiges Layout schafft Platz für die nötigen Inhalte

nettesekel:
Zunächst mal habe ich überlegt, welche Abmessungen meine Website haben soll. Erstelle ich eine Website maßgeschneidert auf das Display eines gängigen Smartphones, dann ist das zum einen sehr fummelig und zum Anderen würde ein Seitenbesucher mit einem IPad mini die Website auf seinem Display suchen müssen.
Bzw. würde die Qualität der Seite bei derartiger Vergrößerung extrem in Mitleidenschaft gezogen. Anders verhält es sich beim Verkleinern einer Website. Der Qualitätsverlust ist in diesem Falle vergleichsweise geringfügig.

Also habe ich mal nachgesehen, welche Auflösung das IPad mini hat, dessen Nutzer ich noch zur Zielgruppe für meine Mobile-Page zählen würde. Das IPad mini hat bei einer Displaygröße von 7,9 Zoll eine Auflösung von 1024 x 768px. Orientiert am kürzesten Maß habe ich mich für eine Seitenbreite von 750px für meine Website entschieden.

nettesekel:
Im nächsten Schritt habe ich getestet, welche Schriftarten und Schriftgrößen ich verwenden muss/sollte, damit diese auf einem kleinen Endgerät wie einem Smartphone mit einer Displaygröße von 3,5 Zoll ohne Zoom noch lesbar sind.

Bei meinen Tests habe ich festgestellt, dass man auf exotische Schriftarten besser verzichten sollte. Google Web Fonts z.B. wirken zum einen negativ auf die Ladezeit der Seite aus und zum anderen lässt die Darstellung und somit die Lesbarkeit dieser Schriften auf einem Handydisplay sehr zu wünschen übrig.
Gut steht man sich mit einer Schriftart wie Verdana, sie ist gängig und sehr gut lesbar.

Was die Schriftgröße angeht bin ich zu dem Schluss gekommen, dass diese für den Haupttext mindestens 30px betragen sollte (bezogen auf die Schriftart Verdana). Schriftgrößen für Schaltflächen und Überschriften sind ggf. entsprechend größer zu wählen.

nettesekel:
Bilder, Grafiken und Logos sollten im eigentlichen Projekt ruhig überdimensioniert erscheinen, denn es gilt zu bedenken, dass diese auch auf einem Handy noch gut erkennbar sein sollen und das möglichst ohne dass der Betrachter die Website näher heran zoomen muss. 
In der Arbeitsansicht sollte eure Website also in etwa den Charakter einer 1.Klasse Lese-Fibel haben und den Eindruck erwecken, dass man die Schaltflächen der Navigation mit Fausthandschuhen bedienen könnte.
 (chuckle) ;-)
Heißt, auch die Schaltflächengrafiken sollten eine entsprechende Größe haben. In meiner Beispielwebsite betragen die Maße für eine Schaltfläche 320 x 75px.
Man kann hier aber durchaus auch zu quadratischen Schaltflächen greifen. 

Nun kann man sicherlich sagen, größere Bilder erfordern auch größere Dateien, aber diesbezüglich sollte man das Dateiformat seiner Bilder und Grafiken bedacht auswählen - JPG-Dateien sind z.B. von der Dateigröße her in aller Regel deutlich kleiner als PNG-Dateien. Wo es die Qualität erfordert, dass das PNG-Format genutzt wird, gibt es entsprechende Tools, welche selbst die Dateigröße transparenter PNG-Dateien ohne sichtbaren Qulitätsverlust um ein Vielfaches reduzieren. http://tinypng.org/

Navigation

[0] Themen-Index

[#] Nächste Seite